File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Determining properties of the browser screen Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Determining properties of the browser screen" Watch "Determining properties of the browser screen" New topic
Author

Determining properties of the browser screen

Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
Hi All,
I have a webpage that is fairly long (i.e. scrolls off the browser screen) and I want to be able to display a small block on the screen (always centered on the user's view). The block is a div and may have text, images, etc..,. I want to be able to place this block right in the center of the browser window regardless of where they have scrolled to on the page. Also I would like to be able to have them not be able to scroll while this block is up and have this code be cross-browser compatible as well (although IE will be the core browser used). Any help would be greatly appreciated.

Rob
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Get the browser width and height and scroll position and watch for onscroll.

There is also CSS position: fixed, but it is not supported in every browser.

Eric
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
Hi Eric,
Would you happen to have a good example of grabbing the width and height of the browser that would handle all browers (or at least most)? Right now I'm using document.body.clientHeight and clientWidth. How far does that get me with the other browsers? I'm using IE 7 and it's working fine but I noticed an example elsewhere to use with IE and it didn't work document.documentElement..... How do I grab the scroll position? Which object does it belong? Also, since position: fixed isn't supported in all browsers is there a way to mimic this property through javascript, CSS, HTML, etc.., that you are aware of? Thanks so much for the response.

Rob
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61206
    
  66



assuming of course, the use of jQuery. (Trying to do something so browser-dependent without the aid of a library that already handles the difference is madness, in my opinion).


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
Yet to use jQuery but I'm seriously considering now.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61206
    
  66

Tip of the iceberg. It also makes the two big private browser hells manageable: events and Ajax.
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
Bear, alright I've replaced it with $(window).width() and $(window).height(). Can you tell me how I can determine how far down the scrollbar is or how I can move the scrollbar to the top of the page at least? I want to have a message and/or images pop up in the center of the browser (wrapped in div tag). Thanks again (Eric and Bear) for the help.

Rob
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61206
    
  66

$('body').scrollTop();
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You should really get your hands on a cheat sheet.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61206
    
  66

Or buy a book!
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
I've become a frequent visitor to safari on-line but currently I'm in the process of reading 2 books already so it won't be until after I finish those that I'll get a chance to do some reading on jQuery.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Determining properties of the browser screen