Les frame sont à la mode ? Wikio ? Exalead ? jQuery est votre ami.

Pour ça, rien de plus simple; nous allons mixer différents scripts javascripts déjà existants : un script anti frames et un petit script Jquery permettant, aisément, d’attribuer un attribut précis à vos liens, en l’occurrence, un bon vieux _top des familles.

Et sans plus attendre voici…

Le script anti-frame « je veux bien être sympa mais faut pas abuser » :

<script type="text/javascript">
	if (top != self) {
	$(document).ready(function () {
   $("a").attr("target", "_top");
});
	}
	
</script>

A coller dans le head de vos pages.

Bon, d’accord, il faut utiliser la librairie JQuery, mais au moins, en 3 lignes, c’est plié.

Pourquoi pas un simple script tueur de Frame me direz-vous ? Tout simplement, parce que dans certains cas, elles ont leur utilité : j’utilise par exemple le service Blogasty et certains utilisateurs de netvibes visualisent les sites dans la frame netvibes.

Que fait le script :

  1. En gros, il détecte si la page se trouve affichée dans une frame if (top != self)
  2. Si une frame est détectée rajoute automatiquement à tous vos liens l’attribut target="_top" qui, en gros, replace la page ouverte via le lien en pleine page $("a").attr("target", "_top"); si on clique sur un lien.

Si votre site n’est pas affiché dans une frame, le script ne se déclenche pas, donc le target=_top n’est effectif que dans le cas d’affichage dans une frame.

Comme ça, les visiteurs de passage retournent d’où il sont venus, et ceux qui veulent visiter votre site « rentrent » réellement dedans.

Ceci dit, encore plus simple, si pour vous, le javascript c’est du chinois, et que vous vous fichez comme de votre premier amstrad de la validité de votre code html vous pouvez rajouter cette simple ligne dans le head de vos pages : <base target="_top">.

Ca fait la même chose, en plus court, mais en moins « puriste » (quoi que les puristes du javascript trouveront forcément à se plaindre de mon script).

Voila, maintenant vous pouvez faire la paix avec ces méchantes Frames.

Edit : voir aussi le billet Script élégant de contournement de frame sans jQuery si vous n’utilisez pas jQuery.

Evitez de cumuler les librairies Javascripts sur vos sites

C’est comme « croiser les effluves », c’est mal (si cette pseudo blague ne vous fait pas sourire, google est votre ami).

Mais pourquoi est-ce mal vous vous demandez ?

Pour de nombreuses raisons, mais je vais juste énoncer les plus évidentes.

Pourquoi utilisez vous plusieurs librairies sur votre site ? Je crois que la réponse est simple, parce que vous avez vu tel ou tel effet sur tel ou tel site et que vous voulez tous les utiliser sur le votre.

Sauf que le premier script fonctionne avec scriptaculous et l’autre avec jQuery… Pas grave, j’installe les deux librairies, les deux scripts et c’est parti comme en 40…

Oui mais…

Les deux librairies cumulées (même en version compressée de production) ajoutées aux deux scripts vont vite représenter un poids de plus de 100 kos, soit bien souvent, plus que votre page entière. Et pourquoi ? Arrondir les angles de vos blocs ? Utiliser thickbox que maintenant tout le monde connait ? Mijoter vos formulaires à la sauce AJAX ? Avez-vous vraiment besoin de tout ça ?

De plus, il est fréquent de rencontrer des problèmes de compatibilité de scripts d’une librairie quand une autre est installée, souvent vous allez perdre du temps à chercher l’origine du bug alors qu’un script qui fait à peu de choses près la même chose existe déjà en liaison avec votre première librairie, en cherchant un peu vous l’auriez trouvé, peut être plus rapidement que la réponse à votre bug.

Si un script lié à une librairie vous plait, prenez le temps de voir si un script proche, adaptable, n’existe pas déjà pour votre librairie déjà installée !

Vous vous éviterez, et potentiellement à vos visiteurs aussi, je le pense, de nombreux problèmes.

Un dernier point à soulever : avez-vous vraiment besoin d’une librairie complète alors que vous ne voulez gérer qu’un effet simple ?

Les librairies sont à la mode, on en parle beaucoup, mais avez-vous pensé à chercher si l’effet que vous voulez intégrer à votre site n’existe pas sous une forme indépendante ? Moins lourd ? Moins gourmand en ressources (et de préférence aussi bien programmé) ?

Bref, n’utilisez pas plusieurs librairies javascript en même temps sur votre site, c’est mal.

Faire défiler vos derniers commentaires sous Dotclear ou WordPress avec jQuery – Mise à jour

Suite à une demande d’un lecteur sur le mode de fonctionnement du script de défilements des commentaires je me fend d’un petit billet.

En fait, c’est assez simple, donc on va expliquer ça dans l’ordre.

1 Télécharger la bibliothèque jQuery

Vous la trouverez à cette adresse :

Comme c’est pour utiliser directement en production, préférez la version compressée pour une question de poids. Utilisez le clic droit >> Enregistrer la cible sous et gardez en mémoire l’endroit de votre disque dur ou vous l’avez enregistré.

2 Installer le plugin des derniers commentaires

Pour dotclear c’est le plugin Last Comment de Francois Simond + David Latapie à cette adresse : http://blog.lienweb.fr/plugins-dotclear/plugin-lastcomments-0.9.3.pkg.gz.

C’est l’adresse du fichier auto-installeur, utilisez votre procédure habituelle d’installation, vous trouverez toutes les informations à cette adresse : http://blog.lienweb.fr/2006/03/04/122-plugin-dotclear-lastcomments-derniers-commentaires-0-9-3.

Pour WordPress nous allons nous baser sur le plugin Get Recent Comments de Krischan Jodies que vous trouverez à cette adresse : http://wordpress.org/extend/plugins/get-recent-comments/installation/ (utilisez le bouton download Plugin).

Suivez bien les procédures d’installation des plugins que vous soyez sur Dotclear ou WordPress, vérifiez bien que le plugin est actif et que vos derniers commentaires apparaissent bien là ou vous le voulez, je ne vais pas vous expliquer comment installer un plugin Dotclear ou WordPress aujourd’hui, nous partons du principe que vous savez déjà le faire.

3 télécharger le script qui va nous servir de base pour gérer le défilement

J’utilisais à l’origine un script JQuery appellé Newsticker, mais devant des problèmes de stabilité j’ai décidé d’utiliser un autre script : InnerFade with JQuery

La page explique l’utilisation générale du script, le lien de téléchargement est en bas de page.

Il vous faudra décomposer l’archive et récupérer le fichier jquery.innerfade.js qui s’y trouve. L’archive contient en fait une copie de la page d’explication d’utilisation du script.

J’ai décidé d’utiliser ce script pour des rasions de stabilité et de facilité d’intégration.

Il lui manque la fonctionnalité de stopper l’animation au passage de la souris, mais j’y travaille.

Installer et configurer l’ensemble.

Vous allez copier les fichiers les fichiers jquery-latest.pack.js et jquery.innerfade.js dans le répertoire de votre thème/template dotclear ou WordPress.

Vous éditez le fichier contenant le « head » général de votre thème/template, sout dotclear c’est template.php sous wordpress, normalement, ça doit être header.php.

Ajoutez les lignes suivantes juste avant le </head> :

Pour Dotclear :

<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery.innerfade.js"></script>

Pour WordPress :

<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery.innerfade.js"></script>

Attention : plusieurs personnes ayant essayé ce Tutoriel ont eu des problème avec ces lignes donc je vous donne les versions exactes pour Dotclear 1.2.x et WordPress à partir de la 1.5.

Ensuite, une petite feinte, allez sur votre blog en ligne ou les plugins de derniers commentaires est en fonctionnement et vérifiez le code html généré par ces commentaires.

Sous dotclear vous devriez avoir (a peu de près) le code généré suivant :

<div id="lastcomments">
<h2>Derniers commentaires</h2>
<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

</div>

Sous wordpress :

<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

Pour dotclear :

Il va falloir modifier le code à inclure dans notre template.php de la façon suivante :

Voici le code proposé par défaut :

<div id="lastcomments">
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Il faut le modifier pour avoir ça :

<div>
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Vous pouvez même supprimer le <div></div> si vous n’en avez pas l’utilité.

Ensuite, c’est un peu plus compliqué, mais à peine.

Si vous avez installé le plugin via une archive d’installation automatique (en passant par le backoffice -> outils -> Gestionnaire des plugins), vous n’avez pas les fichiers gérant le plugin lastcomments sur votre pc, il vous faut donc les télécharger.

Utilisez votre logiciel FTP et téléchargez le dossier suivant dans votre répertoire dotclear en ligne : /ecrire/tools/lastcomments.

Une fois le dossier téléchargé sur votre ordinateur, éditez le fichier functions.php avec votre éditeur de texte préféré.

A la ligne 158 (normalement) modifiez le code suivant :

echo '<ul>';

de cette façon :

echo '<ul id="lastcom">';

Enregistrez et republiez le fichier dans le répertoire /ecrire/tools/lastcomments sur votre serveur.

Normalement, tout devrait fonctionner. ;)

Pour WordPress :

L’identifiant « lastcom » de la liste non ordonnée étant important nous allons éditer le code que nous avons ajouté à notre template wordpress pour l’y intégrer.

Vous devez avoir quelque chose comme ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul>
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Nous ajoutons l’identifiant et nous avons alors ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul id="lastcom">
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Il nous reste le plus dur pour la fin, vous vous en doutez.

Pour finir donc :

Insérez dans le head de votre page ou template la ligne suivante, juste avant le </head> :

<script type= »text/javascript »> $(document).ready( function(){
$(‘#lastcom’).innerfade({ speed: ‘slow’, timeout: 6000, type: ‘sequence’, containerheight: ‘150px’ });
} ); </script>

Et c’est tout. ;)

Pour le reste il vous faudra travailler sur la partie CSS pour que l’ensemble se marie avec le design de votre site.

Vous pouvez changer la vitesse de rotation (le timeout:) la hauteur etc.. reportez vous sur la page de présentation du script pour plus de réglages.

Et n’oubliez pas de faire de l’habillage de #lascom dans votre feuille de style.

Il ne vous reste plus qu’à publier l’ensemble sur votre serveur.

Une pincée de Javascript avec jQuery

Bon bon bon, j’étais tout préparé à vous écrire un long billet sur la bibliothèque/librairie javascript jQuery et des petites choses que j’ai utilisé pour l’AJblog, mais franchement br1o vient de me doubler et vu la qualité de l’article qu’il vient de mettre en ligne, ça ne sers à rien de faire un doublon.

Donc pour en savoir plus ça se passe ici :
Framework JQuery pour écrire du Javascript non-intrusif