Expands to right I need expand to left

**RocketRud** · 05-20-2008, 06:38 PM

Here is the code that currently expands to the right

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>

**RocketRud** · 05-20-2008, 07:54 PM

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>

**rangana** · 05-21-2008, 02:22 AM

See if modifying the script helps:

Code:

<script type="text/javascript" language="javascript">
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: 500px; height:250px; background-color: #FFF; border: #000 1px solid;\" src=\"banner.html\" onMouseOver=\"collapseFrame();\" onMouseOut=\"expandFrame();\"></iframe><div style=\"width: 500px; height:250px; margin-left:200px; \"></div>");
document.write("</td></tr></table>");

</script>

**RocketRud** · 05-22-2008, 02:49 PM

That doesn't expand to the left at all......

Thread: Expands to right I need expand to left

Thread Tools

Search Thread

Expands to right I need expand to left

Bookmarks

Bookmarks

Posting Permissions