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> Link to comment https://forums.phpfreaks.com/topic/106508-expands-to-the-right-i-need-expand-to-the-left/ 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] Link to comment https://forums.phpfreaks.com/topic/106508-expands-to-the-right-i-need-expand-to-the-left/#findComment-546015 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. Link to comment https://forums.phpfreaks.com/topic/106508-expands-to-the-right-i-need-expand-to-the-left/#findComment-546728 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.