Tutoriel - Barre flottante - Nouvelle méthode

 

 Nouvelle Barre Boutons 
 Nouvelle Barre Boutons 

 

Il y a déjà plusieurs années que j'utilise ma barre de navigation flottante, je trouve que c'est un outil qui crée un certain confort. Quelques blogueurs l'ont adoptée et l'utilisent toujours, ce qui prouve sont utilité.

 

Maintenant que nous avons un nouveau composeur, je nommerai "Tiny", dans mes articles, pour faire plus court. Etant donné que "Tiny" accepte l'utilisation du Javascript, je me lance dans une nouvelle méthode pour dynamiser les blogs. Déjà sur mon blog "DizTest" plusieurs articles sont disponibles, basés sur le modèle DizPerso mais ils sont très facilement adaptables au modèle style5 de "BRICABRAC" et aux autres modèles graphiques, ce qui sera le sujet de mes futurs articles.

 

Pour commencer  je me lance donc dans ce tutoriel de ma "Barre de navigation flottante" qui sera, je pense, plus facile à réaliser. Il est évident que les versions Silver et Gold sont favorisées, mais j'indiquerai une solution pour les versions gratuites en utilisant "Tiny" le nouveau composeur.
Le code qui va suivre sera à mettre dans la bordure gauche/droite et pour les versions gratuites dans un nouvel article, avec "Tiny" en mode HTML, dans un premier temps pour le tester.

 

 

La premier code à connaître, ce sont les balises HTML pour insérer du Javascript, ces balises encadreront tout le code.

 

<script type="text/javascript">// <![CDATA[
le code ici
// ]]></script>

 

Premiers pas dans le javascript, créer des variables, c'est la base, en utilisant un mot clé var.
Ces variables sont des noms qui représentent en un seul mot... beaucoup de choses que l'on appelle valeur. Je ne vais pas rentrer ici dans le détail, c'est uniquement pour vous aider à comprendre. Pour les plus courageux... je veux dire curieux et avides d'apprendre, il existe de nombreux sites dont le but est de vous apprendre les langages informatiques.

 

La nouvelle méthode est un peu lourde, mais elle a le gros avantage de donner accès à tous les secteurs d'une page déjà écrite pour la modifier dynamiquement, soit pour un cas très particulier sur une page unique de votre blog ou ce qui sera peut-être le cas avec la barre de navigation, pouvoir avoir une barre différente, spécifique pour une catégorie ou une série de pages.

 

Il faut être très méthodique, respecter un plan, commenter son code pour bien s'y retrouver par la suite et pouvoir rajouter, supprimer ou modifier ce code. Une fois que l'on a compris le système, c'est très simple.

 

 

Pour commencer création des variables...

 -la première contiendra comme valeur, le secteur où la barre sera accrochée, en l'occurrence la partie contenant toutes les parties du blog. Dans mon exemple la Partie "Cadre" du DizPerso car j'ai repris un essai fait dans mon blog Diztest, pour le modèle de BRICABRAC, il faudrait mettre "Conteneur".

 - la deuxième crée l'objet "barre", l'élément HTML div, qui contiendra les liens images.

<script type="text/javascript">// <![CDATA[
// Affectation variable du bloc qui recevra la barre de navigation
var blocCadre = document.getElementById("cadre");

// Création de l'éléments HTML le bloc "barre de navigation"
var barreNavigation = document.createElement("div");


 suite en attente...
// ]]></script>

 

En vert les commentaires qu'il ne faut pas négliger.

En bleu le nom des variables, inventer des noms bien explicites et penser par la suite de tenir compte des majuscules barrenavigation est différrent de barreNavigation

 

 

 

Il faut maintenant créer les variables pour tous les éléments HTML qui composeront la barre.
C'est à dire dans mon exemple, 6 boutons, donc 6 liens ("a")et 6 images ("img").

 

<script type="text/javascript">// <![CDATA[
// Affectation variable du bloc qui recevra la barre de navigation
var blocCadre = document.getElementById("cadre");

// Création de l'éléments HTML le bloc "barre de navigation"
var barreNavigation = document.createElement("div");

// Création des éléments HTML constituant la barre
var barreLien0 = document.createElement("a");
var barreLien1 = document.createElement("a");
var barreLien2 = document.createElement("a");
var barreLien3 = document.createElement("a");
var barreLien4 = document.createElement("a");
var barreLien5 = document.createElement("a");
var barreImg0 = document.createElement("img");
var barreImg1 = document.createElement("img");
var barreImg2 = document.createElement("img");
var barreImg3 = document.createElement("img");
var barreImg4 = document.createElement("img");
var barreImg5 = document.createElement("img");

 suite en attente...
// ]]></script>

 

Le nom de chaque variable toujours bien explicite et noter que je commence toujours la numérotation par zéro barrelien0 et barreImg0, pour le premier lien et la première image. Si par la suite on crée une fonction automatique, en Javascript le premier élément d'une collection est toujours, pour un compteur, le zéro.

 

 

Le code suivant sera ajouté au code précédent par la suite, pour être plus clair, je l'ai séparé. Maintenant que toutes les variables sont crées, je rajoute attribut et style à la variable barreNavigation qui représente la barre.
En l'occurrence un seul attribut, un identifiant ID qui permettra par la suite de pouvoir pointer sur ce bloc ou de créer des règles en CSS.
Dans cet exemple je vous montre comment insérer du style direct dans la balise DIV contenant la barre, ainsi je crée son style sans règle de CSS

 


// Attribut de la barre, identifiant pour une utilisation future
barreNavigation.setAttribute("id","barrenav");

// Style du bloc barre de navigation
// pas de fond à cette barre
barreNavigation.style.background = "transparent";
// positionnement fixed pour que la page défile en dessous
barreNavigation.style.position = "fixed";
// position par rapport au côté droit
barreNavigation.style.right = "5px";
// position par rapport au bas de page
barreNavigation.style.bottom = "5px";
// largeur de la barre à calculer selon la taille des images
barreNavigation.style.width = "240px";
// hauteur de la barre à calculer selon la hauteur des images
barreNavigation.style.height = "40px";
// affichage des blocs
barreNavigation.style.display = "block";
// place la barre dans un flux supérieur (calque)
barreNavigation.style.zIndex = "150";


Dans ces lignes, vous aurez à faire des modifications. Certaines valeurs sont tributaires des dimensions de vos images. Je vous conseille de choisir des images, pas trop grandes et si possible de la même dimension ça sera plus facile pour la suite. La hauteur de la barre sera au minimum de la hauteur de l'image la plus haute et la largeur sera la somme des 6 largeurs des images, plus les espaces entre elles.
Ceci pour une barre horizontale, mais il est possible en inversant les 2 dimensions, hauteur 240px et largeur 40px, de rendre cette barre verticale. Vous pouvez également positionner cette barre à gauche en bas ou en haut, et même sur le côté en vertical, de là son nom de barre flottante.

 

 

Pour chaque lien et image, il faut mettre les attributs et le style. Je le commente à chaque ligne de code, pour plus de facilité.

 


// Attribut et style du lien0
// adresse du lien pour revenir à l'accueil
barreLien0.href = "//diztest.blog4ever.com/blog/index-205392.html";
// message au survol de la souris
barreLien0.title="Retour page Accueil";
// pour ouvrir dans la même fenêtre
barreLien0.target="_self";
// pour éviter l'affichage d'une barre noire ou blanche
barreLien0.style.background = "transparent";

// Style et attribut de l'image img0
// faire flotter les images à côté les unes des autres
barreImg0.style.float = "left";
// marge extérieure entre les images et les bords de la barre
barreImg0.style.margin = "1px";
// largeur de l'image
barreImg0.setAttribute("width", "38");
// hauteur de l'image
barreImg0.setAttribute("height", "38");
// adresse de l'image
barreImg0.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bouton_accueilBB.gif");
// message en cas de problème d'affichage de l'image
barreImg0.setAttribute("alt", "Retour page Accueil");
// gestion des bordures encadrant l'image, ici pas de bordure
barreImg0.setAttribute("border", "0");

Pour déterminer la marge (margin) et centrer les images, si leurs dimensions sont différentes, il faut que la somme de la largeur ou de la hauteur + 2 fois la marge fasse la valeur de la hauteur de la barre.
Dans mon exemple ci-dessus : 38 + 1 + 1 = 40, mais vous verrez dans la suite du code pour certaines images, j'ai mis des marges différentes verticalement (première valeur) et horizontalement (seconde valeur). De cette façon j'ai 6 fois 40px de largeur soit 240px largeur de ma barre.

 

 

Après avoir écrit le code de tous les liens et images composant la barre, il faut affecter chaque image à chaque lien.
Ce qui va créer les images cliquables.

 


// Affectation image au lien
barreLien0.appendChild(barreImg0);
barreLien1.appendChild(barreImg1);
barreLien2.appendChild(barreImg2);
barreLien3.appendChild(barreImg3);
barreLien4.appendChild(barreImg4);
barreLien5.appendChild(barreImg5);

 

 

 

Puis il faut affecter chaque liens au bloc de la barre.

 


// Affectation des liens images
barreNavigation.appendChild(barreLien0);
barreNavigation.appendChild(barreLien1);
barreNavigation.appendChild(barreLien2);
barreNavigation.appendChild(barreLien3);
barreNavigation.appendChild(barreLien4);
barreNavigation.appendChild(barreLien5);

 

 

 

Pour terminer il faut affecter la barre au bloc où l'on veut placer la barre, mon exemple est une barre pour mon blog DizTest qui a été créé avec le modèle DizPerso. Peu de choses seront à modifier pour rendre cette barre exploitable avec d'autres modèles, j'indique en rouge dans le code complet, les valeurs à modifier.

 


// Affectation de la barre au blog
blocCadre.appendChild(barreNavigation);

 

 

 

Code complet, en rouge ce que vous devez personnaliser, l'ID "cadre" sera "conteneur" pour le modèle style5 de BRICABRAC, le nom de la variable fera le reste. A modifier également les IDs,#bas et #haut, qui seront #footer et #head.
Après bien sûr le lien sur votre page d'accueil et le lien contacter l'auteur, puis les adresses de vos images.

 

<script type="text/javascript">// <![CDATA[
// Affectation variable du bloc qui recevra la barre de navigation
var blocCadre = document.getElementById("cadre");

// Création de l'éléments HTML le bloc "barre de navigation"
var barreNavigation = document.createElement("div");

// Création des éléments HTML constituant la barre
var barreLien0 = document.createElement("a");
var barreLien1 = document.createElement("a");
var barreLien2 = document.createElement("a");
var barreLien3 = document.createElement("a");
var barreLien4 = document.createElement("a");
var barreLien5 = document.createElement("a");
var barreImg0 = document.createElement("img");
var barreImg1 = document.createElement("img");
var barreImg2 = document.createElement("img");
var barreImg3 = document.createElement("img");
var barreImg4 = document.createElement("img");
var barreImg5 = document.createElement("img");

// Attribut de la barre, identifiant pour une utilisation future
barreNavigation.setAttribute("id","barrenav");

// Style du bloc barre de navigation
// pas de fond à cette barre
barreNavigation.style.background = "transparent";
// positionnement fixed pour que la page défile en dessous
barreNavigation.style.position = "fixed";
// position par rapport au côté droit
barreNavigation.style.right = "5px";
// position par rapport au bas de page
barreNavigation.style.bottom = "5px";
// largeur de la barre à calculer selon la taille des images
barreNavigation.style.width = "240px";
// hauteur de la barre à calculer selon la hauteur des images
barreNavigation.style.height = "40px";
// affichage des blocs
barreNavigation.style.display = "block";
// place la barre dans un flux supérieur (calque)
barreNavigation.style.zIndex = "150";

// Attribut et style du lien0
// adresse du lien
barreLien0.href = "//diztest.blog4ever.com/blog/index-205392.html";
// message au survol de la souris
barreLien0.title="Retour page Accueil";
// pour ouvrir dans la même fenêtre
barreLien0.target="_self";
// pour éviter l'affichage d'une barre noire ou blanche
barreLien0.style.background = "transparent";

// Style et attribut de l'image img0
// faire flotter les images à côté les unes des autres
barreImg0.style.float = "left";
// marge extérieure entre les images et les bords de la barre
barreImg0.style.margin = "1px";
// largeur de l'image
barreImg0.setAttribute("width", "38");
// hauteur de l'image
barreImg0.setAttribute("height", "38");
// adresse de l'image
barreImg0.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bouton_accueilBB.gif");
// message en cas de problème d'affichage de l'image
barreImg0.setAttribute("alt", "Retour page Accueil");
// gestion des bordures encadrant l'image, ici pas de bordure
barreImg0.setAttribute("border", "0");

// Attribut et style du lien1
barreLien1.href = "javascript:history.back()";
barreLien1.title="Page precedente";
barreLien1.target="_self";
barreLien1.style.background = "transparent";

// Style et attribut du img1
barreImg1.style.float = "left";
barreImg1.style.margin = "5px 4.5px";
barreImg1.setAttribute("width", "31");
barreImg1.setAttribute("height", "30");
barreImg1.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/flech_avant.gif");
barreImg1.setAttribute("alt", "Page precedente");
barreImg1.setAttribute("border", "0");

// Attribut et style du lien2
barreLien2.href = "#bas";
barreLien2.title="Bas de page";
barreLien2.target="_self";
barreLien2.style.background = "transparent";

// Style et attribut du img2
barreImg2.style.float = "left";
barreImg2.style.margin = "4.5px 5px";
barreImg2.setAttribute("width", "30");
barreImg2.setAttribute("height", "31");
barreImg2.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/flech_bas.gif");
barreImg2.setAttribute("alt", "Bas de page");
barreImg2.setAttribute("border", "0");

// Attribut et style du lien3
barreLien3.href = "#haut";
barreLien3.title="Haut de page";
barreLien3.target="_self";
barreLien3.style.background = "transparent";

// Style et attribut du img3
barreImg3.style.float = "left";
barreImg3.style.margin = "5px 4.5px";
barreImg3.setAttribute("width", "30");
barreImg3.setAttribute("height", "31");
barreImg3.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/flech_haut.gif");
barreImg3.setAttribute("alt", "Haut de page");
barreImg3.setAttribute("border", "0");

// Attribut et style du lien4
barreLien4.href = "javascript:history.forward()";
barreLien4.title="Page suivante";
barreLien4.target="_self";
barreLien4.style.background = "transparent";

// Style et attribut du img4
barreImg4.style.float = "left";
barreImg4.style.margin = "4.5px 5px";
barreImg4.setAttribute("width", "31");
barreImg4.setAttribute("height", "30");
barreImg4.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/flech_suite.gif");
barreImg4.setAttribute("alt", "Page suivante");
barreImg4.setAttribute("border", "0");

// Attribut et style du lien5
barreLien5.href = "//diztest.blog4ever.com/blog/contacter-205392.html";
barreLien5.title="Envoyer un mail a PapyClic le webmaster de DizTest";
barreLien5.target="_self";
barreLien5.style.background = "transparent";

// Style et attribut du img5
barreImg5.style.float = "left";
barreImg5.style.margin = "5px";
barreImg5.setAttribute("width", "30");
barreImg5.setAttribute("height", "30");
barreImg5.setAttribute("src", "//sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bouton_mailBB.gif");
barreImg5.setAttribute("alt", "Envoyer un mail a PapyClic le webmaster de DizTest");
barreImg5.setAttribute("border", "0");

// Affectation image au lien
barreLien0.appendChild(barreImg0);
barreLien1.appendChild(barreImg1);
barreLien2.appendChild(barreImg2);
barreLien3.appendChild(barreImg3);
barreLien4.appendChild(barreImg4);
barreLien5.appendChild(barreImg5);

// Affectation des liens images
barreNavigation.appendChild(barreLien0);
barreNavigation.appendChild(barreLien1);
barreNavigation.appendChild(barreLien2);
barreNavigation.appendChild(barreLien3);
barreNavigation.appendChild(barreLien4);
barreNavigation.appendChild(barreLien5);

// Affectation de la barre au blog
blocCadre.appendChild(barreNavigation);

// ]]></script>

 

 

 

Le code complet est à mettre dans la bordure gauche/droite, où vous modifierez ce qui est en rouge pour le personnaliser.

 

<script type="text/javascript">// <![CDATA[

// ]]></script>

 

Vous pouver également coller ce code, sans les balises ci-dessus, dans le bloc-notes, enregistrer comme fichier javascript, par exemple scriptnavigation.js, que vous héberg ez dans la boîte à fichiers ou chez l'hébergeur de votre choix. Ce fichier script externe, vous lierez à votre blog, en rentrant le code suivant, dans la bordure à la place du code.

 

<script src="//adresse du fichier/scriptnavigation.js" type="text/javascript"></script>

 

Pour les versions gratuites, vous pouvez faire la même chose, dans le composeur Tiny en mode HTML, comme vous n'avez pas accès aux bordures. La seule, mais très importante différence est, que le code est actif sur un seul article, il faut répéter l'opération sur chaque article.

 

Voilà j'espère avoir été assez explicite pour que vous puissiez créer votre barre personnelle.


A voir l'application de ce tutoriel sur ces blogs

 

 

 

 

 



21/01/2011
1 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 132 autres membres