Search code examples
javascriptjqueryajaxbusiness-catalyst

Can Blog {tag_nextpage} and {tag_previouspage} load on same page for Business Catalyst?


I had a question. Is it possible to load the contents of a blog list on the same page when either {tag_nextpage} or {tag_previouspage} has been invoked? This would eventually replace the contents on the current page with the new content (ie. either prev page contents or next page contents).

Can someone tell me how do I proceed with this using jQuery or AJAX?


Solution

  • Approach A: Create seamless transition effects for those two links specifically

    On page load, you'll need to:

    • look for the previous/next links
    • load their content (maybe via $.get())
    • Intercept page navigation events (because links don't listen only to clicks)
    • Replace the list content
    • Update the URL and navigation history

    Approach B: Create seamless transition effects for any in-site link

    Use smoothState.js:

    • Include a copy of jQuery and jQuery.smoothState.js on your page
    • Add a container with an id of #main and include some links inside of it
    • Create a new js file and run $('#main').smoothState()
    $(function() {
      $('#main').smoothState();
    });