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

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

JavaScript and AJAX Forum

    
Im baffled
Cira




msg:4326857
 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.

[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




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

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

jecasc




msg:4326868
 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:

[api.jquery.com...]

rocknbil




msg:4326968
 5:36 pm on Jun 16, 2011 (gmt 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.

Cira




msg:4327815
 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.

Dave

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