|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
toto2525
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 120
|
 Posté le : Ven Nov 23, 2007 15:32 Sujet du message: Affichage layer (problème) |
|
|
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 :
| Citation: |
<html>
<head>
<script type="text/javascript">
<!--
var encours="";
function AffLayer(produit) {
var nomlayer=produit.options[produit.selectedIndex].value;
if (document.all) {
if (encours!="") {document.all[encours].style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.all[encours].style.visibility="visible";}
}
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
if (document.getElementById) {
if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
}
}
//-->
</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
WRInaute discret
Inscrit le: 30 Déc 2004
Messages: 68
|
| Posté le : Ven Nov 23, 2007 16:03 Sujet du message: Affichage layer (problème) |
|
|
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
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 120
|
| Posté le : Ven Nov 23, 2007 16:24 Sujet du message: Affichage layer (problème) |
|
|
Merci nexxen pour ta réponse.
Que dois-je modifier : le code javascript ou la balise div ?
Peux-tu m'aider un peu ? |
|
| |
|
|
nexxen
WRInaute discret
Inscrit le: 30 Déc 2004
Messages: 68
|
| Posté le : Ven Nov 23, 2007 17:18 Sujet du message: Affichage layer (problème) |
|
|
| toto2525 a écrit: |
| 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
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 120
|
| Posté le : Ven Nov 23, 2007 22:09 Sujet du message: Affichage layer (problème) |
|
|
Merci nexxen.
Et qu'est-ce que tu fait avec les 2 "visibility=" avec le "hide" et "show" ci-dessous :
| Citation: |
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
|
|
|
| |
|
|
nexxen
WRInaute discret
Inscrit le: 30 Déc 2004
Messages: 68
|
| Posté le : Sam Nov 24, 2007 10:05 Sujet du message: Affichage layer (problème) |
|
|
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
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 120
|
| Posté le : Sam Nov 24, 2007 13:26 Sujet du message: Affichage layer (problème) |
|
|
Merci nexxen j'ai fait les changements mais ça marche pas 
Voici mon code les changements effectués :
| Citation: |
<html>
<head>
<script type="text/javascript">
<!--
var encours="";
function AffLayer(produit) {
var nomlayer=produit.options[produit.selectedIndex].value;
if (document.all) {
if (encours!="") {document.all[encours].style.display="none";}
encours=nomlayer;
if (nomlayer!="") {document.all[encours].style.display="block";}
}
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
if (document.getElementById) {
if (encours!="") {document.getElementById(encours).style.display="none";}
encours=nomlayer;
if (nomlayer!="") {document.getElementById(encours).style.display="block"";}
}
}
//-->
</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 ? |
|
| |
|
|
| |
|
|
