Im baffled

[Cira]

Hi all,

Hope you are all well.

Ok so i have a bit of a challenge im pretty sure there will be a script out there which can already do this but i dont know where to find it.

please see the link attached to a pic so you know what i am talking about.

[imageshack.us...]

What i need to do is be able to do is have it so when the user clicks on the arrows either side of the text below the actors picture to not only slide to the next picture but also slide the text to the next relevant text. Im not sure whether to do this within DIVs or iFrames or even if they are the best methods to do this in.

Or if you can think of a better way to change the content but without reloading the entire page around those bits.

Any help will be much appreciated.

Regards

Dave

[Cira]

Sorry just read that back and that is some shocking grammar usage.

[jecasc]

I'd check the jQuery Ajax framwork. There are several standard animations available you could use to create this effect:

[api.jquery.com...]

[rocknbil]

I'd start with a container element:

<div id="scroller-window">

</div>

#scroller-window { width: 300px; height: 200px; overflow: hidden; position: relative; }

The position property is important. This allows you to position elements inside it absolutely.

Then you can populate it with images absolutely positioned:

<div id="scroller window">
<p><img src="img-1.jpg" id="img-1" alt="Image 1"></p>
<p><img src="img-2.jpg" id="img-2" alt="Image 2"></p>
<p><img src="img-3.jpg" id="img-3" alt="Image 3"></p>
<p><img src="img-4.jpg" id="img-4" alt="Image 4"></p>
</div>

#scroller-window p { margin:0; padding:0; display: block; position: absolute; width: 300px; height: 200px; top:0; }
#img1 { left: 0; }
#img2 { left: 306px; }
#img3 { left: 612px; }
#img4 { left: 918px; }

Now all you have to do is use the animate functions of jQuery to move them to the left in 612px increments, then when the last one is reached move the first on to the end. The overflow property of scroller-window will have the effect of a "mask" for the animation.

[Cira]

Sorry about the late reply my internet has been down for a few days.

Thank you for the help Rocknbil thank you loads i used that code with the animate function and also adapted it to the other area perfectly.

Thank you again.

Dave