Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] setTimeout, menu i jego dzialanie
Forum PHP.pl > Forum > Po stronie przeglądarki
ein
28.11.2005, 20:31:02
mialabym do Was taka prosbe, otoz zalezy mi na opoznieniu np. 3 sekundowym wyswietlania podmenu.
posluzylam sie wiec funkcja setTimeout ale niestety nie dziala.

czy zechcielibyscie rzucic okiem i moze wychwycic blad? a moze jest jakis lepszy sposob na rozwiazanie tego problemu?
oto kod:
[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>Horizontal Drop Down Menus</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  6. <script type="text/javascript"> 
  7. // JavaScript Document 
  8.  
  9. function menu(no) { 
  10.  
  11.         root = document.getElementById(no); 
  12.         for (i=0; i<root.childNodes.length; i++) { 
  13.             node = root.childNodes[i]; 
  14.              
  15.                 node.onmouseover= setTimeout(function() { 
  16.                 this.className=this.className +  no; 
  17.                 },5*1000); 
  18.                 node.onmouseout=setTimeout(function() { 
  19.                 this.className=this.className.replace( no, ""); 
  20.                 },5*1000); 
  21.              
  22.         } 
  23. } 
  24.  
  25. </script> 
  26. <style type="text/css"> 
  27. @import "style3.css"; 
  28. </style> 
  29. </head> 
  30. <body> 
  31. <ul id="over" onMouseOver="menu('over')"> 
  32.   <li><a href="#">Home</a></li> 
  33.   <li><a href="#">About</a> 
  34.     <ul> 
  35.       <li><a href="#">History</a></li> 
  36.       <li><a href="#">Team</a></li> 
  37.       <li><a href="#">Offices</a></li> 
  38.     </ul> 
  39.   </li> 
  40.   <li><a href="#">Services</a> 
  41.     <ul> 
  42.       <li><a href="#">Web Design</a></li> 
  43.       <li><a href="#">Internet Marketing</a></li> 
  44.       <li><a href="#">Hosting</a></li> 
  45.       <li><a href="#">Domain Names</a></li> 
  46.       <li><a href="#">Broadband</a></li> 
  47.     </ul> 
  48.   </li> 
  49.   <li><a href="#">Contact Us</a> 
  50.     <ul> 
  51.       <li><a href="#">United Kingdom</a></li> 
  52.       <li><a href="#">France</a></li> 
  53.       <li><a href="#">USA</a></li> 
  54.       <li><a href="#">Australia</a></li> 
  55.     </ul> 
  56.   </li> 
  57. </ul> 
  58. </body> 
  59. </html>
[XML] pobierz, plaintext

a to css:
[XML] pobierz, plaintext 
  1. body { 
  2.     font: normal 11px verdana; 
  3.     } 
  4.  
  5. ul { 
  6.     margin: 0; 
  7.     padding: 0; 
  8.     list-style: none; 
  9.     width: 150px; /* Width of Menu Items */ 
  10.     border-bottom: 1px solid #ccc; 
  11.     } 
  12.      
  13. ul li { 
  14.     position: relative; 
  15.     } 
  16.      
  17. li ul { 
  18.     position: absolute; 
  19.     left: 149px; /* Set 1px less than menu width */ 
  20.     top: 0; 
  21.     display: none; 
  22.     } 
  23.  
  24. /* Styles for Menu Items */ 
  25. ul li a { 
  26.     display: block; 
  27.     text-decoration: none; 
  28.     color: #777; 
  29.     background: #fff; /* IE6 Bug */ 
  30.     padding: 5px; 
  31.     border: 1px solid #ccc; /* IE6 Bug */ 
  32.     border-bottom: 0; 
  33.     } 
  34.      
  35. ul.nana li a { 
  36.     display: block; 
  37.     text-decoration: none; 
  38.     color: red; 
  39.     background: #fff; /* IE6 Bug */ 
  40.     padding: 5px; 
  41.     border: 1px solid #ccc; /* IE6 Bug */ 
  42.     border-bottom: 0; 
  43.     } 
  44.  
  45. html ul li { float: left; height: 1%; } 
  46. html ul li a { height: 1%; } 
  47.  
  48.  
  49. li:hover ul, li.over ul { display: block; } 
  50. li:hover ul, li.nana ul { display: block; }
[XML] pobierz, plaintext


to znaczy jak nie ma setTimeout to dziala, ale niestety zalezy mi na tym opoznieniu no i kombinuje i sie nie udaje.

pozdrowienia!
GandalfTheWhite
28.11.2005, 21:11:09
Cytat(ein @ 2005-11-28 19:31:02)
                node.onmouseout=setTimeout(function() {
                this.className=this.className.replace( no, "");
                },5*1000);

żle urzywasz setTimeout mad.gif , należy tak
[HTML] pobierz, plaintext 
  1. function przypis() { 
  2.                   this.className=this.className.replace( no, "");
  3.                 }
  4. function timer() {
  5.  window.setTimeout(przypis,5*1000)
  6. }
  7. node.onmouseover= timer
[HTML] pobierz, plaintext
ein
28.11.2005, 23:55:25
no niestety tak jak mi napisales to sie nawet nie parsuje sadsmiley02.gif

czy ktos ma jakis pomyl jak to rozwiazac?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.