Help - Search - Members - Calendar
Full Version: JAVASCRIPT MASTER NEEDED
Forums > Resource Center > Webmasters' Corner > Resolved Topics
add1cted2f1re
Apr 1 2006, 11:09 PM
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>
guilinger123
Apr 2 2006, 03:21 AM
I was lloking at your source code, and I found out why Panic! at the disco isn't showing up.

QUOTE
<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
Apr 2 2006, 12:37 PM
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....
guilinger123
Apr 2 2006, 11:51 PM
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
Apr 3 2006, 04:09 PM
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
guilinger123
Apr 3 2006, 04:56 PM
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
Apr 3 2006, 05:35 PM
OH REILI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


i neeeeeeeeeeeeed you

bad

get on AIM
Mulder
Apr 3 2006, 05:56 PM
..just use iframes.

they're so much easier.

unless im completely misunderstanding what you're trying to do.
guilinger123
Apr 3 2006, 06:32 PM
QUOTE(add1cted2f1re @ Apr 3 2006, 3:35 PM) *
OH REILI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
i neeeeeeeeeeeeed you

bad

get on AIM

You should PM her.
talcumpowder
Apr 3 2006, 07:11 PM
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
Apr 3 2006, 07:26 PM
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
Apr 3 2006, 08:04 PM
well, since you solved it, ill just close this.

topic closed
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.