Auto load content on scroll - Revision history

Ash at 15:06, 29 March 2017

2017-03-29T15:06:16Z

Ash at 15:05, 29 March 2017

2017-03-29T15:05:50Z

Ash at 15:05, 29 March 2017

2017-03-29T15:05:22Z

Ash at 15:05, 29 March 2017

2017-03-29T15:05:08Z

Ash at 15:04, 29 March 2017

2017-03-29T15:04:31Z

Ash at 15:03, 29 March 2017

2017-03-29T15:03:32Z

Orry Verducci: Add scroll function which stops platform page scroll when a user tries to scroll, which blocks scrolling on the page.

2016-12-16T14:46:23Z

Add scroll function which stops platform page scroll when a user tries to scroll, which blocks scrolling on the page.

Orry Verducci: Change to else ifs

2016-12-15T16:29:24Z

Change to else ifs

Orry Verducci: Page creation

2016-12-15T16:28:08Z

Page creation

New page

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.

<nowiki>
function EnableAutoLoadMore(buttonElement, contentElement) {
$(window).bind('scroll', function() {
if (typeof $(buttonElement).first().attr('data-loadmore') === typeof undefined || $(buttonElement).first().attr('data-loadmore') == false) {
$(buttonElement).first().attr('data-loadmore', 0);
}
if ($(buttonElement + ':visible').length > 0) {
if (($(window).height() + $(document).scrollTop()) > ($(buttonElement).first().offset().top - 80) && $(contentElement).first().children().length > $(buttonElement).first().attr('data-loadmore')) {
$(buttonElement).first().attr('data-loadmore', $(contentElement).first().children().length);
$(buttonElement).click();
}
}
});
}

$(function() {
if (window.location.pathname.substring(0, 7) == '/events' && window.location.pathname.length <= 8) {
EnableAutoLoadMore('#load-more-events', '#uc-event-right-panel-listing');
}

if (window.location.pathname.substring(0, 7) == '/groups') {
EnableAutoLoadMore('#uc-more-group-search', '.category-box-wrapper');
$('.club-navigation ul li').click(function() {
$('#uc-more-group-search').first().attr('data-loadmore', 0);
});
$('.group-types-wrapper ul li').click(function() {
$('#uc-more-group-search').first().attr('data-loadmore', 0);
});
}

if (window.location.pathname.substring(0, 9) == '/articles' && window.location.pathname.length <= 10) {
EnableAutoLoadMore('#load_more_article', '.uc-articles-listing');
}

if (window.location.pathname.substring(0, 16) == '/thestudentvoice' && window.location.pathname.length <= 17) {
EnableAutoLoadMore('#load_more_sv', '.uc-sv-left-panel-wrapper');
$('#uc-sv-navigation li a').click(function() {
$('#load_more_sv').first().attr('data-loadmore', 0);
});
}
});
</nowiki>

@@ Line 5: / Line 5: @@
 To snippet should be copied into Global Javascript.
-<syntaxhighlight lang="javascript" line='line'><nowiki>
+<syntaxhighlight lang="javascript" line='line'>
 function EnableAutoLoadMore(buttonElement, contentElement) {
      $(window).bind('scroll', function() {
@@ Line 44: / Line 44: @@
      $('html, body').stop();
 });
-</nowiki></syntaxhighlight>
+</syntaxhighlight>

@@ Line 5: / Line 5: @@
 To snippet should be copied into Global Javascript.
- <syntaxhighlight lang="javascript" line='line'><code>
+<code>
 function EnableAutoLoadMore(buttonElement, contentElement) {
      $(window).bind('scroll', function() {
@@ Line 44: / Line 44: @@
      $('html, body').stop();
 });
-</code></syntaxhightlight>
+</code>

@@ Line 5: / Line 5: @@
 To snippet should be copied into Global Javascript.
-  <syntaxhighlight lang="javascript" line='line'>
+  <syntaxhighlight lang="javascript" line='line'><code>
 function EnableAutoLoadMore(buttonElement, contentElement) {
      $(window).bind('scroll', function() {
@@ Line 44: / Line 44: @@
      $('html, body').stop();
 });
-</syntaxhightlight>
+</code></syntaxhightlight>

@@ Line 23: / Line 23: @@
      if (window.location.pathname.substring(0, 7) == '/events' && window.location.pathname.length <= 8) {
          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');
          $('.club-navigation ul li').click(function() {
@@ Line 33: / Line 31: @@
              $('#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');
+     } else if (window.location.pathname.substring(0, 16) == '/thestudentvoice' && window.location.pathname.length <= 17) {
          EnableAutoLoadMore('#load_more_sv', '.uc-sv-left-panel-wrapper');
          $('#uc-sv-navigation li a').click(function() {