[Résolu]Problème avec un menu défilant

Problème avec un menu défilant [Résolu] - HTML/CSS - Programmation

Marsh Posté le 23-01-2008 à 15:20:02    

Bonjour,
 
Donc j'ai trouvé un bout de code en JS, qui permet de faire défiler un texte quand on met la souris sur les deux images de chaque cotée.
Je veux l'utiliser pour un menu que je ferrais défiler ,sauf que les boutons ne s'affiche qu'une fois qu'ils sont en entier...
Bon ok je suis pas très explicite mais je pense que je plus simple de de faire un copier coller du code ci - dessous et vous verrez.
De plus pour l'exécuter il faut avoir firefox. Alors si vous voyez pourquoi ça passe pas sur IE...
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
  2. <html lang="fr">
  3. <head>
  4.  <title>Test</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <style type="text/css"><!--
  7.   /***********************************/
  8.   /*  Portes coulissantes  */
  9.   /**********************************/
  10.   #nav {
  11.    list-style: none ;
  12.    margin: 0 ;
  13.    padding: 0 ;
  14.    overflow: hidden ;  /* Création du contexte de formatage */
  15.    }
  16.   #nav li {
  17.    float: left ;
  18.    width: 150px ;
  19.    border: 1px solid #600 ;
  20.    margin-right: 1px ;
  21.    color: #fff ;
  22.    background: #c00 ;
  23.    }
  24.   #nav li a {
  25.    display: block ;
  26.    background: #900 url(t1.PNG) left top no-repeat ;
  27.    color: #fff ;
  28.    font: 1em "Trebuchet MS",Arial,sans-serif ;
  29.    line-height: 1em ;
  30.    padding: 30px 0 ;
  31.    text-align: center ;
  32.    text-decoration: none ;
  33.    }
  34.   #nav li a:hover, #nav li a:focus, #nav li a:active {
  35.    background: #033 url(lienCoulissant.png) right top no-repeat ;
  36.    text-decoration: underline ;
  37.    }
  38.   --></style>
  39.   <!--[if lt IE 7]>
  40.   <style type="text/css">
  41.   #nav {       /* Contexte de formatage pour IE6 */
  42.    overflow: visible ;
  43.    height: 1% ;
  44.    }
  45.   </style>
  46.   <![endif]-->
  47. <script type="text/javascript">
  49. /***********************************************
  50. * Scrollable Menu Links- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  51. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  52. * This notice must stay intact for legal use
  53. ***********************************************/
  55. //configure path for left and right arrows
  56. var goleftimage='pointer2.gif'
  57. var gorightimage='pointer.gif'
  58. //configure menu width (in px):
  59. var menuwidth=1024
  60. //configure menu height (in px):
  61. var menuheight=50
  62. //Specify scroll buttons directions ("normal" or "reverse" ):
  63. var scrolldir="normal"
  64. //configure scroll speed (1-10), where larger is faster
  65. var scrollspeed=6
  66. //specify menu content
  67. var menucontents2='<nobr> Burp</nobr>'
  69. var menucontents='<nobr><ul id="nav"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul></nobr>'
  71. ////NO NEED TO EDIT BELOW THIS LINE////////////
  73. var iedom=document.all||document.getElementById
  74. var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
  75. var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
  76. if (scrolldir=="reverse" ){
  77. var tempswap=leftdircode
  78. leftdircode=rightdircode
  79. rightdircode=tempswap
  80. }
  81. if (iedom)
  82. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
  83. var actualwidth=''
  84. var cross_scroll, ns_scroll
  85. var loadedyes=0
  86. function fillup(){
  87. if (iedom){
  88. cross_scroll=document.getElementById? document.getElementById("test2" ) : document.all.test2
  89. cross_scroll.innerHTML=menucontents
  90. actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp" ).offsetWidth
  91. }
  92. else if (document.layers){
  93. ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
  94. ns_scroll.document.write(menucontents)
  95. ns_scroll.document.close()
  96. actualwidth=ns_scroll.document.width
  97. }
  98. loadedyes=1
  99. }
  100. window.onload=fillup
  102. function moveleft(){
  103. if (loadedyes){
  104. if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
  105. cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
  106. }
  107. else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
  108. ns_scroll.left-=scrollspeed
  109. }
  110. lefttime=setTimeout("moveleft()",50)
  111. }
  113. function moveright(){
  114. if (loadedyes){
  115. if (iedom&&parseInt(cross_scroll.style.left)<0)
  116. cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
  117. else if (document.layers&&ns_scroll.left<0)
  118. ns_scroll.left+=scrollspeed
  119. }
  120. righttime=setTimeout("moveright()",50)
  121. }
  124. if (iedom||document.layers){
  125. with (document){
  126. write('<table border="0" cellspacing="0" cellpadding="2">')
  127. write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
  128. write('<td width="'+menuwidth+'px" valign="top">')
  129. if (iedom){
  130. write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
  131. write('<div id="test2" style="position:absolute;left:0;top:0">')
  132. write('</div></div>')
  133. }
  134. else if (document.layers){
  135. write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
  136. write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
  137. }
  138. write('</td>')
  139. write('<td valign="middle"> <a href="#" '+rightdircode+'>')
  140. write('<img src="'+gorightimage+'"border=0></a>')
  141. write('</td></table>')
  142. }
  143. }
  145. </script>
  146. </head>
  147. <body>
  149.  <h1>Test</h1>
  151. </body>
  152. </html>
  154. Merci,
  155. ++


Message édité par Flefle le 25-01-2008 à 18:16:32
Reply

Marsh Posté le 23-01-2008 à 15:20:02   

Reply

Marsh Posté le 25-01-2008 à 16:05:36    

Pas facile de comprendre ton pb.
 
mais bon, j'ai compris l'énoncé.
 
Je me suis penché sur ton pb et je pense avoir trouvé pourquoi ca marche comme ca (les boutons ne s'affiche qu'une fois qu'ils sont en entier).
 
En fait, ca vient du fait que dans ton menu on a affaire a des elements qui ne sont pas cote a cote mais les un en dessous des autres.
 
Quand tu vas scroller, quand il y aura la place pour afficher un element, il va le remonter.
 
Tu peux contourner le pb en utilisant un tableau (marche avec IE et firefox) :  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
  2. <html lang="fr">
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css"><!--
  7.   /***********************************/
  8.   /*  Portes coulissantes  */
  9.   /**********************************/
  10. #nav
  11. {
  12. list-style: none ;
  13. margin: 0 ;
  14. padding: 0 ;
  15. overflow: hidden ;  /* Création du contexte de formatage */
  16. }
  18. #nav table
  19. {
  20. float: left ;
  21. border: 1px solid #600 ;
  22. margin-right: 1px ;
  23. color: #fff ;
  24. background: #c00 ;
  25. }
  27. #nav table tr
  28. {
  29. float: left ;
  30. border: 1px solid #600 ;
  31. margin-right: 1px ;
  32. color: #fff ;
  33. background: #c00 ;
  34. }
  36. #nav tr td a
  37. {
  38. display: block ;
  39. background: #900 url(t1.PNG) left top no-repeat ;
  40. color: #fff ;
  41. font: 1em "Trebuchet MS",Arial,sans-serif ;
  42. line-height: 1em ;
  43. padding: 30px ;
  44. text-align: center ;
  45. text-decoration: none ;
  46. }
  48. #nav div a:hover, #nav li a:focus, #nav li a:active
  49. {
  50. background: #033 url(lienCoulissant.png) right top no-repeat ;
  51. text-decoration: underline ;
  52. }
  53. --></style>
  55. <!--[if lt IE 7]>
  56. <style type="text/css">
  57. #nav {       /* Contexte de formatage pour IE6 */
  58. overflow: visible ;
  59. height: 1% ;
  60. }
  61. </style>
  62. <![endif]-->
  63. <script type="text/javascript">
  65. /***********************************************
  66. * Scrollable Menu Links- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  67. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  68. * This notice must stay intact for legal use
  69. ***********************************************/
  70. //configure path for left and right arrows
  71. var goleftimage='pointer2.gif';
  72. var gorightimage='pointer.gif';
  73. //configure menu width (in px):
  74. var menuwidth=1024;
  75. //configure menu height (in px):
  76. var menuheight=50;
  77. //Specify scroll buttons directions ("normal" or "reverse" ):
  78. var scrolldir="normal";
  79. //configure scroll speed (1-10), where larger is faster
  80. var scrollspeed=6;
  81. //specify menu content
  82. var menucontents2='<nobr>Burp</nobr>';
  84. var menucontents='<table border="0" id="nav"><TR><TD><a href="#" title="aller à la section 1">item1</a></TD><TD><a href="#" title="aller à la section 2">item2</a></TD><TD><a href="#" title="aller à la section 3">item3</a></TD><TD><a href="#" title="aller à la section 4">item4</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD><TD><a href="#" title="aller à la section 5">item5</a></TD></TR></TABLE>'
  86. ////NO NEED TO EDIT BELOW THIS LINE////////////
  88. var iedom=document.all||document.getElementById;
  89. var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"';
  90. var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"';
  91. if (scrolldir=="reverse" )
  92. {
  93. var tempswap=leftdircode;
  94. leftdircode=rightdircode;
  95. rightdircode=tempswap;
  96. }
  97. if (iedom)
  98. {
  99. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>');
  100. }
  101. var actualwidth='';
  102. var cross_scroll, ns_scroll;
  103. var loadedyes=0;
  105. function fillup()
  106. {
  107. if (iedom)
  108. {
  109.  cross_scroll=document.getElementById? document.getElementById("test2" ) : document.all.test2;
  110.  cross_scroll.innerHTML=menucontents;
  111.  actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp" ).offsetWidth;
  112. }
  113. else if (document.layers)
  114. {
  115.  ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2;
  116.  ns_scroll.document.write(menucontents);
  117.  ns_scroll.document.close();
  118.  actualwidth=ns_scroll.document.width;
  119. }
  120. loadedyes=1
  121. }
  123. window.onload=fillup
  125. function moveleft()
  126. {
  127. if (loadedyes)
  128. {
  129.  if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth))
  130.  {
  131.   cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
  132.  }
  133.  else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
  134.  {
  135.   ns_scroll.left-=scrollspeed;
  136.  }
  137. }
  138. lefttime=setTimeout("moveleft()",50);
  139. }
  141. function moveright()
  142. {
  143. if (loadedyes)
  144. {
  145.  if (iedom&&parseInt(cross_scroll.style.left)<0)
  146.  {
  147.   cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
  148.  }
  149.  else if (document.layers&&ns_scroll.left<0)
  150.  {
  151.   ns_scroll.left+=scrollspeed;
  152.  }
  153. }
  154. righttime=setTimeout("moveright()",50);
  155. }
  157. if (iedom||document.layers)
  158. {
  159. with (document)
  160. {
  161.  write('<table border="0" cellspacing="0" cellpadding="2">');
  162.  write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>');
  163.  write('<td width="'+menuwidth+'px" valign="top">');
  164.  if (iedom)
  165.  {
  166.   write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">');
  167.   write('<div id="test2" style="position:absolute;left:0;top:0">');
  168.   write('</div></div>');
  169.  }
  170.  else if (document.layers)
  171.  {
  172.   write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">');
  173.   write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>');
  174.  }
  175.  write('</td>')
  176.  write('<td valign="middle"> <a href="#" '+rightdircode+'>');
  177.  write('<img src="'+gorightimage+'"border=0></a>');
  178.  write('</td></table>')
  179. }
  180. }
  182. </script>
  183. </head>
  184. <body>
  186. <h1>Test</h1>
  188. </body>
  189. </html>

Reply

Marsh Posté le 25-01-2008 à 18:15:32    

Merci!!
 
Cela correspond exactement a mon besoin!
 
++

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed