Skip to content

Update jquery.stickysort.js #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
plcrewe wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Update jquery.stickysort.js #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 59 additions & 16 deletions jquery.stickysort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,14 @@
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').first().width());

// Set position sticky intersect
$stickyCol.find('table').css({
left: $stickyWrap.offset().left
});
// START Bug Fix #1
// Hyperlinks in the sticky column were not clickable when the form first loaded because the sticky column
// left position was positioned at 120px.
// Weirdly, it seemed to 'fix' itself when the user scrolled down the page using the mouse
// $stickyCol.find('table').css({
// left: $stickyWrap.offset().left
// });
// END Bug Fix #1
},
repositionSticky = function () {
// Return value of calculated allowance
Expand Down Expand Up @@ -135,7 +140,14 @@
opacity: 0,
'pointer-events': 'none',
position: 'absolute',
left: 0

// START Bug Fix #2
// When the user scrolls slightly to the right, the sticky intersect was being displayed to the left-hand side of the sticky column,
// so we need to add on the scrollLeft() margin to ensure that it always displays in the correct location
// left: 0
left: $stickyWrap.scrollLeft(),
top: 0
// END Bug Fix #2
});
}
}
Expand Down Expand Up @@ -194,17 +206,22 @@
}
};

setWidths();
// START Bug Fix #3
// If sorting is enabled, then the sticky header initially appears 43px to the right of where it should be (until the user clicks [F5] when it miraculously appears
// to 'fix' itself), so the following lines of code should be moved to immediately AFTER the sorting section below
//
// setWidths();

$t.parent('.sticky-wrap').scroll($.throttle(settings.scrollThrottle, repositionSticky));
// $t.parent('.sticky-wrap').scroll($.throttle(settings.scrollThrottle, repositionSticky));

$w
.load(setWidths)
.resize($.debounce(settings.resizeThrottle, function () {
setWidths();
repositionSticky();
}))
.scroll($.throttle(settings.scrollThrottle, repositionSticky));
// $w
// .load(setWidths)
// .resize($.debounce(settings.resizeThrottle, function () {
// setWidths();
// repositionSticky();
// }))
// .scroll($.throttle(settings.scrollThrottle, repositionSticky));
// END Bug Fix #3

// Extended feature: Sortable table
// Do sorting only when original table is slated for sorting:
Expand All @@ -221,10 +238,20 @@
$stickyWrap
.addClass('sortable')
.find('thead th')
// START Bug Fix #4
// Increase height of column header #1 ('Learner Name') when the sticky column is on display (it otherwise defaults to 48px)
.css({ height: $thead.height() })
// END Bug Fix #4
.addClass('sort-default')
.data('sortState', 1)
.wrapInner('<div />')
.find('div')
// START Bug Fix #5
// The following code adds multiple sort buttons on because it targets ALL divs within the cell rather than
// just the one it's adding - so instead we'll add the new one as 'sa-stickysort' and target just that one
// .wrapInner('<div />')
// .find('div')
.wrapInner('<div class="stickysortdiv" />')
.find('.stickysortdiv')
// END Bug Fix #5
.css({ position: 'relative' })
.append('<a href="#" class="sort-handle"></a>')
.find('.sort-handle')
Expand Down Expand Up @@ -319,10 +346,26 @@

});
}

// START Bug Fix #6
// If sorting is enabled, then the sticky header initially appears 43px to the right of where it should be (until the user clicks [F5] when it miraculously appears
// to 'fix' itself), so the following lines of code should be moved to immediately AFTER the sorting section above
setWidths();

$t.parent('.sticky-wrap').scroll($.throttle(settings.scrollThrottle, repositionSticky));

$w
.load(setWidths)
.resize($.debounce(settings.resizeThrottle, function () {
setWidths();
repositionSticky();
}))
.scroll($.throttle(settings.scrollThrottle, repositionSticky));
// END Bug Fix #6
}
});

// Return to allow chaining
return this;
};
})(jQuery);
})(jQuery);