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.


#stickydiv
{
    position: fixed;
    visibility: hidden;
    height: 100px;
    width: 200px;
    background-color: Yellow;
}

And a

like this…..


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

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 
// http://www.javascriptkit.com/script/script2/alwayscombo.shtml
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')
            this.stickyelement.style.top = 0 + this.addoffset[0] + 'px'
        else if (this.location[0] == 'bottom')
            this.stickyelement.style.bottom = 0 + this.addoffset[0] + 'px'
        if (this.location[1] == 'left')
            this.stickyelement.style.left = 0 + this.addoffset[1] + 'px'
        else if (this.location[1] == 'right')
            this.stickyelement.style.right = 0 + this.addoffset[1] + 'px'
    },

    init: function ()
    {
        this.stickyelement = document.getElementById(this.stickyid)
        this.stickyelement.style.visibility = 'visible'
        this.positionstickydiv()
    }
}

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

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


You can download a working sample [ HERE ].