SETUIX Solutions

Technological Divide

Fixed Javascript Sidebar

Author: setuix Day: Monday, September 28th, 2009 Time: 12:59 pm Category: Codes

I received some emails asking how to create that Fixed Javascript Sidebar that scrolls with the page. A floating sidebar can be used to give your readers simple navigation options at all times. It can also be used as an advertisement section that stalks your readers…

The sidebar code is created by jtricks.com and can be found here. The hide and show menu option is also created by jtricks but for the their Absolute Floating Menu. In order for the hide and show function to work a slight tweak in the codes will make it work for the Fixed menu.

There is a slight delay when scrolling the Absolute Floating Menu. For setuix.com I prefer the menu to be always there instead of appearing a few seconds later while scrolling. Below are the codes for the sidebar, css codes as appear on setuix.com as well as the tweaked hide and show codes. Place the code below after </head>.

<!—Fixed Menu Bar EoF—>
<div id="fixeddiv">
<div class="fixeddiv">
<ul>
<a href="http://www.setuix.com">home</a><br />
<a href="http://www.setuix.com/about">about</a><br />
<a href="http://www.setuix.com/setuix-irc">setuix@irc</a><br />
<a href="http://www.setuix.com/contact">contact</a><br />
<a href="http://www.setuix.com/advertise">advertise</a><br />
<a href="http://www.setuix.com/rss" target="_blank">rss</a><br />
<a href="http://www.setuix.com/sitemap" target="_blank">sitemap</a><br />
<br />
recommended:<br />
<a href="http://www.getfirefox.com" target="_blank">firefox</a><br />
<a href="http://www.google.com/chrome" target="_blank">chrome</a><br />
@1280 X 1025<br />
@1920 X 1080<br />

<br />
<a href="#" onclick="return fixedMenu.hide()">hide menu</a><br />
<a href="#">return to ↑</a><br />
</ul>
</div>
</div>

var fixedMenu =
{
    hasInner: typeof(window.innerWidth) == ‘number’,
    hasElement: document.documentElement != null
       && document.documentElement.clientWidth,

    menu: document.getElementById
        ? document.getElementById(fixedMenuId)
        : document.all
          ? document.all[fixedMenuId]
          : document.layers[fixedMenuId]
};

fixedMenu.computeShifts = function()
{
    fixedMenu.shiftX = fixedMenu.hasInner
        ? pageXOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollLeft
          : document.body.scrollLeft;
    if (fixedMenu.targetLeft > 0)
        fixedMenu.shiftX += fixedMenu.targetLeft;
    else
    {
        fixedMenu.shiftX +=
            (fixedMenu.hasElement
              ? document.documentElement.clientWidth
              : fixedMenu.hasInner
                ? window.innerWidth – 20
                : document.body.clientWidth)
            – fixedMenu.targetRight
            – fixedMenu.menu.offsetWidth;
    }

    fixedMenu.shiftY = fixedMenu.hasInner
        ? pageYOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollTop
          : document.body.scrollTop;
    if (fixedMenu.targetTop > 0)
        fixedMenu.shiftY += fixedMenu.targetTop;
    else
    {
        fixedMenu.shiftY +=
            (fixedMenu.hasElement
            ? document.documentElement.clientHeight
            : fixedMenu.hasInner
              ? window.innerHeight – 20
              : document.body.clientHeight)
            – fixedMenu.targetBottom
            – fixedMenu.menu.offsetHeight;
    }
};

fixedMenu.moveMenu = function()
{
fixedMenu.computeShifts();

    if (fixedMenu.currentX != fixedMenu.shiftX
        || fixedMenu.currentY != fixedMenu.shiftY)
    {
        fixedMenu.currentX = fixedMenu.shiftX;
        fixedMenu.currentY = fixedMenu.shiftY;

        if (document.layers)
        {
            fixedMenu.menu.left = fixedMenu.currentX;
            fixedMenu.menu.top = fixedMenu.currentY;
        }
        else
        {
            fixedMenu.menu.style.left = fixedMenu.currentX + ‘px’;
            fixedMenu.menu.style.top = fixedMenu.currentY + ‘px’;
        }
    }

fixedMenu.menu.style.right = ”;
fixedMenu.menu.style.bottom = ”;
};

fixedMenu.floatMenu = function()
{
fixedMenu.moveMenu();
setTimeout(‘fixedMenu.floatMenu()’, 20);
};

// addEvent designed by Aaron Moore
fixedMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != ‘function’ ||
       typeof element[listener + '_num'] == ‘undefined’)
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == ‘function’)
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = 0; i < element[listener + '_num']; i++)
                if(element[listener + i](e) === false)
                    r = false;
            return r;
        }
    }

    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};

fixedMenu.supportsFixed = function()
{
    var testDiv = document.createElement("div");
    testDiv.id = "testingPositionFixed";
    testDiv.style.position = "fixed";
    testDiv.style.top = "0px";
    testDiv.style.right = "0px";
    document.body.appendChild(testDiv);
    var offset = 1;
    if (typeof testDiv.offsetTop == "number"
        && testDiv.offsetTop != null
        && testDiv.offsetTop != "undefined")
    {
        offset = parseInt(testDiv.offsetTop);
    }
    if (offset == 0)
    {
        return true;
    }

return false;
};

fixedMenu.init = function()
{
    if (fixedMenu.supportsFixed())
        fixedMenu.menu.style.position = "fixed";
    else
    {
        var ob =
            document.layers
            ? fixedMenu.menu
            : fixedMenu.menu.style;

        fixedMenu.targetLeft = parseInt(ob.left);
        fixedMenu.targetTop = parseInt(ob.top);
        fixedMenu.targetRight = parseInt(ob.right);
        fixedMenu.targetBottom = parseInt(ob.bottom);

        if (document.layers)
        {
            menu.left = 0;
            menu.top = 0;
        }
        fixedMenu.addEvent(window, ‘onscroll’, fixedMenu.moveMenu);
        fixedMenu.floatMenu();
    }
};

fixedMenu.addEvent(window, ‘onload’, fixedMenu.init);
//–></script>
<!—Fixed Menu Bar EoF—>

Below is the code for the Hide and Show button. You can place the code right after the <!—Fixed Menu Bar EoF—>

<!–On/Off Code–>
<script type="text/javascript"><!–
/* Script by: www.jtricks.com
* Version: 20080801
* Latest version:
* www.jtricks.com/javascript/navigation/floating_close.html
*/
fixedMenu.hide = function()
{
fixedMenu.menu.style.display=’none’;
return false;
}

fixedMenu.show = function()
{
fixedMenu.menu.style.display=’block’;
return false;
}
//–></script>
<!–On/Off Code EoF—>

I placed the Hide button on my Fixed Menu and the Show button on my top menu bar just above my banner. You can place the Show button anywhere on your page as you please. Just insert the following code:

Now place the below code in your style.css file. You can change the layout of your menu with the codes below.

#fixeddiv {
    position:fixed;
    width:100px;
    height:210px;left:0px;bottom:0px;
    padding:5px;
    background:none;
}
.fixeddiv ul {
    margin : 0 0;
    padding : 0 0;
    font-family:Tahoma, Georgia, Century gothic, Arial, sans-serif;
    font-size:10px;
    color:#666;
    text-transform:uppercase;
}
.fixeddiv ul a:hover {
    color : #879469;
    border-bottom : 1px dotted #879469;
}

If you have any problems with the codes please leave a comment. And if you like this code please visit the creators here. There are many more codes there.

Share and Enjoy:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.