Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2771 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">
  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
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. }
  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>

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

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.146 secondes

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