28173 sujets

CSS et mise en forme, CSS3

Afficher/masquer un bloc : problème de double clic.

Hello !
J'ai une page ou certains blocs apparaissent masqués et sont affichés lors du clic sur un lien.
Le problème :
Lors du premier clic; le bloc de n'affiche pas. Il faut recliquer une deuxième fois dessus pour que ça marche.
Ensuite, un simple clic fonctionne pour l'affichage/masquage, mais j'ai peur que ce petit bug déroute le visiteur.

Voici comment ça fonctionne :
J'ai par exemple un bloc
<head>
<style type="text/css">
.hide {
	display: none;
}
</style>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<a class="linklike" onclick="toggle_visibility('showbloc1');">cliquez ici pour afficher le bloc</a>
<div id="showbloc1" class="hide">
texte masqué au load et affiché lors du clic
</div>


Vous pouvez voir cela en action ici (http://tinyurl.com/yhvxnw), voir section 4 (dvds, cds ou livres).
A noter que j'ai un bug CSS et que la page s'affiche mal sous IE; je ne comprend d'ailleurs pas pourquoi. Donc à n'essayer que sous firefox pour l'instant....

Merci pour votre aide précieuse !
Bonjour.

Le problème ressemble beaucoup à celui-ci : içi
... de mémoire ...

if ((e.style.display == 'none') || (e.style.display == '')
     e.style.display = 'block';
     else
            e.style.display = 'none';
}

Modifié par GeorgesM (15 Nov 2006 - 01:18)
En effet, ça a l'air d'être la même chose.
J'ai repris le script mais ça ne marche toujours pas, je ne vois pas où est mon erreur...
<head>
<style type="text/css">
.hide {

display: none;
}
</style>
<script type="text/javascript">
<!--
function togglediv(id)
{

var e=document.getElementById(id).style;
if((e.display=='block') || (e.display=='')) {
e.display='none';
} else {
e.display='block';
}
}
//-->
</script>
</head>
<a href="#" onclick="togglediv('masquer1');">masquer le div</strong></a>
<div id="masquer1" class="hide">masquer ceci</div>
Bonjour.

Pourtant, c'est pareil... à la symétrie près.

Je vous laisse chercher pour que vous ayez le plaisir de trouver...
Modifié par GeorgesM (15 Nov 2006 - 12:28)
Bon. Langue aux chats ?

Telle que rédigée, la fonction permettait de masquer un élément visible. Votre application fait l'inverse : afficher un élément caché. Il vous faut donc modifier la fonction comme suit...


/** Basculer l'état de visibilité d'un élément
* Note état initial : caché
* @param id string 
*/
function toggle_visibility(id) 
{
	var e=document.getElementById(id).style;
	if((e.display=='none') || (e.display=='')) 
		e.display='block';
	 else 
		e.display='none';
}


Néanmoins, il reste la possibilité de renseigner le style "en ligne" de l'élément directement dans celui-ci, ainsi, le cas " e.display=='' " ne se produit pas.

<div style="display:none" id="masquer1" class="hide">masquer ceci</div>
Sujet clos
Aller à