homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Im baffled

Msg#: 4326855 posted 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.





Msg#: 4326855 posted 12:38 pm on Jun 16, 2011 (gmt 0)

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


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4326855 posted 1:19 pm on Jun 16, 2011 (gmt 0)

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



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

Msg#: 4326855 posted 5:36 pm on Jun 16, 2011 (gmt 0)

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.


Msg#: 4326855 posted 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.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved