Comments on: Fun with Overflows

By: Pedro Costa Neves

Pedro Costa Neves — Tue, 23 Mar 2010 22:24:51 +0000

and if we don’t know the width of the ‘ul’? know, with a dynamic content creating all the ‘li’ how to know the exact width to put on ‘ul’? bcause if we put 100% they dont work properly

By: Peter

Peter — Thu, 26 Nov 2009 15:01:26 +0000

I got a solution – I added in the color box includes and file links before the jquery slider includes. I think previously some of the values set in jquery.js (for the scroller) were getting reset/chnaged when I included jquery.min.js (for colorbox) later in the document. I just switched the order of the includes around and it works fine now! Wow. Thanks for the script – it will make a nice presentation for Red Cross Australia.

By: Peter

Peter — Thu, 26 Nov 2009 06:26:04 +0000

This is a great script! I'm going to use this for a Red Cross Tsunami commemoration timeline. I have also added the Colorbox jquery plugin for displaying pictures and media.

My issue is that after adding colorbox while the timeline still has the click and drag functionality it has lost the functionality to scroll with the mouse wheel. As a designer primarily, I don't know how to fix the issue, but I have narrowed down the focus to some sort of conflict when the jquery.min.js file is linked to for the colorbox plugin. The mouse wheel scrolling returns if I remove the link to this file in the head.

Any suggestions would be welcomed.

I have the inital part of the project up and running here: http://www.digitalcoffee.com.au/clients/rc/timeline/

By: Nick

Nick — Sat, 07 Nov 2009 14:23:49 +0000

Hey there, great tutorial. I’m having a little trouble with IE (of course), where the mouse doesn’t always release. I can see a guy called Scott (from 25th Oct. ’08) had the same problem with Safari on a Mac. Mine is IE8 (WindowsXP). Many thanks in advance for any help given (from anyone).

By: James Ison-Stierer

James Ison-Stierer — Tue, 29 Sep 2009 09:33:37 +0000

I’m very impressed! Good work – only found your website today but already spent half my day on it!

By: nerdstalker

nerdstalker — Sat, 29 Aug 2009 16:53:22 +0000

Would be great if it had a visible horizontal scroll as a usability enhancement.

By: ConradH

ConradH — Mon, 10 Aug 2009 06:27:35 +0000

Thanks for this code. It works and looks great. One issue though - the overflow: hidden does not seem to take effect for me for some reason. The #timeline div displays with a scrollbar and when I check using firebug the overflow never changes from auto to hidden. Any help would be greatly appreciated.

Shibi - Just use the loop or write your query and make sure to wrap the result you want to scroll in div id=timeline and ul class=tl-events and each individual result in an li tag and everything should work fine.

By: Shibi Kannan

Shibi Kannan — Thu, 18 Jun 2009 15:12:18 +0000

Very nice code, amazing effects, I am wondering whether this can be adapted to Wordpress posts to scroll by timeline. Any ideas on how to implement for Wordpress.

By: Dave Bowker

Dave Bowker — Thu, 18 Jun 2009 11:13:47 +0000

Have added in cursor changes to work across multiple browsers when supported, speed option by Zach, and return false; by Antti.

http://snipplr.com/view/16062/jquery-overflow-timeline-effect/

By: Antti

Antti — Fri, 01 May 2009 13:55:24 +0000

I think you could also add a ‘return false’ at the end of the mousewheel event attachment – This would prevent the window from scrolling horizontally AND vertically if the page has content that exceeds the height of the browser window.