93jordanaj
asked on
Why do some of my JavaScript / CSS Sprites work and not others?
I'm using this 3-level navigation menu that uses JavaScript to open/close the tree when the open/close icons are clicked.
The idea is that the buttons that open/close the tree will change on click using CSS sprites to show a '+' and a '-' icon.
It works fine for the top-level, but not for the second level. Any ideas why?
JavaScript:
CSS:
HTML:
I've attached the images being used as the sprite.
So in this example the buttons related to 'parent 1' and 'parent 2' correctly toggle. The icons related to 'child 1.2' do not change, but should.
Here is a working example as currently stands: http://www.alexjordan.co.uk/tests/nav/
icons.png
The idea is that the buttons that open/close the tree will change on click using CSS sprites to show a '+' and a '-' icon.
It works fine for the top-level, but not for the second level. Any ideas why?
JavaScript:
<script type="text/javascript">
<!--
function toggle(id) {
var ul = document.getElementById(id+"-ul");
var p = document.getElementById(id+"-p");
var c = document.getElementById(id+"-c");
if(!ul.style.display || ul.style.display == "none"){
ul.style.display = 'block';
p.style.backgroundPosition = '40px 0';
c.style.backgroundPosition = '40px 20px';
}
else{
ul.style.display = 'none';
p.style.backgroundPosition = '0 0';
c.style.backgroundPosition = '0 20px';
}
}
//-->
</script>
CSS:
#nav{float:left;width:230px;overflow:hidden;}
#nav ul{float:left;width:230px;}
#nav li{float:left;width:210px;padding:10px;border-bottom:#CCC 1px solid;}
#nav li a{text-decoration:none;font-weight:bold;color:#777;font-size:14px;line-height:16px;}
#nav li div{float:left;width:16px;height:16px;background:url(../images/icons/icons.png) 0 0;margin:0 6px 0 0;cursor:pointer;}
#nav li ul{width:196px;padding:0 0 0 14px;display:none;}
#nav li ul li{width:196px;padding:10px 0 0 0;border:none;}
#nav li ul li a{font-size:12px;line-height:14px;}
#nav li ul li div{float:left;width:14px;height:14px;background:url(../images/icons/icons.png) 0 -19px;margin:0 4px 0 0;cursor:pointer;}
#nav li ul .none{width:178px;padding:10px 0 0 18px;}
#nav li ul li ul{width:182px;display:none;}
#nav li ul li ul li{width:172px;padding:10px 0 0 10px;}
#nav li ul li ul li a{font-weight:normal;}
HTML:
<div id="nav">
<ul>
<li><div id="nav-1-p" onClick="toggle('nav-1');"></div><a href="#">Parent 1</a>
<ul id="nav-1-ul">
<li class="none"><a href="#">Child 1.1</a></li>
<li><div id="nav-12-c" onClick="toggle('nav-12');"></div><a href="#">Child 1.2</a>
<ul id="nav-12-ul">
<li><a href="#">Grandchild 1.2.1 this is an example of multiple lines</a></li>
</ul>
</li>
</ul>
<li><div id="nav-2-p" onClick="toggle('nav-2');"></div><a href="#">Parent 2</a>
<ul id="nav-2-ul">
<li class="none"><a href="#">Child 1.1</a></li>
</ul>
</li>
</ul>
</div>
I've attached the images being used as the sprite.
So in this example the buttons related to 'parent 1' and 'parent 2' correctly toggle. The icons related to 'child 1.2' do not change, but should.
Here is a working example as currently stands: http://www.alexjordan.co.uk/tests/nav/
icons.png
ASKER
Thanks for your feedback. I'll try and update based on selecting classes as you suggest.
What JavaScript would I use to implement and remove the classes? ...I started learning JavaScript yesterday, this is my first attempt :)
What JavaScript would I use to implement and remove the classes? ...I started learning JavaScript yesterday, this is my first attempt :)
document.getElementById('s omeid').cl assName
references the classname attribute of the specified element.
changing the class is as simple as:
document.getElementById('s omeid).cla ssName='ne wclass';
You might find this reference to DOM properties and methods[ helps.
Cd&
references the classname attribute of the specified element.
changing the class is as simple as:
document.getElementById('s
You might find this reference to DOM properties and methods[ helps.
Cd&
ASKER
I made a slight amendment to try to make use of classes as suggested (baby steps!), sadly it didn't work. Would you mind offering some feedback based on what I changed. The tree opens, but doesn't close with the following:
.open is simply {display:block;} By default ul is {display:none;} as per my original post.
<script type="text/javascript">
<!--
function toggle(id) {
var ul = document.getElementById(id+"-ul");
var p = document.getElementById(id+"-p");
var c = document.getElementById(id+"-c");
if(!ul.style.display || ul.style.display == "none"){
ul.className = "open";
p.style.backgroundPosition = '40px 0';
c.style.backgroundPosition = '40px 20px';
}
else{
ul.className = "";
p.style.backgroundPosition = '0 0';
c.style.backgroundPosition = '0 20px';
}
}
//-->
</script>
.open is simply {display:block;} By default ul is {display:none;} as per my original post.
There is not much I can do with it based in bits and pieces of code. You need to post a link to the page so I can see what it is doing; and it is almost time for the football game.
Cd&
Cd&
ASKER
http://www.alexjordan.co.uk/tests/nav/
Thanks for looking into this. I'm sure it's just a case of trying to grasp the basics. All I really need is for:
- ul to open and close when the respective '+' or '-' button is clicked
- '+' or '-' to swap on click
- The ability to have the tree automatically opened when on a child/grandchild page with the '+' or '-' set as appropriate
Wouldn't have thought it would have been too tricky, but the JavaScript side is something out of my current skillset.
Thanks for looking into this. I'm sure it's just a case of trying to grasp the basics. All I really need is for:
- ul to open and close when the respective '+' or '-' button is clicked
- '+' or '-' to swap on click
- The ability to have the tree automatically opened when on a child/grandchild page with the '+' or '-' set as appropriate
Wouldn't have thought it would have been too tricky, but the JavaScript side is something out of my current skillset.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
the proper way to do it is to declare separate classes for each state, and then all the scripting does is change the className. Not only is it more reliable it is also more efficient to swap className.
Cd&