CODEWITHSUNDEEP
jquerycss
Daniel
Daniel

Reputation: 6842

Incremental z-index in jquery

I have a navigation bar and I need to always keep the current one on top. I came up with this code, but I don't know why it's not working:

$(this).find('ul.sub_nav').css('z-index', function(index) {
     return index++;
});

I inspect it in chrome and all it shows is <ul class="sub_nav" style="z-index: 0;"> no matter how many times I try it.

It has an initial z-index of 1, just FYI.


What I resolved:

var zIndex = 1;

$(document).ready(function() {
    $('ul.top_nav > li').hover(function() {
        zIndex++;
        $(this).find('ul.sub_nav').css('z-index', zIndex);
    });
});

A much simpler solution with JS.

Upvotes: 0

Views: 3228

Answers (7)

seybanks
seybanks

Reputation: 39

This can also be done: add an html span to your footer or anywhere apart from head section 

<span class='current-index' style='display: none;'>1</span>

then in your jquery click event you can do this 

$('.a_link_or_button').click(function(){
//get the current z-index value    
   var currentIndex=$('.current-index').text();
   $('.anotherDiv').show().css('z-index', currentIndex');

   //update the span which holds the current index with new z-index    

   var newCurrentIndex=parseInt(currentIndex)+1;

   $('.curent-index').text(newCurrentIndex);

Hope it helps someone out there. Note: instead of click function you can use hover func

Upvotes: 0

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29241

I believe you should do this instead, if you want each element to have a zIndex greater than previous elements in a specific set.

var subs  = $(this).find('ul.sub_nav');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
    $(this).css('z-index', ++index);
});

Upvotes: 2

Ardor
Ardor

Reputation: 36

You can also just do something like
$(yourelement).on("mouseover",function(){ $(this).css("z-index", "+=1") }); .. just make sure you have set an inital z-index e.g. in css

Upvotes: 0

jfriend00
jfriend00

Reputation: 707696

If you want just one navbar of several to be visible, it's much easier to .hide() all the navbars and .show() the one you want to see.

$('ul.sub_nav').not('.current').hide();
$('ul.sub_nav.current').show();

We could be more precise about what to recommend if you included your actual HTML and told us more about what you're really trying to accomplish.

In the code example from your question, what this JS:

$(this).find('ul.sub_nav').css('z-index', function(index) {
     return index++;
});

does is set the z-index to a value that corresponds to the position each object has in the .find() jQuery object. So, for the first object in the $(this).find('ul.sub_nav') object, the index argument will be zero and you will set the z-index to 0. For the second object in the set it will be set to 1 and so on.

If you want just one particular navbar to be visible, why don't you just show that one and hide the others. That's way less complicated than managing a z-index on all of them.

Also, are these navbars position: absolute? If they are position: static (the default), then z-index won't affect them.

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94489

Why not just set the z-index using css instead of using jquery and js. Also if your using z-index make sure the position of the element is set to relative.

https://developer.mozilla.org/en/CSS/z-index

If you cannot just set the css try:

$(this).find('ul.sub_nav').css('z-index', function(index, value) {
     return value++;
});

Upvotes: 0

Eric H.
Eric H.

Reputation: 7014

You variable index isn't being incremented. It's outside the scope of your loop. I would try something like this.

$(this).find('ul.sub_nav').each(function(i) {
    $(this).css('z- index', i+1)} )

Upvotes: 0

Elias Zamaria
Elias Zamaria

Reputation: 101103

Instead of function(index), maybe try function(i, index).

Upvotes: 0

Related Questions