Balise <DIV> capricieuse..!!

**nerik38** · 24/11/2005, 14h37

salut,

J'ai un problème avec une balise DIV au comportement étrange.

dans une page j'ai plusieurs zone DIV.. notamment en haut de la page ou se trouve le menu. Comme cette zone n'est pas très grande en hauteur comme en largeur. J'ai d'ailleurs un scrollbar latéral qui s'affiche. j'ai décidé d'empécher la scrollbar de s'afficher et de la remplacer par deux flèche à droite et à gauche du menu faisant défiler la zone. C'est là que commence le mystère....

j'ai réussi à faire un script qui tourne sous IE6 pour vérifier si le menu est plus grand que la zone <DIV> et si oui afficher les images qui remplaceront la barre de défilement. j'ai bien évidemment placé ces images dans 2 autres zones à droite et à gauche. Seulement sans que je comprenne pourquoi une des deux images ne s'affiche pas..!! elle ne s'affiche que quand je renomme avec le même nom que la zone que je veux faire défiler. Seulement quand je fais ça la fonction pour faire défiler ne marche pas...

:

:
voici mon code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
// fonction qui test si le menu est plus grand que la zone
 
function WidthTest(layer) {
  target=document.getElementById(layer)
  if (target.scrollLeft==target.scrollWidth)  {
  return "TRUE" ;}
  else { return "FALSE" ;}
}
 
// Fonction qui affiche les boutons si le menu est plus grand que la zone
 
function ScrollAffiche (sens,layer) {
  if (sens==1) sensTxt="droite";
  if (sens==2) sensTxt="gauche";
  if (WidthTest(layer)=="FALSE") {
   document.write("<img src=\"../Images/scroll_"+sensTxt+".jpg\" height=\"15\" width=\"15\" onclick=\"Scroll("+sens+",'"+layer+"')\"/>"); }
}
 
 
//fonction qui fait défiler la zone à droite ou à gauche
 
function Scroll(sens,layer) {
var P=GetScrollPos(layer);
  if (sens==1)
  document.getElementById(layer).scrollLeft=P+10;
 
  if (sens==2)
  document.getElementById(layer).scrollLeft=P-10;
}
 
 
//fonction qui retourne la position actuelle de la barre de défilement
 
function GetScrollPos(layer){
 
var target=document.getElementById(layer);
var res=target.scrollLeft;
 
return res;
}

Et voilà la partie HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<div style="position: absolute; z-index: 0; overflow: none; left: 225px; width: 15px; top: 5px; height: 15px;"  id="layer1">
 
 
<script language="JavaScript">ScrollAffiche(2,'layer2');</script>
 
</div>
 
<div id="layer2" style="position: absolute; height: 53px; z-index: 0; top: -2px; overflow: hidden; left: 259px; width: 679px;">
 
<table id="MenuH" align="center" border="0" cellpadding="5" cellspacing="3" height="15" width="80%">
  <tbody>
    <tr>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Alstom">Alstom</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Bova">Bova</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Evobus">Evobus</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Heuliez">Heuliez</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=IRISBUS">IRISBUS</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Iveco">Iveco</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Karosa">Karosa</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Man">Man</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Mercedes">Mercedes</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Neoplan">Neoplan</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Scania">Scania</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Setra">Setra</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Solaris">Solaris</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Temsa">Temsa</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Van%20Hool">VanHool</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Volvo">Volvo</a></td>
    </tr>
  </tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="2" height="15" width="95%">
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>
 
</div>
 
<div style="position: absolute; z-index: 0; overflow: auto; left: 955px; width: 27px; top: 5px; height: 29px;"  id="layer3">
 
 
<script language="JavaScript">ScrollAffiche(1,'layer2');</script>
 
</div>

je suis assez perplexe sur ce phénomène... il y a surement quelquechose qui m'échappe.. mais quoi...

si quelqu'un voit une solution à ce mystère...

Nerik

**Matthieu2000** · 24/11/2005, 14h49

Evite de faire ça.!

document.write("<img src=\"../Images/scroll_"+sensTxt+".jpg\" height=\"15\" width=\"15\" onclick=\"Scroll("+sens+",'"+layer+"')\"/>"); }

donne un nom/id à ton image, puis modifie la source de l'image

**nerik38** · 24/11/2005, 14h58

Dsl mathieu, je ne vois pas ce que tu veux dire??

**shwin** · 24/11/2005, 15h33

Ce qu'il veut dire, c'est au lieu de créé ton image avec un document.write. Met ton image en place avec une src null et quand il faut que tu affiche l'image, tu allimente ta src via ton fichier image.

De cette facon, c'est beaucoup plus propre et tu évite des document.write.

**nerik38** · 24/11/2005, 16h28

ok c'est ce que j'ai fait...

j'ai remplacé le document.write par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById(img).src="../Images/Scroll_droite.jpg";

et dans le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="monimage" height="15px" width="15px" src="" onclick="Scroll(2,'layer2')">

Le défilement marche bien mais l'image n'apparait pas..

et je suis sur du chemin... c pas par un document.getElementById(img).src qu'on alimente la source??

Et puis si jamais le menu est plus petit que la zone.. les boutons apparaitron quand même??

:

**shwin** · 24/11/2005, 16h34

Envoyé par nerik38

ok c'est ce que j'ai fait...

j'ai remplacé le document.write par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById(img).src="../Images/Scroll_droite.jpg";

et dans le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="monimage" height="15px" width="15px" src="" onclick="Scroll(2,'layer2')">

Le défilement marche bien mais l'image n'apparait pas..

et je suis sur du chemin... c pas par un document.getElementById(img).src qu'on alimente la source??

Et puis si jamais le menu est plus petit que la zone.. les boutons apparaitron quand même??

:

tu défini ton id comme étant "monimage" et tu call getElementById sur l'id "img". Call le sur "monimage" et ca devrais fonctionner beaucoup mieux

**nerik38** · 24/11/2005, 16h43

dsl là c de ma faut c paske j'ai pas tout mis.. en fait l'intégralité du code est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function ScrollAffiche (img,layer) {
  if (WidthTest(layer)=="FALSE" && img=="scrollLeft") {
  document.getElementById(img).src='../Images/Scroll_gauche.jpg';}}
  if (WidthTest(layer)=="FALSE" && img=="scrollRight") {
  document.getElementById(img).src='../Images/Scroll_droite.jpg';}
}

et pareil en HTML...
j'ai 2 images vides dans 2 zones: scrollLeft et scrollRight.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img onload="scrollAffiche('scrollLeft','layer2')" id="scrollLeft"  height="15px" width="15px"  onclick="Scroll(2,'layer2')">

**shwin** · 24/11/2005, 16h55

enleve le S majuscule a ta fonction et met un s minuscule. Ca va aller mieux

on va y arriver lache pas

**nerik38** · 24/11/2005, 17h22

je vais devenir dingue..!!

J'ai mis le nom de la fontion en majuscule mais ça ne marche toujours pas..!!! Niarf..!!!!

C'est vriament bizarre.. j'ai mis un document.write(img) après ma fonction et je l'ai appelé de la zone principale de la page avec une autre image avec un id="patapof" et en passant par des balises script et plus par un événement Onload.. là l'image ne s'affiche toujours pas mais le "patapof" apparait alors que dans les 2 petites zones du menu il n'y a même pas le nom de l'image..!!

:

je suis perplexe...

**nerik38** · 24/11/2005, 17h27

Au fait:

on va y arriver lache pas

merci pour ton soutien et ta patience shwin

**nerik38** · 24/11/2005, 17h30

Rectification ça marche dans la zone principale de la page..!!!

**shwin** · 24/11/2005, 17h32

tu peux me redonner le code ?

Avec les modifications que tu as effectué.

**nerik38** · 24/11/2005, 17h43

voilà pour la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function ScrollAffiche (img,layer) {
 
  if (WidthTest(layer)=="FALSE" && img=="scrollLeft") {
  document.getElementById(img).src='../Images/Scroll_gauche.jpg';}
  if (WidthTest(layer)=="FALSE" && img=="scrollRight") {
  document.getElementById(img).src='../Images/Scroll_droite.jpg';}
  document.write(img);
}

et voilà pour les images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
ZONE 1: flèche défilement vers la gauche
 
<div  style="position: absolute; z-index: 0; overflow: auto; left: 210px; width: 30px; top: 5px; height: 30px;"  id="layer1">
 
 <script language="JavaScript">ScrollAffiche('scrollLeft','layer2');</script>
<img id="scrollLeft"  height="15px" width="15px"  onclick="Scroll(2,'layer2')">
 
</div>
 
ZONE 2 : Menu
 
<div id="layer2" style="position: absolute; height: 53px; z-index: 3; top: -2px; overflow: hidden; left: 259px; width: 679px;">
 
<table id="MenuH" align="center" border="0" cellpadding="5" cellspacing="3" height="15" width="80%">
  <tbody>
    <tr>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Alstom">Alstom</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Bova">Bova</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Evobus">Evobus</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Heuliez">Heuliez</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=IRISBUS">IRISBUS</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Iveco">Iveco</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Karosa">Karosa</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Man">Man</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Mercedes">Mercedes</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Neoplan">Neoplan</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Scania">Scania</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Setra">Setra</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Solaris">Solaris</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Temsa">Temsa</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Van%20Hool">VanHool</a></td>
      <td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&amp;constr=Volvo">Volvo</a></td>
    </tr>
  </tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="2" height="15" width="95%">
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>
 
</div>
 
ZONE 3 : Flèche défilement vers la droite
 
<div style="position: absolute; z-index: 1; overflow: auto; left: 955px; width: 27px; top: 5px; height: 29px;"  id="layer3">
 
 <img onload="ScrollAffiche('scrollRight','layer2')" id="scrollRight"  height="15px" width="15px" onclick="Scroll(1,'layer2')">
 
 
</div>
 
ZONE 4 : zone principale ou l'image apparait... (Remarque: je ne laisse pas l'id scrollLeft en même temps sur l'image de la zone 4 et celle de la zone 1 c'est pour montrer que c'est la même chose mais que dans un cas ça marche et l'autre a marche po..!!)
 
<div id="Layer4" style="border: 1px none rgb(0, 0, 0); position: absolute; width: 803px; height: 475px; z-index: 1; left: 181px; top: 58px; visibility: inherit; overflow: auto;">
<img id="scrollLeft"  height="15px" width="15px"  onclick="Scroll(2,'layer2')">
<script language="JavaScript">ScrollAffiche('scrollLeft','layer2')</script>
 
</div>

Balise <DIV> capricieuse..!!

JavaScript

Vue hybride

Discussions similaires

Partager

Partager