How to change the display using the div element in diffrent layers?

home / software / tips and tricks / How to change the display using the div element in diffrent layers?

How to change the display using the div element in diffrent layers?

Category: Java Script
view more software Tips and Tricks

Updated: 09/23/2012 12:09 PM
Author: Shiju Mathews

Status: Resolved.

CSS's z-index Property can be used to change the dispaly of 'div' element. In the bello example I am using 3 'div' element, one as a container and the others for the content.

<html>
<head>
<script type="text/javascript">
function getY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function getX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function ChangeLayer(key) {
var Container = document.getElementById("div_Container");
var Layer1 = document.getElementById("div_layer1");
var Layer2 = document.getElementById("div_layer2");
var MyLink = document.getElementById("MyLink");
var XPos = getX(Container);
var YPos = getY(Container); Layer1.offsetLeft = XPos; Layer1.offsetRight = YPos; Layer2.offsetLeft = XPos;
Layer2.offsetRight = YPos;
if (key == 1) {
Layer1.style.zIndex = "10";
Layer2.style.zIndex = "1";
MyLink.href = "javascript:ChangeLayer(2)";
}
else {
Layer1.style.zIndex = "1";
Layer2.style.zIndex = "10";
MyLink.href = "javascript:ChangeLayer(1)";
} }
</script>
</head>
<body >
<div id="div_Container" style="background-color:#EEE; border:solid 2px #CCC; width:350px; height:250px;">
<div id="div_layer1" style="width:350px; height:250px; position:absolute; background-color:#000;color:#FFF;">Content Of Layer 1</div>
<div id="div_layer2" style="width:350px; height:250px; position:absolute;background-color:#FFF;" >Content Of Layer 2</div>
</div>
<br/><br/>
<a href="javaScript:ChangeLayer(1)" id ="MyLink">Change Link</a>
</body>
</html>

The div elements z-index will change on each clicks on the links.

Indian Resources by Category

Indian Grocery Stores

Indian Jewelry Stores

Indian Hindu Temple

alt="Add your business to our listing Free"

Software Resources

Tips and Tricks

Interview Questions for C#

Interview Questions for ASP.Net

Interview Questions for SQL Server