Results 1 to 9 of 9

Thread: Smooth Navigational Menu v2.1

  1. #1
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Beverleyh; 07-14-2013 at 10:05 PM. Reason: Formatting

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Quote Originally Posted by jstan View Post
    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?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 edited by lankeeyankee; 07-23-2013 at 04:00 AM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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 View Post
    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?
    Last edited by jscheuer1; 07-24-2013 at 08:45 PM. Reason: punctuation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    lankeeyankee (07-24-2013)

  8. #7
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Attached Files Attached Files
    Last edited by lankeeyankee; 07-23-2013 at 08:50 AM.

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Smooth Navigational Menu (v2.0)
    By 7moonlight in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 09-28-2013, 03:31 AM
  2. Help with Smooth Navigational Menu (v1.51)
    By anasttin in forum Dynamic Drive scripts help
    Replies: 17
    Last Post: 12-28-2012, 11:47 PM
  3. Resolved Smooth Navigational Menu
    By waynef in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-09-2010, 04:16 PM
  4. Smooth Navigational Menu
    By thundercode in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-18-2009, 10:03 PM
  5. Help with Smooth Navigational Menu
    By Marty M in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-16-2009, 08:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •