CODEWITHSUNDEEP
htmlz-index
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Moving a <div> to 'front' on click, what's the best way to do so?

i'm having a great idea of a website lay-out and yet experimenting how to do so..

Well let's just say it like this: You have a pile of papers, but they do not lie perfectly on eachother, but each paper is for 20% visible, only the paper on top is 100% visible. And if you want a paper in the middle, you pull it out and put it on top, covering the paper that was on top.

I want to do so on a website. 5 's who cover eachother, except the top one, who lies on top. Let's say you want to pull the middle one to the top, covering the old one on top, what's the best way to do so?

I was thinking of a .click event which changes the Z-index of the currently-on-top to a lower value than the one who needs to go on top. Let's just say, they swap.

Hard to ask maybe, but what would you suggest yourself as a solution?

Thanks

Upvotes: 0

Views: 115

Answers (2)

Levi
Levi

Reputation: 12472

It sounds like you are on the same track. I would probably handle this problem as follows:

I wouldn't necessarily 'swap' their z-indexes. What I would do, is find the highest z-index of your 'paper stack' divs and then simply assign the paper that was just clicked a value higher than the highest z-index we just detected. Make sense?

Also remember, z-index properties will only take effect if the DOM element has a 'position'. In other words make sure the divs are set to position: relative, or position: absolute.

Something like so: 

// assign this click function to all divs in the paper stack
$(".paper-stack-divs").click(function() {

    var index_highest = 0;  // initialize the highest index value to 0 

    // loop through all of the paper stack divs

    $(".paper-stack-divs").each(function() {

        // get the z-index value for current paper stack div
        var index_current = parseInt($(this).css("z-index"));

        // check the z-index of the current paper stack div against what we
        // currently know to be the highest z-index.
        // if the current z-index is higher than the last known highest z-index, then
        // set the current z-index as our new highest 

        if(index_current > index_highest) 
             index_highest = index_current;  
    });

    // once the loop is finished and we have the highest z-index, give the paper stack
    // div that was just clicked a z-index of our highest z-index, plus 1, which would        
    // make our clicked div now have the highest z-index value and will go to the top of 
    // the stack

    $(this).css("z-index", parseInt(index_highest+1));


 });

Upvotes: 1

JR Smith
JR Smith

Reputation: 1216

There are a number of ways to approach this. The ones that comes to mind off the top my head goes something like this:

var top = 40; // z-index value var topPageTop = 20; // top pages top offset var topPageLeft = 40; // top pages left offset

$('.page').click(function(){
    $(this).css('z-index', top);
    $(this).css('top', topPageTop);
    $(this).css('left', topPageLeft);
    shufflePages(yourDOMContainer)
});

function shufflePages(yourDOMContainer){

    for(pageElement in yourDOMContainer){
         iterate top and left back by a set value for each page, skip the top page
         maybe even inclue an animation function?
    }
}

So in my implementation each page would be a child element of some parent container, it could be a ul/li thing or multiple divs. There's a few ways to approach this.

Obviously, the shuffle pages function is pseudocode, but you were looking for a starting point - not the final product. Let me know if that helps or is unclear in any way.

Upvotes: 1

Related Questions