ugrás a tartalomhoz

Bubbling efektus JavaScript

Soolt · 2009. Dec. 12. (Szo), 20.33
A gondom a következő:

Tegyük fel van 2 DIV-em. Legyen A div, aminek a belsejében van egy láthatalan B div. Az A div onMouseOver eseményének hatására láthatóvá vállik a B div. A gondom az, hogy ha ráviszem az egeret a B div-re akkor létrejön az A div onMouseOut eseménye, holott tulajdonképpen még mindig benne van az egér az A divben hiszen a B div is benne van vagyis nem vittem le az egeret a szülő divről

---------------
|               |
|           ---------------
|          |               |
|       A  |       B       |
|          |               |
|           ---------------
|               |
 ---------------


Azt szeretném elérni, hogy a B div ismét eltünjön, ha az A divről lehúzom az egeret!
Tehát az onMouseOut eseménye az A divnek csak akkor jöjjön létre, ha az összes gyerekéről is levittem az egeret!

(Persze ezt bármekkora mélységig, mondjuk a B divben is lehet egy C div)


---------------
|               |
|           ---------------
|          |               |
|       A  |       B    ---------  
|          |           |    C    |
|           -----------|         |
|               |       ---------
 ---------------


Ahol a C div szintén láthatlan, amíg a B-re rá nem viszem az egeret és ha ráhúztam az egeret a B-ről C-re, akkor megint ne fusson le az onMouseOutja sem az A-nak sem a B-nek Viszont, ha a C-ről lehúzom jobbra az egert (tehát nem lessz rajta egyiken sem) akkor tünjön el C is és B is. Tahát úgy működjön mint egy simma legördülő menü, csak épp nem fussanak le a fölösleges események!
‹ onKeyPress backspace nem működik ie-ben iframe átlátszóság ›
 ■
1

CSS

toxin · 2009. Dec. 13. (V), 13.16
Tahát úgy működjön mint egy simma legördülő menü, csak épp nem fussanak le a fölösleges események!


most az a kérdés, hogy lehet a CSS alapú legördülő menüt javascript-el szimulálni, szóval
  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" xml:lang="en">  
  3.     <head>  
  4.         <title></title>  
  5.         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
  6.         <style type="text/css">  
  7.               
  8.             ul {  
  9.                 padding: 1px;  
  10.                 margin: 0;  
  11.                 list-style: none;  
  12.             }  
  13.               
  14.             ul#first {  
  15.                 width: 600px;  
  16.                 height: 600px;  
  17.                 background-color: red;  
  18.             }  
  19.               
  20.             ul#second {  
  21.                 width: 400px;  
  22.                 height: 400px;  
  23.                 margin: 100px 0 0 400px;  
  24.                 background-color: blue;  
  25.                 display: none;  
  26.             }  
  27.               
  28.             ul#first:hover ul#second, ul#first.hover ul#second {  
  29.                 display: block;  
  30.             }  
  31.               
  32.             ul#third {  
  33.                 width: 200px;  
  34.                 height: 200px;  
  35.                 margin: 100px 0 0 300px;  
  36.                 background-color: green;  
  37.                 display: none;  
  38.             }  
  39.               
  40.             ul#second:hover ul#third, ul#second.hover ul#third {  
  41.                 display: block;  
  42.             }  
  43.         </style>  
  44.         <script type="text/javascript">  
  45.             ie6hoverification = function(){  
  46.                 var listElems = document.body.getElementsByTagName("UL");  
  47.                 for (var i = 0; i < listElems.length; i++) {  
  48.                     listElems[i].onmouseover = function(){  
  49.                         this.className += " hover"  
  50.                     }  
  51.                     listElems[i].onmouseout = function(){  
  52.                         thisthis.className = this.className.replace(new RegExp(" hover\\b"), "");  
  53.                     }  
  54.                 }  
  55.             }  
  56.             if (window.attachEvent)   
  57.                 window.attachEvent("onload", ie6hoverification);  
  58.         </script>  
  59.     </head>  
  60.     <body>  
  61.         <ul id="first">  
  62.             <li>  
  63.                 <ul id="second">  
  64.                     <li>  
  65.                         <ul id="third">  
  66.                             <li>  
  67.                             </li>  
  68.                         </ul>  
  69.                     </li>  
  70.                 </ul>  
  71.             </li>  
  72.         </ul>  
  73.     </body>  
  74. </html>  
magyarán div-el és javascript-el kéne megoldani CSS + egymásba ágyazott ul,li tag-okkal létrehozott legördülő menüt, mert minek amikor CSS-el ez level 1-es task...

üdv Csaba
2

Javascript menü

Soolt · 2009. Dec. 13. (V), 13.18
Javascriptel szeretném, mert a lista helyett divek lennének merta fenti példádban szereplő li tegekben egyéb dolgok is lennének és ugye IE-ben nem igazán lehet egyéb teget tenni a LI-be, mondjuk egy másik divet vagy akár egy egés html-ben formázott dolgot. Vagyis a formázhatóság miatt nem jó a lista.

Tudod semmi baj nem lenne, hogy lefutnak a gyerekek eseményei hatására a szülők azonos eseményei is, ha IE-ben nem érződne annyira a JavaScript kezelésének lassúsága. Mozillában tökéletesen megy és egyébben is persze, Opera... stb de az IE miatt valahogy ki kelle kerülnöm ezt a bubbling efektust. Mondjuk IE-ben is megy csak érződik, hogy lassú, ha nagya mélység. Mondjuk a C divben is vagy egy D dív
3

lista vagy nemlista

erenon · 2009. Dec. 13. (V), 16.15
1) Teljesen lényegtelen, hogy listát használsz vagy divet, a css megoldás szempontjából
2) Minden mehet az li elembe, IE-ben is, tisztességesen kell resetelni a tulajdonságait, vagy szükség esetén hackelni.

3) A legfontosabb: JS esetén kizárod a látogatóid közül azokat, akiknél nincs JS. Ez pedig a navigáció esetében nagyon kritikus, teljesen ellenjavallt. Ha tudod, csináld CSS-ben, crossbrowser JS-el _sokkal_ több szívás van.