Posted By

elightbo on 04/30/07


Tagged

javascript


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jonhenshaw
luman


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.