Results 1 to 2 of 2

Thread: Overlapping content script is shifting content around it...maddening!

  1. #1
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default 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>

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •