Jump to content
Sign in to follow this  
Hyogapag

Masquer/afficher du contenu

Recommended Posts

Pour commencer, je suis novice en Javascript. Comme je ne suis pas un fan des effets visuels et autres artifices esthétiques, je ne me suis pour ainsi dire jamais penché sur les possibilités offertes par le DHTML. Seulement je voudrais ajouter à l'une des pages de mon site une fonctionnalité, très répandue de nos jours, qui permet de masquer/afficher du contenu par un simple clic sur un lien. Le script que j'utilise marche à merveille, d'ailleurs le voici pour ceux qui tomberaient sur ce post en cherchant un script offrant cette possibilité :

<script type="text/javascript">
<!--Merci à Dustin Diaz
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>

Le remerciement est de moi. On appelle ensuite le code de la façon suivante :

<a onclick="switchMenu('poster-message');">écrire un message</a>

où poster-message indique la valeur de l'attribut id de la balise dont le contenu doit être affiché ou masqué.

Cependant, il se pose encore un problème qui, tant qu'il ne sera pas résolu, m'empêchera d'utiliser ce script sur mon site : la compatibilité avec les navigateurs où Javascript est désactivé ou n'est pas supporté.

Je n'ai pas trouvé comment vérifier si Javascript est désactivé, mais je pense avoir une idée élégante, et j'aurais besoin de vous pour la finaliser.

Je précise au passage que les possibilités offertes par les balises <noscript> ne m'ont pas convenues.

Ma solution est simple : en général, par défaut, on cache le contenu, et lors d'un événement comme onclick on le fait apparaître. Il est caché au départ par du CSS comme style="display: none". Seulement si ce display none est appelé lui-même par du Javascript, alors une personne ayant désactivé Javascript verra la page entièrement dépliée, ce qui n'est franchement pas gênant.

Seulement je n'ai pas réussi à réaliser un tel script. J'ai bien tenté de faire des fonctions mais aucune n'a fonctionné. La seule solution que j'ai réussi à exploiter n'est pas reconnue par le W3C, car elle suppose que javascript ou document.write soit un attribut possible de balises comme <div> :

<div id="poster-message" document.write("style="display: none"");>

Pourriez-vous me proposer une alternative à cette solution qui ne vienne par troubler la validation de mon site selon la DTD XHTML 1.0 Strict? Merci d'avance.

Edited by Arlette

Share this post


Link to post
Share on other sites

C'est une excellente idée, idée que j'ai d'ailleurs implémentée dans mon blog sur les nouilles :lol:

Le fait de cacher un élément en JavaScript est très simple : il te suffit d'attribuer un ID au bloc de contenu que tu souhaites rendre visible / invisible, puis de mettre le code suivant à la fin de ta page :

<script type="text/javascript">
document.getElementById('id_du_bloc_a_cacher').style.display = 'none';
</script>

Bien entendu, tu peux cacher ainsi plusieurs blocs (voire tous) afin de présenter une page "propre" au visiteur ;)

Share this post


Link to post
Share on other sites

RRaaaahhh merci ! En fait j'avais déjà fait un code comme ça, mais je l'avais positionné au-dessus de la balise à cacher... et ça ne marchait pas (logique en fait !).

Share this post


Link to post
Share on other sites

Pas de quoi ;)

Tant qu'à mettre des effets JavaScript, autant s'assurer qu'ils ne gèneront pas ceux qui n'en veulent pas (ou ne peuvent pas en profiter) :)

Share this post


Link to post
Share on other sites

Je tiens à dire, pour ceux qui souhaitent à tout prix éviter tout Javascript dans leurs pages, qu'il existe une alternative qui utilise seulement le CSS. Cependant, IE (IE7 compris), ne la supporte pas. On peut toutefois imaginer une solution alternative pour les microsoftiens similaire à celle proposée ci-dessus pour les utilisateurs n'acceptant pas le Javascript.

Voici la page qui m'a inspiré cette solution.

Il suffit de faire deux liens ( montrer le texte | cacher le texte) au lieu d'un, et de jouer sur les visibility et autres display, et le tour est joué. Je pense que je vais implémenter cette solution sur mon site. Lorsque j'aurai finalisé le résultat, je le posterai dans la rubrique de ce forum consacrée au CSS.

Voilà l'url en question.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...