Help me horizontal click scroll using jquery, pls!
January 23, 2009 2:30 PM   Subscribe

I want to replicate, using jQuery, the Gmail 'Web Clips' horizontal browsing feature (seen here). Where can I find a script that does this?

Another example for what I want to do is on the front page of Reddit (seen here).

Basically, I want an un-numbered list of 10 or so headlines that can be scrolled through, one by one, by clicking a left or right arrow.

Ideally I'd like to find a script that does this without too much hacking, as about all I can do is cut and paste and make a few aesthetic changes.

I'm usually pretty good at tracking down stuff like this, but I can't find exactly what I need. Help?
posted by c:\awesome to Computers & Internet (4 answers total)
 
Why is jQuery a hard-and-fast requirement if all you know how to do is cut and paste? Here's a very similar widget using Google's own APIs.
posted by letourneau at 2:54 PM on January 23, 2009


Response by poster: letourneau: Unless I'm missing something, that Google thing autoscrolls through the feeds. I specifically need the option to click through manually. Plus, it brands it with a Google logo which is the second deal breaker.

I'm not married to jQuery, but I've used it in the past. If there's something similar in nature (and as lightweight, I'm ok with that.
posted by c:\awesome at 3:03 PM on January 23, 2009


Dude, seriously, instead of hunting for existing widgets every time you need to do something, try just looking at the jquery docs and tutorials; this is a pretty easy problem. Here's one way:

Create a bunch of divs, all with the same classname (I'll use "foo"), absolute-position them within the same container. Set 'em all to display:none.

Inside each one, include your next link, with classname "next" and your previous link with classname "prev".

Now in jquery, attach click event handlers to all those links to hide the current div, and show the one following (or preceding) it:

$(".next").click(function() {$(this).parent(".foo").next(".foo").fadeIn();$(this).parent(".foo").fadeOut(); })
$(".prev").click(function() {$(this).parent(".foo").prev(".foo").fadeIn();$(this).parent(".foo").fadeOut(); })

Finally, set the first one to be visible by default:
$(".foo:eq(0)").show();

That's all there is to it.

I'll leave handling the previous-from-first and next-from-last cases as an exercise (or you can just omit those links from the first and last divs).

Learn jQuery. It's easier than cobbling together other peoples' code.
posted by ook at 4:18 PM on January 23, 2009


If you want to use a plugin Cycle will do exactly what you want it to. You gotta do the CSS, though. The page I linked to has an example with previous / next links. See transition styles here.
posted by rachelpapers at 5:31 PM on January 23, 2009


« Older Why are middle eastern people categorized as...   |   How I understand music reviews better and explain... Newer »
This thread is closed to new comments.