Among the many facets of designing a web site, one key factor is considering visitor convenience. It should be easy to find content on your site and it should be easy to navigate.
Browsers are standardized in allowing the user to easily go back or forward one page. Some mouse models have extra buttons for this capability as well.
But, neither browsers nor mice offer a mechanism for easily moving to the top or bottom of a page except for CTRL+Home and CTRL+End. And, most folks navigate with their mouse instead of the keyboard.
This latter navigation aspect can be important for long pages … and we bloggers are sometimes long-winded. So … I constructed a page navigator that can be quickly incorporated into any WP blog. If you haven't noticed or used it yet, check out this little gadget … it's on the far right of the browser just to the left of the scrollbar. Click the buttons and note how the page scrolls.
Presenting the WCS Page Navigator
Here's the code to place in the your theme's header.php file … just after the opening <body> tag. Alternatively, you could place it in your footer.php file … just before the closing </body> tag
But, read the remainder of this article before implementing it. Also, you may want to backup your header.php before making any changes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
In lines 2 and 3, we get the location of the folder where the four images have been uploaded. You MUST upload them through the dashboard's media facility. If you were to attach them to a page/post, they'd be placed in a subfolder which has the date appended.
Now, in lines 18-23, we create the container for the four navigation buttons. Did you notice how it always remains centered in the viewport beside the browser's scrollbar? That's because we used the position:fixed style for the container. Then, in lines 26-31, we precisely set the position.
You might have wondered about the 76 pixel offset in determining the container's vertical center position. Here' the scoop. Each image is 16 pixels in height; that's 64 pixels total. Plus, we padded the inside of the container with 2 pixels at the top and bottom; that's now 68 pixels total. We also padded the bottom of the top three images by 2 pixels; that's now 74 pixels total. Finally, we have a border that is one pixel in height, top and bottom. So … we finish with a total of 76 pixels.
The remainder of this code snippet handles the individual item processing. The click works because we assigned id attributes to each item's attribute in lines 20-22.
You may have noted that we used a different method for calculating scroll positions with the jQuery methods. Line 38 simply scrolls to the top of the page. Line 44 scrolls to the middle of the document. And, line 50 scrolls to the bottom of the document.
Also, note that we employed the WP compatibility mode jQuery( calling convention rather than the default $( method. Otherwise, the code might not work properly on some installations. For more info on the animate method click here.
Next, you need the image files. Here they are (right-click -> Save Image As…):
Here are a few hue variations for your convenience. If you use these though, be SURE to rename the file references in lines 5-8. And, these should be displayed on a light background color. Of course, you can use other 16×16 graphics as well.
You can right-click to download these images one by one. Or, you can grab them all at once with this ZIP file.
icon_pngs_navigation.zip (size: 24.9 KiB | hits: 130)
With little effort, this code snippet could be implemented as a plug-in.