How to get actual width and height of body ?

Discussion in 'Javascript' started by Pugi!, Jun 15, 2007.

  1. Pugi!

    Pugi! Guest

    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
     
    Pugi!, Jun 15, 2007
    #1
    1. Advertising

  2. Pugi!

    RobG Guest

    Pugi! wrote:
    > 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
    >



    --
    Rob
     
    RobG, Jun 15, 2007
    #2
    1. Advertising

  3. Pugi!

    Matt Kruse Guest

    On Jun 15, 5:47 am, Pugi! <> wrote:
    > 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
     
    Matt Kruse, Jun 15, 2007
    #3
  4. Pugi!

    Darko Guest

    On Jun 15, 12:47 pm, Pugi! <> wrote:
    > 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.
     
    Darko, Jun 15, 2007
    #4
  5. Pugi!

    Rick Brandt Guest

    RobG wrote:
    > 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.
     
    Rick Brandt, Jun 15, 2007
    #5
  6. Pugi!

    JM Guest

    RobG wrote:
    > Pugi! wrote:
    >> 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
    >
    >
    > --
    > Rob
    >


    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
     
    JM, Jun 15, 2007
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lois
    Replies:
    1
    Views:
    3,403
    Ryan Stewart
    Dec 27, 2004
  2. Bernd Meier
    Replies:
    6
    Views:
    546
    GTalbot
    Jan 14, 2008
  3. Replies:
    5
    Views:
    171
  4. Netx
    Replies:
    8
    Views:
    232
    dhtml
    Dec 13, 2008
  5. r_honey
    Replies:
    23
    Views:
    463
    dhtml
    Dec 22, 2008
Loading...

Share This Page