Interactive Scroll Pages

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

01-Jun-11 16:30
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
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
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
@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
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
@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/

 
New posts
Old posts

Follow Elated