rocketrud Posted May 20, 2008 Share Posted May 20, 2008 Here is the code I have. The image currently expands to the right. I need it to expand to the left on mouse over. Any help would be greatly appreciated. var expandCollapseIncrement = 30; var expandCollapseEveryMs = 5; var isExpanding = false; var isCollapsing = false; function expandFrame() { isCollapsing = false; isExpanding = true; setTimeout(doExpand, 250); } function doExpand() { try { if (!isExpanding) { return; } var fl = document.getElementById("adframe"); var w = parseInt(fl.style.width); w += expandCollapseIncrement; if (w <= 500) { fl.style.width = w + "px"; setTimeout(doExpand, expandCollapseEveryMs); } else { isExpanding = false; } } catch(e) { alert("Error expanding: " + e.description); } } function collapseFrame() { isExpanding = false; isCollapsing = true; doCollapse(); } function doCollapse() { try { if (!isCollapsing) { return; } var fl = document.getElementById("adframe"); var w = parseInt(fl.style.width); w -= expandCollapseIncrement; if (w >= 300) { fl.style.width = w + "px"; setTimeout(doCollapse, expandCollapseEveryMs); } else { isCollapsing = false; } } catch(e) { alert("Error expanding: " + e.description); } } document.write("<table cellspacing=\"0\" cellpadding=\"0\"><tr><td><iframe id=\"adframe\" frameborder=\"0\" scrolling=\"no\" style=\"position: absolute; z-index: 9999; width: 300px; height:250px; background-color: #FFF; border: #000 1px solid;\" src=\"banner.html\" onMouseOver=\"expandFrame();\" onMouseOut=\"collapseFrame();\"></iframe><div style=\"width: 300px; height:250px; margin-left:200px; \"></div>"); document.write("</td></tr></table>"); The banner.html file currently just has this in it: <body style="margin: 0px;"> <div id="body_c"> <div id="banner" style="padding: 0px; margin: 0px;"></div> <img src="1000067.jpg"> </div> </body> Quote Link to comment Share on other sites More sharing options...
rocketrud Posted May 20, 2008 Author Share Posted May 20, 2008 I found this code and I think it could be modified to help my problem. If this code helps anybody solve my problem here it is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Expanding Centered Div</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> width = 300 // The width you'd like the div to be height = 252; speed = 2 //the number of pixels to move each time left = Math.round(width/2); right = Math.round(width/2)+2; function expand() { obj = document.getElementById("mydiv"); left = left - speed; right = right + speed; if (left >= 0) { obj.style.clip = "rect(0px "+right+"px "+height+"px "+left+"px)"; expanddiv = setTimeout("expand()",10); } else { clearTimeout("expanddiv"); } } expanddiv = setTimeout("expand()",10); </script> </head> <body> <div id="mydiv" style="position:absolute; top: 50%; left: 50%; width:300px; height:250px; margin-top: -125px; /*set to a negative number 1/2 of your height*/ margin-left: -200px; /*set to a negative number 1/2 of your width*/ border: 1px solid; background-color: #eeeeee; overflow: hidden;"> This is a centered, expanding div.... </div> </body> </html> [code] [/code] Quote Link to comment Share on other sites More sharing options...
jacksonmj Posted May 21, 2008 Share Posted May 21, 2008 You need to position the table relative to the right side of the screen. e.g. add "right:20px;" to the style attribute of the iframe, and it will expand to the left on mouseover. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.