Affichage layer (problème)

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics

toto2525
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 125
Inscription: Jeu Sep 20, 2007 11:11

Affichage layer (problème)

Message le Ven Nov 23, 2007 15:32

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">
<!--
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
WRInaute discret
 
Messages: 68
Inscription: Jeu Déc 30, 2004 17:54

Message le Ven Nov 23, 2007 16:03

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
WRInaute occasionnel
 
Messages: 125
Inscription: Jeu Sep 20, 2007 11:11

Message le Ven Nov 23, 2007 16:24

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
WRInaute discret
 
Messages: 68
Inscription: Jeu Déc 30, 2004 17:54

Message le Ven Nov 23, 2007 17:18

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
WRInaute occasionnel
 
Messages: 125
Inscription: Jeu Sep 20, 2007 11:11

Message le Ven Nov 23, 2007 22:09

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
WRInaute discret
WRInaute discret
 
Messages: 68
Inscription: Jeu Déc 30, 2004 17:54

Message le Sam Nov 24, 2007 10:05

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
WRInaute occasionnel
 
Messages: 125
Inscription: Jeu Sep 20, 2007 11:11

Message le Sam Nov 24, 2007 13:26

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">
<!--
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 ?


Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités