Topic awaiting preservation: javascript to center a div in the viewport $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8953" title="Pages that link to Topic awaiting preservation: javascript to center a div in the viewport" rel="nofollow" >Topic awaiting preservation: javascript to center a div in the viewport\$

Author	Thread
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-21-2003 12:54 Ok hi guys, I am working on a page that has a an absolutely positioned div within a relatively positioned div at the bottom of each page. The actual pixel distance down the page varies depending on the length and size of the page content. What I would like to be able to do is have a button that when click makes the div float in the center of the viewport/window no matter where on the page the user has scrolled to. How can I achieve this? any ideas? basic code is like this: <html> <head> </head> <body> <p>page content yada yada</p> <div style="position: relative"> <div id="myDiv" style="position:absolute;top:0px;left:0px"></div> <d/iv> </body> </html>
rickindy Nervous Wreck (II) Inmate From: Indianapolis, In USA Insane since: Jan 2002	posted 11-21-2003 13:55 Check the FAQ abot this very topic: http://faq.ozoneasylum.com/842/rating/ You need to detect the height and width of the window and then reposition your floating div as the user scrolls up and down the page. There's an FAQ for that that references another site: http://javascriptkit.com/javatutors/static.shtml Few problems in life can't be solved by chocolate

Topic awaiting preservation: javascript to center a div in the viewport\$

Author

Thread

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-21-2003 12:54

Ok hi guys,

I am working on a page that has a an absolutely positioned div within a relatively positioned div at the bottom of each page. The actual pixel distance down the page varies depending on the length and size of the page content.

What I would like to be able to do is have a button that when click makes the div float in the center of the viewport/window no matter where on the page the user has scrolled to. How can I achieve this? any ideas?

basic code is like this:

<html>
<head>
</head>
<body>

<p>page content yada yada</p>

<div style="position: relative">

<div id="myDiv" style="position:absolute;top:0px;left:0px"></div>

<d/iv>

</body>
</html>

rickindy
Nervous Wreck (II) Inmate

From: Indianapolis, In USA
Insane since: Jan 2002

posted 11-21-2003 13:55

Check the FAQ abot this very topic: http://faq.ozoneasylum.com/842/rating/

You need to detect the height and width of the window and then reposition your floating div as the user scrolls up and down the page.

There's an FAQ for that that references another site:
http://javascriptkit.com/javatutors/static.shtml

Few problems in life can't be solved by chocolate