Calque (show/hide) et select

5 réponses

Auteur	Message
bhamp0 \| Membre Inscrit le : 09/05/2005	# Le 21/06/2005 à 14:39 Salut @ tous, J'suis actuellement en stage dans une entreprise de ma région, où je fais du dév d'outils de gestion en PHP/MySQL. Pour respecter leurs exigences, je dois faire apparaître/disparaître des calques en permanence, ce que j'arrive bien à faire en jouant sur les propriétés visibility et display des calques. Malheureusement, j'ai pu constater qu'en touchant à ces propriétés, l'ensemble des champs select sous Firefox se retrouve cassé, car on ne peut plus les faire défiler qu'à l'aide du clavier (en clair, ils ne défilent plus lorsqu'on clique à la souris). Quelqu'un connaît-il ce problème ? Quelqu'un sait-il comment le résoudre ? Si besoin, je vous fournirais un exemple de test dans la soirée pour que vous vous rendiez bien compte du problème ... @+ et merci d'avance Quand on voit c'qu'on voit, et qu'on entend c'qu'on entend, on a raison d'penser c'qu'on pense !
jerome347 \| Jérôme Membre Inscrit le : 09/05/2005	# Le 21/06/2005 à 14:50 J'ai du loupé un truc car j'utilise ça : function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId) ; if (targetElement.style.display == "none") { targetElement.style.display = "" ; } else { targetElement.style.display = "none" ; } } avec ensuite des <a href="javascript:visibilite('madiv');">voir/masquer</a> Et ça ne casse rien ?
flush \| Jean-Philippe Modérateur Inscrit le : 09/05/2005	# Le 21/06/2005 à 14:56 moi je met plutot : targetElement.style.visibility = visible; targetElement.style.visibility = hidden; ... (Message édité le 21-06-2005 à 15h10 par flush) @+ Jean-Philippe
bhamp0 \| Benjamin Membre Inscrit le : 09/05/2005	# Le 21/06/2005 à 14:57 bah en gros, j'avais la même chose, j'avais juste séparé show et hide : function hide(div) { var i=document.getElementById(div); i.style.display = "none"; i.style.visibility="hidden"; } function show(div) { var i=document.getElementById(div); i.style.display = "inline"; i.style.visibility="visible"; } Ensuite, je fais mes liens à l'identique, mais mes <select> ne déroulent plus ... bon j'vous ferais une démo dans la soirée Quand on voit c'qu'on voit, et qu'on entend c'qu'on entend, on a raison d'penser c'qu'on pense !
major Den \| Denis Membre Inscrit le : 09/05/2005	# Le 21/06/2005 à 16:05 visibility: hidden -> l'objet est caché mais sa place est "réservée" à l'affichage display: none -> l'objet n'est pas affiché, et sa place n'est pas réservée. Si tu gères la propriété display, tu n'as pas besoin de gérer la propriété visibility (peu importe qu'un truc soit déclaré visible ou non, s'il n'est pas affiché.) Rien ne sert de courir, on ira une autre fois.
Rano \| Jean Modérateur Inscrit le : 13/04/2005	# Le 21/06/2005 à 16:22 Ca dépends aussi de ce que tu veux faire quand tu parles de cacher des et faire apparaitre des éléments. Y a deux cas pour la gestion de formulaires, et ca ne réagit pas toujours pareil suivant les navigateurs : - Si les champs cachés ne doivent pas nécessairement être envoyé par le formulaire, tu peux en effet utiliser la propriété display sans soucis. Certains navigateurs n'enverront pas les champs contenu dans le "div" (ou autre) caché, d'autres l'enverrons, après à toi de les utiliser ou non en PHP. - Si tu veux que meme les champs cachés du formulaire soit envoyé, alors là il faut faire attention. Je dis ca par exemple pour un système d'onglet. Si tu veux demander des infos dans un onglet, puis d'autres dans un autre onglet et que tu utilises la propriété display, comme pour le point précédent, certains navigateurs n'enverront pas les données de l'onglet caché. Pour résoudre ce problème, il ne faut pas utiliser ses propriétés. Par exemple pour generateur.net, notamment pour le générateur de bannières flash, je fais en gros comme ceci : <style> div.cache { position: absolute; left: -5000px; // pour le cacher à gauche de l'écran } </style> ------------------ <script language="JavaScript"> function sw(id) { d = document.getElementById(id); if (typeof d != "undefined") { if (d.className == "cache") d.className = ""; else d.className = "cache"; } } </script> ------------------ <a href="#" onclick="return sw('onglet');">Switch</a> <div id="onglet"> Texte </div> Chambres d'hote tavel Séjours en provence Forum mariage

Auteur

Message

Inscrit le : 09/05/2005

# Le 21/06/2005 à 14:39

Salut @ tous,

J'suis actuellement en stage dans une entreprise de ma région, où je fais du dév d'outils de gestion en PHP/MySQL.

Pour respecter leurs exigences, je dois faire apparaître/disparaître des calques en permanence, ce que j'arrive bien à faire en jouant sur les propriétés visibility et display des calques.
Malheureusement, j'ai pu constater qu'en touchant à ces propriétés, l'ensemble des champs select sous Firefox se retrouve cassé, car on ne peut plus les faire défiler qu'à l'aide du clavier (en clair, ils ne défilent plus lorsqu'on clique à la souris).

Quelqu'un connaît-il ce problème ? Quelqu'un sait-il comment le résoudre ?
Si besoin, je vous fournirais un exemple de test dans la soirée pour que vous vous rendiez bien compte du problème ...

@+ et merci d'avance

Quand on voit c'qu'on voit, et qu'on entend c'qu'on entend, on a raison d'penser c'qu'on pense !

jerome347 | Jérôme
Membre

Inscrit le : 09/05/2005

# Le 21/06/2005 à 14:50

J'ai du loupé un truc car j'utilise ça :

function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}

avec ensuite des

<a href="javascript:visibilite('madiv');">voir/masquer</a>

Et ça ne casse rien ?

flush | Jean-Philippe
Modérateur

Inscrit le : 09/05/2005

# Le 21/06/2005 à 14:56

moi je met plutot :

targetElement.style.visibility = visible;

targetElement.style.visibility = hidden;

...

(Message édité le 21-06-2005 à 15h10 par flush)

@+ Jean-Philippe

bhamp0 | Benjamin
Membre

Inscrit le : 09/05/2005

# Le 21/06/2005 à 14:57

bah en gros, j'avais la même chose, j'avais juste séparé show et hide :

function hide(div) {

      var i=document.getElementById(div);

      i.style.display = "none";

      i.style.visibility="hidden";

   }

   function show(div) {

      var i=document.getElementById(div);

      i.style.display = "inline";

      i.style.visibility="visible";

   }

Ensuite, je fais mes liens à l'identique, mais mes <select> ne déroulent plus ... bon j'vous ferais une démo dans la soirée

Quand on voit c'qu'on voit, et qu'on entend c'qu'on entend, on a raison d'penser c'qu'on pense !

major Den | Denis
Membre

Inscrit le : 09/05/2005

# Le 21/06/2005 à 16:05

visibility: hidden -> l'objet est caché mais sa place est "réservée" à l'affichage

display: none -> l'objet n'est pas affiché, et sa place n'est pas réservée.

Si tu gères la propriété display, tu n'as pas besoin de gérer la propriété visibility (peu importe qu'un truc soit déclaré visible ou non, s'il n'est pas affiché.)

Rien ne sert de courir, on ira une autre fois.

Rano | Jean
Modérateur

Inscrit le : 13/04/2005

# Le 21/06/2005 à 16:22

Ca dépends aussi de ce que tu veux faire quand tu parles de cacher des et faire apparaitre des éléments. Y a deux cas pour la gestion de formulaires, et ca ne réagit pas toujours pareil suivant les navigateurs :

- Si les champs cachés ne doivent pas nécessairement être envoyé par le formulaire, tu peux en effet utiliser la propriété display sans soucis. Certains navigateurs n'enverront pas les champs contenu dans le "div" (ou autre) caché, d'autres l'enverrons, après à toi de les utiliser ou non en PHP.

- Si tu veux que meme les champs cachés du formulaire soit envoyé, alors là il faut faire attention. Je dis ca par exemple pour un système d'onglet. Si tu veux demander des infos dans un onglet, puis d'autres dans un autre onglet et que tu utilises la propriété display, comme pour le point précédent, certains navigateurs n'enverront pas les données de l'onglet caché. Pour résoudre ce problème, il ne faut pas utiliser ses propriétés. Par exemple pour generateur.net, notamment pour le générateur de bannières flash, je fais en gros comme ceci :

<style>

div.cache

{

	position: absolute;

	left: -5000px; // pour le cacher à gauche de l'écran

}

</style>

------------------

<script language="JavaScript">

function sw(id)

{

	d = document.getElementById(id);

	if (typeof d != "undefined")

	{

		if (d.className == "cache")

			d.className = "";

		else

			d.className = "cache";

	}

}

</script>

------------------

<a href="#" onclick="return sw('onglet');">Switch</a>

<div id="onglet">

Texte

</div>

Chambres d'hote tavel
Séjours en provence
Forum mariage

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.