11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Affichage et masquage, améliorations ?

Bonsoir à tous,

je souhaiterai améliorer qq chose dans ce script (il ne vient pas de moi...):

<script type="text/javascript">
var AfficheCache = function AfficheCache(Id)
  {
	if (document.getElementById && document.getElementById(Id) != null)
    {
		if(document.getElementById(Id).style.display=='none') document.getElementById(Id).style.display='block';
		else document.getElementById(Id).style.display='none';
    }
  }
</script>


voici mon javascript
... href="javascript:AfficheCache('informatique')"> ...


et mon contenu à afficher
<div id="informatique">	...</div>


bon, je voudrai tout simplement masquer mon div quand la page se charge, parceque pour l'instant, quand ma page s'affiche, mon div est affiché (mais quand je clique ou que je reclik ce div se masque normalement, tout marche en fait)

merci de vos précieuses réponses Smiley smile


Ps: voici l'exemple. cliquez sur la première image (tutos informatique)
Modifié par Klak (07 Dec 2008 - 22:06)
Tu mets une class appelée par exemple "hasJS" sur l'élément <html> grâce à javascript et dans ta css un :

.hasJS #informatique {display: none}


À ta place, j'utiliserais jquery pour faire joujou en javascript… Smiley cligne
Modifié par Patidou (06 Dec 2008 - 21:44)
Un peu plus lent de traitement, mais qui permet d'éviter le recours à display:none. Au lieu de cacher le contenu, tu commences par t'en créer des copies de "sauvegarde" au chargement de ta page dans des variables globales avec des cloneNode, puis à chaque fois que tu souhaites masquer un contenu, en fait tu le supprimes carrément. Quand tu le (ré) affiches, tu crées une copie de ta sauvegarde, que tu affectes avec un appendChild à son élément parent. C'est histoire de s'amuser un peu avec le DOM Smiley lol .

Il ne reste plus ensuite (mais ça c'est vrai quelle que soit la manière d'afficher ou de cacher le contenu), qu'à placer le focus sur la zone que tu viens de faire (ré)apparaitre... Et cette dernière phrase était le principal objet de mon post Smiley lol
Smiley lol

Bon à la place du display:none c'est mieux de faire comme ça :

.hasJS #informatique {position: absolute; top: -5000px; left: -5000px;}
.montre {position: static}


Et au clic enlever ou mettre la classe .montre sur l'élément #informatique.
Modifié par Patidou (06 Dec 2008 - 22:08)
Sujet clos
Aller à