11548 sujets

JavaScript, DOM et API Web HTML5

Instruction document.getElementById quand Javascript désactivé

Bonjour

J'ai pas mal utilisé dans la conception de mon site quelques possibilités offertes par l'instruction document.getElementById('identificateur'), par exemple :



document.getElementById('identificateur').style.display='block';

document.getElementById('identificateur').setAttribute('src','nouvelle_image');

document.getElementById('identificateur').className='Nouveau_style';



ainsi que l'instruction


parent.window.Identificateur_iframe.location='page_html';



Gros problème : Après un nombre conséquent d'heures passées à ajuster tout le codage, j'ai, par acquis de conscience après la lecture de l'article de Raphaël "Pourquoi certains n'activent pas Javascript ?", désactivé Javascript sous FireFox (je n'ai pas trouvé comment le désactiver en IE8) et ai eu le choc de découvrir qu'une bonne partie du site ne marche plus.


Que dois-je faire ? Y a-t-il une possibilité de remplacer les instructions mentionnées ci-dessus par du CSS ?

Merci par avance de vos suggestions.


PS : J'ai aussi placé ce message dans le forum CSS.
Modifié par cadbor (13 Aug 2009 - 12:55)
cadbor a écrit :
Que dois-je faire ?

Ne pas se reposer sur JavaScript pour l'accès au contenu est aux fonctionnalités. Par exemple, si JavaScript permet d'afficher un DIV masqué, alors ce DIV doit être masqué au préalable en JavaScript, et en JavaScript uniquement.

Je te laisse faire quelques recherches sur le concept de JavaScript non-intrusif (non-obtrusive JavaScript). Il y a quelques articles qui vont bien à ce sujet.
Merci, Florent, de ta réponse qui m'a fait découvrir tout un aspect de Javascript que je ne connaissais pas.

En parcourant différents articles, notamment http://www.lyxia.org/blog/developpement/javascriptajax/bonnes-pratiques-javascript-le-code-non-intrusif-139 , j'ai compris qu'il fallait procéder comme suit pour faire apparaître un div initialement masqué en cliquant sur une cellule de tableau :


1) Dans le code HTML :


<head>
...
<script type="text/javascript" src="Fichier_JS.js"></script>

</head>


<body>

...

<td id="Identifiant_1" ...></td>

...

</table>


<div id="Bloc_à_afficher">

Texte

</div>

...

</body>




2) Dans la css :


#Bloc_à_afficher {
...
display:none;
}



3) Dans le fichier Javascript :


function Traitement_OnClick() {
 if (document.getElementById('Identifiant_1')) {
  document.getElementById('Identifiant_1').onclick = function() {
   document.getElementById('Bloc_à_afficher').style.display='block'; }
 }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(Traitement_OnClick);




Pour l'instant, cela ne fonctionne pas (rien ne se passe lorsque je clique sur la cellule), mais je sens que je ne suis pas loin du résultat. Que manque-t-il pour que ça marche ?

Merci par avance
cadbor a écrit :
Pour l'instant, cela ne fonctionne pas

Et quand bien même ça marcherait, ça ne serait pas accessible car:

1. Ton contenu est caché en CSS, et révélé en JavaScript. Si JS est désactivé, le contenu reste caché. Il faut prendre l'option inverse: révéler le contenu en JS, d'accord, mais le cacher le contenu en JavaScript et pas en CSS (ou, en JS, ajouter lors du chargement de la page une classe "hidden" ou équivalente à l'élément, et définir un style pour le masquer).

2. Si JavaScript est activé, pour afficher le contenu il faut cliquer sur un élément. Et si je n'utilise pas la souris pour naviguer, je fais comment? Je te laisse découvrir le concept d'accessibilité au clavier. Smiley cligne

cadbor a écrit :
Que manque-t-il pour que ça marche ?

Sais pas trop. La présence de caractères non-ASCII (ton «à») dans un nom d'identifiant peut éventuellement poser problème, surtout en cas de mauvaise déclaration des encodages.

Autrement, je ne vois pas trop, mais ça serait sans doute plus simple à débuguer avec une page de test en ligne.
Florent V. a écrit :

si JavaScript permet d'afficher un DIV masqué, alors ce DIV doit être masqué au préalable en JavaScript, et en JavaScript uniquement.


Florent V. a écrit :
Ton contenu est caché en CSS, et révélé en JavaScript. Si JS est désactivé, le contenu reste caché. Il faut prendre l'option inverse: révéler le contenu en JS, d'accord, mais le cacher le contenu en JavaScript et pas en CSS


Merci de ta réponse, Florent.

Je n'avais pas tout de suite compris le sens de ta première indication. Je l'ai comprise après m'être aéré.
Au retour de ma promenade, et avant de lire ta réponse, j'ai ajouté au début de ma fonction Traitement_OnClick() l'instruction

	
if (document.getElementById('Identificateur du bloc à afficher')) {
		document.getElementById('Identificateur du bloc à afficher').style.display='none';
	}


et ai supprimé l'instruction


display:none;


de la css.


Maintenant, le bloc à afficher s'affiche bien, mais dès le chargement de la page. J'ai sans doute mal libellé l'instruction masquant le bloc. Comment faut-il la formuler ?


Pour ce qui est de l'accessibilité par clavier, j'avoue que je n'y ai rigoureusment pas pensé, le site étant construit à partir d'une maquette réalisée sous Illustrator et donc essentiellement graphique. (Je voudrais dans un premier temps que le site fonctionne correctement à l'aide de la souris. Après, j'envisagerai la question de l'utilisation du clavier. Smiley smile )
Modifié par cadbor (13 Aug 2009 - 20:39)
Attention, un identifiant ne pas pas contenir d'espaces. Donc pas:
document.getElementById('un identifiant');

mais:
document.getElementById('identifiant');
cadbor a écrit :
le site étant construit à partir d'une maquette réalisée sous Illustrator

Arf. Smiley lol
Florent V. a écrit :
Attention, un identifiant ne pas pas contenir d'espaces. Donc pas:
document.getElementById('un identifiant');

mais:
document.getElementById('identifiant');



Bien sûr, mes identifiants ne contiennent ni espaces, ni caractères accentués. J'ai mis le texte en littéral simplement pour montrer la structure du code.

J'ai cherché sur différents forums, pour l'instant je n'ai pas trouvé comment masquer un div en javascript non intrusif au chargement de la page.

PS : Pourquoi "Arf. Smiley lol " ? Smiley biggrin
Sujet clos
Aller à