Affichage layer (problème)

toto2525 · 23 Novembre 2007

Bonjour,

J'ai trouvé un bout de script sur le web et n'étant pas un pro du javascript je voudrais l'adapter à mon cas : je souhaiterai que lorsqu'on sélectionne un produit dans une liste déroulante le produit s'affiche en dessous de cette liste, j'utilise donc un peu de javascript + des div (visibility:hidden) mais le souci c'est que les produits qui sont cachés lors du chargement de la page occupe quand même la place sous ma liste déroulante (même s'ils ne sont pas visibles), je ne sais si je suis bien clair mais bon, voici mon code :

<html>
<head>
<script type="text/javascript">

</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
</head>
<body>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center"><select name="produit" class="listederoulante" onChange="AffLayer(this)">
<option value="nul" selected>--- Sélectionnez un produit ---</option>
<option value="nul">---------------------------------------------</option>
<option value="produit1">Produit 1</option>
<option value="produit2">Produit 2</option>
<option value="produit3">Produit 3</option>
</select></td>
</tr>
</table><br><br>
<div id="produit1" style="position:relative; top:0px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°1...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit2" style="position:relative; top:-175px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°2...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit3" style="position:relative; top:-350px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°3...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte de la page continue ici...</td>
</tr>
</table><br><br>
</body>
</html>

Lorsq'on clique dans la liste ça marche bien le seul souci est qu'il a un grand espace blanc (vide) entre la liste déroulante et le dernier de mes div, j'aimerai donc supprimer (ou réduire) cette espace blanc (vide), quelqu'un peut-il m'aider ?

Merci pour vos réponses.

nexxen · 23 Novembre 2007

la propriété "visibility: hidden" cache l'élément sur lequel elle est appliquée SANS modifier le flux de la page: l'élément est visible mais conserve sa place, d'ou l'espace blanc.
Essaye avec "display:none" pour masquer tes DIV et "display:block" pour les afficher

toto2525 · 23 Novembre 2007

Merci nexxen pour ta réponse.

Que dois-je modifier : le code javascript ou la balise div ?

Peux-tu m'aider un peu ?

nexxen · 23 Novembre 2007

toto2525 a dit:
Que dois-je modifier : le code javascript ou la balise div ?

Les deux ! Remplace style="...; visibility: hidden" par style="...; display: none" sur les DIV et dans le js ...style.visibility="hidden" et ...style.visibility="visible" respectivement par style.display="none" et style.display="block"
Tu devras probablement viré également l'attribut top des styles de tes DIV... pour qu'ils apparaissent au bon endroit.

toto2525 · 23 Novembre 2007

Merci nexxen.

Et qu'est-ce que tu fait avec les 2 "visibility=" avec le "hide" et "show" ci-dessous :

if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}

nexxen · 24 Novembre 2007

Tu laisses tomber ! Cette syntaxe est exclusivement destinée à ce bon vieux Netscape 4 et il n'est plus utilisé que par des paleonorditologue lors de leurs recherches sur l'Internet du siecle dernier !

Il est souvent préférable de s'assurer que ton site, les feuilles de styles et le javascript se dégradent de façon acceptable (certains disent élégante...) et que le site reste utilisable. Dans ton cas, si l'effet d'apparition ne fonctionne pas parce que javascript n'est pas activé ou obsolète, il faudrait que tu t'assure que ce n'est pas préjudiciable pour l'utilisateur : est-ce que l'info est accessible autrement, l'info est-elle indispensable etc...

Si javascript revient en force ces derniers temps c'est d'une part en raison des progrès des navigateurs modernes et d'autre part, parce que des bibliothèques (prototype, jquery, simpleJS...) facilitent le codage en gommant les différences qui subsistent entre ces navigateurs. Mais pour apprendre (les bases en tout cas), rien de mieux que de coder pour un navigateur dans un premier temps (FF par exemple qui supporte bien les standards) puis de choisir et d'utiliser l'une de ces bibli...

toto2525 · 24 Novembre 2007

Merci nexxen j'ai fait les changements mais ça marche pas :cry:

Voici mon code les changements effectués :

<html>
<head>
<script type="text/javascript">

</SCRIPT>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
</head>
<body>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center"><select name="produit" class="listederoulante" onChange="AffLayer(this)">
<option value="nul" selected>--- Sélectionnez un produit ---</option>
<option value="nul">---------------------------------------------</option>
<option value="produit1">Produit 1</option>
<option value="produit2">Produit 2</option>
<option value="produit3">Produit 3</option>
</select></td>
</tr>
</table><br><br>
<div id="produit1" style="display:none;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°1...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit2" style="display:none;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°2...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit3" style="display:none;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°3...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte de la page continue ici...</td>
</tr>
</table><br><br>
</body>
</html>

Vois-tu quelque chose qui ne va pas ?