Javascript: Setting Z-Index on Multiple Elements (ID & Class)

Question

I have a javascript function that is supposed to hide and show layered divs by simply changing the z-index. I don't know if this is the best way to do it, but it works except for one issue. I have the content divs (absolutely positioned in CSS on top of each other), but I also have a navigation div (absolutely positioned in CSS at the bottom of the page) that should always remain on top. So I have this javascript code:

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByTagName('nav').style.zIndex = z++;
}
</script>

And I have this html:

<div id="1a" class="content" style="z-index:1;">Content</div>
<div id="1b" class="content">More Content</div>
<div id="1c" class="content">Even More Content</div>
<div class="nav" style="z-index:2;">
  <a href="#" onclick="showHide('1a')">1</a> 
| <a href="#" onclick="showHide('1b')">2</a> 
| <a href="#" onclick="showHide('1c')">3</a></div>

The problem is that the z-index line for the navigation div messes it up. Not only does it not execute, but anything I put after it doesn't get executed as well (even a basic alert). If I change navigation from a class to an id, it works fine, but I'm going to have multiple navigation divs on each page (multiple slides in a SlideDeck). I could just set the navigation div's z-index to 99999, but I wanted to see why it wasn't working in the "cleaner" way, since it looks like I might be making a basic mistake.

Thank you.

arussell84 · Accepted Answer · 2011-04-27 19:02:03Z

1

I'm not sure if this is exactly what you're after, but you need to create a loop for getElementsByTagName or getElementsByClassName:

var cells = table.getElementsByClassName('nav');
for (var i = 0; i < cells.length; i++) {
    cells[i].style.zIndex = z++;
}

Edit: Changed method call to getElementsByClassName. I initially just took what he wrote and added the loop.

edited Apr 27, 2011 at 19:02

answered Apr 27, 2011 at 17:49

arussell84

2,54318 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kcbanner Over a year ago

getElementsByTagName takes tag names as arguments, not classes.

Beau Over a year ago

Thanks a lot, arussell84, but that didn't quite fix it. I'm actually going to just put the nav div into each content div. That way, I can also easily deactivate the link for the active content div.

kcbanner · Accepted Answer · 2011-04-27 17:54:18Z

0

Looks like your problem is that you are trying to use getElementsByTagName when you should be using getElementsByClassName. getElementsByTagName searches for elements based on tag name, like 'div' or 'span', not class names.

So, use it like this:

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  document.getElementById(id).style.zIndex = z++;
  document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script>

Keep in mind that method was added in Firefox 3 and may not be supported in your browser. I would recommend using something like jQuery to maintain cross browser compatibility. Using jQuery, it would look like this:

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  $('#'+id).style.zIndex = z++;
  $('.nav').style.zIndex = z++;
}
</script>

answered Apr 27, 2011 at 17:54

kcbanner

4,0781 gold badge27 silver badges18 bronze badges

1 Comment

Beau Over a year ago

Thanks, kcbanner. I wouldn't want to go with something that isn't universal, so I would probably try your second solution. However, like I said, I'm just going to include the nav in each content div. But I appreciate you letting me know what I was doing wrong.

Collectives™ on Stack Overflow

Javascript: Setting Z-Index on Multiple Elements (ID & Class)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related