JAVASCRIPT MASTER NEEDED, help w/ the collapsible menu reili gave me Options

[add1cted2f1re]

look at this:
http://phoenixf1re.melilyn.com/avatars.php


see the submenu things "fall out boy" and "panic! at the disco" (well, panic! at the disco doesnt show up at all)?

well i want those to appear when i click "music"... so that i have a sublink type thing

so you would click "Music" and then the subcategories would appear

i KNOW its gotta do with this part of the code

CODE

<script type="text/javascript">



var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
        if(el.style.display != "block"){ //DynamicDrive.com change
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="submenu") //DynamicDrive.com change
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

and just in case... my page's code for the menu:

CODE

<div class="menutitle" onclick="SwitchMenu('sub1')"><font size=2>MUSIC</font></div>
<span class="submenu" id="sub1">

<div class="subtitle" onclick="SwitchMenu('sub2')"><font size=2>Fall Out Boy</font></div>
<span class="submenu" id="sub2">
<img src="images/avatars/fob/1.jpg" hspace=1>
<img src="images/avatars/fob/2.jpg" hspace=1>
<img src="images/avatars/fob/3.jpg" hspace=1>
<img src="images/avatars/fob/4.jpg" hspace=1>
<img src="images/avatars/fob/5.jpg" hspace=1>
<img src="images/avatars/fob/6.jpg" hspace=1>
<img src="images/avatars/fob/7.jpg" hspace=1>
<img src="images/avatars/fob/8.jpg" hspace=1>
<img src="images/avatars/fob/9.jpg" hspace=1>
<img src="images/avatars/fob/10.jpg" hspace=1>
<img src="images/avatars/fob/11.jpg" hspace=1>
<img src="images/avatars/fob/12.jpg" hspace=1>
<img src="images/avatars/fob/13.jpg" hspace=1>
<img src="images/avatars/fob/14.jpg" hspace=1>
</span>

<div class="subtitle" onclick="SwitchMenu('sub3')"><font size=2>Panic! At the Disco</font></div>
<span class="submenu" id="sub3">
<img src="images/avatars/patd/1.jpg" hspace=1>
<img src="images/avatars/patd/2.jpg" hspace=1>
<img src="images/avatars/patd/3.jpg" hspace=1>
<img src="images/avatars/patd/4.jpg" hspace=1>
<img src="images/avatars/patd/5.jpg" hspace=1>
<img src="images/avatars/patd/6.gif" hspace=1>
<img src="images/avatars/patd/7.jpg" hspace=1>
<img src="images/avatars/patd/8.jpg" hspace=1>
<img src="images/avatars/patd/9.jpg" hspace=1>
<img src="images/avatars/patd/10.jpg" hspace=1>
<img src="images/avatars/patd/11.jpg" hspace=1>
<img src="images/avatars/patd/12.jpg" hspace=1>
<img src="images/avatars/patd/13.jpg" hspace=1>
<img src="images/avatars/patd/14.jpg" hspace=1>
<img src="images/avatars/patd/15.jpg" hspace=1>
<img src="images/avatars/patd/16.jpg" hspace=1>
<img src="images/avatars/patd/17.jpg" hspace=1>
<img src="images/avatars/patd/18.jpg" hspace=1>
<img src="images/avatars/patd/19.gif" hspace=1>
</span>

[Elleusion]

I was lloking at your source code, and I found out why Panic! at the disco isn't showing up.

<div class="menutitle" onclick="SwitchMenu('sub1')"><font size=2>MUSIC</font></div>
<span class="submenu" id="sub1">

<div class="subtitle" onclick="SwitchMenu('sub2')"><font size=2>Fall Out Boy</font></div>
<span class="submenu" id="sub2">
<img src="images/avatars/fob/1.jpg" hspace=1>
<img src="images/avatars/fob/2.jpg" hspace=1>
<img src="images/avatars/fob/3.jpg" hspace=1>
<img src="images/avatars/fob/4.jpg" hspace=1>
<img src="images/avatars/fob/5.jpg" hspace=1>
<img src="images/avatars/fob/6.jpg" hspace=1>
<img src="images/avatars/fob/7.jpg" hspace=1>
<img src="images/avatars/fob/8.jpg" hspace=1>
<img src="images/avatars/fob/9.jpg" hspace=1>
<img src="images/avatars/fob/10.jpg" hspace=1>
<img src="images/avatars/fob/11.jpg" hspace=1>
<img src="images/avatars/fob/12.jpg" hspace=1>
<img src="images/avatars/fob/13.jpg" hspace=1>
<img src="images/avatars/fob/14.jpg" hspace=1>
you need to add </span> here

<div class="subtitle" onclick="SwitchMenu('sub3')"><font size=2>Panic! At the Disco</font></div>
<span class="submenu" id="sub3">
<img src="images/avatars/patd/1.jpg" hspace=1>
<img src="images/avatars/patd/2.jpg" hspace=1>
<img src="images/avatars/patd/3.jpg" hspace=1>
<img src="images/avatars/patd/4.jpg" hspace=1>
<img src="images/avatars/patd/5.jpg" hspace=1>
<img src="images/avatars/patd/6.gif" hspace=1>
<img src="images/avatars/patd/7.jpg" hspace=1>
<img src="images/avatars/patd/8.jpg" hspace=1>
<img src="images/avatars/patd/9.jpg" hspace=1>
<img src="images/avatars/patd/10.jpg" hspace=1>
<img src="images/avatars/patd/11.jpg" hspace=1>
<img src="images/avatars/patd/12.jpg" hspace=1>
<img src="images/avatars/patd/13.jpg" hspace=1>
<img src="images/avatars/patd/14.jpg" hspace=1>
<img src="images/avatars/patd/15.jpg" hspace=1>
<img src="images/avatars/patd/16.jpg" hspace=1>
<img src="images/avatars/patd/17.jpg" hspace=1>
<img src="images/avatars/patd/18.jpg" hspace=1>
<img src="images/avatars/patd/19.gif" hspace=1>
</span>

[add1cted2f1re]

thanks!

but that only solved part ONE of my issue...


now go back to that page and see what happens... when you click the FOB or P!ATD buttons they collapse....

[Elleusion]

Was this meant to have the avatars go when you click on the subtitle, or is it supossed to come in with the subtitle?

[add1cted2f1re]

i want it so u click the category, and then when you do that... the SUBcategories appear and you chose one of them, and when you click one of them, the avatars of that subcategory appear

[Elleusion]

Can you give me the link of the tutorial you used?

Nevermind, I found it.
And while I'm looking at it, it doesn't look like it was made to do what you want it to? Idk. Did you ask Reili?

[add1cted2f1re]

OH REILI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


i neeeeeeeeeeeeed you

bad

get on AIM

[Mulder]

..just use iframes.

they're so much easier.

unless im completely misunderstanding what you're trying to do.

[Elleusion]

OH REILI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
i neeeeeeeeeeeeed you

bad

get on AIM

You should PM her.

[talcumpowder]

Okay, okay... Gosh. The script isn't meant to do that without serious editing. HEY! Why don't you just do different numbered spans within the original one...? Oh, wait... I know why.

CODE

<span class="submenu" id="sub1">

You need that part too. For each of the sub sections. Like tables.
&don't forget to close everything.

[add1cted2f1re]

that didnt work reili

it HAS to do w/ the javascript in my header doesnt it?
//edit//

yeah


YAY

i was right

and i figured it out

thnx reili for getting me started though

the problem was that i had only this:

CODE

function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
        if(el.style.display != "block"){ //DynamicDrive.com change
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="submenu") //DynamicDrive.com change
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

and i need to have this part:

CODE

function SwitchMenu2(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
        if(el.style.display != "block"){ //DynamicDrive.com change
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="subsubmenu") //DynamicDrive.com change
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

IM SO PROUD OF MYSELF!

[Mulder]

well, since you solved it, ill just close this.

topic closed