Overview

This is just a little JQuery that can be used to move the navigation tools that are normally under a listing to somewhere else nearby. 

In one case recently, my page was getting crowded with modules and I was trying hard to get the whole page above the fold so the user did not need to scroll up and down to interact with the page. The Nav tools were below the Listing and were sticking down below the fold. They needed to be moved.

Turns out a little HTML and JQuery was all that was needed to move them, and they still work as designed.

Before

After

The nav controls are in the element with the .paging class.

Create a div in another module on the page, give it the id of your choice, like, "NavPlace"

<div id="NavPlace"></div>

Then put some JQuery into the "On Init Javascript" in the Listing module's Advanced Settings.

Depending on how long it takes for you listing to load, this code needs to wait until the page is ready and then a few seconds and then run the code.

You can run the code a few times a second apart by using the setTimeout funciont so that it might move faster or a little slower depending on load time.

Here is the JS, Put in the Initial JS

  $('document').ready(function(){
    setTimeout(function(){
      $('.paging').appendTo('#NavPlace');
    },2000);
    setTimeout(function(){
      $('.paging').appendTo('#NavPlace');
    },3000);
    setTimeout(function(){
      $('.paging').appendTo('#NavPlace');
    },4000);
  });

That's it. The page loads, the code runs and moves the nav tools to the new location wherever you put the div with the id.