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.

[sourcecode language=”JavaScript” htmlscript=”true”]
position: fixed;
visibility: hidden;
height: 100px;
width: 200px;
background-color: Yellow;

And a

like this…..

[sourcecode language=”JavaScript” htmlscript=”true”]
<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.

[sourcecode language=”JavaScript” htmlscript=”true”]

<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 ].