Balise <DIV> capricieuse..!!
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:
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:
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&constr=Alstom">Alstom</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Bova">Bova</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Evobus">Evobus</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Heuliez">Heuliez</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=IRISBUS">IRISBUS</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Iveco">Iveco</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Karosa">Karosa</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Man">Man</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Mercedes">Mercedes</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Neoplan">Neoplan</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Scania">Scania</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Setra">Setra</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Solaris">Solaris</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Temsa">Temsa</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&constr=Van%20Hool">VanHool</a></td>
<td class="menu_H" colspan="2"> <a href="correspondance.php?page=navig&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... :roll:
Nerik :D
