Expands to right I need Expand to left [Archive]

Rocketrud

May 20th, 2008, 09:08 AM

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>");

somnamblst

May 21st, 2008, 11:44 AM

Have you looked a jQuery or Mootools to do what you are attempting. I personally am not a programmer but with js libraries such as jQuery I have been able to modify many demo examples to fit my needs. Since you do want your expand (show) to happen on mouseover use hover in your google searches

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.ajaxdaddy.com/