Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Im baffled



12:36 pm on Jun 16, 2011 (gmt 0)

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.


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.




12:38 pm on Jun 16, 2011 (gmt 0)

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


1:19 pm on Jun 16, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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



5:36 pm on Jun 16, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'd start with a container element:

<div id="scroller-window">


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

#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.


5:02 pm on Jun 18, 2011 (gmt 0)

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month