charuru / lionbars

A free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.

LionBars

LionBars is a jQuery plugin that styles default scrollbars to look and behave like in OSX Lion. Please check out the demo at http://charuru.github.com/lionbars/

1. Main features
2. How to use
3. Options
4. Other things to note

Main features

• Browser support - IE8, Safari, Firefox, Chrome, Opera (Win & OSX)
• Scrollbars look exactly the same in all browsers and OS
• The content doesn't get shrunk when scrollbars are added, just like in OSX
• Option to auto-hide scrollbars
• Dark and light style
• EndlessScroll functionality

How to use

1. Download LionBars
2. Include the script right after jquery <script type="text/javascript" src="lionbars.js"></script>
3. Include the css however you prefer. For example, in the main stylesheet @include 'lionbars.css';
4. Call .lionbars() on all elements that have scrollbars $('#box1, #box2').lionbars();
5. You're done!

Options

LionBars has some options that you can use to do some useful things. They will be explained here. All options are passed as an object to the constructor.

$('div').lionbars({
    autohide: true
});

Autohide scrollbars

LionBars gives you the opporunity to autohide the scrollbars so that they will only appear if you scroll the content. To enable the feature you only have to set autohide to true.

EndlessScroll

This feature makes it possible to react on reaching either to bottom o the right of the scrolled content. If you pass some handlers to the options they will be called and you can modify the content and update it.

$('div').lionbars({
    reachedBottom: function () {
        // do something with the content
        $(this).append('your html');
    },
    reachedRight: function () {
        // do something with the content
        $(this).append('your html');
    }
});

Other notes

LionBars is a relatively new plugin and has been recently fully rewritten. The basic functionality is there and working, other extras like light and dark styles, etc. are going to be added soon.

Thank you for your interest LionBars!

If you wish to contribute, make sure you contact me at [email protected]

Developers

Nikolay Dyankov

Thanks to

Kersten Burkhardt For implementing endless scroll

lionbars's Issues

There is a bug with wrapper and lionbars id

Change this

el.wrapInner('<div class="lb-wrap" id="lb-wrap-'+id+'-'+elemId+'"></div>');
wrap = $('#lb-wrap-'+id+'-'+elemId);

To this:

wrap = el.wrapInner('<div class="lb-wrap" id="lb-wrap-'+id+'-'+elemId+'"></div>').children(0);

Otherewise some element will be wrapped twice if you use ajax or some timers to update its content

Stylesheet error

I'm having trouble with this piece of html in the file lionbars.css. My rails application is throwing error in production.

  <!--[if IE 8]>
    <style>
      .lb-v-scrollbar { background: red; }
    </style>
  <![endif]-->

Incompatible with latest JQuery 1.9.1

Replacing JQuery 1.6.4 with JQuery 1.9.1 results in lionbars not working.

Firebug throws:

ReferenceError: jQuery is not defined
ReferenceError: $ is not defined

Problem on autohide

Once the scrollbar hid itself, I didn't find how to show it again.

Lincense

Hi, great project!

Could you please add a license file? Otherwise it's not clear if this is open source or not. :-)

Thanks!

Different bar length than OSX

Because the default icons appear (issue #13) I can tell that the bar lengths are different than those that OSX display. Would be neat if you could find out how long they should be and make them the same 😄

Scroll with javascript

Hi,

I need to scroll a div to the bottom with javascript.
I'm doing it calling the method I created:

function scroll_to_bottom(elem){
    $(elem).each(function( index ) {
        $(this).scrollTop($(this)[0].scrollHeight)
    });
}

Unfortunately, it doesn't work, though it works fine when I'm not using lionbars.

Problem with dynamic element size

Set width to 30% for some dom element. Apply lionbars to this element. Try to resize browser window.

Expected result:
Dom element width is resized

Actual result:
Dom element width constantly equals to initialized value

Default OS X scrollbars appear

In order to hide the default OS X scrollbars when using lionbars, I believe you need to add this to the stylesheet:

.lb-wrap::-webkit-scrollbar {
  visibility: hidden;
}

Scrollbars always show after ajax update with less content

If initially the content was shorter than the height, then the scrollbars are hidden (perfect), then update with longer content and the scrollbars shows (perfect). But the opposite is just not true.

Steps to Reproduce:
Set the height to be fixed (300px in my case), add content that is longer and the scrollbars will show. Then update the content to be less than the height.

Expected:
scrollbars to hide.

Actual:
scrollbars remain showing.

Attempts:
I tried to call the Update and mainLoop functions but nothing helps.

Problem with dynamic elements

For examples, I have a one page application. Apply lionscrollbar to empty dom element. Then add some html to it's content.

Expected result:
lionbars scrollbars are shown

Actual result:
standard os scrollbars are shown

Example:

<div id="scrollbar" style="height:50px; width: 50px;font-size:36px"></div>
<script>
$('#scrollbar').lionbars({
   autohide: true,
   reachBottom: function () {alert(true) }
});

setTimeout(function() {
$('#scrollbar').html('<div>SOME DOM ELEMENTS</div><div>SOME DOM ELEMENTS</div>');
}, 5000);
</script>

Problem to display expandable elements with lionbars

There is an accordion widget on the page (all elements are collapsed). Apply lionbars to accordion parent dom element. Click on some element.

Expected result:
lionbars are shown

Actual result:
standard scrollbars are shown