How to get actual width and height of body ?

P

Pugi!

I am making a site with lot of AJAX components. When I present a form
(in a layer on top of contents of page) I want to make sure that the
user cannot click on a link or button other then on the form. The way
to do this is to create a layer just underneath the form that blocks
the elements on the page underneath. This is the easy part. The hard
part is to get the size of the blocking layer right.
Using width:100% and height:100% the layer only covers the visible
part of the page: when you scroll down or left you can access elements
(libnks, buttons of the page). Using document.body.clientWidth
and .clientHeight or document.body.offsetWidth and .offsetHeight or
document.body.scrollWidth and .scrollHeight the blocking layer only
covers the initial width and height of the body (at load). When the
page has increased in width and height after loading this is not
covered. How can I get the actual width and height of the page ?

thanx,

JM
 
R

RobG

Pugi! said:
I am making a site with lot of AJAX components. When I present a form
(in a layer on top of contents of page) I want to make sure that the
user cannot click on a link or button other then on the form. The way
to do this is to create a layer just underneath the form that blocks
the elements on the page underneath. This is the easy part. The hard
part is to get the size of the blocking layer right.
Using width:100% and height:100% the layer only covers the visible
part of the page: when you scroll down or left you can access elements
(libnks, buttons of the page). Using document.body.clientWidth
and .clientHeight or document.body.offsetWidth and .offsetHeight or
document.body.scrollWidth and .scrollHeight the blocking layer only
covers the initial width and height of the body (at load). When the
page has increased in width and height after loading this is not
covered. How can I get the actual width and height of the page ?

Remember to search the archives before posting, very often your
question has already been answered. The subject below may not seem to
be what you are after, but I think the content of the thread is.

"FAQ Topic - How do I find the size of a browser window?"
<URL:
http://groups.google.com.au/group/c...sions+of+window&rnum=1&hl=en#1c13241414a0fad9
 
M

Matt Kruse

I am making a site with lot of AJAX components. When I present a form
(in a layer on top of contents of page) I want to make sure that the
user cannot click on a link or button other then on the form. The way
to do this is to create a layer just underneath the form that blocks
the elements on the page underneath.

Use jQuery and the BlockUI plugin and you'll be done in about 10
seconds.

Matt Kruse
 
D

Darko

I am making a site with lot of AJAX components. When I present a form
(in a layer on top of contents of page) I want to make sure that the
user cannot click on a link or button other then on the form. The way
to do this is to create a layer just underneath the form that blocks
the elements on the page underneath. This is the easy part. The hard
part is to get the size of the blocking layer right.
Using width:100% and height:100% the layer only covers the visible
part of the page: when you scroll down or left you can access elements
(libnks, buttons of the page). Using document.body.clientWidth
and .clientHeight or document.body.offsetWidth and .offsetHeight or
document.body.scrollWidth and .scrollHeight the blocking layer only
covers the initial width and height of the body (at load). When the
page has increased in width and height after loading this is not
covered. How can I get the actual width and height of the page ?

thanx,

JM

I have the very same problem. Actually, I *had* :) because later I
gave up the idea because I didn't like the visual effect of it.
Anyway, my solution of the problem was that I executed the function
that put the panel over the whole screen in the beginning, and then
manually the function that resizes the panel each time I do page-
updates based on the data I received with Ajax. I didn't like the
solution much, but it worked well. I would have liked it solved using
plain CSS, but it's true that 100% doesn't work well - didn't work for
me neither.
 
R

Rick Brandt

RobG said:
Remember to search the archives before posting, very often your
question has already been answered. The subject below may not seem to
be what you are after, but I think the content of the thread is.

"FAQ Topic - How do I find the size of a browser window?"
<URL:
http://groups.google.com.au/group/c...sions+of+window&rnum=1&hl=en#1c13241414a0fad9

PMFJI, but that is a link to a thread discussing the topic, but that
particular thread doesn't appear to fully resolve what actually IS the
proper way to do it. Is it the consensus that the original method posted
from the FAQ is correct? I ask because others in the thread dispute that.
 
J

JM

RobG said:
Remember to search the archives before posting, very often your
question has already been answered. The subject below may not seem to
be what you are after, but I think the content of the thread is.

"FAQ Topic - How do I find the size of a browser window?"
<URL:
http://groups.google.com.au/group/c...sions+of+window&rnum=1&hl=en#1c13241414a0fad9

The solution presented in the link doesn't work at all. It positions a
div at the moment a page is loaded, but doesn't adjust when you scroll
down or add content to a page. I either need something that covers the
entire page (not only the visible part in the browser) or that
continuously covers the portion of the page in the browser window (even
when scrolling). I need it to cover the page at the moment I activate
this feature, not the pagesize at the moment it was loaded.

JM
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top