charuru / lionbars Goto Github PK
View Code? Open in Web Editor NEWA free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.
A free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.