NoLog.cz/decide.nolog.cz
6
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Show top scrollbar only when table header is fixed

Browse source
This commit is contained in:
jelhan 2014-10-25 22:39:10 +02:00
parent ce3d1070c0
commit 5bdd5d72da
1 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/views/poll.js
View file

@ -15,7 +15,19 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, function(){
$('.user-selections-table').floatThead({});
var getScrollBarHeight = function(){
var wide_scroll_html = '<div id="wide_scroll_div_one" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div id="wide_scroll_div_two" style="height:100%;width:100px"></div></div>';
$("body").append(wide_scroll_html); // Append our div and add the hmtl to your document for calculations
var scroll_w1 = $("#wide_scroll_div_one").height(); // Getting the width of the surrounding(parent) div - we already know it is 50px since we styled it but just to make sure.
var scroll_w2 = $("#wide_scroll_div_two").innerHeight(); // Find the inner width of the inner(child) div.
var scroll_bar_width = scroll_w1 - scroll_w2; // subtract the difference
$("#wide_scroll_div_one").remove(); // remove the html from your document
return scroll_bar_width;
};
$('.user-selections-table').floatThead({
'scrollingTop': getScrollBarHeight()
});
/*
* scrollbar on top of table
@ -25,11 +37,13 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
.css('height', '1px');
var topScrollbarOuter = $('<div></div>')
.addClass('top-scrollbar')
.css('width', '100%' )
.css('width', $('.table-scroll').width() )
.css('overflow-x', 'scroll')
.css('overflow-y', 'hidden');
$('.table-scroll').before(
topScrollbarOuter.append(topScrollbarInner)
.css('overflow-y', 'hidden')
.css('position', 'fixed')
.css('top', 0);
$('.table-scroll').prepend(
topScrollbarOuter.append(topScrollbarInner).hide()
);
$('.table-scroll').scroll(function(){
@ -38,6 +52,19 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
$('.top-scrollbar').scroll(function(){
$('.table-scroll').scrollLeft( $('.top-scrollbar').scrollLeft() );
});
/*
* show scrollbar only, if header is fixed
*/
$(window).scroll(function(){
var windowTop = $(window).scrollTop(),
tableTop = $('.table-scroll table').offset().top;
if( windowTop >= tableTop - getScrollBarHeight() ) {
$('.top-scrollbar').show();
}
else {
$('.top-scrollbar').hide();
}
});
});
},