Closed Thread Icon

Topic awaiting preservation: Smart Floating Box - how to determine height of div? Pages that link to <a href="https://ozoneasylum.com/backlink?for=27211" title="Pages that link to Topic awaiting preservation: Smart Floating Box - how to determine height of div?" rel="nofollow" >Topic awaiting preservation: Smart Floating Box - how to determine height of div?\

 
Author Thread
robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

posted posted 12-24-2005 08:00

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.

code:
<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)

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted posted 12-24-2005 10:14

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

kuckus
Paranoid (IV) Mad Librarian

From: GlieBeGe
Insane since: Dec 2001

posted posted 12-24-2005 12:20

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

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

robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

posted posted 12-24-2005 16:57

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

robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

posted posted 12-24-2005 19:08

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

code:
<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

robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

posted posted 12-31-2005 06:46

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:

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



-Robur

« BackwardsOnwards »

Show Forum Drop Down Menu