Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    screen resolution accessibility - a perfect solution?

    Dear Forum,

    I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with:

    an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res)

    a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen)

    an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+)

    ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript:

    Code:
    <SCRIPT language="JavaScript">
    if (screen.width<1000)
    {document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}
    </SCRIPT>
    This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser.

    If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/

    many thanks

    Will

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Code:
    document.getElementById('outsidewrapper').style.overflow='visible';
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    secretfire (12-21-2010)

  • #3
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    solved?

    Well I tried that code (thanks for giving it a shot) although I couldn't get it to work - IE came up with something like object not found...

    but anyway, it turns out that putting "min-width" on the outside wrapper restores the scroll bar for low res screens, it magically revokes the overflow: hidden - something I never new until today!


  •  

    Tags for this Thread

    Posting Permissions

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