This week's book giveaway is in the Design forum.
We're giving away four copies of Design for the Mind and have Victor S. Yocco on-line!
See this thread for details.
Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Determining properties of the browser screen

 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64700
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


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

 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yet to use jQuery but I'm seriously considering now.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64700
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tip of the iceberg. It also makes the two big private browser hells manageable: events and Ajax.
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64700
86
IntelliJ IDE Java jQuery Mac Mac OS X
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You should really get your hands on a cheat sheet.

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64700
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Or buy a book!
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic