Tween: Slide Element Right to Left

[Todd]

I need the "client" div to slide (rt - lt) from the right side of the
window on page load with a 500ms delay. I've tried repeatedly to
modify the js (which, btw, works great with the click/toggle) but
everything I try either breaks the inline layout or the effect flat-
out doesn't work.

Any insight is appreciated.

Todd

The html:

<div class="wrapper" >
<div id="frame">
<div id="client">Yadda Yadda Yadda</div>
</div>
</div>

The js:

window.addEvent('domready', function(){
var slideLeft = new Fx.Tween('client', {property: 'left',
duration: 500 });
var state = 420;
$('toggle').addEvent('click', function(){
state = (state == 10 ? 420 : 10);
slideLeft.start(state);
});
$('hide').addEvent('click', function(){
slideLeft.start(420);
state = 420;
});
});

The CSS:

#frame {
top: 150px;
right: 0px;
width: 270px;
height: 500px;
position: absolute;
overflow: hidden;
height: 300px;
width: 440px;
display: block;
background-image: url(../resources/frame_index.jpg);
background-repeat: no-repeat;
}
#client {
position: absolute;
top: 18px;
left: 20px;
border: 0;
width: 420px;
height: 260px;
display: block;
}
.wrapper {
margin: 0 auto;
height: 100%;
position: relative;
}

[fakedarren]

Hi Todd,

Here's a really simple example - http://mootools.net/shell/keNjk/. If
you paste your html / css / js into a new mooshell we can help give a
more thorough example.

Cheers
Darren

[Todd]

Hi Darren,

Here's the original html and css of the inline layout I'm using, no js
or altered css. You should see 3 elements placed next to each other
horizontally with some links in the lower right below everything. The
olive-colored box is the div that I want to slide in on page load (no
part of it should be visible initially) which should stop at the same
position it's at currently. The problem I'm having is that using
position: absolute for the divs is breaking the layout and I can't
figure out how to put it all right.

MooShell link http://mootools.net/shell/ypfje/1/

Note: I'm using mootools v1.2.0

Thanks,

Todd

[Robert]

hey,
is this what You want?
http://mootools.net/shell/8ra7V/2/

Robert

On 30 Mar, 05:39, Todd <acco...@xiiro.com> wrote:
> Hi Darren,
>
> Here's the original html and css of the inline layout I'm using, no js
> or altered css. You should see 3 elements placed next to each other
> horizontally with some links in the lower right below everything. The
> olive-colored box is the div that I want to slide in on page load (no
> part of it should be visible initially) which should stop at the same
> position it's at currently. The problem I'm having is that using
> position: absolute for the divs is breaking the layout and I can't
> figure out how to put it all right.
>

> MooShell linkhttp://mootools.net/shell/ypfje/1/