Forum Moderators: open
I am designing a floating box for my website.
The idea is to be able to stick any length of content into a side bar, and then have that content "follow" the user down the page.
The challenge is when the content in the div is heigher than the user's viewport. We don't want to crop off the bottom of our box!
To overcome this, I wrote the below code:
if the top of the user's viewport is below the top of the box, move the box down.
Else if the bottom of the user's viewport is above the bottom of the box, moved the box up.
Else, do nothing.
For some reason, the code does not quite work as expected. I am a php person, and can't quite figure out why (although I am sure it's very simple) :-)
If anyone knows how I need to fix it, that would be great!
I also need a way to determine the height of the user's viewport - right now I have it set to 700 (in var pH), but a dynamic version would be much better!
<div id="leftSideBar" style="position:absolute;">
content here!
</div>
<script language="Javascript">
<!--
function floatSideBar(bY,lPY) { //boxY, lastPageY
//pageY, pageHeight, boxHeight, boxId
var pY,pH,bH,id=\'leftSideBar\';
pY=(navigator.appName.indexOf("Netscape")!=-1)?pageYOffset:nn&&document.html.scrollTop?document.html.scrollTop:document.body.scrollTop;
if(pY!= lPY) { //they scrolled
//pH = document.body.offsetHeight;
//else if (document.layers) pH = window.innerHeight;
pH = 700;
bH = document.getElementById(id).offsetHeight;
if(pY < bY) { //need to move box up
bY = pY;
document.getElementById(id).style.top = bY+\'px\';
}
else if(pY + pH > bY + bH) { //need to move box down
bY = pY + pH - bY;
document.getElementById(id).style.top = bY+\'px\';
}
}
setTimeout('floatSideBar(\'+bY+\',\'+pY+\')',100);
};
floatSideBar(140,0);
//-->
</script>
position: fixed;
?
As I said before, "The challenge is when the content in the div is heigher than the user's viewport. We don't want to crop off the bottom of our box!"
I dislike JS as much it appears that You do, but in this case it appears that there is no hope for it :)
I must say that this topic hasn't generated much interest. If anyone knows why this is please tell me! Did I violate some unknown rule, or is javascript just too boring for anyone here?
I thought the idea of a floating box would have intrigued webmasters everywhere, but mabye not...
I am new here, but I wan't to be an asset to this community. Please let me know how what I should have done!
-Robur
