|
|
Posted by Jonathan N. Little on 06/04/05 17:36
Merlin wrote:
<snip>
> Hi Spacegirl,
>
> I managed to do the CSS thing, but I failed on the JS side. Could you
> post the needed JS code for this? That would be really great.
>
> Best regards, Merlin
Of course there is more than one way to do this, here is my code that
even works with old NN4x...
### JavaScript ###
//New Sticky routines
function getEl(id){
if(document.getElementById){
return document.getElementById(id);
}
else if(document.layers){
return document.layers[id];
}
else if(document.all){
return document.all[id];
}
else{
return false;
}
}//getEl
function getElStyle(id){
if(document.getElementById){
return document.getElementById(id).style;
}
else if(document.layers){
return document.layers[id];
}
else if(document.all){
return document.all[id].style;
}
else{
return false;
}
}//getElStyle
function getScrollNN(){
return window.pageYOffset;
}//getScrollNN
function getScrollHack(){
//seems damn new browsers set one or the other, opposite stays 0
//if this behavior changes will have to add more code forks
//many set document.documentElement.scrollTop
//NN sets window.document.body.scrollTop
//and damn Opera sets both!!!!
if(window.document.documentElement.scrollTop){
return window.document.documentElement.scrollTop;
}
if(window.document.body.scrollTop){
return window.document.body.scrollTop;
}
return 0;
}//getScrollHack
function browserType(){
if(typeof(document.documentElement)!="undefined") {
if(typeof(document.documentElement.scrollTop)!="undefined") return 3;
}
//Don't test for document.body.scrollTop
//WebTV has a static 0 but uses 'window.pageYOffset'!
if(typeof(window.pageYOffset)!="undefined") return 1;
return 0;
}//browserType
function jump(){
var me=this;
me.dyW=me.getD();
me.hStyle.top=me.dyW+me.yOfs+me.units; //relocate
setTimeout(me.id + "_x.sticky()",5);
}//jump
function bounce(){
var me=this;
me.dyW=me.getD();
var t=me.dy;
if(me.dyW!=me.dy){
var pos=(me.dyW-me.dy) * .2;
pos>0 ? pos=Math.ceil(pos) : pos=Math.floor(pos);
me.dy+=pos;
t=me.dy + me.yOfs;
me.hStyle.top= t + me.units;
}
setTimeout(me.id + "_x.sticky()",5);
}//bounce
function makeSticky(id,useBounce){
var me=getEl(id);
var bt=browserType();
me.getD = bt ? (bt>1 ? getScrollHack : getScrollNN ) : void(0);
me.units = bt>1 ? "px" : "";
me.hStyle=getElStyle(id); //handle to style
//el's init yOfs
me.yOfs=(typeof(me.pageY)=='number' ? me.pageY : 0);
//WebTV fix
me.yOfs+= (typeof(me.offsetTop)=='number' ? me.offsetTop: 0);
me.dy=0; //el's delta y init as zero
me.sticky=(useBounce ? bounce : jump ); //set sticky type
window[me.id+"_x"]=me; //make a universal document handle
me.sticky();
}//makeSticky
### HTML ###
<body onload="makeStick('theElementID',1)">
<div id="theElementID">This will now be sticky</div> ...
#########
If you leave off the 2nd parameter or set to '0' on makeSticky() and the
element will jump to the scroll position similar to the CSS 'position:
fixed' or set to '1' to have the element 'slide' into position with a
dramatic bounce.
If you have several elements to make sticky then I suggest to make a
function like:
function bootstrap(){
makeSticky('anElememnt');
makeSticky('anotherElememnt');
makeSticky('yetAnotherElememnt');
}
And load with:
<body onload="bootstrap()"> ...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|