Typeface avec font-weight: bold

En tant que développeur web sait, le problème avec les polices commerciales qui sont de la conception d'entreprise, mais pas que les polices web sont disponibles. Ce sont toujours populaires différentes formes de substituts de l'image. Les inconvénients sont évidents:

• Pas optimal Suchmaschinerkennung
• dépenses amendements haut et administratives
• Le texte n'est pas copiables
• Problème de l'accessibilité

Outre la solution serait photos sIFR être une méthode connue. Voici le texte d'une balise HTML spécifique est lu et remplacé par une animation Flash avec police intégrée. bonne en théorie, en pratique extrêmement difficile en raison d'un effort de configuration de haut.

Selon le même principe fonctionne de la JS-plugin Typeface . Seulement il est plus pratique à utiliser.
Le code suivant se lie à une police normale et une police plus tard décrit Bold:

  1
 2
 3

 "typeface-0.14.js" ><!-- mce : 0 --></ script > < script src = "mysrcFont.typeface.js" ><!-- mce : 1 --></ script > < script src = "mysrcFontBold.typeface.js" ><!-- mce : 2 --></ script > <script Src => "typeface-0.14.js" <! - MCE: 0 --></ script> <script src => "mysrcFont.typeface.js" <! - MCE: 1 --></ > <script script src => "mysrcFontBold.typeface.js" <! - MCE: --></ script> 2 

Pour le texte zuzuweißen la police appropriée, il suffit d'utiliser la déclaration CSS font-family.

  1
 2

  id="text" <div style="font-family: Font;"> mySrc
 ipsolum Lorum ...</ div> 

Le nom de l'attribut dans les polices utilisées syle peut être lu dans chacun des fichiers js.
Tout cela a deux inconvénients, comme décrit sur le site sont déjà bien. Problèmes de performance avec de plus grandes quantités de texte et CSS standard Hovereffekte ne fonctionne plus.
Ce sera converti en un fichier javascript dans la police TrueType ou OpenType il faut exister. Pas toujours dans ces écrits, la version gras est intégré. Afin d'obtenir une prise en main, vous pouvez exporter un outil d'édition de la police, seule la version Bold et de les convertir ainsi. Ajoute une JS maintenant ces deux fichiers et ayants droit la police hardi d'un élément HTML qui s'est passé en dehors d'une sortie d'erreur à la console Firebug, rien.
La solution est simple. Le convertisseur de police sur la police de caractères intégrée site fournit également des informations sur les polices pour lesquelles le sélecteur CSS info également nécessaires:

  1
 2
 3
 4
 5
 6
 7
 8

  Texte # (
   mySrc Font , Verdana , Arial ; font-family: police mySrc, Verdana, Arial;
 )

 # (BoldFont
   mySrc Boldfont , Verdana , Arial ; font-family: mySrc Boldfont, Verdana, Arial;
   bold ; font-weight: bold;
 ) 

Ainsi, la solution de contournement pour le plongement de la normale et audacieux polices est parfait.

Une alternative à sIFR javascript Cufón -
sIFR 3 R436 - problème de défilement dans Firefox 3, IE6 / 7

jMediaelement - jQuery HTML5 audio-vidéo Kit

Après un long moment que je viens à nouveau un peu pour vous.
À mon avis, le moment sans doute les 5 meilleurs HTML Media Player.
jMediaelement joue à la fois des fichiers audio et vidéo, et a partir de tous les navigateur HTML tout-5 besoin d'un soutien de secours à Flash et VLC.

Le joueur est sur le CSS et soutient pleinement tous les formats de fichiers importants tels que stylebar: Ogg (Theora / Vorbis), mp4/mov (H.264), Webm (VP8/vorbis), flv, des vidéos YouTube et plus.

La mise en œuvre du joueur est très facile et bien documentée .

Astuce pratique - bug dans jqTransform entrée dans Firefox> 3.5.2

Qui êtes-vous jqTransform des utilisations est peut-être la dernière mise à jour Firefox utilisateur id d'avoir le texte dans les entrées ne siège plus facilement dans le milieu.
S'applique à Firefox 3.5.2.

Le tout est remis à la nouveau moteur de rendu que Firefox a reçu.
Pour obtenir le problème sous un contrôle sans sideeffects pour obtenir votre navigateur, il est facile pour les autres qui suivent.

Votre jqtransform.css sur, dans la ligne 90 (. JqTransformInputInner entrée div () variable maintenant la hauteur de 31px sur votre auto.

Ça y est ....

fonction de charge jQuery - la manière simple Ajax (Partie 1)

La charge de la fonction peut être tout simplement des éléments HTML d'un fichier dans l'insert en cours. Cette fonction est principalement pour l'importation »de code HTML dans la pensée et ne correspond donc pas à l'Ajax demande dans l'exemple typique d'un script PHP est accessible, les données de la base de données lit et / ou cogner contre les autres processus serveur.

Voilà pour la première théorie, l'appel de fonction est la suivante:

  1

  ) . load ( '/someFile #mydiv' ) ; $ ('# SomeElement »). Load (' / somefile myDiv # '); 

Donc, à court aussi simple que cela. Dans l'élément avec id "someElement" divs, la totalité du contenu du myDiv "chargé id. La chose géniale est que myDiv "pas du tout dans le document actuel est, mais dans le fichier" unfichier ".
Le deuxième paramètre, la charge de la fonction également des données que ce qu'on appelle paires clé / valeur qu'il soit adopté.

  1

  ) . load ( 'someFile.php' , { 'param' : 'someValue' } ) ; $ ('# SomeElement »). Load (" unfichier.php', ('param': 'someValue')); 

Cela correspond cependant, aujourd'hui plus comme la demande normale Ajax. La clé une ou plusieurs paires de valeur sont passés au script PHP en tant que paramètre de poste. Bien sûr, on perd l'avantage de l'exemple précédent pour d'autres éléments HTML à partir d'un script simple pour obtenir DOM. Mais si vous demandez un seul directe sans traitement supplémentaire se traduirait par un élément de l'insert, qui est une option facile et confortable même.

La prochaine partie sera ensuite évolué vers d'autres variantes telles que se jQuery Ajax, getJSON, etc aller.

- Cliquez et gestionnaire de supprimer des éléments jQuery pour attribuer

Cliquez gestionnaire fonctions sont probablement l'un des plus utilisé lorsque vous travaillez avec jQuery. Rarement y arriver sans eux.
Je veux vous aujourd'hui pour vous présenter brièvement quelques points fois plus fine de le faire.

Cliquez sur un élément pour ajouter un gestionnaire
Un élément a mitzugeben gestionnaire de clic est probablement le plus facile.

  1
 2
 3

  ) . click ( function ( ) { $ ('# IdDesElements »). Cliquez sur (function () (
 "Click handler ausgelöst!" ) ; fenêtre d'alerte. ("Cliquez déclenché gestionnaire");
 )); 

Mehrer Cliquez sur Ajouter un élément handler
Un élément peut représenter plus qu'un simple gestionnaire de clic attribué.
L'ordre du jour est cliqué, une gestionnaire à son tour exportés vers.

 1 2 3 4 5 6 

  ) . click ( function ( ) { $ ('# IdDesElements »). Cliquez sur (function () (
 "Click handler 1!" ) ; fenêtre d'alerte. (Cliquez sur un gestionnaire! ");
 ));
 ) . click ( function ( ) { $ ('# IdDesElements »). Cliquez sur (function () (
 "Click handler 2" ) ; fenêtre d'alerte. («gestionnaire Cliquez deux");
 )); 

Cliquez sur supprimer gestionnaire
Cliquez de nouveau pour enlever assistance une délier assez simple.

  1

  ) . unbind ( 'click' ) ; $ ('# IdDesElements »). Unbind (clic); 

Cliquez sur Ajouter gestionnaire et également supprimer
Puisque nous avons le merveilleux avec jQuery donc la méthode de chaînage pour l'élimination, nous pouvons éviter un élément d'une affectés précédemment à lui tout le gestionnaire de clic et en même temps ajouter un nouveau.

  1
 2
 3

 ) . unbind ( 'click' ) . click ( function ( ) { window. alert ( "neuer Click handler ausgelöst!" ) ; } ) ; $ ('# IdDesElements »). Unbind (clic). Cliquez sur (function () (window. alert (" gestionnaire Cliquez déclenché !");)); nouvelles 

gestionnaire de clic et d'ancrage
Lorsque vous cliquez sur un lien vers une ancre appelle le gestionnaire, mais pas la volonté du navigateur suit le lien, après le gestionnaire est appelé fausse doit aussi tout simplement un retour;

  1
 2
 3
 4

  ) . click ( function ( ) { $ ('# IdDesElements »). Cliquez sur (function () (
 "Click handler" ) ; fenêtre d'alerte. («gestionnaire de clic");
     ; return false;
 )); 

jQuery HowTo: Traversée

Travesi appartient aux outils de base, si vous souhaitez faire des animations en utilisant jQuery avancé. Voici un petit guide pour trouver des articles spécifiques.

Qu'est-il arrivé ici? Base, cette structure HTML:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

  id="someParent" <div style="border: 1px pointillés #ccc"> Parent
 <div>
  Child1
 </ Div>
 class="move"> <div
  Enfant2
 </ Div>
 <div>
  Child3
 </ Div>
 not"> class="move <div
  Child4
 </ Div>
 </ Div>

 id="someWrapper"> <div
 id="testone" <a href="#"> Déplacer tout </ a>
 id="testtwo" <a href="#"> Déplacer <filtrée / a>
 </ Div> 

Le code JavaScript suivant effectue l'animation. Basé sur le lien avec les méthodes de la société mère "someWrapper" div sélectionnés, élément précédente sélectionne la précédente avec le someParent »et, enfin, id être avec les enfants tous les éléments à l'intérieur" someParent sélectionné.
L'id dans l'exemple sont des exemples seulement. Les éléments d'animation à être exclusivement sur la structure des DOM trouvé.

code jQuery pour "Déplacer tous":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# Testone"). (() (jQuery (this). parent (). prev (). enfants (). animent (('paddingLeft: "'20px»), 200), cliquez sur Retour fonction faux;) ); 

Maintenant, pour la version avancée. Ils sont basés sur la fonction jQuery, filtre et non.
code jQuery pour "Move filtrée":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# testtwo"). cliquez sur (function () (jQuery (this). parent (). prev (). enfants (). filtre (". move"). pas (". pas»). animent (( «paddingLeft: '20px»), 200;) return false;)); 

présentations jQuery pour une meilleure compréhension

Maintes et maintes fois, je trébuchant sur des présentations intéressantes sur jQuery dans le réseau.
Aujourd'hui je veux vous présenter quelques-uns de mes favoris.

lire la suite

Suggestion: largeur bouton SET jqTransform

Donc, bon et beau le plugin jqTransform est, il est IA, mais un petit peu de problèmes. En plus de l' interprétation différente de la largeur des zones de texte dans FF et IE, peuvent également définir la largeur des boutons standard ne possèdent pas l'ensemble des CSS.

Si vous voulez faire et ne trouve pas le cadre approprié, qui a été appelé pour un peu d'aide ici. Par conséquent, vous jqtransform.css l'air libre et dans le sélecteur de z.36 "span button.jqTransformButton" la largeur nouvelle propriété à attribuer.
Cela peut être par exemple comme suit:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13

 background : transparent url ( img/btn_left.gif ) no-repeat top left ; color : #333 ; padding : 10px 4px 0px 8px ; font-weight : normal ; font-size : 12px ; line-height : 13px ; display : block ; text-decoration : none ; height : 33px ; width : auto ; min-width : 100px ; } bouton. span jqTransformButton (background: url (img / btn_left.gif)-top répète pas laissée transparente; color: # 333; padding: 0px 10px 4px 8px; font-weight: normal; font-size: 12px; line-height : 13px; display: block; text-decoration: none; hauteur: 33px; width: auto; min-width: 100px;) 

Astuce pratique - jqTransform bug largeur

Qui jqTransform utilisé une fois déjà aurez sûrement constaté que Internet Explorer et le navigateur Firefox, les champs de texte dans une largeur différente de l'écran.
Cela est dû à l'attribut de taille que, même s'il n'est pas dans le champ de saisie ancrée dans IE est pris en compte.

Une solution de contournement pour cette petite est l'attribut de taille dans le code js pour enlever le calcul. Bien sûr, avec le résultat que cet attribut ne peut plus être utilisé à cette fin. Ce que je considère personnellement comme pas si mauvais que Best de la pratique est l'un des programmeur web pour définir le réglage des propriétés de surface sur le CSS.

Maintenant, pour la solution de contournement:

  1
 2
 3
 4
 5

 ( $input. attr ( 'size' ) ) { inputSize = $input. attr ( 'size' ) * 10 ; $input. css ( 'width' , inputSize ) ; } / / 107 Z. dans le jquery.transform.js if ($ input. Attr ("taille")) ($ input = inputSize. Attr («taille») * 10, $ input. Css ('width', inputSize) ;) 

Ce morceau de code que vous pouvez le supprimer tout simplement parce qu'elle conduit à un calcul erroné de la largeur des zones de texte. Je ne pouvais pas détecter d'éventuels effets secondaires indésirables. Si vous trouvez quelque chose, je vous serais reconnaissant pour les commentaires.

- Accessible-RIA - Widgets jQuery pour tout le monde

Ce matin, j'ai trouvé quelque chose de gentil et je tiens à mentionner brièvement.
jQuery - Accessible-RIA est une collection de plusieurs à déployer facilement des widgets, qui sont tous 100% WAI WCAG 2.0 et WAI ARIA conforme.
Surtout pour le développeur extrémité avant tout est intéressant. Est-il une page, mais entièrement accessible à tous.

Le tout est basé sur jQuery widgets et notamment les suivantes:

• L'album ( Demo )
• Formulaire ( Demo )
• Tabs ( démo )
• tableaux triables ( Demo )

Toutes les informations concernant le projet, ainsi que des démos, documentation, etc se trouvent dans le wiki de github .