Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old August 30th, 2004, 12:40 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default Window Size and DIV location

Need to place a DIV at bottom of my page - relative to the size of the window (not the screen). I need it to appear in view at the bottom of the window regardless of the window size and continue to appear upon resizing of the window.

I have no trouble placing a DIV at any give location within a window or frame, but am not sure how I determine the height and width of the window? I assume that I need to know this in order to properly position the DIV should the window be resized? How do I determine the size of the window?

Any all all help is appreciated.

Thank you,
sabertec2

PS - This particular app is in IE 5 or higher only. No NN info needed.
Reply With Quote
  #2 (permalink)  
Old August 30th, 2004, 01:55 PM
Registered User
 
Join Date: Jun 2003
Location: , , United Kingdom.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

To get the height of the document on the screen, you need the clientHeight property of the document's body.
It is also worth bearing in mind that you need to position it when the user scrolls the window. For this, you can use the scrollTop property of the body, which returns how far down the page the window has been scrolled at the top-left corner.

So to position the DIV at the bottom of the window, you need to add the scrolled height to the window height, and then take away the height of your DIV. you need to do this at 3 points: when the window is resized, when they scroll the window, and when the window first loads. Something like below should work (offsetHeight is like clientHeight but includes height of scrollbars if necessary):

<body onload="movediv()" onscroll="movediv()" onresize="movediv()">
<script>
function movediv()
{
  myDiv.style.pixelTop = document.body.clientHeight + document.body.scrollTop - myDiv.offsetHeight;
}
</script>
<div id="myDiv"
  style="
    position:absolute;
    top:0px;
    left:5px;
    width:100px;
    height:100px;
    background:red; border:1px blue solid;"
>
MyDIV
</div>
</body>



Regards
Philip
-------------------------
dhtml_phil@programmer.net
Reply With Quote
  #3 (permalink)  
Old August 30th, 2004, 02:14 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks Philip!

Did a quick check to make sure I had a grasp on what you posted. Works great.

Best regards,
sabertec2
Reply With Quote
  #4 (permalink)  
Old August 30th, 2004, 03:02 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

A much, much easier way is to use the bottom property:

<div style='bottom: 1px; right: 1px;'>text</div>

The previous solution keeps the box in place when scrolling... do you want that?

Snib

<><
Reply With Quote
  #5 (permalink)  
Old August 30th, 2004, 05:10 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

As a matter of fact, Snib, that's exactly what I'm trying to do.

Thanks!

sabertec2
Reply With Quote
  #6 (permalink)  
Old August 30th, 2004, 07:32 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

If you do want to fix the box in place, I suggest you go with Philip's solution, or look through http://dynamicdrive.com for a smoother fix.

An alternative would be to download "IE7", as it has a solution for seamless fixed positioning. However, you'd be downloading a lot of files for a simple problem, which is why I don't say go for it.

HTH,

Snib

<><
Reply With Quote
  #7 (permalink)  
Old August 30th, 2004, 10:37 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks, again,
Appreciate the willingness to clarify what I want and help with multiple solutions.

best regards,
sabertec2
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Browser window: Specifying the size and location? asearle HTML Code Clinic 2 November 22nd, 2007 08:50 AM
center text (only) in fixed size div, how to do it beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 April 16th, 2007 01:38 PM
window.location and page encoding arabuafef Classic ASP Professional 0 February 19th, 2007 06:23 AM
window.location crmpicco Javascript 1 July 7th, 2005 08:55 AM
Overflow scrollbars vs. div size in IE vs. Gecko mishagos BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 4 April 3rd, 2005 02:38 PM



All times are GMT -4. The time now is 03:09 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.