jQuery 1.4.2 à peine sortie déjà dans SPIP !

b_b — 2010-02-20T13:47:06Z

La version 1.4.2 de jQuery a été annoncée hier sur le blog officiel du projet. Cette nouvelle version est intégrée à la version beta de SPIP 2.1 dans la foulée.

Cette mise à jour de jQuery corrige quelques bugs et apporte des améliorations de performances (comme d'habitude chez jQuery, mais comment font-ils ?).

Nouvelles fonctionnalités

La liste complète des changements peut être trouvée sur la page de la version 1.4.2 du site de documentation de l'API.

Deux nouvelles fonctions voient le jour : delegate() et undelegate(). Ces fonctions viennent compléter les fonctions live() et die() de jQuery.

Le code suivant qui suit utliise .live() :

$("table").each(function(){
 $("td", this).live("hover", function(){
 $(this).toggleClass("hover");
 });
 });

Et voici son équivalent en utilisant delegate() :

$("table").delegate("td", "hover", function(){
 $(this).toggleClass("hover");
 });

Vous remarquerez la similitude des écritures et la simplification apportée par la deuxième.

Amélioration des performances

Comme toujours, l'équipe de développement a travaillé dur pour améliorer les performances de jQuery. D'après le tableau ci-dessous, la vitesse d'exécution a été multiplié par 2 par rapport à la version 1.4.1, et par 3 si on la compare avec la version 1.3.2.


Test de rapidité jQuery

Le travail effectué concerne essentiellement :

les fonctions bind() et unbind()
les fonctions empty(), remove() et html()
performances lors de l'insertion d'un seul élément DOM dans le document
performances lors de l'utilisation de $('body')

Vous pouvez consulter la liste détaillée de ces améliorations sur l'article d'annonce de jQuery 1.4.2.

JQuery 1.4 !

Olivier G. — 2010-01-14T20:20:59Z

Ok, ça manque cruellement d'activité sur ce site, mais le développement de jQuery ne nous attends pas…

JQuery 1.4 est sorti !

(nous allons essayer de rattraper le retard de traduction — en espérant que ça serve. et puis il faut aussi réorganiser les rubriques du site)

Du texte mouvant qui habille une image fixe

ARNO* — 2009-12-28T22:34:48Z

J'ai développé, pour Blog-Mode.info, un effet que je crois inédit en HTML : il s'agit de faire circuler le texte autour d'une image (en jargon typographique : « habiller l'image avec le texte »), cette image étant fixe dans la page, et le texte conservant ses possibilités de déplacement vertical (scroll).

Comme c'est assez difficile à décrire, autant aller voir à quoi cela ressemble sur cette page.

Tout se passe dans la partie en bas à droite de la page : on a un mannequin, qui se détache sur le fond vert, et le texte s'affiche en suivant les limites de l'image (et non, comme c'est habituellement le cas en HTML, suivant le rectangle du fichier image). Pour réaliser l'habillage, j'utilise le script pour SPIP que j'ai développé en mars 2006, qui fabrique automatiquement le code HTML à partir du fichier image. Ce script a, depuis, été transformé en plugin pour SPIP, et c'est cette version que j'utilise sur Blog-Mode (j'en ai profité, au passage, pour l'améliorer).

Mais, ici, ça n'est pas l'habillage irrégulier (développé en 2006) qui est original : c'est le fait que l'image est fixée en bas à droite de l'écran. Si on fait défiler le texte verticalement, l'image ne « bouge » pas à l'écran, et le texte se déplace en continuant à respecter la forme irrégulière de l'habillage.

Et ça, c'est à ma connaissance totalement inédit.

Commençons par créer le contenu et la structure de notre page.

<html>
<head>
</head>
<body>
<div id="contenu">
<div id="elastique"></div>
<div id="image"><img src="image.png" alt="" width="236" height="300" /></div>
<div id="pave_texte">
<h1>Le titre</h1>
<div class="texte">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, sapien vel feugiat hendrerit, ante felis mollis nunc, eget rutrum sapien arcu et turpis. Proin blandit sapien quis ante ullamcorper eget malesuada mi facilisis. Aenean risus velit, eleifend vitae lacinia nec, varius nec lorem. Aenean nisi urna, faucibus et lacinia a, dictum at erat. Maecenas laoreet eros nec felis tempor ac tempus felis lacinia. Vivamus aliquet semper ullamcorper. Donec ligula nisi, pellentesque non aliquet eget, malesuada nec sem. Sed ultricies arcu ut mauris eleifend pretium. Integer mattis, diam quis ultrices faucibus, lectus diam laoreet lectus, eu rutrum nunc lacus eu enim. Suspendisse potenti. Vestibulum hendrerit dolor a eros fermentum nec consectetur massa congue. Proin ornare rutrum arcu non tempor. Aliquam fermentum nulla et justo porttitor sit amet tristique dolor commodo. Fusce turpis sem, suscipit porttitor euismod eleifend, vehicula vestibulum nisl.</p>
<p>Cras dui erat, vulputate nec dictum vel, commodo id ante. Fusce bibendum varius fermentum. Maecenas lacinia egestas mi vel ultrices. In augue sapien, gravida quis vestibulum porttitor, congue et enim. Aenean condimentum tempus nisi, at vehicula magna luctus non. Nam ultricies urna in purus facilisis non venenatis ligula tincidunt. Quisque porta varius lectus, vitae vestibulum leo commodo nec. Morbi justo neque, ultrices in egestas ut, consectetur sed neque. Maecenas egestas malesuada gravida. Cras eleifend quam accumsan leo sodales viverra. Aliquam erat volutpat. Morbi nec sapien vel orci commodo volutpat nec ut ipsum.</p>
<p>Vivamus nec rutrum est. Curabitur lectus turpis, adipiscing et commodo a, blandit eu nisi. Nulla eget mi id mauris interdum accumsan vel et quam. Morbi sed neque felis. Duis sit amet dolor neque, nec tincidunt magna. Duis iaculis elementum lacus, nec elementum metus vehicula eu. Aenean sed tortor at erat blandit consectetur et vel lectus. Sed ligula nisl, posuere et pretium nec, facilisis ut nisl. Vivamus ultrices suscipit feugiat. Pellentesque eleifend varius lectus et iaculis. In gravida nisl id elit facilisis tempor. Sed eros dolor, fermentum quis aliquet id, ornare bibendum enim. Pellentesque fringilla pharetra sem, vitae interdum tellus varius quis. Sed tempor dignissim risus, vitae mattis quam aliquam in. Mauris facilisis magna a urna ultricies suscipit. Integer semper gravida nibh sed luctus. In hac habitasse platea dictumst. Nulla facilisi. Vivamus ac purus accumsan magna hendrerit ornare.</p>
<p>Praesent porta egestas orci, hendrerit consequat mi posuere non. Donec egestas posuere sapien, nec cursus elit sodales vel. Donec hendrerit mi non tellus luctus ullamcorper. Etiam eget magna et ante convallis pellentesque ut id augue. Curabitur tincidunt, velit a hendrerit aliquam, quam est fringilla purus, non scelerisque velit purus auctor est. Proin elit neque, venenatis quis iaculis et, cursus id dui. Quisque vehicula dignissim egestas. Nam viverra tincidunt eros porta sollicitudin. Cras porta mauris mollis ante bibendum id condimentum leo posuere. Maecenas lacinia pretium vehicula. Nam non metus tortor, quis dictum risus. Vivamus facilisis adipiscing arcu a commodo. Nulla consequat pulvinar risus, eu varius diam gravida sed. In hac habitasse platea dictumst. Etiam eget risus dolor, semper aliquam nisi. In hac habitasse platea dictumst. Aenean elementum hendrerit lacus eu luctus.</p>
<p>Suspendisse porttitor condimentum enim vitae aliquam. Fusce ultricies tristique sem, vel pellentesque mi consequat id. Nunc vulputate vehicula lorem, non gravida dui vulputate a. Nulla euismod ligula et sem luctus fermentum. Mauris sodales est id magna rhoncus molestie. Praesent non felis in ipsum dapibus feugiat. Nulla eget sem a urna dictum interdum. Proin eu metus sed nisl pellentesque eleifend at vel lectus. Mauris bibendum eros et nulla pretium lobortis. Aenean blandit lacus non nulla mollis mollis. Maecenas non ultricies ligula.</p>
</div>
</div>
</div>
</body>
</html>

Télécharger

La structure est très simple :
un div #contenu contenant la partie qui nous intéresse ici (on pourra ajouter, évidemment, un #header, un #footer par ailleurs) ;
un premer div #elastique qui, pour l'instant, ne sert à rien ;
un div #image qui contient l'image que nous allons chercher à afficher en bas à droite de notre document ;
un #pave_texte qui contient le texte du document (titre et texte libre).

Commençons par donner un style à ces différents éléments :

jQuery.info

jQuery 1.4.2 à peine sortie déjà dans SPIP !

Nouvelles fonctionnalités

Amélioration des performances

JQuery 1.4 !

Du texte mouvant qui habille une image fixe