Style Swticher

Bonjour,

À propos du style switcher, connaissez-vous un moyen de l'appliquer directement sur une page, simplement en choisissant le thème dans le menu déroulant ?
Sur l'exemple Alsa Creations, les visiteurs doivent cliquer sur un bouton 'appliquer le style', et je souhaiterais éviter ceci.

merci
Modifié par deep (26 Jan 2007 - 21:40)

Hello,

Je déplace, comme prévu, dans le Salon spécifique aux Tutoriels et articles Alsacréations

Salut Deep,

Oui il existe une solution, il faut utiliser le javascript.

Voici le code javascript :

EDIT : Je vois que le javascript posent des problème de mise en forme sur le forum, je te passe un lien pour avoir directement le script.

Pour le code html, il faut bien sur lier la feuille js, mais aussi donner quelques attribut à tes liens de feuille de styles :

<link rel="stylesheet" type="text/css" href="normal.css" title="normal">
<link rel="alternate stylesheet" type="text/css" href="fonce.css" title="fonce">

Pour les liens qui font changer la feuille de style :

<p><a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a></p>

<p><a href="#" onclick="setActiveStyleSheet('fonce'); return false;">Fonc&eacute;</a></p>

Modifié par Super_baloo8 (26 Jan 2007 - 22:58)

@Super_baloo8 : Merci de citer la source de ce code, c'est-à-dire "A List Apart". Ne trouves-tu pas choquant de donner l'intégralité d'un code sans préciser d'où il vient ?

De plus, cette solution ne fonctionne que si JavaScript est disponible, il serait peut-être bon de le préciser. Et je ne vois pas en quoi tu réponds à la question.
Modifié par Julien Royer (26 Jan 2007 - 23:11)

@Julien Royer,

Désolé pour la source, je ne le savais même plus que ce code venais de là bas (c'est en relisant le post donner plus bas en lien que j'ai revue la source). De plus ce code n'est pas exactement car le code d'origine n'avais pas le debug pour IE. (changement de la dimension de la fenetre pour appliquer correcter le changement de feuille).

Et je crois que je réponds à ce que Deep demande, autrement dis, de ne pas avoir à valider le changement de style. Elle le voulais dans une liste, je lui donne une solution que l'on m'avais donner sur ce post.

Donc ne me balance pas n'importe quoi dessus !!!

Baloo, la solution de ALA ne me convient pas car onclick n'est pas conforme au validateur Xhtml. C'est pourquoi je suis obligé de passer par PHP. Je cherche la solution PHP d'Alsa, mais en appliquant un thème simplement en utilisant le menu déroulant, sans avoir a cliquer sur 'appliquer le style'.

Ah d'accord deep, enfin ya moyen de détourner le onclick surement.

En php tu ne pourras pas directement agir comme ca, il faut valider ton choix en envoyant le style choisi. Donc j'ai bien peur AMHA que ca ne soit impossible sans JS. (php coté serveur, js coté client et ce que tu veux se trouve coté client)

deep a écrit :
Baloo, la solution de ALA ne me convient pas car onclick n'est pas conforme au validateur Xhtml.

onclick est parfaitement valide en XHTML. (erreur fréquente, en revanche: l'écrire onClick, avec la majuscule qui l'invalide).

L. Denis, tu as à moitié raison, en xhtml strict, l'évènement onclick est invalide

Gentils, mais têtus, ce soir

DTD XHTML1.0 strict a écrit :
<!ENTITY % events
"onclick %Script; #IMPLIED
ondblclick %Script; #IMPLIED
onmousedown %Script; #IMPLIED
onmouseup %Script; #IMPLIED
onmouseover %Script; #IMPLIED
onmousemove %Script; #IMPLIED
onmouseout %Script; #IMPLIED
onkeypress %Script; #IMPLIED
onkeydown %Script; #IMPLIED
onkeyup %Script; #IMPLIED"
>

Et, au cas où vous auriez un doute:

DTD XHTML1.0 strict a écrit :

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

<!ELEMENT a %a.content;>
<!ATTLIST a
%attrs;
%focus;

Convaincus ?
Modifié par Laurent Denis (26 Jan 2007 - 23:37)

Super_baloo8 a écrit :
Donc ne me balance pas n'importe quoi dessus !!!

Portant les deux remarques que je t'ai faites me paraissent plutôt justifiées, même avec un peu de recul...

Super_baloo8 a écrit :
L. Denis, tu as à moitié raison, en xhtml strict, l'évènement onclick est invalide

Ah bon, et depuis quand ?

<edit>Grillé</edit>
Modifié par Julien Royer (26 Jan 2007 - 23:36)

Au temps pour moi. La prochaine fois j'irais vérifier avant de dire des bêtises.

@Julien Royer, quand je dis de ne pas me balancer n'importe quoi, je ne parle pas pour la citation de la source ou je suis tout à fait d'accord, mais sur la réponse à la question de départ de Deep. Je pense quand même avoir répondu à la question, non ?

Super_baloo8 a écrit :
Au temps pour moi. La prochaine fois j'irais vérifier avant de dire des bêtises.

ça arrive à tout le monde

cela dit, il faut prendre l'habitude de jeter un oeil sur la DTD : c'est encore le moyen le plus sûr et le plus rapide de vérifier.

Super_baloo8 a écrit :
@Julien Royer, quand je dis de ne pas me balancer n'importe quoi, je ne parle pas pour la citation de la source ou je suis tout à fait d'accord, mais sur la réponse à la question de départ de Deep. Je pense quand même avoir répondu à la question, non ?

La question de départ était a priori d'avoir une liste de sélection qui soumette automatiquement le formulaire quand elle est modifiée (ce qui n'est guère recommandé en général, d'ailleurs).

En plus, quel est l'avantage de la solution que tu proposes ? C'est une solution pure JavaScript, qui ne propose aucune alternative si cette fonctionnalité n'est pas disponible.

Laurent Denis a écrit :
cela dit, il faut prendre l'habitude de jeter un oeil sur la DTD : c'est encore le moyen le plus sûr et le plus rapide de vérifier.

Si l'on est flemmard et que l'on veut faire un test rapide, on peut aussi utiliser la fonctionnalité "Direct Input" du validateur.
Modifié par Julien Royer (26 Jan 2007 - 23:43)

"Julien Royer" a écrit :
En plus, quel est l'avantage de la solution que tu proposes ? C'est une solution pure JavaScript, qui ne propose aucune alternative si cette fonctionnalité n'est pas disponible.

Quel avantage ? Ne pas devoir valider le formulaire.

Quels inconvénients ? il faut avoir JS actif, aucune solution sans JS dans ce que j'ai proposé.

Ce que j'ai proposé n'est pas the solution, mais une des pistes/solutions à exploiter/améliorer.

"Julien Royer" a écrit :
Si l'on est flemmard et que l'on veut faire un test rapide, on peut aussi utiliser la fonctionnalité "Direct Input" du validateur.

Je ne savais même pas comment aller à la DTD, et je viens de comprendre (le lien est dans le doctype). Avant pour vérifier si un elèment étais valide (lors de soumission de code) je passais uniquement par un validateur.

Super_baloo8 a écrit :
Je ne savais même pas comment aller à la DTD, et je viens de comprendre (le lien est dans le doctype).

Il y a une version (commentée) plus agréable, et consultable en ligne, dans la spécification:
http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

<edit>(lien plus direct)</>
Modifié par Laurent Denis (26 Jan 2007 - 23:51)

Hé hop, ajouter à mes marques-pages, merci

Bonne soirée tout le monde

Super_baloo8 a écrit :
Quel avantage ? Ne pas devoir valider le formulaire.

Je ne comprends pas. Il faut bien cliquer sur le lien, non ? Tu veux dire que ça évite de recharger la page ? En tout cas, cette solution pourrait très bien être utilisée comme une surcouche avec la solution d'Alsacréations, et c'est là qu'elle deviendrait intéressante.

Laurent Denis a écrit :
Il y a une version (commentée) plus agréable, et consultable en ligne, dans la spécification:
http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

Merci !

Super_baloo8 a écrit :
Bonne soirée tout le monde

Bonne soirée à toi.
Modifié par Julien Royer (27 Jan 2007 - 00:02)

"Julien Royer" a écrit :
Je ne comprends pas. Il faut bien cliquer sur le lien, non ? Tu veux dire que ça évite de recharger la page ? En tout cas, cette solution pourrait très bien être utilisée comme une surcouche avec la solution d'Alsacréations, et c'est là qu'elle deviendrait intéressante.

Exact, la page ne se recharge pas, il change uniquement la feuille à appliquer (celle ci étant déjà dans le cache du navigateur). En effet ce serais interessant de coupler la solution php/js. A voir.

J'aurais bien essayer, mais pour l'instant je n'en ai pas l'utilité sur le site sur lequel je bosse. Mais d'ici quelques temps j'en aurais aussi besoin.

Allez je bookmark cette discussion aussi. Je vous tiendrais au courant en temps et en heures si je trouve quelques chose pour lier les deux.

J'y vais vraiment cette fois ci ++

EDIT: on arrive enfin à être sur la même longueur d'onde
Modifié par Super_baloo8 (27 Jan 2007 - 00:09)

Laurent Denis a écrit :


onclick est parfaitement valide en XHTML. (erreur fréquente, en revanche: l'écrire onClick, avec la majuscule qui l'invalide).

Merci beaucoup Laurent, c'est l'info qui me manquait.
Xhtml + Js me facilite la tâche par rapport a PHP.
Merci à tous pour vos réponses.