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?
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?
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
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
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
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.
posted by letourneau at 2:54 PM on January 23, 2009