Skip to content

Instantly share code, notes, and snippets.

@thetrickster
Last active December 19, 2015 06:49
Show Gist options
  • Save thetrickster/23e8990cc4a298eefb72 to your computer and use it in GitHub Desktop.
Save thetrickster/23e8990cc4a298eefb72 to your computer and use it in GitHub Desktop.
BC Duplicate Web App Pagination in another div. Can be used to have web app pagination on the top of your page instead of BC's default functionality of putting it at the bottom.
<!-- The element to receive our duplicate pagination content -->
<ul class="top-pagination"></ul>
<!-- This doesn't really matter. Just giving an example of what your markup might look like -->
<div class="your-web-app-items">
{module_webapps}
</div>
<!-- Make sure jQuery is referenced in the HEAD of your HTML document or at least loaded before this script -->
<script>
(function($){
$(document).ready(function(){
// Change this to a class or ID of where you want to duplicate the pagination
var targetEl = $(".top-pagination");
// BC's pagination usually has a class of "pagination" and for web apps it also adds a "webapp" class, too
// I'm specifically using both classes to directly target web app pagination but if you want to use this method
// for all pagination on BC, just remove the ".webapp" from below
var bcPagination = $(".pagination.webapp");
// Check to see if both BC's default pagination and our element to receive the duplicate are on the page
if ( bcPagination.length && targetEl.length ) {
console.log("Truth!");
// Insert BC's pagination html into your target element. We can't insert the whole UL element because there's an ID
// that would be duplicated.
// We also add a class to your new pagination element of "pagination" and "webapp" so that your new pagination will
// pickup the CSS rules already assigned to the original pagination.
targetEl.html(bcPagination.html()).addClass("pagination webapp");
}
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment