charuru / lionbars Goto Github PK

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.

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

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

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]-->

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.

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;
}

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 😄

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>

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

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

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

Hi, great project!

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

Thanks!