PDA

View Full Version : SDMenu on first run



daretta
03-31-2008, 07:31 PM
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...



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=/";
}
};

rangana
04-01-2008, 06:38 AM
Change your onload function to:


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 ;)

daretta
04-01-2008, 07:11 AM
Thank you very much. :)

daretta
04-01-2008, 11:14 AM
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.

rangana
04-01-2008, 11:51 AM
then turn it back to true ;)


this.remember=false;

daretta
04-01-2008, 12:06 PM
:) i tried - but it didn't work out.

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



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

rangana
04-02-2008, 05:34 AM
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?

daretta
04-02-2008, 06:12 AM
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. :(

rangana
04-02-2008, 06:56 AM
Alright, now I understand what you mean ;)

Give all your div's just right the header spans a collapsed class :)


<div class="collapsed">


See if it helps ;)

daretta
04-02-2008, 07:44 AM
:D

Thanks rangana !

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

Have a nice Wednesday!

daretta
04-02-2008, 11:14 AM
But: (there's always a but) :)

When you give the class "collapsed" to the divs



<div class="collapsed">


there is one more problem if JS is off -> Then all menu are collapses and you cannot open the menu by click.

So do one more thing:



<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="sdmenu.css"/>');
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="sdmenu_nojs.css" />
</noscript>


In sdmenu_nojs.css change



div.sdmenu div.collapsed {
height: 25px;
}


to



div.sdmenu div.collapsed {
height: auto;
}

DrJon
04-18-2008, 01:45 PM
Sorry to kinda hijack a thread, but.....

I'm having the same problems, tried everything this thread suggests to no avail.

1st page opens - First menu item is expanded, all others collapsed (<div class="collapsed">) on all divs though.

Click on 2nd menu item, it expands; click on submenu item to go to new page, takes me there but collapses the menu item, which surely (and I would like) should stay expanded. The 1st menu item s still expanded even though we are now at a page referenced by the link in a sub of the 2nd menu item.

Tried the remember options, but the =true seems to fail. =false does work though.

Tried everything and am just about losing it :(

Any help gratefully received.

poison
04-02-2010, 11:09 AM
excuse me i'm an italian user.
I don't understand. Please help me.