...

View Full Version : z-index issue (javascript) need help please!



Buffmin
08-22-2011, 07:03 PM
I am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code below.....
-------------------------------------------------------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>

<!------------------------------------------------------------->
<style type="text/css">
#wrapper{
width:800px;
}
#left_top{
background-color:#66FFFF;
width:270px;
padding-top:60px;
padding-left:30px;
float:left;
}
#right_top{
background-color:#66FF33;
padding-top:60px;
width:480px;
padding-left:20px;
float:left;
}

#first_div{
position:relative;
width:450px;
height:300px;
z-index:1;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#second_div{
position:relative;
font-size:16px;
width:450px;
height:300px;
z-index:2;
top: -320px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#third_div{
position:relative;
font-size:16px;
width:450px;
height:300px;
z-index:3;
top: -640px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left_top">
<table width="210" height="483">
<tr><td width="210" height="477" valign="top">

<div><a title="first div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div>

<div><a title="second div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div>

<div><a title="third div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr>
</table>

</div><!-- end of left_top -->

<div id="right_top">

<div id="first_div">
<p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div>

<div id="second_div">
<p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div>

<div id="third_div">
<p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div>


</div><!-- end of right_top div -->
</div><!-- end of wrapper -->
</body>
</html>

vwphillips
08-23-2011, 08:30 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>

<!------------------------------------------------------------->
<style type="text/css">
#wrapper{
width:800px;
}
#left_top{
background-color:#66FFFF;
width:270px;
padding-top:60px;
padding-left:30px;
float:left;
}
#right_top{
position:relative;
background-color:#66FF33;
padding-top:60px;
width:480px;
padding-left:20px;
float:left;
}

#first_div{
position:absolute;
width:450px;
height:300px;
z-index:1;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#second_div{
position:absolute;
font-size:16px;
width:450px;
height:300px;
z-index:2;
top: 0px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#third_div{
position:relative;
font-size:16px;
width:450px;
height:300px;
z-index:3;
top: 0px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left_top">
<table width="210" height="483">
<tr><td width="210" height="477" valign="top">

<div><a title="first div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div>

<div><a title="second div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div>

<div><a title="third div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr>
</table>

</div><!-- end of left_top -->

<div id="right_top">

<div id="first_div">
<p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div>

<div id="second_div">
<p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div>

<div id="third_div">
<p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div>


</div><!-- end of right_top div -->
</div><!-- end of wrapper -->
</body>
</html>

althought the divs are positioned off screen they take up the same space with position absolute they are positioned on top of each other

Buffmin
08-23-2011, 02:19 PM
Oh, thank you very much Vic. That makes sense. Thank you for your help.!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum