Topic awaiting preservation: Smart Floating Box - how to determine height of div?

Hello everyone!

I am designing a floating box with javascript.
The idea is to wrap things inside it (ads, menus, etc), and have them "follow" the user down the page.

I have the basic idea working perfectly.
The problem I am having is when the box is "longer" that the page. In that case, users never get to see the bottom of the box.

The code I currently have can be seen below.
What I want to do is run a check on each "frame": if the bottom of the viewed page is below the bottom of our box, move the box down. Else if the top of the viewed page is above the top of our box, move the box up. Else, do nothing.

Unfortunatley, to do this I need to be able to determine the height of my box dynamically (so I can tell when the bottom is below the viewed page area). Does anyone know how to do this?
I have found some examples which worked with Iframes, but they used some tricks available only for iFrames.

<div id="leftSideBar" style="position:relative;">
	!BOX CONTENT!
</div>
	
<script language="Javascript">
<!--
		
	function floatSideBar(blah) {
		var pY,nY,id=\'leftSideBar\';
		
		pY=(navigator.appName.indexOf("Netscape")!=-1)?pageYOffset:nn&&document.html.scrollTop?document.html.scrollTop:document.body.scrollTop;
		//pY -= document.getElementById(id).style.pixelHeight;
			
		//nY += 0.1 * (pY-nY);
		nY = pY;
		
		document.getElementById(id).style.top = nY+\'px\';
		setTimeout(\'floatSideBar()\',100);
	};
	
	floatSideBar();
			
//-->
</script>

Thanks,

-Robur

(Edited by robur on 12-24-2005 08:01)

Well, why not set the box's style property to overflow-y: auto; or overflow-y: scroll? That way it will offer them a scroll-bar if the content overflows the set, static height for the box. Then all you need do is make sure that the box is less than, say, 400px high, and then everyone will always be able to see it, even if they're at 640x480.


Justice 4 Pat Richard

'cause that would only be half as nice, Skaarjj...

In most browsers, getElementById(~~).offsetHeight will give you the box's current height.

Skaarj:

Beacuse that defeats the whole purpose (although it was a good idea)!
I want this to work with any size box, and i don't want scroll bars getting in the way of it.

Kuckus:

Thank You!
I will try implementing this into the code.
You will be hearing back from me soon!

-Robur

I have it almost working...

If anyone knows how to finish it, that would be great!
I also still need a reliable way to determine the height of the user's viewport. (i thought of floating a transparent div with top=0 and bottom = 0 and then reading the hieght of it, but it's definitlye not elegant).

<script language="Javascript">
	<!--
		
	function floatSideBar(bY,lPY) {
		//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>

Thanks,

-Robur

I almost have this working, we can't let it die now!
It would be a useful thing for many websites, and it's almost completed.

Basically, it needs two things: the first is a way to dynamically determine the height of the user's viewport (should be trivial), and the second is for some one who knows JS to tell me why it jumps sometimes.

I think the code is correct, but it doesn't seem to work quite right.
All you should have to do to test it is put the following html code in front of the javascript in the previous post:

<div id="leftSideBar" style="position:absolute;">
content here!
</div>

-Robur