Public JS Functions
The following public JavaScript functions allow for the manipulation of Ajax Load More instances.
Click
ajaxloadmore.click(id) – This function will allow you to trigger an Ajax Load More load action from any element on the screen.
id | The Ajax Load More ID. null |
---|
1 2 3 4 5 |
// Trigger a click event. ajaxloadmore.click(); // Trigger a click event on the Ajax Load More instance with the ID of 'portfolio'. ajaxloadmore.click('portfolio'); |
Filter
ajaxloadmore.filter(transition, speed, data) – This function will allow you to update Ajax Load More parameters on the fly and provide a clean transition between each filter.
» View Example
The filter() method requires the following parameters:
transition | Select a transition type. ‘fade’ | null |
---|---|
speed | The speed of the transition, in milliseconds. e.g. ‘300’ |
data | The data() object that holds the parameters for updating. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Click Handler Function function clickHandler(){ var transition = 'fade'; var speed = 250; var data = this.dataset; // Call Ajax Load More `filter` method ajaxloadmore.filter(transition, speed, data); } // Get All Filter Buttons var buttons = document.querySelectorAll('ul.filters button'); if(buttons){ // Loop each button and add a click event [].forEach.call(buttons, function(button) { button.addEventListener('click', clickHandler); }); } |
1 2 3 4 5 6 7 8 9 |
<!-- Example HTML Markup --> <ul class="filters"> <li> <button type="button" data-post-type="portfolio" data-button-label="More Work">Recent Work</button> </li> <li> <button type="button" data-post-type="post" data-button-label="More Posts">Recent Work</button> </li> </ul> |
e.g. button_label = button-label
Reset
ajaxloadmore.reset() – This function will allow you to reset Ajax Load More back to page 1 of a listing. This function is useful in cases where content may have changed and Ajax Load More is required to be started from the beginning.
1 2 3 4 |
var button = document.querySelector('button#my_button'); button.addEventListener('click', function(e){ ajaxloadmore.reset(); }); |
Start
ajaxloadmore.start(element) – This function will initiate an instance of Ajax Load More. This is most commonly used when Ajax Load More has been loaded via Ajax.
1 2 |
var element = document.querySelector(".ajax-load-more-wrap"); // Ajax Load More div wrapper. ajaxloadmore.start(element); |
getPostCount
ajaxloadmore.getPostCount() – This function will return the loaded post count in the current query by ALM instance ID.
1 2 |
var count = ajaxloadmore.getPostCount(id); document.querySelector('span.count').innerHTML = count; |
Note: The ID parameter in the getPostCount function is optional and will fall back to the default instance if not present.
getTotalPosts
ajaxloadmore.getTotalPosts() – This function will return the total number of posts in the entire query by ALM instance ID.
1 2 3 4 |
// [ajax_load_more id="portfolio"] var count = ajaxloadmore.getPostCount('portfolio'); var total = ajaxloadmore.getTotalPosts('portfolio'); document.querySelector('h1').innerHTML = 'Showing ' + count + ' of ' + total + ' posts'; |
Note: The ID parameter in the getTotalPosts function is optional and will fall back to the default instance if not present.
getTotalRemaining
ajaxloadmore.getTotalRemaining() – This function will return the total number of posts remaining to be loaded by ALM instance ID.
1 2 3 |
// [ajax_load_more id="portfolio"] var remaining = ajaxloadmore.getTotalRemaining('portfolio'); document.querySelector('h1').innerHTML = remaining + ' posts remaining.'; // 15 posts remaining. |
Note: The ID parameter in the getTotalRemaining function is optional and will fall back to the default instance if not present.