Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: SDMenu on first run

  1. #1
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default SDMenu on first run

    1) Script Title: Slashdot

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

    3) Describe problem:

    The very first time I run my menu in a new browser all the menu items are expanded. How can I make it so that the first time they are all closed?

    Thanks for your help!

    p.s.: Here's the code...

    Code:
    function SDMenu(id) {
    	if (!document.getElementById || !document.getElementsByTagName)
    		return false;
    	this.menu = document.getElementById(id);
    	this.submenus = this.menu.getElementsByTagName("div");
    	this.remember = true;
    	this.speed = 5;
    	this.markCurrent = true;
    	this.oneSmOnly = true;
    }
    SDMenu.prototype.init = function() {
    	var mainInstance = this;
    	for (var i = 0; i < this.submenus.length; i++)
    		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
    			mainInstance.toggleMenu(this.parentNode);
    		};
    	if (this.markCurrent) {
    		var links = this.menu.getElementsByTagName("a");
    		for (var i = 0; i < links.length; i++)
    			if (links[i].href == document.location.href) {
    				links[i].className = "current";
    				break;
    			}
    	}
    	if (this.remember) {
    		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
    		var match = regex.exec(document.cookie);
    		if (match) {
    			var states = match[1].split("");
    			for (var i = 0; i < states.length; i++)
    				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
    		}
    	}
    };
    SDMenu.prototype.toggleMenu = function(submenu) {
    	if (submenu.className == "collapsed")
    		this.expandMenu(submenu);
    	else
    		this.collapseMenu(submenu);
    };
    SDMenu.prototype.expandMenu = function(submenu) {
    	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var links = submenu.getElementsByTagName("a");
    	for (var i = 0; i < links.length; i++)
    		fullHeight += links[i].offsetHeight;
    	var moveBy = Math.round(this.speed * links.length);
    	
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight + moveBy;
    		if (newHeight < fullHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "";
    			mainInstance.memorize();
    		}
    	}, 30);
    	this.collapseOthers(submenu);
    };
    SDMenu.prototype.collapseMenu = function(submenu) {
    	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight - moveBy;
    		if (newHeight > minHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "collapsed";
    			mainInstance.memorize();
    		}
    	}, 30);
    };
    SDMenu.prototype.collapseOthers = function(submenu) {
    	if (this.oneSmOnly) {
    		for (var i = 0; i < this.submenus.length; i++)
    			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
    				this.collapseMenu(this.submenus[i]);
    	}
    };
    SDMenu.prototype.expandAll = function() {
    	var oldOneSmOnly = this.oneSmOnly;
    	this.oneSmOnly = false;
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className == "collapsed")
    			this.expandMenu(this.submenus[i]);
    	this.oneSmOnly = oldOneSmOnly;
    };
    SDMenu.prototype.collapseAll = function() {
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className != "collapsed")
    			this.collapseMenu(this.submenus[i]);
    };
    SDMenu.prototype.memorize = function() {
    	if (this.remember) {
    		var states = new Array();
    		for (var i = 0; i < this.submenus.length; i++)
    			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
    		var d = new Date();
    		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
    	}
    };
    Last edited by daretta; 03-31-2008 at 09:10 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Change your onload function to:
    Code:
    window.onload = function() {
    		myMenu = new SDMenu("my_menu");
    		myMenu.collapseAll() // This was previously myMenu.init()
    	};
    Note that this.remember=true; stores menu states in a cookie (expanded or collapsed)

    Turn it to false if you don't want the states be stored in the cookie.

    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much.

  4. #4
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry rangana...

    your hint didn't worked out

    With every page reload the sdmenu is now closed. But thats not how it should be. The sdmenu should stay open in the current category.

    Only at the FIRST load of the page the sdmenu should be collapsed and not expanded.

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    then turn it back to true
    Code:
    this.remember=false;
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i tried - but it didn't work out.

    Every time the page loads the menu collapse.
    so i have to turn it back to

    Code:
    window.onload = function() {
    		myMenu = new SDMenu("my_menu");
                    myMenu.init();
    	};

  7. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    So using the defaults myMenu.init() solved it for you?..

    ...you should also note the reason why the menus are expanded on the second load, is because it is stored in a cookie..

    Anyways, has the issue been resolved?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  8. #8
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No it's not solved.

    My Problem is:

    When a new user visits my site (he has never been on that site before -> no cookie is available) the sdmenu is expanded. But it should be collapsed.

    That's my problem. So the "myMenu.init();" function has to be changed, that when no cookie is there -> show collapsed menu instead of expanded menu. And i have no idea how to make that.

  9. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Alright, now I understand what you mean

    Give all your div's just right the header spans a collapsed class
    Code:
    <div class="collapsed">
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  10. #10
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default



    Thanks rangana !

    Now it's working fine. It was just a css thing. Why didn'nt i see that on my own

    Have a nice Wednesday!

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
  •