Home : Forums : Webmasters' Lounge : Interactive Scroll Pages

Interactive Scroll Pages

You are currently not logged in. You can view the forums, but cannot post messages.

01-Jun-11 16:30

Delete

Edit

eman

Bronze

Posts: 39

From: Durham, NC, USA

I was checking out this website (see link below) and notice the interactive scroll pages that has powerful.personal.prompt, dynamic design, clever coding and innovative internet marketing tabs with the arrows near the top. Also check out Follow us and Contact Us tabs next to it.
Does anyone know how these are done and can show me other examples? Thanks

http://www.pageprogressive.com/

02-Jun-11 06:13

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Just looking at the source, they've used jQuery & jCarousel for the sliding carousel:

http://sorgalla.com/jcarousel/

They've done the flipping boxes using jQuery too. See http://www.pageprogressive.com/wp-content/themes/pp/js/func.js and search for "FLIPPING BOXES".

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

03-Jun-11 15:34

Delete

Edit

eman

Bronze

Posts: 39

From: Durham, NC, USA

Matt, thanks for your help. I went to that website and saw some good examples. The one question I have is how do I only show one image at a time in the carousel instead of three. See link. Thanks

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

07-Jun-11 07:08

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@eman: See http://sorgalla.com/projects/jcarousel/#Defining-The-Number-Of-Visible-Items

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

13-Jun-11 09:18

Delete

Edit

eman

Bronze

Posts: 39

From: Durham, NC, USA

Matt, thanks for your help. I was able to add the carousel container to my web page and view one image at a time but for some reason the image is cut off. I tried to edit the css and html code so the image would appear but have not been able to figure this out. Please let me know how I can fix this. Thanks

Here are the html, css and image links for your reference.

http://www.jenkinscreativedesigns.com/aboutusppjcarousel.html

http://www.jenkinscreativedesigns.com/skin.css

http://www.jenkinscreativedesigns.com/Images/Aboutuscarousel1.jpg
http://www.jenkinscreativedesigns.com/Images/Aboutuscarousel2.jpg

20-Jun-11 05:46

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@eman: Try:


.jcarousel-skin-tango, .jcarousel-item, .jcarousel-clip-horizontal { height: 194px; }

Put this CSS after skin.css.

Currently they're set to height: 75px in skin.css, which is clipping your image.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/