CODEWITHSUNDEEP
javascriptcsshtmllayer
Yahoo
Yahoo

Reputation: 4187

Div tag's layering question

Suppose i am having two Div layer

<div id="div1"> One </div>
<div id="div2"> Two </div>

I want them both to be overlapped

and when i click the Button i want that the Div1 layer to go in the background and the top layer should become Div2.

How can i achieve it through JavaScript ?

Upvotes: 1

Views: 549

Answers (4)

mVChr
mVChr

Reputation: 50195

If the z-index is being set with CSS then you need to get the computed style of the element, so getting element.style.zIndex directly won't work. Since this is implemented differently in IE than in other browsers, let's make a function to get the computed style:

var getCompStyle = function( id ) {
    var curStyle;
    if (window.getComputedStyle) {
        curStyle = window.getComputedStyle(document.getElementById( id ), null);
    } else {
        curStyle = document.getElementById( id ).currentStyle;
    }
    return curStyle;
};

Once we have this function, we can then apply the z-index accordingly attached to a button click handler:

document.getElementById('switch').onclick = function(e) {
    var div1style = getCompStyle( 'div1' );
    var div2style = getCompStyle( 'div2' );
    var switcher = div1style.zIndex;
    document.getElementById('div1').style.zIndex = div2style.zIndex;
    document.getElementById('div2').style.zIndex = switcher;
};

I've created a fiddle example here (link) to demonstrate.

Upvotes: 3

user85461
user85461

Reputation: 6680

Vertical positioning is controlled in CSS using the "z-index" parameter. You can set this with javascript by accessing the element's "style" parameter.

Here's a full example, with comments indicating tricky spots to watch out for:

<!DOCTYPE html>
<html>
    <head>
        <style type='text/css'>
            .container {
               /* Needs explicit positioning for "absolute" positioning of
                  child elements to work properly */
               position: relative;
               /* Need to set height, because absolute-positioned child elements take up no space */
               height: 50px;
            }
            #div1, #div2 {
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 50px;
                /* without a background color, you'll see div1 through div2. */
                background-color: white;
                /* border makes it easier to see while testing */
                border: 1px solid red;
            }
        </style>
        <script type='text/javascript'>
            function swapDivs() {
                var div1 = document.getElementById('div1');
                var div2 = document.getElementById('div2');
                // swap zIndex values.
                var temp = div1.style.zIndex;
                div1.style.zIndex = div2.style.zIndex;
                div2.style.zIndex = temp;
            }
        </script>
    </head>
    <body>
        <div class='container'>
            <div id="div1" style='z-index: 0;'> One </div>
            <div id="div2" style='z-index: 1;'> Two </div>
        </div>
        <input id='switch' type='button' value='switch' onclick='swapDivs();' />
    </body>
</html>

Upvotes: 1

naiquevin
naiquevin

Reputation: 7796

overlapping can be done by setting position:relative to div1 and having div2 as the child of div1. And set position:absolute; top:0px; left:0px; width:100%; for div2.

<div id="div1">
   <div id="div2"></div>
</div>

javascript -

document.getElementById("div1").onclick = function(){
         //by "Div1 layer to go in the background" i assume you mean disappear or hide
         this.style.display = 'none';
         document.getElementById("div2").style.display = 'block';
};

Upvotes: 0

Will
Will

Reputation: 20235

So, from what I read, you just want to show one and hide the other? You can do that with display in css. Here is a way you can do that.

<div id="div1">One</div>
<div id="div2" style="display:none;">Two</div>
<button onClick="change_layer()">Change the Layer</button>


function change_layer(){
   document.getElementById("div1").style.display = "none";
   document.getElementById("div2").style.display = "block";
}

You can also use JQuery, but if that is all you need to do, JQuery probably isn't needed. If you actually want them layered, you would have to use z-index in css.

Upvotes: 0

Related Questions