Slashdot menu initial loading...

[xziler8]

I've implemented the slashdot (switch) menu and everytime the page reloads the menu draws out all the submenus before collapsing to my default collapseAll state.
Does anyone know of a work-around?

[midnightmonk]

First of all... I want to say this menu is GREAT.

however.... I would also like to know if the menu will be able load in a collapsed state.

This would be nice especially if I have banners/images beneath the menu and the layout doesnt look like a "jumping glitch" when its loading.

knemoto@hotmail.com

[DimX]

Well here's a workaround but it's kinda tricky...

1) Change all <span class="title"...-s to <span class="titlehidden"...

2) Cange all <div class="submenu">-s to <div class="submenu" style="display: none">

3) Change src of the arrows from expanded.gif to collapsed.gif

4) Replace the init() function with this one:

function init(){
    menu = getElementsByClassName("sdmenu", "div", document)[0];
    titles = getElementsByClassName("title", "span", menu);
    submenus = getElementsByClassName("submenu", "div", menu);
    arrows = getElementsByClassName("arrow", "img", menu);
    for(i=0; i<Math.max(titles.length, submenus.length); i++) {
        titles[i].onclick = gomenu;
        arrows[i].onclick = gomenu;
        heights[i] = submenus[i].getElementsByTagName("a").length * 26;
        submenus[i].style.height = contractall_default ? "0px" : heights[i]+"px";
    }
    if(remember)
	restore();
}

I havent tried, but it should work though.

[midnightmonk]

It works like a charm! thanks so much!!!

[Joris]

Did you've changed somthing in the script ? I keep getting an error: titles = empty or no object. It must be somewhere in the init-function but I can't find it.

[blah33]

I've done all corrections, yet it does not work -- the last section is collapsed but cannot be restored:

http://go.drv.pl/slash/

Any clues?

[Lan]

Hi, I love this menu, and it has a great look. I am trying to use a simple version of it and what I wanted to avoid was to have the small reloading that makes the menu flicker. I have implemented everything as you wrote but now the menu is stock and doesn't collapse at all and nothing works.

I have attached the code, can you see any mistakes in it? It would be great if you could provide me with any help at all.

Many thanks Lan http://www.dynamicdrive.com/forums/i...s/confused.gif

<p><a href="javascript:slash_expandall()" class="expandall">+</a></p>
<p><a href="javascript:slash_contractall()" class="contractall">x</a></p>

<div class="sdmenu">
<span class="titlehidden"><img src="slashfiles/collapsed.gif" class="arrow" alt="-" />Online Directions</span>
<div class="submenu" style="display:none">
<a href="http://www.lanfrancoaceti.com/home.php">Home</a>
<a href="http://www.lanfrancoaceti.com/news.php">Press Releases</a>
<a href="http://www.lanfrancoaceti.com/galleries.php">Galleries</a>
<a href="http://www.lanfrancoaceti.com/poems.php">Visual Poems</a>

<a href="http://www.lanfrancoaceti.com/exhibitions.php">Exhibitions</a>
<a href="http://www.lanfrancoaceti.com/residencies.php">Residencies</a>
<a href="http://www.lanfrancoaceti.com/artprojects.php">Art Projects</a>

<a href="http://www.lanfrancoaceti.com/papers.php">Papers</a>

<script type="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, '');
return false;
}
//-->
</script>
<a href="http://www.lanfrancoaceti.com/arsmanifesta" onclick="return popup(this, 'notes')"> Blog: Arsmanifesta</a>


<!--end of content-->




<a href="http://www.lanfrancoaceti.com/contact.php">Contact</a>
<a href="http://www.lanfrancoaceti.com/links.php">Links</a>


</div>

</div>

and this is the javascript

var remember = true; //Remember menu states, and restore them on next visit.
var contractall_default= false; //Should all submenus be contracted by default? (true or false)

var menu, titles, submenus, arrows, bypixels;
var heights = new Array();

var n = navigator.userAgent;
if(/Opera/.test(n)) bypixels = 2;
else if(/Firefox/.test(n)) bypixels = 3;
else if(/MSIE/.test(n)) bypixels = 2;

/////DD added expandall() and contractall() functions/////

function slash_expandall(){
if (typeof menu!="undefined"){
for(i=0; i<Math.max(titles.length, submenus.length); i++){
titles[i].className="title";
arrows[i].src = "slashfiles/expanded.gif";
submenus[i].style.display="";
submenus[i].style.height = heights[i]+"px";
}
}
}

function slash_contractall(){
if (typeof menu!="undefined"){
for(i=0; i<Math.max(titles.length, submenus.length); i++){
titles[i].className="titlehidden";
arrows[i].src = "slashfiles/collapsed.gif";
submenus[i].style.display="none";
submenus[i].style.height = 0;
}
}
}


/////End DD added functions///////////////////////////////


function init(){
menu = getElementsByClassName("sdmenu", "div", document)[0];
titles = getElementsByClassName("title", "span", menu);
submenus = getElementsByClassName("submenu", "div", menu);
arrows = getElementsByClassName("arrow", "img", menu);
for(i=0; i<Math.max(titles.length, submenus.length); i++) {
titles[i].onclick = gomenu;
arrows[i].onclick = gomenu;
heights[i] = submenus[i].offsetHeight;
submenus[i].style.height = submenus[i].offsetHeight+"px";
}
if(remember)
restore();
}

function restore() {
if(getcookie("menu") != null) {
var hidden = getcookie("menu").split(",");
for(var i in hidden) {
titles[hidden[i]].className = "titlehidden";
submenus[hidden[i]].style.height = "0px";
submenus[hidden[i]].style.display = "none";
arrows[hidden[i]].src = "slashfiles/collapsed.gif";
}
}
else if (contractall_default) //DD added code
slash_contractall() //DD added code

}

function gomenu(e) {
if (!e)
var e = window.event;
var ce = (e.target) ? e.target : e.srcElement;
var sm;
for(var i in titles) {
if(titles[i] == ce || arrows[i] == ce)
sm = i;
}
if(parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2) {
hidemenu(sm);
} else if(parseInt(submenus[sm].style.height) < 2) {
titles[sm].className = "title";
showmenu(sm);
}
}

function hidemenu(sm) {
var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
submenus[sm].style.height = (parseInt(submenus[sm].style.height)-nr)+"px";
var to = setTimeout("hidemenu("+sm+")", 30);
if(parseInt(submenus[sm].style.height) <= nr) {
clearTimeout(to);
submenus[sm].style.display = "none";
submenus[sm].style.height = "0px";
arrows[sm].src = "slashfiles/collapsed.gif";
titles[sm].className = "titlehidden";
}
}

function showmenu(sm) {
var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
submenus[sm].style.display = "";
submenus[sm].style.height = (parseInt(submenus[sm].style.height)+nr)+"px";
var to = setTimeout("showmenu("+sm+")", 30);
if(parseInt(submenus[sm].style.height) > (parseInt(heights[sm])-nr)) {
clearTimeout(to);
submenus[sm].style.height = heights[sm]+"px";
arrows[sm].src = "slashfiles/expanded.gif";
}


}

function store() {
var hidden = new Array();
for(var i in titles) {
if(titles[i].className == "titlehidden")
hidden.push(i);
}
putcookie("menu", hidden.join(","), 30);
}

function getElementsByClassName(strClassName, strTagName, oElm){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

function putcookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate);
}

function getcookie(c_name) {
if(document.cookie.length > 0) {
var c_start = document.cookie.indexOf(c_name + "=");
if(c_start != -1) {
c_start = c_start + c_name.length + 1;
var c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1)
c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return null;
}

window.onload = init;
if(remember) window.onunload = store;

[Lan]

after yesterday what I did was to change to Html to normal and have the javascript altered as suggested in this post

Although now the script works in Firefox it doesn't work in Safari and I don't even know what it does in IE... It is a good script and has a great design feeling to it, if only didn't collapse and close on loading the page Firefox (still haven't solved the issue) and if it could work seamlessly across browsers...

If you have any suggestions, please post them here... I will try to upload a page on my site that is under reconstruction for all to see... Pleaaseee, give me your feedback and help on this script..... I am sure that for some of the wizards here it wold be just a question of looking at it...

Thanks a lot,

Lan

[Monstar]

Well here's a workaround but it's kinda tricky...

1) Change all <span class="title"...-s to <span class="titlehidden"...

2) Cange all <div class="submenu">-s to <div class="submenu" style="display: none">

3) Change src of the arrows from expanded.gif to collapsed.gif

4) Replace the init() function with this one:

function init(){
    menu = getElementsByClassName("sdmenu", "div", document)[0];
    titles = getElementsByClassName("title", "span", menu);
    submenus = getElementsByClassName("submenu", "div", menu);
    arrows = getElementsByClassName("arrow", "img", menu);
    for(i=0; i<Math.max(titles.length, submenus.length); i++) {
        titles[i].onclick = gomenu;
        arrows[i].onclick = gomenu;
        heights[i] = submenus[i].getElementsByTagName("a").length * 26;
        submenus[i].style.height = contractall_default ? "0px" : heights[i]+"px";
    }
    if(remember)
	restore();
}

I havent tried, but it should work though.

Nice!