Google Wave-style scroll bar jQuery plugin
Google Wave introduced a revolutionary new way of online communication and collaboration. It seemed to swiftly solve the problems inherent our current 40-year-old email system. Unfortunately, it never actually caught on.
In addition to rethinking email, though, Google Wave’s user interface also rethought things such as scroll bars. I was particularly impressed with Google Wave’s scrollbars which were small, unintrusive, and easy to use.
In it’s tiny form-factor, the Google Wave scroll bar is able to:
- Indicate document height
- Indicate current scroll location
- Scroll by clicking the arrows (dragger doesn’t move until you move your mouse away)
- Scroll by dragging
After being announced that Google Wave will be retired, I wanted to immortalize this new way of scrolling in a jQuery plugin that does the same thing.
It currently does not work in IE because it uses CSS image data instead of referencing an actual image URL, but upon changing the image CSS, it will work in IE.
This is an alpha release, so please recommend changes or express your interest in a more configurable plugin.
Check out css3pie http://css3pie.com it may enable this to work in IE.
Problem is that I’m (actually just stole the CSS directly from Google Wave) using background images in CSS like this:
background:url("data:image/png;base64,iVBORw0KGgoAAAA.....C") -0px -0px no-repeat;I’ll just need to convert the data URL to an actual HTTP URL.
Bug report: scroll to the top, click the up arrow, immediately drag it down. The visible area shadow has disappeared.
Other than that, very nice.
Hi Konr. I like your post about the scrollbars, but I strongly disagree with your assertion that wave solved problems with email. Frankly it was a confusing tool with a very limited purpose. Is it a communication medium? A collaborative tool like a wiki? It didn’t really do any of those things well, and it didn’t integrate with any of your existing tools. Additionally, releasing it to such a limited pool of people caused it to get ignored, as it’s unlikely anyone in my group of friends actually used it.
The only place I saw it used well was at a conference, and everyone used it to take notes. But really that could have easily been done with a Google Doc.
It was a very impressive project from a technical standpoint, but as far as product value and the way it was released, a complete disaster.
This is good work. I think you should develop this in GWT and contribute it back. Several post to google guys regarding opening up the UI source code has not resulted much.
Regards,
Allahbaksh
Nice work！
great plugin, maybe now it’s time to immortalize the google plus “scroll” ;] ? (press j / k in your g+ stream)
Hi thanks for this nice plugin :) very nice one !!!
i would know if there a way to hide the slider if not needed and just show it if the content is bigger than the defined space of the div.
Hello,
Its really nice but where to download working file, so can use on any site? please advice .. :)