Sakatruc

On souhaite différencier les commentaires pairs et impairs. Dans la mesure où rien ne le permet dans le code source de la page html du blog, on va utiliser un script javascript pour le faire.

Remarque : le code html libre ne s'exécute pas dans le popup de commentaires, ce script est donc réservé à ceux qui affichent les commentaires "en permalien", directement sous l'article.

Première solution, à utiliser si vous ne bénéficiez pas de l'offre Premium ou que vous ne souhaitez pas modifier votre feuille css.

On parcourt les conteneurs div enfants du conteneur d'identifiant comments.

Si le conteneur est de classe commentaire, on va tester si son numéro d'ordre est pair ou impair.

Dans le premier cas, on va modifier sa couleur de fond en javascript (backgroundColor).

Tout ce que vous avez à modifier dans ce script est la couleur, ici #cdcdcd. Vous pouvez utiliser les couleurs hexadécimales comme dans l'exemple, les couleurs rgb ou les couleurs css.

Il est également possible de modifier directement d'autres propriétés css en javascript. Vous en trouverez une liste sur cette page.

Deuxième solution, qui a ma préférence, mais qui est réservée à ceux qui ont accès à leur feuille css et des compétences pour en modifier les propriétés.

Le script de parcours est le même que le premier à l'exception de la ligne permettant ici d'ajouter une classe pair aux commentaires d'ordre pair.

Il suffira ensuite de créer cette classe dans la feuille de styles css et d'en définir les propriétés. Par exemple :

Je souhaite déterminer si le visiteur de la page actuelle se trouvait déjà sur mon blog à la page précédente pour, par exemple, lui afficher un message de bienvenue ou le diriger vers une page ou un article spécifique.

La propriété referrer de l'objet window.document contient l'url de la page par laquelle vous arrivez sur la page en cours.

Si vous êtes sur la page http://pseudo.cowblog.fr et que vous cliquez sur le lien "Profil" dans le menu, lorsque vous arrivez sur la page du profil, document.referrer contient http://pseudo.cowblog.fr

Il suffit donc de tester cette propriété avant d'afficher un message de bienvenue.

Si vous avez eu la curiosité d'afficher le code source de la page html de votre blog, vous aurez pu remarquer ces lignes au début :

qui définissent une variable javascript contenant le pseudo de votre blog. On va l'utiliser dans le script qui va suivre.

On commence par empêcher l'exécution de ce code javascript lorsqu'on se trouve sur la page "Code HTML libre" comme vu sur l'article précédent.

Ensuite, on va tester la position de la sous-chaine (indexOf) http://pseudo.cowblog.fr dans la chaine que contient document.referrer.

Si la sous-chaîne est trouvée, sa position sera à 0, le visiteur se trouvait déjà sur une page du blog avant d'arriver à la page en cours. Dans le cas contraire, elle sera à -1, le visiteur n'était pas sur le blog on lui affiche donc le message de bienvenue, quelle que soit la page du blog sur laquelle il se trouve.

Pour afficher une liste dans laquelle l'ordre des éléments (par ex. une liste d'achats) n'a pas d'importance, il est préférable d'utiliser une liste non-ordonnée.

On utilise les balises HTML <ul> (unordered list) et <li> (list item).

Résultat :

• farine
• oeufs
• eau
• biscuits
• huile

Pour définir l'apparence visuelle de cette liste on peut utiliser les sélecteurs de type balise (correspondant aux balises utilisées) : ul et li.

Les propriétés CSS propres aux listes sont (propriété en gras, liste des valeurs possibles, la valeur par défaut est soulignée) :

Par exemple :

Résultat :

• farine
• oeufs
• eau
• biscuits
• huile

Ce type de liste trouve son utilité dans les menus, qui sont des listes de liens.

Pour plus d'informations sur les listes, vous pouvez consulter la traduction française de la recommandation du W3C.

Suite de l'article « Plusieurs codes html ».

Bien que le code html libre soit global, c'est à dire qu'il n'est pas actuellement possible d'en saisir un différent pour chaque habillage, on peut tout à fait découper notre code html libre, de façon à le différencier en fonction des habillages.

Il suffit de créer des blocs de code html libre (un bloc par feuille de styles) et d'attribuer à ces blocs un identifiant ou une classe.

Imaginons trois habillages, donc trois "code html libre" et trois feuilles de styles css.

Dans le code html libre :

<div id="freecode1">Code html libre habillage 1</div>
<div id="freecode2">Code html libre habillage 2</div>
<div id="freecode3">Code html libre habillage 3</div>

Dans chaque feuille de styles css, il suffit d'empêcher l'affichage (display:none) des codes html des autres habillages et éventuellement de définir les propriétés du code html libre de la feuille en cours (dans l'exemple, on met un fond noir pour le bloc utilisé dans l'habillage) :

Feuille de l'habillage 1 :

#freecode1 { background-color:#000; }
#freecode2 { display:none; }
#freecode3 { display:none; }

Feuille de l'habillage 2 :

#freecode1 { display:none; }
#freecode2 { background-color:#000; }
#freecode3 { display:none; }

Feuille de l'habillage 3 :

#freecode1 { display:none; }
#freecode2 { display:none; }
#freecode3 { background-color:#000; }