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"]
#stickydiv
{
position: fixed;
visibility: hidden;
height: 100px;
width: 200px;
background-color: Yellow;
}
[/sourcecode]


And a

like this…..


[sourcecode language="JavaScript" htmlscript="true"]
<div id=’stickydiv’>
This is always visible
</div>;
[/sourcecode]


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
// 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>
[/sourcecode]


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


You can download a working sample [ HERE ].