Place a sidebar on every page using a Greasemonkey script

Question

I'm trying to write a Greasemonkey script that will place a navigational sidebar on every web page that it is loads on, but I still don't know of a way to do this without covering up some of the content on each page. Is there any way to place a div at the side of each page that is loaded, without covering up any of the page's content?

Answer 1

The question you linked's accepted answer placed an offset on the whole page, while demonstrating a top bar, not a side bar. That technique is lousy for a right-sidebar because it chops off (hides) a slice of the left side of the page.

A better technique if you want to go that route (which I don't recommend), is to adjust the page width. Here's one way in a complete Greasemonkey script:

// ==UserScript==
// @name     _Sidebar on page
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var sidebarWidth    = "100px";

$("html").css ( {
    position:   "relative",
    width:      "calc(100% - " + sidebarWidth + ")"
} );

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  calc(" + sidebarWidth + " - 2ex)    \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );

Use CSS to position and style everything, and use jQuery to simplify the code and make it more robust/portable.

---

---

But, rather than compressing or shifting the page, and potentially busting its layout, go ahead and cover up some of the right-side content. This is almost always wasted space that usually gets ignored (and several other links and studies).

If your sidebar remains mostly invisible, when not hovered over, and has a handy keyboard shortcut to toggle its visibility, then it will be no trouble at all that it sometimes partially obscures right-side content. I've been using this technique for years and it works well.

A complete Greasemonkey script to do that is:

// ==UserScript==
// @name     _Add a Sidebar to a page with auto fade and keyboard shortcut
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <p>F9 toggles visibility</p>                                \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

//-- Fade panel when not in use
var kbShortcutFired = false;
var rightSideBar    = $('#gmRightSideBar');
rightSideBar.hover (
    function () {
        $(this).stop (true, false).fadeTo (50,  1  );
        kbShortcutFired = false;
    },
    function () {
        if ( ! kbShortcutFired ) {
            $(this).stop (true, false).fadeTo (900, 0.1);
        }
        kbShortcutFired = false;
    }
);
rightSideBar.fadeTo (2900, 0.1);

//-- Keyboard shortcut to show/hide our sidebar
$(window).keydown (keyboardShortcutHandler);

function keyboardShortcutHandler (zEvent) {
    //--- On F9, Toggle our panel's visibility
    if (zEvent.which == 120) {  // F9
        kbShortcutFired = true;

        if (rightSideBar.is (":visible") ) {
            rightSideBar.stop (true, false).hide ();
        }
        else {
            //-- Reappear opaque to start
            rightSideBar.stop (true, false).show ();
            rightSideBar.fadeTo (0, 1);
            rightSideBar.fadeTo (2900, 0.1);
        }

        zEvent.preventDefault ();
        zEvent.stopPropagation ();
        return false;
    }
}

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  100px;                              \
        z-index:                6666;                               \
        opacity:                0.9;                                \
    }                                                               \
    #gmRightSideBar p {                                             \
        font-size:              80%;                                \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );