Difference between revisions of "Auto load content on scroll"
From UnionCloud Support
(Page creation) |
|||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 5: | Line 5: | ||
To snippet should be copied into Global Javascript. | To snippet should be copied into Global Javascript. | ||
| − | + | <syntaxhighlight lang="javascript" line='line'> | |
function EnableAutoLoadMore(buttonElement, contentElement) { | function EnableAutoLoadMore(buttonElement, contentElement) { | ||
$(window).bind('scroll', function() { | $(window).bind('scroll', function() { | ||
| Line 23: | Line 23: | ||
if (window.location.pathname.substring(0, 7) == '/events' && window.location.pathname.length <= 8) { | if (window.location.pathname.substring(0, 7) == '/events' && window.location.pathname.length <= 8) { | ||
EnableAutoLoadMore('#load-more-events', '#uc-event-right-panel-listing'); | EnableAutoLoadMore('#load-more-events', '#uc-event-right-panel-listing'); | ||
| − | } | + | } else if (window.location.pathname.substring(0, 7) == '/groups') { |
| − | |||
| − | |||
EnableAutoLoadMore('#uc-more-group-search', '.category-box-wrapper'); | EnableAutoLoadMore('#uc-more-group-search', '.category-box-wrapper'); | ||
$('.club-navigation ul li').click(function() { | $('.club-navigation ul li').click(function() { | ||
| Line 33: | Line 31: | ||
$('#uc-more-group-search').first().attr('data-loadmore', 0); | $('#uc-more-group-search').first().attr('data-loadmore', 0); | ||
}); | }); | ||
| − | } | + | } else if (window.location.pathname.substring(0, 9) == '/articles' && window.location.pathname.length <= 10) { |
| − | |||
| − | |||
EnableAutoLoadMore('#load_more_article', '.uc-articles-listing'); | EnableAutoLoadMore('#load_more_article', '.uc-articles-listing'); | ||
| − | } | + | } else if (window.location.pathname.substring(0, 16) == '/thestudentvoice' && window.location.pathname.length <= 17) { |
| − | |||
| − | |||
EnableAutoLoadMore('#load_more_sv', '.uc-sv-left-panel-wrapper'); | EnableAutoLoadMore('#load_more_sv', '.uc-sv-left-panel-wrapper'); | ||
$('#uc-sv-navigation li a').click(function() { | $('#uc-sv-navigation li a').click(function() { | ||
| Line 46: | Line 40: | ||
} | } | ||
}); | }); | ||
| − | </ | + | |
| + | $('html, body').bind('scroll mousedown DOMMouseScroll mousewheel keyup touchstart', function(){ | ||
| + | $('html, body').stop(); | ||
| + | }); | ||
| + | </syntaxhighlight> | ||
Latest revision as of 15:06, 29 March 2017
There are many pages on the platform that limit the content shown, and have a 'load more' button at the bottom which loads the next page when clicked.
The following code snippet enables automatic loading of the content as visitors scroll down the page, similar to how Facebook and Twitter do, improving the user experience as users can just scroll down without having to keep clicking 'load more'.
To snippet should be copied into Global Javascript.
1 function EnableAutoLoadMore(buttonElement, contentElement) {
2 $(window).bind('scroll', function() {
3 if (typeof $(buttonElement).first().attr('data-loadmore') === typeof undefined || $(buttonElement).first().attr('data-loadmore') == false) {
4 $(buttonElement).first().attr('data-loadmore', 0);
5 }
6 if ($(buttonElement + ':visible').length > 0) {
7 if (($(window).height() + $(document).scrollTop()) > ($(buttonElement).first().offset().top - 80) && $(contentElement).first().children().length > $(buttonElement).first().attr('data-loadmore')) {
8 $(buttonElement).first().attr('data-loadmore', $(contentElement).first().children().length);
9 $(buttonElement).click();
10 }
11 }
12 });
13 }
14
15 $(function() {
16 if (window.location.pathname.substring(0, 7) == '/events' && window.location.pathname.length <= 8) {
17 EnableAutoLoadMore('#load-more-events', '#uc-event-right-panel-listing');
18 } else if (window.location.pathname.substring(0, 7) == '/groups') {
19 EnableAutoLoadMore('#uc-more-group-search', '.category-box-wrapper');
20 $('.club-navigation ul li').click(function() {
21 $('#uc-more-group-search').first().attr('data-loadmore', 0);
22 });
23 $('.group-types-wrapper ul li').click(function() {
24 $('#uc-more-group-search').first().attr('data-loadmore', 0);
25 });
26 } else if (window.location.pathname.substring(0, 9) == '/articles' && window.location.pathname.length <= 10) {
27 EnableAutoLoadMore('#load_more_article', '.uc-articles-listing');
28 } else if (window.location.pathname.substring(0, 16) == '/thestudentvoice' && window.location.pathname.length <= 17) {
29 EnableAutoLoadMore('#load_more_sv', '.uc-sv-left-panel-wrapper');
30 $('#uc-sv-navigation li a').click(function() {
31 $('#load_more_sv').first().attr('data-loadmore', 0);
32 });
33 }
34 });
35
36 $('html, body').bind('scroll mousedown DOMMouseScroll mousewheel keyup touchstart', function(){
37 $('html, body').stop();
38 });
