Du libre et du sport - Tag - présentation

Mettre en avant certains commentaires avec jQuery

Osku — Thu, 27 Dec 2007 14:58:00 +0100

Avec jQuery il est possible de mettre en avant certains de vos commentateurs.
Pour les commentaires filtrés sur l'adresse web utilisée. On ajoute une classe aux éléments dt qui contient les infos du commentateur et au contenu du commentaire dd

$("div#comments dt a[@href*='dotclear']") .parents("dt") .next("dd") .addClass("dotclearComment");
$("div#comments dt a[@href*='dotclear']") .parents("dt") .addClass("dotclearComment");

Pour cet exemple, j'imagine qu'on utilise un thème avec la structure <dl>, <dt>, <dd>, <dt>, <dd> ...
Ensuite, il suffit d'ajouter une règle dans la feuille style :

dt.dotclearComment,dd.dotclearComment{color:green;background-color:black}

Il est certainement possible de plouguéniser la chose sans utiliser le framework jQuery ;-)

$("blog").addjQuery(function() {$("#blogextra").accordeon();});

Osku — Wed, 07 Nov 2007 10:47:00 +0100

Gni ?
Regardez sur le côté :-) J'ai ajouté un petit effet visuel pour l'affichage de la zone bandeau extra (#blogextra dans le squelette) : ça coulisse entre les widgets.

Et ce n'était vraiment pas compliqué à mettre en place vu qu'une documentation de qualité existe.

En jQuery, on met simplement en place le bazard avec :

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			$("#blogextra ul:visible").slideUp("slow");
			$(this).next().slideDown("slow");
			return false;
		});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});

Petites explications de code

au chargement de la page
caches moi (.hide) toutes les zones <ul> de la div #blogextra (#blogextra ul) sauf la première (:not(:first))
ajoutes moi une propriété "click" sur les titres <h2> de la div #blogextra
quand je clique sur un titre <h2>, caches moi avec un effet lent 'slideUp' (slideUp("slow")) la zone <ul> de la div #blogextra qui était visible (#blogextra ul:visible)
et aussi déroules moi lentement (.slideDown("slow")) la zone <ul> qui suit le titre <h2> cliqué.
le return false stoppe la propagation et annule l’action en cours. (plus d'infos)

Les trois dernières lignes nous permettent de changer l'aspect du curseur de la souris au survol des titres <h2> de la div #blogextra : tout devient intuitif ;-)

JavaScript : pre2ol.js - présentez lisiblement vos lignes de code.

Osku — Mon, 27 Aug 2007 10:33:00 +0200

Olivier a écrit - il y a un petit moment - une classe JavaScript qui permet de transformer tous les blocs préformattés en listes ordonnées.

Avant

<pre>
        bla 
        bla
</pre>

Après

<ol class="pre2ol">
        <li class="lizebra">bla</li>
        <li class=>bla</li>
 </ol>

Ainsi, les ascenseurs horizontaux qui apparaissent dans les blocs de code disparaissent et les lignes de codes sont complètement visibles au premier coup d'oeil :-).
J'ai juste complété avec une bidouille pour y intégrer une minuscule fonction de "zébrage": une classe CSS .lizebra est ajoutée aux éléments impairs de la liste ordonnée.

Note: Si vous ne voulez pas avoir une ligne en trop dans votre liste ordonnée, il faut supprimer le dernier retour à la ligne dans l'espace préformatté.

Guillaume me demandait comment j'obtenais la numérotation des lignes de code : c'est donc gràce à cette classe JavaScript.

Mise en oeuvre :

Insérer ce bout de code dans votre _head.html :

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/pre2ol.js"></script>

(J'imagine que comme moi vous avez déposé le fichier pre2ol.js disponible en annexe dans un sous-répertoire js de votre thème)

Quelques règles css qui vont bien :

Ce sont celles qui sont utilisées dans le thème Wsuper :

ol.pre2ol {
    line-height:110%;
    font-family:monospace;
    font-size:110%;
    padding-left : 34px;
    margin-left : 10px;
    list-style:decimal-leading-zero;
    border: 1px solid #416FB2;
    background:#fff;
    }
    
ol.pre2ol li {
    margin : 1px;
    border-left: 1px solid #fff;
    background-color:#DFECFF;
    color:#222;
    padding:3px;
    }

ol.pre2ol li.lizebra{
    background-color:#EFF6FF;
    }
    
ol.pre2ol span {
    color:#444;
    font-family:"Luxi Sans","liberation mono",monospace;;
}

News du 25/02/2008

Le script est compatible avec tous les effets lightbox, litebox et compagnie. (Merci Sacha).
Mes thèmes ne sont pas forcément à jour.