PDA

View Full Version : Overlapping content script is shifting content around it...maddening!



AshleyQuick
10-06-2007, 09:08 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: Simply paste this code and click on "Show [+]" You'll notice the content in the columns to the left and right shift up and down. Please tell me this can be fixed. I really want to use this script! :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
-->
</script>
</head>

<body>


<table border="0" cellpadding="3" cellspacing="0"><tr>
<td align="center" valign="center" style="padding-left: 16px"><b>ID</b> </td>
<td align="center" valign="center" style="padding-left: 16px"><b>Clicks</b> </td>
<td valign="center" style="padding-left: 16px"><b>Added</b> </td>
<td valign="center" style="padding-left: 16px"><b>Web page</b> </td>
<td valign="center" style="padding-left: 16px"><b>URL to use</b> </td>

<td valign="center" style="padding-left: 16px"><b>Graph</b> </td>
</tr><tr>
<td align="center" style="padding-left: 16px"> 1 </td>
<td align="center" style="padding-left: 16px"> <b>547</b> </td>
<td align="center" style="padding-left: 16px"> 10|04|2007 </td>
<td style="padding-left: 16px"> <a href="http://www.yourdomain.com/news" target="_new">News Link</a></td>
<td style="padding-left: 16px"><p><a href="#" onClick="return overlay(this, 'subcontent1', 'leftbottom')">Show [+]</a></p>

<div id="subcontent1" style="background-color: white; border: 2px solid black; display: none; height: 100px; padding: 4px; position: absolute">

<img src="spacer.gif" alt="" width="350" height="100" border="0">

<div align="right"><a href="#" onClick="overlayclose('subcontent1'); return false">Close [x]</a></div>

</div></td>
<td style="padding-left: 16px"> <img src="C:\xampp\htdocs\counter\gfx/line.gif" height="5" width="62" border="0"> </td>
</tr><tr>
<td align="center" valign="center" style="padding-left: 16px"> 2 </td>
<td align="center" valign="center" style="padding-left: 16px"> <b>774</b> </td>

<td align="center" valign="center" style="padding-left: 16px"> 10|04|2007 </td>
<td valign="center" style="padding-left: 16px"> <a href="http://www.yourdomain.com/index.php" target="_new">Home Page</a></td>
<td style="padding-left: 16px"><p><a href="#" onClick="return overlay(this, 'subcontent2', 'leftbottom')">Show [+]</a></p>

<div id="subcontent2" style="background-color: white; border: 2px solid black; display: none; height: 100px; padding: 4px; position: absolute">

<img src="spacer.gif" alt="" width="350" height="100" border="0">

<div align="right"><a href="#" onClick="overlayclose('subcontent2'); return false">Close [x]</a></div>

</div></td>
<td valign="center" style="padding-left: 16px"> <img src="C:\xampp\htdocs\counter\gfx/line.gif" height="5" width="87" border="0"> </td>
</tr><tr>
<td align="center" valign="center" style="padding-left: 16px"> 3 </td>

<td align="center" valign="center" style="padding-left: 16px"> <b>393</b> </td>
<td align="center" valign="center" style="padding-left: 16px"> 10|04|2007 </td>
<td valign="center" style="padding-left: 16px"> <a href="http://www.yourdomain.com/about.html" target="_new">About Us Link</a></td>
<td style="padding-left: 16px"><p><a href="#" onClick="return overlay(this, 'subcontent3', 'leftbottom')">Show [+]</a></p>

<div id="subcontent3" style="background-color: white; border: 2px solid black; display: none; height: 100px; padding: 4px; position: absolute">

<img src="spacer.gif" alt="" width="350" height="100" border="0">

<div align="right"><a href="#" onClick="overlayclose('subcontent3'); return false">Close [x]</a></div>

</div></td>
<td valign="center" style="padding-left: 16px"> <img src="C:\xampp\htdocs\counter\gfx/line.gif" height="5" width="44" border="0"> </td>
</tr><tr>
<td align="center" valign="center" style="padding-left: 16px"> 4 </td>
<td align="center" valign="center" style="padding-left: 16px"> <b>220</b> </td>
<td align="center" valign="center" style="padding-left: 16px"> 10|04|2007 </td>
<td valign="center" style="padding-left: 16px"> <a href="http://www.yourdomain.com/sitemap.php" target="_new">Sitemap Link</a></td>
<td style="padding-left: 16px"><p><a href="#" onClick="return overlay(this, 'subcontent4', 'leftbottom')">Show [+]</a></p>

<div id="subcontent4" style="background-color: white; border: 2px solid black; display: none; height: 100px; padding: 4px; position: absolute">

<img src="spacer.gif" alt="" width="350" height="100" border="0">

<div align="right"><a href="#" onClick="overlayclose('subcontent4'); return false">Close [x]</a></div>

</div></td>

<td valign="center" style="padding-left: 16px"> <img src="C:\xampp\htdocs\counter\gfx/line.gif" height="5" width="25" border="0"> </td>
</tr></table>

</body>
</html>

ddadmin
10-09-2007, 03:47 AM
Try moving each of the drop down DIVs outside your table, such as directly above the </body> tag. For example, one of such DIVs you need to move would be:


<div id="subcontent1" style="background-color: white; border: 2px solid black; display: none; height: 100px; padding: 4px; position: absolute">

<img src="spacer.gif" alt="" width="350" height="100" border="0">

<div align="right"><a href="#" onClick="overlayclose('subcontent1'); return false">Close [x]</a></div>

</div>