# Expands to right I need Expand to left

**URL:** <https://forum.kirupa.com/t/expands-to-right-i-need-expand-to-left/260837>\
**Category:** web dev\
**Created:** [May 20, 2008, 1:08pm UTC](https://forum.kirupa.com/t/expands-to-right-i-need-expand-to-left/260837 "2008-05-20T13:08:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rocketrud](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@Rocketrud](https://forum.kirupa.com/u/Rocketrud)\
**Post date:** [May 20, 2008, 1:08pm UTC](https://forum.kirupa.com/t/expands-to-right-i-need-expand-to-left/260837/1 "2008-05-20T13:08:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rocketrud](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@Rocketrud](https://forum.kirupa.com/u/Rocketrud)\
**Post date:** [May 20, 2008, 1:10pm UTC](https://forum.kirupa.com/t/expands-to-right-i-need-expand-to-left/260837/2 "2008-05-20T13:10:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)\
**Post date:** [May 21, 2008, 3:44pm UTC](https://forum.kirupa.com/t/expands-to-right-i-need-expand-to-left/260837/3 "2008-05-21T15:44:37Z")

</div>

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

> **[jQuery Tutorials for Designers - Web Designer Wall - Design Trends and Tutorials](http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers)**
>
> This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript...

> **[50+ Amazing Jquery Examples- Part1](https://www.noupe.com/development/50-amazing-jquery-examples-part1.html)**
>
> Many of us have been using a good deal of jQuery plugins lately. Below I have provided a list of the 50 favorite plugins many developers use. Some of these you may have already seen, others might be new to you. This is just the first series , the...

[http://www.ajaxdaddy.com/](http://www.ajaxdaddy.com/)