Smooth Navigational Menu v2.1

1) Script Title: Smooth Navigational Menu v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: does not open any menu layers in IE10. (Win7)

Thanks for any answer.

Well, the demo page works fine in IE10 so the issue must be caused by something else on your page.

If you post the URL to your website, we can help you narrow down the problem.

Thanks for your answer.

If I use script debugging (show script errros) I get the following error message:
The property "className" of an undefined or null reference can not be set. (translated)
Row: 52
Character: 3
ddsmoothmenu.js

www.obernolte.de after changing some security options the site is now working

I am still using Version 1.5

Code:

---

//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Menu created: Nov 12, 2008

//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/s...ghlight=smooth

//** Feb 11th, 09" (v1.02): The currently active main menu item (LI A) now gets a CSS class of ".selected", including sub menu items.

//** May 1st, 09" (v1.3):
//** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v'
//** 2) In IE6, shadows are now always disabled

//** July 27th, 09" (v1.31): Fixed bug so shadows can be disabled if desired.
//** Feb 2nd, 10" (v1.4): Adds ability to specify delay before sub menus appear and disappear, respectively. See showhidedelay variable below

//** Dec 17th, 10" (v1.5): Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+, IE9+, Opera9.5+, or Safari3+/Chrome. Only .js file changed.

var ddsmoothmenu={

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'fileadmin/ddsmooth/down.gif', 30], right:['rightarrowclass', 'fileadmin/ddsmooth/right.gif']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)

getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
  var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
  $menucontainer.html("Loading Menu...")
  $.ajax({
    url: setting.contentsource[1], //path to external menu file
    async: true,
    error:function(ajaxrequest){
      $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
    },
    success:function(content){
      $menucontainer.html(content)
      ddsmoothmenu.buildmenu($, setting)
    }
  })
},


buildmenu:function($, setting){
  var smoothmenu=ddsmoothmenu
  var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
  $mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
  var $headers=$mainmenu.find("ul").parent()
  $headers.hover(
    function(e){
      $(this).children('a:eq(0)').addClass('selected')
    },
    function(e){
      $(this).children('a:eq(0)').removeClass('selected')
    }
  )
  $headers.each(function(i){ //loop through each LI header
    var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
    var $subul=$(this).find('ul:eq(0)').css({display:'block'})
    $subul.data('timers', {})
    this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
    $subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
    $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
      '<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
      +'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
      + '" style="border:0;" />'
    )
    if (smoothmenu.shadow.enable && !smoothmenu.css3support){ //if shadows enabled and browser doesn't support CSS3 box shadows
      this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
      if (this.istopheader)
        $parentshadow=$(document.body)
      else{
        var $parentLi=$curobj.parents("li:eq(0)")
        $parentshadow=$parentLi.get(0).$shadow
      }
      this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
    }
    $curobj.hover(
      function(e){
        var $targetul=$subul //reference UL to reveal
        var header=$curobj.get(0) //reference header LI as DOM object
        clearTimeout($targetul.data('timers').hidetimer)
        $targetul.data('timers').showtimer=setTimeout(function(){
          header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
          var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
          menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
          if ($targetul.queue().length<=1){ //if 1 or less queued animations
            $targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
            if (smoothmenu.shadow.enable && !smoothmenu.css3support){
              var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
              var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
              if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
                header.$shadow.css({opacity:1})
              }
              header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
            }
          }
        }, ddsmoothmenu.showhidedelay.showdelay)
      },
      function(e){
        var $targetul=$subul
        var header=$curobj.get(0)
        clearTimeout($targetul.data('timers').showtimer)
        $targetul.data('timers').hidetimer=setTimeout(function(){
          $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
          if (smoothmenu.shadow.enable && !smoothmenu.css3support){
            if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
              header.$shadow.children('div:eq(0)').css({opacity:0})
            }
            header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
          }
        }, ddsmoothmenu.showhidedelay.hidedelay)
      }
    ) //end hover
  }) //end $headers.each()
  if (smoothmenu.shadow.enable && smoothmenu.css3support){ //if shadows enabled and browser supports CSS3 shadows
    var $toplevelul=$('#'+setting.mainmenuid+' ul li ul')
    var css3shadow=parseInt(smoothmenu.shadow.offsetx)+"px "+parseInt(smoothmenu.shadow.offsety)+"px 5px #aaa" //construct CSS3 box-shadow value
    var shadowprop=["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow properties
    for (var i=0; i<shadowprop.length; i++){
      $toplevelul.css(shadowprop[i], css3shadow)
    }
  }
  $mainmenu.find("ul").css({display:'none', visibility:'visible'})
},

init:function(setting){
  if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
    var mainmenuid='#'+setting.mainmenuid
    var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
    document.write('<style type="text/css">\n'
      +mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
      +mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
    +'</style>')
  }
  this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow
  jQuery(document).ready(function($){ //ajax menu?
    if (typeof setting.contentsource=="object"){ //if external ajax menu
      ddsmoothmenu.getajaxmenu($, setting)
    }
    else{ //else if markup menu
      ddsmoothmenu.buildmenu($, setting)
    }
  })
}

} //end ddsmoothmenu variable

---

Quote:

---

Originally Posted by jstan

www.obernolte.de after changing some security options the site is now working

---

Im on iPhone now and will not be back on PC until tomorrow, but are you saying that the problem is fixed?

I have found what might be a bug. I am using v2.1 vertically, and in ie10 and 9 when the shadow is set to true the shadow is overlaying the menu instead of being under it. I have tried out a lot of different things in the css but nothing can get the shadow to go under the menu, I started out with the default styles from the stylesheet. Any ideas? It looks fine on your site but I noticed you are using a lower version of jquery, my site is using 1.9.1 and yours is using 1.8. Could this have something to do with it? I have been going around in circles for several hours. mantamusic dot com is my test site.

Also, in v1.5 one of the admins put in the ability to make the menu go up or down depending on the position in the page so the flyout menu would never go below the "fold" at the bottom of the screen and would "drop up". Is there any chance you could put that back in? I looked at the code between versions but the code is so different that I don't want to break anything.

Finally, do you have a "donate" button somewhere that I can donate some cash to as a thanks for all of the great scripts and super helpful script authors?

Last question first. Dynamic Drive doesn't accept donations. I do. There are several donation options at the bottom of each of my posts. None is required, and a donation does not necessarily mean I will perform any specific work.

As to the jQuery version and the shadow in IE 9 and 10. I just tested with jQuery 1.9.1 in IE 10 in both its native and IE 9 modes. No problem with the shadow there.

Are you aware that both of the css files have changed though? When updating from Smooth Nav 1.5 to Smooth Nav 2.1 you need to update to the new ddsmoothmenu.css and ddsmoothmenu-v.css files as well. And did you know that even if you are only using the vertical menu that you need both the ddsmoothmenu.css and ddsmoothmenu-v.css files linked to the page? Oh, and even if you did update and are linking both css files to the page, if you edited either or both of those files, you might have done something to cause the problem.

There's no way to tell for sure what the problem is without seeing it though, even then it might just be browser configuration. But seeing it is the best way to figure out the problem.

If you want more help on that, please include a link to the page on your site that contains the problematic code so we can check it out.

In the meantime, I will look into modifying the current version so that it drops up if there's no room above the 'fold' for it to drop down. You say one of the admins did this? There's only one admin, ddadmin. Can you point to the post where he did it? I'm assuming you mean here:

http://www.dynamicdrive.com/forums/s...nstead-of-down

But there is no longer a modified file or files attached to his posts in that thread. Can you attach or link to it, the latter one where he says:

Quote:

---

Originally Posted by ddadmin

If both dropping down nor up obscures the sub menu due to the height of the sub menu plus that of the browser window, the 3rd option is to position the sub menu at the very top of the browser viewpoint. Try the below modified .js file, which adds to the previous one in doing that.

---

here or point to a thread where it is attached?

Hi John,

Thanks for your quick reply!

I figured out the problem, there was a strange clash with my main style sheet. It was a weird problem, but if anyone else runs into this make sure that the overriding style for your menu's div/container doesn't have a postition:relative. Once I took that out the problem was solved. The menu was in another div that held the entire left column of the page and that was where the problem was since the shadow has position:absolute.

Yes, that was the thread that I was talking about. I have attached that version so you can see the code. The modification looks to be on line 94.

I understand that giving a donation doesn't mean anything regarding additional help. I just wanted to support you guys, you are doing such an amazing service for people and I have benefited from using the free scripts so would like to give back. Since I can't offer any real help with code or support on the forum I figured money would be the best way to show my appreciation for all of the hard work and keeping these scripts free.

Thanks again for your help!

Matt

I see what you mean about the scripts being different enough to make applying that method to the current version virtually impossible. Also I noticed that it was only for vertical 'drop downs' ('fly outs' really, because they 'drop' to the right, or sometimes left). And then I wanted to make it consistent with the script's current ability to reposition the fly outs horizontally, which if the the window size changes, move to where they would have been at those new dimensions. Then I discovered that with vertical repositioning the scroll state of the window was even more important than resizing is as to where the fly outs should/would go.

To make a long story short here's a link to the new version (backup what you have, just in case, right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...dsmoothmenu.js

Works like a charm! Thank you so incredibly much!!!!

I signed up for the $25 monthly donation with IRC, thanks for pointing me to them, what a worthy cause.