Menu Problem

[alexjewell]

I'm creating a menu for a restaurant website where once a particular part of the menu is clicked, the background image of the menu changes to match the selection. Basically, the javascript tells the particular link to change to a new class and a particular div to change its background image. For some reason, this isn't working. Here's my code:



function caterMenu(menu){
cont = document.getElementById("cater_men");
sand = document.getElementById("lsand");
side = document.getElementById("lside");
salad = document.getElementById("lsalad");
hors = document.getElementById("lhors");
pasta = document.getElementById("lpasta");
pasta2 = document.getElementById("lpasta2");
more = document.getElementById("lmore");
dessert = document.getElementBy("ldessert");
if(menu == "sand"){
sand.className="chover";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}
else if(menu == "side"){
sand.className="";
side.className="chover";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}
else if(menu == "salad"){
sand.className="";
side.className="";
salad.className="chover";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}
else if(menu == "hors"){
sand.className="";
side.className="";
salad.className="";
hors.className="chover";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}
else if(menu == "pasta"){
sand.className="";
side.className="";
salad.className="";
hors.className="";
pasta.className="chover";
pasta2.className="";
more.className="";
dessert.className="";
}
else if(menu == "pasta2"){
sand.className="";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="chover";
more.className="";
dessert.className="";
}
else if(menu == "more"){
sand.className="";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="chover";
dessert.className="";
}
else if(menu == "dessert"){
sand.className="";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="chover";
}
else{
menu="sand";
sand.className="chover";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}
cont.style.backgroundImage="url(imgs/catering_"+menu+".gif)";
}




<div id="cater_nav_cont">
<div id="cater_nav">
<div>
<a href="#" id="lsand" class="chover" onclick="caterMenu('sand')">Sandwiches</a> |
<a href="#" id="lside" onclick="caterMenu('side')">Sides</a> |
<a href="#" id="lsalad" onclick="caterMenu('salad')">Salads</a> |
<a href="#" id="lhors" onclick="caterMenu('hors')">Hors D'Oeurves</a> |
<a href="#" id="lpasta" onclick="caterMenu('pasta')">Pastas &amp; Main Courses</a>
(<a href="#" id="lpasta2" onclick="caterMenu('pasta2')">Cont.</a>) |
<a href="#" id="lmore" onclick="caterMenu('more')">More Specialties</a> |
<a href="#" id="ldessert" onclick="caterMenu('dessert')">Desserts &amp; Pastries</a>
</div>
</div>
</div>
<div id="cater_cont">
<div id="cater_cont_cont">
<div id="cater_container">
<div id="cater_men"></div>
</div>
<div id="cater_bot"></div>
</div>
</div>




#cater_nav_cont{
width: 100%;
text-align: center;
height: auto;
padding-bottom: 20px;}

#cater_nav{
width: auto;
padding: 7px 0px 7px 0px;
border-width: 1px 0px 1px 0px;
border-color: #AEAF6D;
border-style: solid;
background: #cc9;
margin: 0px auto;}

#cater_nav div{
margin: 0px 7px 0px 7px;}

#cater_nav a:link, #cater_nav a:active, #cater_nav a:visited{
color: #333;
font-weight: bold;}

#cater_nav a:hover, .chover{
color: #900 !important;
text-decoration: none !important;}

#cater_cont{
width: 100%;
height: auto;
text-align: center;}

#cater_cont_cont{
width: 500px;
height: 500px;
margin: 0px auto;}

#cater_left{
margin-right: 12px;}

#cater_right{
margin-left: 12px;}

#cater_container, #cater_bot{
width: 500px;}

#cater_container{
height: 476px;
background: transparent url(imgs/catering_top.jpg) no-repeat top center;
border-width: 1px 1px 0px 1px;
border-color: #333;
border-style: solid;}

#cater_bot{
background: #cc9 url(imgs/catering_bot.jpg) no-repeat bottom left;
border-width: 0px 1px 1px 1px;
border-color: #333;
border-style: solid;
height: 24px;}

#cater_container div{
background-color: transparent;
background-repeat: no-repeat;
background-position: center;}

#cater_men{
width: 500px;
height: 500px;
background: url(imgs/catering_sand.gif);}

[rangana]

I should point out that you miss highlighted:


dessert = document.getElementById("ldessert");


Otherwise, I'm not seeing anything odd.

If nothing works, up the rest of the markup, including the divs you were pointing out. Or better a link to the page in question.

[alexjewell]

That was it! Amazing how something so little can make the whole script worthless! Thanks :)

[jscheuer1]

You should also formally declare your variables to avoid possible conflicts in some browsers with the elements themselves, and to avoid possible conflicts in all browsers with other scripts:


function caterMenu(menu){
var cont = document.getElementById("cater_men"),
sand = document.getElementById("lsand"),
side = document.getElementById("lside"),
salad = document.getElementById("lsalad"),
hors = document.getElementById("lhors"),
pasta = document.getElementById("lpasta"),
pasta2 = document.getElementById("lpasta2"),
more = document.getElementById("lmore"),
dessert = document.getElementById("ldessert");

But almost your entire code is overly verbose, repetitive:


function caterMenu(menu){
var ids = ['lsand', 'lside', 'lsalad', 'lhors', 'lpasta', 'lpasta2', 'lmore', 'ldessert'];
for (var i = ids.length - 1; i > -1; --i)
document.getElementById(ids[i]).className = '';
document.getElementById('l' + menu).className = 'chover';
document.getElementById('cater_men').style.backgroundImage="url(imgs/catering_"+menu+".gif)";
}

You could add to that to duplicate the default action of:


else{
menu="sand";
sand.className="chover";
side.className="";
salad.className="";
hors.className="";
pasta.className="";
pasta2.className="";
more.className="";
dessert.className="";
}

But I see nowhere else in your code that uses that. But here's how:


function caterMenu(menu){
var ids = ['lsand', 'lside', 'lsalad', 'lhors', 'lpasta', 'lpasta2', 'lmore', 'ldessert'];
for (var i = ids.length - 1; i > -1; --i)
document.getElementById(ids[i]).className = ''
menu = document.getElementById('l' + menu)? menu : 'sand';
document.getElementById('l' + menu).className = 'chover'
document.getElementById('cater_men').style.backgroundImage="url(imgs/catering_"+menu+".gif)";
}

[mburt]

Any particular reason you're not using:


for (var i = 0; i < ids.length; ++i)

?

[jscheuer1]

Any particular reason you're not using:


for (var i = 0; i < ids.length; ++i)

?

Time trials have shown it (your code quoted above) to be less efficient (though, of all the possible methods, it came in as second fastest I believe). There's an entire thread on this somewhere. It isn't really all that important in a case like this. However, since one never knows what use one's code may ultimately be put to, I favor using the more efficient method. If there were to be thousands or more items, the savings would be significant.

Additional savings can be had by setting the length value to a variable prior to the loop and using that 'constant' instead of forcing the loop to calculate the value each time. But care must be taken because some loops' success actually depend upon the possibility of their length's value changing during the loop.

[mburt]

If there were to be thousands or more items, the savings would be significant.

Ah, I see. I think I know what you're getting at, I did something before involving arrays with thousands of entries, and it was extremely slow.