Overlapping content script is shifting content around it...maddening!
1) Script Title: Drop down/ Overlapping Content script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.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! :)
Code:<!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>
CSS Codes
Reply With Quote
Bookmarks