11537 sujets

JavaScript, DOM et API Web HTML5

Attribut onload invalide w3c + liste non accessible

Bonjour,

J'ai développé récemment un site avec wordpress en utilisant la bibliothèque javascript scriptaculous. Le site est finalisé, et entièrement valide sauf... 1 erreur que je n'arrive désespérément pas à corriger, n'y connaissant pas grand chose en JS.

Pour activer un effet au chargement de la page, la bibliothèque scriptaculous recommande de le faire par le biais du chargement d'une image, en utilisant l'attribut "onload", comme ceci:

<img src="monimage.jpg" onload="mon effet js" alt="txt alt" />


Or le W3C ne reconnait visiblement pas cet attribut comme étant valide. Du coup, je me demande si il n'y a tout simplement pas un moyen simple pour exécuter l'effet au chargement global de la page, et donc délester l'image de cette balise invalide (en plus, cette solution me parait du bricolage depuis le départ)

Je pense que ça doit être faisable, et relativement simple mais je n'y connais rien en JS. Smiley confused

l'exemple se trouve ici, ligne 56

2eme problème, dans le même site, j'utilise du JS (toujours scriptaculous) pour afficher une liste. Or, si le JS est désactivé; la liste est en display:none (cachée par défaut), donc problème d'accessibilité.

Le style display-none est en ligne directement dans la page html, comme préconisé par scriptaculous, sinon ça ne fonctionne pas.

J'ai vu un sujet très ressemblant sur ce ce forum, mais il ne m'à pas apporté de solution.

voilà les solutions auxquelles je pense, mais je ne sais pas comment les mettre en œuvre en JS.
1: écrire le "display:none" en js, comme ça, pas de js, pas de display:none Smiley langue
2: appeler une feuille de style si le JS n'est pas activé, qui forcerai un "display:normal" (pas sûr de l'attribut là Smiley cligne ) en !important par exemple

Je pense que la 1ère soluce serait la plus pertinente, mais je ne sais pas la mettre en œuvre. Si quelqu'un a des idées, n'hésitez pas !! merci.
yosh a écrit :

Pour activer un effet au chargement de la page, la bibliothèque scriptaculous recommande de le faire par le biais du chargement d'une image, en utilisant l'attribut "onload", comme ceci:

<img src="monimage.jpg" onload="mon effet js" alt="txt alt" />



Je n'ai pas forcément tout compris mais assurément, si il faut déclancher un script au chargement de la page, ce n'est pas comme cela qu'il faut faire mais bien plutôt :
<body onload="toneffetjs()">


Maintenant... si c'est ce que la notice recommande de faire, il faut toujours faire comme la notice le recommande...
Modifié par aCOSwt (14 Jun 2008 - 16:34)
c'est pas parceque la notice me dit de me jeter d'un pont que je le ferais Smiley lol

dans body ça ça parait déjà plus logique, mais si l'attribu onload est invalide, le problème reste le même...

merci pour cette réponse en tout cas.
Fais le à partir de javascript, sans rien dans ton code HTML.
un ptit truc genre :
function superFonction() {
  document.getElementById('id-de-ton-image').onload = function() { alert('prout'); }
}

Avec un :
window.onload = function() {
  superFonction();
}

afin qu'elle se lance Smiley smile
(tout ça dans le <head> bien entendu)

Mais bon c'est un peu se compliquer la vie que de passer par le onload de l'image, alors dans ce cas :
window.onload = function() {
  alert('prout');
}


Et on en parle plus !
a écrit :
Mais bon c'est un peu se compliquer la vie que de passer par le onload de l'image, alors dans ce cas :

window.onload = function() {
  alert('prout');
}


wouhou ! Smiley eek

donc ok, ça c'est fait, à moi la validation W3C, la gloire et l'argent facile !! \o/

Je me disais bien que cette histoire de contournement au onload d'une image avait quelque chose de pas très catholique. Je me demande pourquoi ils préconisaient cette solution... Smiley ohwell

Ma 2ème question reste en suspend, si quelqu'un à une petite fonction magique pour ça aussi, je veux bien, parceque même si ils ne sont pas majoritaires, je trouve dommage que ceux qui n'ont pas le JS activé se privent des infos des images (c'est ballot, surtout que les infos c'est UN PEU le truc important Smiley murf )

En attendant un grand merci à PierreG !
Sans contester en quoi que ce soit la solution de PierreG... provide tools not policy...
Je ne trouve néanmoins pas pertinent le principe de planquer en JavaScript les incompatibilités W3C.
Ce d'autant que je le répête, onload n'est pas incompatible W3C.
Pour la seconde partie de ta question yosh, il y a la balise <noscript>.
Modifié par aCOSwt (14 Jun 2008 - 20:29)
Merci pour tes éclaircissement acoswt, mais je ne comprends pas ce que tu entends par "planquer en JavaScript les incompatibilités W3C", puisque je cherche précisément à executer une fonction au chargement de la page. Y'a t'il une autre façon de le faire ? en fait je ne comprends pas ce qui est gênant (c'est une question ouverte, n'y connaissant rien en JS, je le répète)

Pour le onload, que faut-il faire pour que le w3c ne me renvoie pas une erreur ? Smiley murf y'a t'il une solution plus valide/sémantique/correcte que celle fournie par pierreG ?

sinon, je vais essayer la balise noscript de ce pas !
hop, me revoilà ! en fait, la solution <noscript> ne marche pas, car il n'y a pas de script dans les environs. un exemple sera plus clair:

<ul style="display:none;" id="monid" class="maclass">
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
</ul>


voilà, ma question est comment planquer ce "display:none" ou l'écraser si le navigateur client n'a pas le JS ?

Ma solution "à l'instinct" me dirait de faire comme ça:

<ul [b]écrit en JS{style="display:none;"}[/b] id="monid" class="maclass">
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
</ul>


mais là je ne suis pas trop sûr de moi, même si ça parait être le plus logique. Par contre ça me parait assez crade et ou pas très valide d'écrire comme ça du JS en plein milieu d'une balise.

à moins que je fasse une fonction JS qui m'écrive une variable php, que j'insère ensuite dans ma balise, mais là je crois que je m'égare Smiley lol ce serait un truc du style:

javascript qui règle ma variable php sur "none"
<noscript>ma variable php = "block"</noscript>

et du coup:
<ul style="display:<? echo:mavariablephp; ?>;" id="monid" class="maclass">
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
<li>mon super item</li>
</ul>


Mais c'est pareil je sais pas si c'est faisable/propre oO'

voilà, je sais plus trop là...
La solution du commun des mortels est de cacher le UL seulement au onload :
window.onload = function() {
   document.getElementById('monid').style.display = 'none';
}


Mais 99% des developpeur web s'en contentera sans aller chercher plus loin.

La solution ultime est d'utiliser une classe hasJS qui est collée sur l'élément HTML seulement si tu as du JS.


styles : 
.hasJS .navMenu ul {display:none;}
.hasJS .navMenu li:current {display:block;}


et dans ton JS tout en haut du fichier JS (au tout tout tout début et le fichier JS doit aussi etre appelé dans le <head></head>)
script : 
document.documentElement.className+=" hasJS";

et basta, maintenant tu as une classe hasJS parent de tout le monde, qui est seulement mise quand tu as du JS
alors du coup tu peux jouer tranquillement pour cacher ou afficher tes éléments.



Et accessoirement j'en revient au pb du onload sur l'image.
Toutes les tentatives qui sont arrivées pour dire : ouais vas y met le sur le onload de la page, ne sont pas bonnes du tout.

Pourquoi ?
Ben tout simplement qu'il arrive parfois qu'on veuille un traitement sur l'image, seulement une fois que celle-ci soit chargée sans attendre le chargement final de toute la page.
Après si le W3C gueule sur ton onload, tu n'as qu'à te dire que toi de ton coté, tu as fais tous les efforts nécessaires pour valider correctement ta page, et que les autres erreurs ne sont que des "avertissement" et non des erreurs, qui sont là pour te dire : "Ok c'est bien, mais tiens ya quelques trucs que j'aime pas, tu pourrais vérifier si c'est good ?"

Accessoirement, j'utiliser HTML Valiator pour valider mes pages en utilisant soit le moteur tidy, soit le sgml parser et en tout dernier lieu j'attaque sur le valiateur du W3C quand j'ai vriament un doute sur la validité de ma page.

Mais il faut savoir une chose, valider une page est de la pure branlette. Le validateur W3C est un outil pour le développeur pour éviter qu'il fasse n'importe quoi dans son code HTML.
Après si tu es obligé d'utiliser des attributs "deprecated" ou encore des attributs "exotiques" pour faire fonctionner des scripts. Ce n'est vraiment plus un problème si ta page n'est pas valide, à partir du moment où tu sais expliquer les erreurs qui apparaissent.
Modifié par Gatsu35 (15 Jun 2008 - 06:56)
@aCOSwt : si si, l'attribut onload *sur une image* est bien invalide (du moins en XHTML 1.0 Strict)
Modifié par chadom (15 Jun 2008 - 12:24)
Bonjour,

Je vois que personne n'a pensé à consulter la spécification HTML 4.01, alors que c'est pourtant la première chose à faire si on n'est pas certain de la validité d'un code HTML!

D'après HTML 4.01, l'attribut onload ne peut être appliqué qu'aux deux éléments suivants: BODY et FRAMESET.
Cf. http://www.la-grange.net/w3c/html4.01/interact/scripts.html#adef-onload

Voilà pour la validité. Mais je suis plutôt d'accord avec Gatsu35 quand il dit:
Gatsu35 a écrit :
Mais il faut savoir une chose, valider une page est de la pure branlette. Le validateur W3C est un outil pour le développeur pour éviter qu'il fasse n'importe quoi dans son code HTML.
Après si tu es obligé d'utiliser des attributs "deprecated" ou encore des attributs "exotiques" pour faire fonctionner des scripts. Ce n'est vraiment plus un problème si ta page n'est pas valide, à partir du moment où tu sais expliquer les erreurs qui apparaissent.

J'aurais formulé la première phrase en termes moins fleuris, mais effectivement la validation pour la validation est une perte de temps et d'énergie (et donc d'argent, en situation professionnelle).

Par contre, il faut être sûr que le onload sur l'image est une solution largement compatible (car dans l'absolu les navigateurs seraient fondés à ignorer cet onload invalide), et si possible il faudrait connaitre les différentes solutions JS qui ne passent pas par cette astuce, afin de faire un choix raisonnable. Smiley cligne
merci à tous pour toutes ces réponses. Même si la validation, n'est pas une fin en soit, tant qu'à faire, c'est toujours mieux Smiley lol

pour les solutions apportées:

a écrit :
La solution du commun des mortels est de cacher le UL seulement au onload :

window.onload = function() {
   document.getElementById('monid').style.display = 'none';
}


Ça semble sympa, sauf que mes ul ont toutes des ID différentes générées dynamiquement ! Smiley ohwell

pour la deuxième solution, je ne pense pas que ça fonctionne: il ne faut pas que le style soit sur une feuille externe mais bien inline dans le html.

pour mémo, l'url de l'exemple: www.iconographic.fr les listes dont je parle sont celles qui servent à afficher les infos.

merci !
yosh a écrit :
merci à tous pour toutes ces réponses. Même si la validation, n'est pas une fin en soit, tant qu'à faire, c'est toujours mieux Smiley lol

pour les solutions apportées:

La solution du commun des mortels est de cacher le UL seulement au onload :

window.onload = function() {
   document.getElementById('monid').style.display = 'none';
}


Ça semble sympa, sauf que mes ul ont toutes des ID différentes générées dynamiquement ! Smiley ohwell

pour la deuxième solution, je ne pense pas que ça fonctionne: il ne faut pas que le style soit sur une feuille externe mais bien inline dans le html.

pour mémo, l'url de l'exemple: www.iconographic.fr les listes dont je parle sont celles qui servent à afficher les infos.

merci !

Si je peux te donner un très bon conseil, c'est d'utiliser ma deuxieme solution, c'est la meilleure en soit, apres si les scripts utilisent du JS, et qu'ils font des display:block/none, ma solution ne viendra rien gêner, sauf si la détection pour voir si le UL est affiché ou caché est mal faite.

genre : 
if (ul.style.display=='none') {
  // le dawa pour afficher
}

alors qu'il vaut mieux tester sa hauteur par exemple
if (ul.offsetHeight == 0) { // là mon UL est clairement en display:none

}



Edit : Après analyse du script, il s'avère que pour afficher le UL, par défaut il faut un display:none, mais pour afficher le script fait un : 
ul.style.display = '';

Ce qui est une bonne chose en soit. Donc je te propose de tester autre chose tout en conservant la methode du hasJS.
Elle consiste dans ce cas à travailler sur les styles qu'utilise le script
.hasJS ul {overflow:hidden; height:0;}

Modifié par Gatsu35 (15 Jun 2008 - 15:38)
merci mais là j'avoue que j'ai rien compris à la solution concrète, n'y panant quedalle en JS. je vais essayer de reformuler ça, et tu me dis si j'ai bon. Smiley biggrin Smiley sweatdrop

j'ai ma liste avec le display:non en inline pour cacher la liste par défaut.

dans le head, je met un script JS qui appelle une css hasjs, qui rends le ul invisible, que si le js est activé, MAIS, puisque le display:none doit être en ligne pour que ça fonctionne (déjà testé en externe sans résultat) je ne vois pas comment une feuille css appelée en externe viendrait régler le problème.

Pour le reste de la solution j'ai pas vraiment compris Smiley ohwell

désolé et merci pour ta patience.
yosh a écrit :
merci mais là j'avoue que j'ai rien compris à la solution concrète, n'y panant quedalle en JS. je vais essayer de reformuler ça, et tu me dis si j'ai bon. Smiley biggrin Smiley sweatdrop

j'ai ma liste avec le display:non en inline pour cacher la liste par défaut.

dans le head, je met un script JS qui appelle une css hasjs, qui rends le ul invisible, que si le js est activé, MAIS, puisque le display:none doit être en ligne pour que ça fonctionne (déjà testé en externe sans résultat) je ne vois pas comment une feuille css appelée en externe viendrait régler le problème.

Pour le reste de la solution j'ai pas vraiment compris Smiley ohwell

désolé et merci pour ta patience.


vire le display:none :o

et bien sur le selecteur CSS doit ne doit pas etre
.hasJS ul {}

mais un chemin plus spécifique
.hasJS .maclassedutruc ul.classemachin {}
a écrit :
vire le display:none :o


nan mais le postulat de base c'est qu'on peut pas faire ça, sinon ça ferait un bail que j'aurais résolu le problème Smiley biggol
Sujet clos
Aller à