Documentation
Online documentation for Ajax Load More
Public Functions
The following public JavaScript functions allow for manipulation of Ajax Load More instances.
Click
almTriggerClick() – This function will allow you trigger an Ajax Load More load from any element on the screen.
1 2 3 4 |
var button = document.querySelector('button.my_button'); if(button){ almTriggerClick(); } |
Note: almTriggerClick should only be called when a single instance of Ajax Load More is on the page.
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 the 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 19 20 |
// Custom Filter JavaScript // Click Event function filterClick(){ var transition = 'fade'; var speed = 250; var data = this.dataset; // Call Ajax Load More `filter` method ajaxloadmore.filter(transition, speed, data); } // Get all buttons var buttons = document.querySelectorAll('ul.filters li a'); if(buttons){ // Loop each button and add click event [].forEach.call(buttons, function(button) { button.addEventListener('click', filterClick); }); } |
1 2 3 4 5 6 7 8 9 |
<!-- Example HTML Markup --> <ul class="filters"> <li> <a href="#" data-button-label="More Work" data-post-type="portfolio">Recent Work</a> </li> <li> <a href="#" data-button-label="More Posts" data-post-type="post">Latest Posts</a> </li> </ul> |
e.g. button_label = button-label