The Ajax Control Toolkit has an “Always Visible” Extender.

I’ve been working on finding / writing / showing client side alternatives to the Ajax Control Toolkit features.

As I examine ths useage of such a feature it seems that the needs of the specific usage scenarios.

Rick Strahl wrote a great one HERE that implements a cliet side status bar.

I wanted one that sort of looks like the Ajax Control Toolkit one.

Since I still don’t yet “think” in jQuery this plain old JavaScript and I’ll look to converting it to a jQuery plugin at some point in the future.

So, here is the experience ….

And then after scrolling down the page.

Given a CSS class like this.

    position: fixed;
    visibility: hidden;
    height: 100px;
    width: 200px;
    background-color: Yellow;

And a

like this…..

    <div id='stickydiv'>
        This is always visible

On an otherwise long page of markup, the div with the “Stickydiv” class applied will be made always visible by the follow JavaScript.

<script type='text/javascript'>
// Derived from 
var stickydiv =
    location: ['top', 'right'],
    addoffset: [10, 15],
    stickyid: 'stickydiv',

    positionstickydiv: function () {
        var docElement = (document.compatMode == 'CSS1Compat') ?
                          document.documentElement : document.body
        if (this.location[0] == 'top')
   = 0 + this.addoffset[0] + 'px'
        else if (this.location[0] == 'bottom')
   = 0 + this.addoffset[0] + 'px'
        if (this.location[1] == 'left')
   = 0 + this.addoffset[1] + 'px'
        else if (this.location[1] == 'right')
   = 0 + this.addoffset[1] + 'px'

    init: function ()
        this.stickyelement = document.getElementById(this.stickyid) = 'visible'

if (window.addEventListener)
    window.addEventListener('load', function () { stickydiv.init() }, false)
else if (window.attachEvent)
    window.attachEvent('onload', function ()

Note that the code understands “TOP”, “BOTTOM”, “LEFT”, and “RIGHT”.

You can download a working sample [ HERE ].