11550 sujets

JavaScript, DOM et API Web HTML5

Rendre accessible effets scriptaculous et autres

Hello,

J'utilise de plus en plus souvent des effets de déroulement ou d'apparitions avec des librairies comme Scriptaculous ou SimpleJS.

La plupart nécessitent l'ajout de display:none dans l'attribut style de la balise, ce qui n'est déjà pas terrible niveau séparation contenu-forme.

Maintenant, comment faire pour ceux qui n'ont pas le javascript activé et donc auront le contenu masqué par display:none ?

utilisez-vous la balise noscript ?
Modifié par Noisequik (29 Aug 2007 - 09:44)
Modérateur
Salut,

Pourquoi ne pas ajouter ce display: none; via Javascript au lancement de la page ? Ca règlerait le problème.

A ma connaissance, les bibliothèques n'imposent pas que cette instruction soit en dur dans la partie XHTML.
Hello,

Tu peux créer une feuille de style à part dans laquelle tu mets toutes tes déclarations qui n'ont de sens que si javascript est activé (donc, ces display:none dont tu parles)

Et ne la faire se charger que si javascript est activée, en mettant ce code dans ton <head>


<script language="javascript" type="text/javascript">
	document.write('<link rel="stylesheet" href="javascript.css" type="text/css">');
</script>


Edit en complément de la réponse de koala64 :
Ma méthode empechera le "clignotement" des éléments que tu souhaites masquer.
Les masquer par javascript repose sur le window.onload (ou équivalent) et fera apparaitre l'élément avant de le masquer. Ajouter une feuille de style ne les fera pas apparaitre du tout.
Modifié par Tymlis (29 Aug 2007 - 09:57)
merci pour vos propositions.

Je crois qu'il est indispensable que le display:none soit inline, car sinon il n'a pas d'effet, d'après mes essais.
Je pense que c'est du au fait que les attributs en ligne priment sur ceux d'une feuille externe...

Peut-être pourrais-je générer du code à l'aide de JavaScript directement dans mon HTML ?
Modérateur
Noisequik a écrit :
Je crois qu'il est indispensable que le display:none soit inline, car sinon il n'a pas d'effet, d'après mes essais.
Ca, je veux bien voir. Smiley smile

a écrit :
Peut-être pourrais-je générer du code à l'aide de JavaScript directement dans mon HTML ?
En mémoire, oui... pas en dur.
koala64 a écrit :
Ca, je veux bien voir. Smiley smile


Voici une explication dans la faq de scriptaculous

a écrit :
2.4 Effect.* doesn’t work when object’s display is none!

The problem lies with class / id definitions. use the inline property style=”display:none;” instead
2.4.1 Why?

script.aculo.us is based off of prototype.js, and calls the ‘show’ function to make an element visible. This works by setting the element’s style.display = ’’ (undef). This is intended to set it to the default, which is visible. However, if you have a style for display defined higher up in the CSS than the inline element level (which prototype is overwriting), it will look at the undefined style on your element and cascade up. Your stylesheet probably has display=’none’, so it looks like nothing is happening.

Modifié par Noisequik (29 Aug 2007 - 10:23)
koala64 a écrit :
Ca, je veux bien voir. Smiley smile



Pour ma part je le mets aussi lorsque je découpe par exemple un formulaire en onglet.
Modérateur
Avec Scriptaculous, on peut passer par l'objet style en JS, ça fonctionne.

a écrit :
Pour ma part je le mets aussi lorsque je découpe par exemple un formulaire en onglet.
Je ne comprend pas en quoi c'est nécessaire. Smiley confuse
On ne fait que bloquer ceux qui n'ont pas JS dans ce cas.
Modifié par koala64 (29 Aug 2007 - 10:54)
koala64 a écrit :
Avec Scriptaculous, on peut passer par l'objet style en JS, ça fonctionne.

Pour ma part je le mets aussi lorsque je découpe par exemple un formulaire en onglet.
Je ne comprend pas en quoi c'est nécessaire. Smiley confuse
On ne fait que bloquer ceux qui n'ont pas JS dans ce cas.


nan je mets style=”display:block;” et je cache au chargement. C'est par habitude, faudrait que je reteste à l'occase.
Modérateur
Ah, ok. Smiley ravi Je me disais bien que j'avais compris de travers aussi. Smiley lol

Cela dit, c'est vrai que Scriptaculous impose de passer par l'objet style. Généralement, je préfère éviter celui-ci parce qu'il n'y a pas de media comme on peut l'avoir en CSS (enfin implémenté dans chaque navigateur tout du moins). Bon, j'ai trouvé le truc tu me diras, j'évite Scriptaculous... Smiley langue
Modifié par koala64 (29 Aug 2007 - 11:04)
koala64 a écrit :
Avec Scriptaculous, on peut passer par l'objet style en JS, ça fonctionne.


Est-ce que tu pourrais me renseigner comment faire concrètement ? J'utilise en ce moment SimpleJS car il ne pèse que 14kB mais le principe doit être le même...
Modifié par Noisequik (29 Aug 2007 - 11:06)
Modérateur
Ben quelquechose du genre :
function init()
{
     var oEl, oA;

     oEl = document.getElementById('unid');
     oEl.style.display = 'none';

     oA = document.getElementById('control');
     oA.onclick = function()
     {
          Effect.toggle('unid','slide');
          return false;
     }
}
window.onload = init;

<div id="unid">...</div>
Sujet clos
Aller à