Bonjour.
Je me présente rapidement: je m'appelle RNB, journaliste scientifique et, entre autre chose, l'un des animateurs du site Framasoft.
Résumé rapide de la situation qui m'amène à écrire mon premier message sur un site que je fréquente depuis quelques mois déjà:
Mon site perso possède un style switcher (celui de Paul Sowden). J'ai implémenté une liste de liens qui permettent de passer d'un style à l'autre. En voici une version simplifiée, replacé dans la structure de la page web:
1. étant donné que le script style switcher ne fonctionne qu'avec javascript, je voulais éviter d'afficher cette liste de liens quand le javascript est désactivé. D'ou la solution qui a perduré pendant un moment: l'appel d'une fonction javascript "switcher()" dans le code HTML, fonction qui écrit la dite liste de liens (avec un document.write "classique"). Si le javascript est déscativé, la liste n'apparait donc pas.
2. Suivant les recommandations d'Olivier Patry et d'autres, qui préconisent de purger tant que faire ce peut le code (x)HTML de toute "intrusion" javascript non indispensable, j'ai pensé écrire cette liste de liens "directement" en passant par le DOM, sans avoir à placer le code ci-dessus dans les pages HTML. D'où la fonction suivante, appelée ensuite lors du chargement de la page:
La question est simple, et j'aimerai avoir l'avis des professionnels de la profession: me suis-je compliqué la vie outre mesure? Existe-t-il une méthode plus simple pour faire la même chose? En ré-utilisant par exemple 'document.write', mais sans avoir à appeler la fonction dans le code HTML (je n'ai rien trouvé qui ressemble à ca)?
Petite précision: je n'y connais absolument rien en javascript. Ce script, c'est du pur empirisme intuitif (essai/erreur). Donc, soyez indulgent si vous trouvez que la solution est abracadabrantesque ou si je viens de réinventer le fil à couper le beurre à base d'une tronçonneuse ...
Merci...
Modifié par RNB (22 Apr 2005 - 10:00)
Je me présente rapidement: je m'appelle RNB, journaliste scientifique et, entre autre chose, l'un des animateurs du site Framasoft.
Résumé rapide de la situation qui m'amène à écrire mon premier message sur un site que je fréquente depuis quelques mois déjà:
Mon site perso possède un style switcher (celui de Paul Sowden). J'ai implémenté une liste de liens qui permettent de passer d'un style à l'autre. En voici une version simplifiée, replacé dans la structure de la page web:
<div id="header">
<p id="access">...</p>
[b]<p id="switcher"><a href="#" title="sans style">Sans style</a> | <a href="#" title="printemps">Printemps</a> | <a href="#" title="ete">Eté</a> | <a href="#" title="automne">Automne</a> | <a href="#" title="hiver">Hiver</a> | <a href="#" title="nuit">Nuit</a></p>[/b]
<h1>...</h1>
(...)
</div>
1. étant donné que le script style switcher ne fonctionne qu'avec javascript, je voulais éviter d'afficher cette liste de liens quand le javascript est désactivé. D'ou la solution qui a perduré pendant un moment: l'appel d'une fonction javascript "switcher()" dans le code HTML, fonction qui écrit la dite liste de liens (avec un document.write "classique"). Si le javascript est déscativé, la liste n'apparait donc pas.
<div id="header">
<p id="access">...</p>
[b]<script type="text/javascript">//<![CDATA[<!--
switcher();
//-->//]]></script>[/b]
<h1>...</h1>
(...)
</div>
2. Suivant les recommandations d'Olivier Patry et d'autres, qui préconisent de purger tant que faire ce peut le code (x)HTML de toute "intrusion" javascript non indispensable, j'ai pensé écrire cette liste de liens "directement" en passant par le DOM, sans avoir à placer le code ci-dessus dans les pages HTML. D'où la fonction suivante, appelée ensuite lors du chargement de la page:
function switcher() {
[#green]// Tableau des styles[/#]
var style = new Array(5);
style[0] = "sans style";
style[1] = "printemps";
style[2] = "ete";
style[3] = "automne";
style[4] = "hiver";
style[5] = "nuit";
[#green]// Création des liens pour les styles[/#]
var style_link = new Array(5);
for (var k=0; k<6; k++) {
style_link[k] = document.createElement("a");
style_link[k].setAttribute("href", "#");
style_link[k].setAttribute("title", style[k]);
style_link[k].appendChild(document.createTextNode(style[k]));
}
[#green]// Créer l'élément p avec l'id 'switcher'[/#]
var para = document.createElement("p");
para.setAttribute("id","switcher");
[#green]// Construction du paragraphe[/#]
for (var j=0; j<6; j++) {
para.appendChild(style_link[j]);
if (j<5) { // pas de séparateur pour le dernier lien
para.appendChild(document.createTextNode(" | "));
}
}
[#green]// variable identifiant le conteneur header (parent)[/#]
var header = document.getElementById('header');
[#green]// identifier le titre h1 pour insérer le switcher[/#]
var titre = document.getElementById('access').nextSibling;
[#green]// Ecriture du switcher avant le titre dans le header[/#]
header.insertBefore(para, titre);
[#green]// écouter les évenements[/#]
switcher_listen();
}
La question est simple, et j'aimerai avoir l'avis des professionnels de la profession: me suis-je compliqué la vie outre mesure? Existe-t-il une méthode plus simple pour faire la même chose? En ré-utilisant par exemple 'document.write', mais sans avoir à appeler la fonction dans le code HTML (je n'ai rien trouvé qui ressemble à ca)?
Petite précision: je n'y connais absolument rien en javascript. Ce script, c'est du pur empirisme intuitif (essai/erreur). Donc, soyez indulgent si vous trouvez que la solution est abracadabrantesque ou si je viens de réinventer le fil à couper le beurre à base d'une tronçonneuse ...
Merci...
Modifié par RNB (22 Apr 2005 - 10:00)