Welcome to WebmasterWorld Guest from 54.145.235.23

Forum Moderators: open

Message Too Old, No Replies

Im baffled

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

New User

5+ Year Member

joined:Apr 21, 2011
posts: 30
votes: 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.

[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
12:38 pm on June 16, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 21, 2011
posts: 30
votes: 0


Sorry just read that back and that is some shocking grammar usage.
1:19 pm on June 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 8, 2003
posts:1141
votes: 0


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

[api.jquery.com...]
5:36 pm on June 16, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.
5:02 pm on June 18, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 21, 2011
posts: 30
votes: 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.

Dave
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members