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(){ didInsertElement : function(){
this._super(); this._super();
Ember.run.scheduleOnce('afterRender', this, function(){ 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 * scrollbar on top of table
@ -25,11 +37,13 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
.css('height', '1px'); .css('height', '1px');
var topScrollbarOuter = $('<div></div>') var topScrollbarOuter = $('<div></div>')
.addClass('top-scrollbar') .addClass('top-scrollbar')
.css('width', '100%' ) .css('width', $('.table-scroll').width() )
.css('overflow-x', 'scroll') .css('overflow-x', 'scroll')
.css('overflow-y', 'hidden'); .css('overflow-y', 'hidden')
$('.table-scroll').before( .css('position', 'fixed')
topScrollbarOuter.append(topScrollbarInner) .css('top', 0);
$('.table-scroll').prepend(
topScrollbarOuter.append(topScrollbarInner).hide()
); );
$('.table-scroll').scroll(function(){ $('.table-scroll').scroll(function(){
@ -38,6 +52,19 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
$('.top-scrollbar').scroll(function(){ $('.top-scrollbar').scroll(function(){
$('.table-scroll').scrollLeft( $('.top-scrollbar').scrollLeft() ); $('.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();
}
});
}); });
}, },