We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

elightbo on 04/30/07


Tagged

javascript


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

jonhenshaw
luman
inamorix


Sons of suckerfish dropdown IE fix


Published in: JavaScript 


This code is used to take care of third level drop-downs in IE for the sons of suckerfish dropdown. Inserts iframes in third levels due to select items having an infinite z-index in IE. The original fix addressed second-level elements.

Based on: http://www.loadedguntheory.com/devblog/director/list/b5349120-f9ca-1027-b38e-00508df3c0f7.html And: http://www.htmldog.com/articles/suckerfish/dropdowns/

  1. <script type="text/javascript">
  2. <!--//--><![CDATA[//><!--
  3. function insertAfter(newElement,targetElement) {
  4. var parent = targetElement.parentNode;
  5. if(parent.lastChild == targetElement) {
  6. parent.appendChild(newElement);
  7. } else {
  8. parent.insertBefore(newElement, targetElement.nextSibling);
  9. }
  10. }
  11.  
  12. sfHover = function() {
  13. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  14. for (var i=0; i<sfEls.length; i++) {
  15. sfEls[i].onmouseover=function() {
  16. this.className += " sfhover";
  17. var submenu = (this.getElementsByTagName("UL"))
  18. if(submenu.length) {
  19. var iframe = $(document.createElement("iframe"))
  20. iframe.setAttribute("scrolling", "no")
  21. iframe.setAttribute("frameborder", "0")
  22. iframe.addClassName('menu_iframe');
  23. $("nav").insertBefore( iframe )
  24. var ulSub = $(submenu[0]);
  25. if ( $(this).up(0) != $("nav") ) {
  26. parentWidth = this.up(0).scrollWidth
  27. parentOffset = this.up(0).offsetLeft + this.up(1).offsetLeft + 999
  28. offsetTop = this.up(0).offsetTop + this.offsetTop + 3
  29. iframe.style.left = parentWidth + parentOffset
  30. iframe.style.top = offsetTop;
  31. }
  32. else {
  33. iframe.style.top = ulSub.offsetTop + this.offsetTop + 2;
  34. iframe.style.left = ulSub.offsetLeft + this.offsetLeft;
  35. }
  36. iframe.style.width = ulSub.scrollWidth;
  37. iframe.style.height = ulSub.clientHeight;
  38. iframe.style.display = "inline";
  39. } //if submenu.length
  40. } //mouseover
  41. sfEls[i].onmouseout=function() {
  42. this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  43. document.getElementsByClassName("menu_iframe").each(function(node) {
  44. node.style.display = "none";
  45. });
  46. } //mouseout
  47. } //for
  48. } //sfHover
  49. if (window.attachEvent) window.attachEvent("onload", sfHover);
  50. //--><!]]>
  51. </script>

Report this snippet 

You need to login to post a comment.