Il existe de nombreux sites permettant de générer des comptes à rebours pour un blog.

Ceux-ci sont souvent en anglais et limités.

Mais si le javascript est activé pour votre blog vous pouvez également créer votre compte à rebours personnalisé.

Voici par exemple un compte à rebours jusqu'au nouvel an 2015 :

Le code est relativement simple :

1. calcul du temps restant avec les fontions de date ;
2. affichage à interval régulier grâce à la fonction setTimeout.

Pour vous faciliter la tâche et éviter d'écrire le code à la main, voici un Générateur de compte à rebours.

Paramétrez votre compteur (aucune connaissance en Javascript n'est requise), puis copiez-collez le code généré dans l'éditeur Code source d'un article ou d'un module.

Pour ajouter un compte à rebours dans un menu, ajoutez un module de type « Module simple ».

En javascript on peut rechercher un élément particulier avec les fonctions getElementById, getElementsByClassName, getElementsByTagName.

C'est vite compliqué ; on peut remplacer avantageusement ces fonctions par les fonctions $ et $$.

$ permet de rechercher un élément par son identifiant :

$('header') est équivalement à document.getElementById('header')

$$ permet des recherches complexes avec des sélecteurs ressemblant fortement à ceux du code CSS.
Cela renvoit un tableau d'éléménts : si on ne souhaite que le premier, on peut choisir l'élément d'indice [0].

$$('.module_menu_type_newsletter') recherche les éléments de classe module_menu_type_newsletter.

$$('.module_menu_type_newsletter .module_menu_contenu form input[name=subscribe]') recherche les éléments input dont le nom est subscribe, contenus dans un formulaire (form), dans un élément de classe module_menu_contenu, lui-même dans un élément de classe module_menu_type_newsletter : on trouve ainsi la zone de texte de saisie du module Newsletter.

$ et $$ ne sont pas des fonctions standard de Javascript mais sont dans Eklablog.
Profitons-en, cela simplifie les développements.

On voit parfois des messages en bleu, lorsqu'on suppprime un article par exemple :

Ces messages se ferment lorsqu'on clique dessus, ou automatiquement après quelques instants.

Pour en afficher un, il suffit d'appeler la fonction Javascript Design.addSplash.

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blogs, en passant par le formulaire de contact.

Cliquez sur ce bouton pour afficher un message :

Voici le code HTML de ce bouton, avec un appel Javascript sur clic :

<input onclick="Design.addSplash('Ce message va se fermer tout seul')" type="button" value="Afficher un message" />

Ces messages sont de classe splash, et donc pour modifier leur visuel on peut écrire du code CSS avec le sélecteur .splash.

Une fois un message créé, on peut trouver son identifiant avec la fonction Design.idSplashs.getLast().
On obtient ainsi l'identifiant du dernier message affiché, que l'on peut utiliser pour avoir l'élément HTML correspondant (qui sera d'identifiant « splash1 » par exemple).

On peut alors agir sur le message (son élément div), en modifiant par exemple son contenu pour afficher du code HTML (par défaut on ne peut afficher que du texte non formaté) :

// Fonction d'affichage d'un message temporaire
// html = code HTML du contenu
// timeout = délai en millisecondes
function mySplashArticle(html, timeout)
{
// Affiche le message vide
Design.addSplash("",timeout);
// Récupère l'élément HTML correspondant au message
var mysplashelt=$('splash'+Design.idSplashs.getLast());                  
// Passage en texte non gras (ces messages sont en gras par défaut)
mysplashelt.style.fontWeight="normal";
// Injecte le HTML dans le message (remplacer " par \")
mysplashelt.innerHTML=html;
}

Je vous invite si besoin à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

 Il suffit ensuite d'appeler cette fonction en passant en paramètre :

• le code HTML du contenu ;
• le délai d'affichage en millisecondes (2000ms = 2s par défaut);

Voici un exemple d'utilisation :

// HTML du contenu 
var html="<p style=\"text-align: center;\">" +
 "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
 "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>" +
 "<p>Elle va rester affichée trois secondes.</p>";
mySplashArticle(html,3000);

Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

Si le message doit s'afficher à l'ouverture du blog, attention à placer le code dans onJSFilesLoaded (cf. Mon premier code Javascript - afficher un message).

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

Attention : nous allons utiliser le système de fenêtres d'Eklablog : les codes ne fonctionnent donc que sur Eklablog, et seront éventuellement à adapter si Eklablog effectue des modifications.

Aujourd'hui on va afficher des fenêtres personnalisés.

Nous avons vu dans un article précédent (Mon premier code Javascript - afficher un message) qu'il était possible d'utiliser la fonction alert pour afficher un message simple.

Nous allons créer une fonction plus complète pour :

• afficher un titre dans la barre bleue en haut de la fenêtre ;
• pouvoir écrire du HTML dans le contenu (image, mis en forme...) ;
• modifier la taille de la fenêtre.

Cliquez sur le bouton ci-dessous pour afficher la fenêtre que l'on obtiendra :

Vous devriez voir ceci à l'écran :

On note la présence du titre et le contenu avec une image et du texte en gras.

Un bouton OK a été ajouté pour reproduire le comportement de la fenêtre simple affiché avec la fonction alert.

Ces fenêtres sont intéressantes car elle sont repositionnables et restent affichées lorsqu'on fait défiler la page.

Ce sont en fait les mêmes fenêtres qui sont utilisées par exemple pour les écrans d'édition d'articles, la plupart des fenêtres de configuration...

Voici le code minimal pour créer une fenêtre :

  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle("Test de fenêtre");  // Titre
    b.setContent("Bonjour à <strong>tous</strong> !");  // Contenu
    b.generate();  // Génère la fenêtre
  });

Pour pouvoir facilement créer une fenêtre, on peut créer une fonction réutilisable :

function EklaWindowDisplay(html,title,width,height)
{
  var b=null;
  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle((title==undefined) ? "" : title);  // Titre
    html=html.replace(new RegExp("\\[winid\\]",'ig'),b.id); // Remplace [windid] par l'id de fenêtre
    b.setContent(html);  // Contenu
    if (width!=undefined) {b.setWidth(width);}  // Largeur
    b.generate();  // Génère la fenêtre
    if (height!=undefined) {   // Si largeur définie
      b.setHeight(height)        // Modifie la largeur
      b.center();                // Centre la fenêtre
    }
  });
  return b; // Renvoit la fenêtre
}

Je vous invite à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

 Il suffit ensuite d'appeler cette fonction en passant en paramètre :

• le code HTML du contenu ;
• le titre ;
• la largeur en pixels ;
• la hauteur en pixels.

Les paramètres sont optionnels.
La hauteur s'adapte automatiquement au contenu.

Voici un exemple d'utilisation :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

Pour faciliter la lecture, vous pouvez écrire une chaîne de caractères sur plusieurs lignes en concaténant plusieurs chaînes (chacune délimitée par des guillemets) avec le signe +.

Il manque un bouton OK, même si on peut fermer la fenêtre avec la croix en haut à droite.

Pour ajouter un bouton, il faut l'intégrer dans le code HTML.
Ce bouton aura pour action de supprimer la fenêtre avec la fonction del.
Voici comment l'ajouter :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
html=html+"<div style=\"text-align:center\">" + 
  "<input type=\"button\" value=\"OK\" onclick=\"Windows.del([winid]);\" style=\"width:100px;\"/>" +
  "</div>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

J'ai ajouté une ligne avec un input de type « button ».

Dans l'événement onclick de ce bouton on exécute : Windows.del([winid]);

Dans la fonction EklaWindowDisplay, on peut voir un remplacement de [winid] par l'identifiant de la fenêtre en cours de génération.

En effet, avant l'appel à la fonction, on ne connaît pas l'identifiant de la fenêtre.
Il suffit de mettre [winid] dans le html et il sera remplacé par l'identifiant réél.

Voilà pour une première fenêtre.

D'autres articles viendront certainement pour détailler d'autres possibilités.

On peut trouver, sur divers blogs et sur le forum, de nombreuses fonctions écrites en javascript.

Ces fonctions peuvent être réutilisées dans plusieurs articles.
Inutile donc de les écrire en doublon dans chacun des articles, il vaut mieux les écrire dans un module dédié.

Ainsi, si on corrige une fonction utilisée par plusieurs articles, la correction sera appliquée automatiquement à tous les articles qui appellent cette fonction.

C'est beaucoup plus simple, et cela permet d'avoir toutes ses fonctions à un seul endroit pour les retrouver facilement.
On peut aussi envisager de créer plusieurs modules pour regrouper des fonctions.

Par exemple, j'ai une fonction pour lire le pseudo de l'utilisateur connecté :

// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}

Cliquez sur le bouton ci-dessous pour tester cette fonction qui affichera votre pseudo (si vous êtes connecté) dans une fenêtre de message :

Notez que cette fonction est écrite dans un module de mon blog que vous ne voyez pas : il est masqué.
Les articles, pages et modules peuvent partager des fonctions Javascript, dans la mesure où ils sont chargés.

Un module est toujours chargé, même s'il est masqué : on peut donc appeler une fonction d'un module depuis un article ou une page.

Pour masquer un module, il suffit d'ajouter ce code au CSS du blog, en modifiant XXXXXXXXX par l'identifiant de votre module :

/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}

Si vous ne savez pas où mettre ce code, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

Pour trouvez l'identifiant du module, utilisez les outils développeurs du navigateur, voir cet article : Structure d'un blog Eklablog.
Vous pouvez également voir l'identifiant en survolant les boutons d'édition ou de suppression du module ; l'identifiant est numérique : par exemple 139801640.

Vous pouvez éventuellement préférer écrire ce code dans le module (en édition « Code Source ») en ajoutant alors des balises style :

<style type="text/css"><!--
/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}
--></style>

Le module est alors invisible : vous pouvez le retrouver dans le menu « Apparence » => « Gérer les menus ».

Pour écrire du code Javascript, éditer le module et passez en édition « Code source ».

Note : passez en mode « Normal » ou « Expert » pour voir cette option de l'éditeur.

Il faut ensuite indiquer que l'on va écrire du code Javascript : cela se fait en plaçant le code dans un élément script :

<script>// <![CDATA[
// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}
// ]]>
</script>

Votre fonction EklaGetUser peut maintenant être utilisée n'importe où dans le blog.

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

Voici un petit code javascript qui affiche une fenêtre avec un message :

alert("Bonjour");

Cliquez sur « Exécuter ce code » en bas à droite du code ci-dessus pour l'exécuter.
Un petite fenêtre s'affiche :

Le code javascript peut-être écrit à deux endroits dans Eklablog :

• dans une page ou un article ;
• dans un module.

Si vous insérez du code dans une page ou un article, il sera exécuté lors de l'affichage de cette page ou cet article.

Si vous insérez du code dans un module, il sera exécuté à l'ouverture du blog lors du chargement des modules.

Si vous avez activé la navigation Full-Ajax dans les paramètres du blog, le code présent dans les modules ne s'exécutera pas à chaque changement de page, car les modules ne sont alors pas rechargés systématiquement.

Dans un nouvel article, ajoutons ce code dans l'éditeur source HTML :

<script>// <![CDATA[
alert ("Bonjour");
// ]]></script>

Sauvegarder et raffraîchir la page, la fenêtre qui s'affiche est (varie en fonction des navigateurs) :

Ce n'est pas tout à fait ce qu'on attend.
En fait la fenêtre vu précédemment (celle avec la barre de titre bleue) est une fenêtre créée par Eklablog en remplacement de la fenêtre standard.
Pour pouvoir l'utiliser, il faut attendre que le javascript du blog soit totalement chargé.

Voici le code à utiliser :

 <script>// <![CDATA[
// Début du code Javascript 
	if(typeof(onJSFilesLoaded) != "object")
	   onJSFilesLoaded = [];
	onJSFilesLoaded.push(function(){
	  // Début du code au chargement
	  alert ("Bonjour"); // Pour test
	  // Fin du code au chargement
	});
	// Début autres fonctions
	// Si vous avez d'autres fonctions...
	// Fin autres fonctions
// Fin du code Javascript
// ]]></script>

On s'assure ainsi que tout soit bien chargé avant d'exécuter notre code.

En général, on utilisera ce mécanisme qui permet d'attendre que toute la page soit chargée avant de faire des manipulations en javascript.