Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1485 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1675698
Flefle
Posté le 23-01-2008 à 15:20:02  profilanswer
 

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">
  48. /***********************************************
  49. * Scrollable Menu Links- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  50. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  51. * This notice must stay intact for legal use
  52. ***********************************************/
  53. //configure path for left and right arrows
  54. var goleftimage='pointer2.gif'
  55. var gorightimage='pointer.gif'
  56. //configure menu width (in px):
  57. var menuwidth=1024
  58. //configure menu height (in px):
  59. var menuheight=50
  60. //Specify scroll buttons directions ("normal" or "reverse" ):
  61. var scrolldir="normal"
  62. //configure scroll speed (1-10), where larger is faster
  63. var scrollspeed=6
  64. //specify menu content
  65. var menucontents2='<nobr> Burp</nobr>'
  66. 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>'
  67. ////NO NEED TO EDIT BELOW THIS LINE////////////
  68. var iedom=document.all||document.getElementById
  69. var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
  70. var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
  71. if (scrolldir=="reverse" ){
  72. var tempswap=leftdircode
  73. leftdircode=rightdircode
  74. rightdircode=tempswap
  75. }
  76. if (iedom)
  77. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
  78. var actualwidth=''
  79. var cross_scroll, ns_scroll
  80. var loadedyes=0
  81. function fillup(){
  82. if (iedom){
  83. cross_scroll=document.getElementById? document.getElementById("test2" ) : document.all.test2
  84. cross_scroll.innerHTML=menucontents
  85. actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp" ).offsetWidth
  86. }
  87. else if (document.layers){
  88. ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
  89. ns_scroll.document.write(menucontents)
  90. ns_scroll.document.close()
  91. actualwidth=ns_scroll.document.width
  92. }
  93. loadedyes=1
  94. }
  95. window.onload=fillup
  96. function moveleft(){
  97. if (loadedyes){
  98. if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
  99. cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
  100. }
  101. else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
  102. ns_scroll.left-=scrollspeed
  103. }
  104. lefttime=setTimeout("moveleft()",50)
  105. }
  106. function moveright(){
  107. if (loadedyes){
  108. if (iedom&&parseInt(cross_scroll.style.left)<0)
  109. cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
  110. else if (document.layers&&ns_scroll.left<0)
  111. ns_scroll.left+=scrollspeed
  112. }
  113. righttime=setTimeout("moveright()",50)
  114. }
  115. if (iedom||document.layers){
  116. with (document){
  117. write('<table border="0" cellspacing="0" cellpadding="2">')
  118. write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
  119. write('<td width="'+menuwidth+'px" valign="top">')
  120. if (iedom){
  121. write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
  122. write('<div id="test2" style="position:absolute;left:0;top:0">')
  123. write('</div></div>')
  124. }
  125. else if (document.layers){
  126. write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
  127. write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
  128. }
  129. write('</td>')
  130. write('<td valign="middle"> <a href="#" '+rightdircode+'>')
  131. write('<img src="'+gorightimage+'"border=0></a>')
  132. write('</td></table>')
  133. }
  134. }
  135. </script>
  136. </head>
  137. <body>
  138.  <h1>Test</h1>
  139. </body>
  140. </html>
  141. Merci,
  142. ++


Message édité par Flefle le 25-01-2008 à 18:16:32
mood
Publicité
Posté le 23-01-2008 à 15:20:02  profilanswer
 

n°1676846
levarex
Posté le 25-01-2008 à 16:05:36  profilanswer
 

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

n°1676908
Flefle
Posté le 25-01-2008 à 18:15:32  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[PHP] conditions multiples dans un switch - problème de design patternProblème d'utilisation des objets définis par l'utilisateur
[resolu]image dynamique en phpProblème avec overflow et sa barre...
[C] problème avec scanf()Listes et sort [résolu]
[Resolu] Ajout dynamique onclick et problème d'auto-executionProbleme mise en ligne d'un site web
petit problème d'allignement 
Plus de sujets relatifs à : [Résolu]Problème avec un menu défilant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR