Let’s Build A Page Navigator

by on March 5, 2011

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.

My first version of this navigator utilized simple named anchor tags page_top and page_bottom. But, I didn't like the #page_top and #page_bottom  that appeared in the address bar. So … the second version implemented a simple Javascript window.scrollTo().

That revision did prevent the named tags from being appended to the URL. But, since I was using Javascript anyway, why not make use of a basic jQuery method to enhance the navigation with an ECF (eye candy factor)? Thus, the third generation of this gadget evolved as you now see it … invoking an animated scroll.

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.

Code: PHP (plus WordPress)Gadget: Page Navigator (in header.php)

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
<?php
    $uploads_dir = wp_upload_dir();
    $upload_url = $uploads_dir['baseurl'];
 
    $img_page_home_url = $upload_url . '/page_home.png';
    $img_page_up_url = $upload_url . '/page_up.png';
    $img_page_middle_url = $upload_url . '/page_middle.png';
    $img_page_down_url = $upload_url . '/page_down.png';
    $page_home_url = site_url() . '/';
 
    $wcs_nav_speed = '500'; // lower #'s are faster (100 - 1000)
    $style_bkg = 'background:#F0F0F0;';
    $style_border = 'border:1px solid #E0E0E0;';
    $style_rounded = '-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;';
    $style_shadow = '-moz-box-shadow:1px 1px 1px #297385; -webkit-box-shadow:1px 1px 1px #297385; box-shadow:1px 1px 1px #297385;';
 
    echo "
        <div id='wcs_page_navigator' style='position:fixed; z-index=999; right:5px; $style_bkg $style_border padding:2px; $style_rounded $style_shadow'>
            <a href='$page_home_url' title='Home'><img src='$img_page_home_url' width='16' height='16' style='padding-bottom:2px;' /></a><br/>
            <div id='wcs_jquery_page_top' title='Top' style='margin:0px; padding-bottom:2px; cursor:pointer; cursor:hand;'><img src='$img_page_up_url' width='16' height='16' /></div>
            <div id='wcs_jquery_page_middle' title='Middle' style='margin:0px; padding-bottom:2px; cursor:pointer; cursor:hand;'><img src='$img_page_middle_url' width='16' height='16' /></div>
            <div id='wcs_jquery_page_bottom' title='Bottom' style='margin:0px; cursor:pointer; cursor:hand;'><img src='$img_page_down_url' width='16' height='16' /></div>
        </div>
 
        <script type='text/javascript'>
            // position the page navigator control
            var wdwHeight;
            wdwHeight = window.innerHeight;
            if (document.documentElement && document.documentElement.clientHeight) {wdwHeight = document.documentElement.clientHeight;}
            var wdwVcenter = ((wdwHeight - 76) / 2) + 'px';
            document.getElementById('wcs_page_navigator').style.bottom = wdwVcenter;
 
            // process navigator item clicks
            jQuery(document).ready(function()
            {
                jQuery('#wcs_jquery_page_top').click(function()
                {
                    jQuery('html, body').animate({scrollTop:0}, $wcs_nav_speed);
                        return false;
                });
 
                jQuery('#wcs_jquery_page_middle').click(function()
                {
                    jQuery('html, body').animate({scrollTop: (jQuery(document).height() - jQuery(window).height())/2}, $wcs_nav_speed);
                        return false;
                });
 
                jQuery('#wcs_jquery_page_bottom').click(function()
                {
                    jQuery('html, body').animate({scrollTop: jQuery(document).height()}, $wcs_nav_speed);
                        return false;
                });
            });
        </script>
    ";
 
    /**********************************************************************
     Copyright © 2011 Gizmo Digital Fusion (http://wpCodeSnippets.info)
     you can redistribute and/or modify this code under the terms of the
     GNU GPL v2: http://www.gnu.org/licenses/gpl-2.0.html
    **********************************************************************/
?>

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.

Lines 5-9 setup our primary URL variables. Lines 11-15 init style variables that you can taylor to your preferences. These various variables are substituted into the Javascript code. That's why the next segment is in double quotes.

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: 100)


With little effort, this code snippet could be implemented as a plug-in.

Share This Article: “Let's Build A Page Navigator”

(Also Available: Press CTRL+D to Bookmark this Page)

Comments

Share Your Thoughts  3 Responses to “Let’s Build A Page Navigator”
  1. 1
    Jenny C says:

    sweet gadget. thx.

  2. 2
    jonn c says:

    This little navigator thing is sooo cool in your margin. I’m gonna put it on my site too, with different colors.

  3. 3
    Tess says:

    ditto … cool addon

Share Your Thoughts

(Some editor features are restricted unless you're logged in.)

(When replying to a specific comment, your browser may require Shift+Enter instead of just Enter.)


(get a gravatar)


Notify me of followup comments via e-mail. You can also subscribe without commenting.