SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XLib - Getting Page Size

    I'm trying to popup a login dialog over a page. I want the page to be slightly occluded by a semi-transparent layer.

    So I got that to work (huzzah!), but if the user scrolls, the semi-transparent layer (called cloak) only covers part of the page (it's got a top and left of 0 in the CSS), and it only goes down as far as the size of the browser window.

    I used X to set the size of the cloak div to that of document.body. That worked in width, but in height it was short by about 70px. Not sure why... This is in FF 2.0.0.3.

    I added 70px, and it worked, covering the page to the bottom. If someone can explain why it came up short, I'd appreciate it.

    The next item is positioning the dialog box in the current viewport. It may also be desirable to make it travel as the user scrolls. Can someone point me to the right functions in XLib for that?

    Thanks,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi alfred3x,

    What functions did you use to get the size of the document? Try this one: xDocSize.

    Have a look at this demo. Also, look at the "floater" menus on this page.

    Thanks!

  3. #3
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your response Mike. (Not to mention your fabulous library!)

    Not sure what I was using to get the page size. But xDocSize works without adjustments.

    I'm wondering why I can't seem to position the dialog div using el.style.top. Instead I've used xTop() and it works.

    Thanks again for your help!

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The top property only works if you've set the position property to a valid value other than the default of "static".
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alfred3x
    Thanks for your response Mike. (Not to mention your fabulous library!)
    You're very welcome!

    Quote Originally Posted by alfred3x
    Not sure what I was using to get the page size. But xDocSize works without adjustments.
    Great!

    Quote Originally Posted by alfred3x
    I'm wondering why I can't seem to position the dialog div using el.style.top. Instead I've used xTop() and it works.
    There are a couple of things to be aware of:

    1. Kravvitz has pointed out the first thing: the top property has different semantics depending on the value of the position property.

    2. Usually this is the real "gotcha". The style object properties correspond to the inline STYLE attribute of the HTML element. This article, tho not very complete, should explain the basic idea. The xTop function gets around this by using getComputedStyle if ele.style.top is an empty string.

  6. #6
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    2. Usually this is the real "gotcha". The style object properties correspond to the inline STYLE attribute of the HTML element. This article, tho not very complete, should explain the basic idea. The xTop function gets around this by using getComputedStyle if ele.style.top is an empty string.
    Right, I remember reading something about this. (d'Oh!)

    Thanks to you both!

    My current problem (final? ) is with positioning the dialog box (div) within the viewport. I'm using this code:

    Code:
    scrollTop = xScrollTop(document.documentElement);
    clientHeight = xClientHeight();
    dlogTop = (scrollTop > clientHeight ? scrollTop - clientHeight + 70 : 70);
    xTop(elSignin, dlogTop);
    Ideally, I'd like the dialog box to appear 70px from the top of the viewport.

    This is working sometimes (when Firebug is open), but not others (when FB is closed and I'm at the top of the page). Sometimes, it places the dialog box just below the viewport. (!?) The top setting is 70 for that.

    I'm more than a little confused.

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ideally, I'd like the dialog box to appear 70px from the top of the viewport.
    The following should center elSignin horizontally and place it 70px from the top of the viewport:
    Code:
    xLeft(elSignin, (xClientWidth() - xWidth(elSignin)) / 2);
    xTop(elSignin, 70 + xScrollTop());

  8. #8
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked. But only after I set the position to absolute (it was relative.)

    Thanks a bunch. You really helped a lot!

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •