SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascritp + css CSS Zen Lawn

    really loved the elastic lawn designed by Eric Meyer for CSS Zen garden http://www.csszengarden.com/?cssfil.../063.css&page=0 .
    I have started to see the technique pop up all over the place.

    I had one problem with it though. The width has to be to narrow, it makes things to tight of a 1152 X 684 monitor.

    I came to the conclusion that with a bit of DOM one could test the size of the Browser window on resize and up the body font size accordingly.

    It works pretty nicely I think, but the problem is, while I'm pretty good with CSS I'm very bad with javascript. I kind of patched it together with a bunch of tutorials.

    anyway have a look at it and tell me if:
    1 you thinks it's a good idea and
    2 if you can help me improve the javascript, since I think it far off from DOM complaint!

    oh and there's is a display issue with fierfox at the moment, but that should be fixable with a little tweaking of the CSS

    check it out http://leondwyer.com/development/rubberband.htm
    sorry for cross post but I thought it should be in both css and Js threads

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    elastic lawn?? I did a search on the page you listed, and the word "elastic" could not be found anywhere on the page.

  3. #3
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I presume the FF problem you mention is the positioning of the "Select a Design" menu, since in Moz it overlaps the title.

    Do you want to set your font size according to screen resolution or browser window size? Currently your script tries to determine browser window size from width of the body element.

    Your script looks okay, but could probably be made a bit simpler. The trapping for Netscape isn't likely to gain you much; I doubt NN4 will work with this CSS, anyway and later versions are compatible with the offsetWidth property.

    If you want to scale based on actual screen resolution, properties of the screen object (width, height, availHeight, availWidth) might allow a more universal solution.

    I might add, I did throw this up in NN4.7 and while it degrades nicely to a straight text display, there appears no point in including JavaScript to handle it.
    Last edited by JVLB; Jan 17, 2005 at 10:23.


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
  •