CODEWITHSUNDEEP
javascriptjquerycss
user2952238
user2952238

Reputation: 787

Switch z-index at divs on click

Im trying to iterate through a div of children thats absolute positioned and have z-indexes. when a button is clicked i want the z-index to increase so it works like a loop almost. so on each click i want the current visible div to have a lower z index so only one div is visible at a time.

$(function() {
    $('button').click(function(){
        //.three sholed take the place of .one and .two should jump up one step. i want this to be repeatable.
    });
});
body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
}

.one {
    background:red;
    z-index:1;
}
.two {
    background:green;
    z-index:2;
}
.three {
    background: blue;
    z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="holder">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<button>click</button>

Upvotes: 1

Views: 1678

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

Use jquery to add a class to the element that shall have the wanted index/ be visible on click 

$("button").click(function(){
  $(".current").removeClass("current").next().addClass("current")
});
body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
    background:red;
}
.two {
    background:green;
}
.three {
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
    <div class="one current">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<button>click</button>

If you want to loop it 

$("button").click(function(){
  if($(".holder >div:last-child").hasClass("current")){
     $(".holder >div:last-child").removeClass("current");
     $(".holder >div:first-child").addClass("current");
  }else{
     $(".current").removeClass("current").next().addClass("current");
  }
});
body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
    background:red;
}
.two {
    background:green;
}
.three {
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
    <div class="one current">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<button>click</button>

Upvotes: 1

Doml The-Bread
Doml The-Bread

Reputation: 1771

i did something like this to fake a gif with fading animations:

you could simply adjust it to your needs on an onclick handler instead of a setInterval 

    function fakeGif(container, speed) {
        $(container).find('.active').css('z-index', 3);
        setInterval(function() {
            var $active = $(container).find('.active');
            var $next = ($active.next().length > 0) ? $active.next() : $(container).find('.gif').first();
            $next.css('z-index',2);//move the next image up the pile
            $active.fadeOut(1000,function(){//fade out the top image
                $active.css('z-index',1).fadeIn(1000).removeClass('active');//reset the z-index and unhide the image
                $next.css('z-index',3).addClass('active');//make the next image the top one
            });
        }, speed);
    }


        $('.gif--container').each(function(){
            var time = $(this).attr('data-gif-time');
            var container = $(this);
            $(this).find('.gif').first().addClass('active');
            fakeGif(container,time);
        });

and the Html for this is simple: 

<div class="gif--container" data-gif-time="3000">
    <div class="gif image:parent fl">
        <img src="whatever1.jpg" />
    </div>
    <div class="gif image:parent fl">
        <img src="whatever2.jpg" />
    </div>
    <div class="gif image:parent fl">
        <img src="whatever3.jpg" />
    </div>
</div>

Upvotes: 0

Wahyu Kodar
Wahyu Kodar

Reputation: 674

just using .css like this:

$("selector").css("z-index","1");

$(document).ready(function(){
    var start = 2;
    $('button').click(function(){
        $('.holder > div').eq(start).hide();
        start--;
        $('.holder > div').eq(start).show();
        if(start<0){start=2;}
    });
});
body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
}

.one {
    background:red;
    z-index:1;
}
.two {
    background:green;
    z-index:2;
}
.three {
    background: blue;
    z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<button>click</button>

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

I find always very usefull to make lots of different staff this simple jquery:

$(document).ready(function () {
            $('.click-here').click(function () {
                $('.box1').toggleClass("z-index")
            });
        });

You basically say that clicking in whatever element has the class "click-here" will add a class on whatever element you want (in this case "box1") (and remove the class on next click).

for your question here you have this fiddle that I hope it will help you

Upvotes: -1

Related Questions