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 14 of 14
  1. #1
    New Coder
    Join Date
    Nov 2002
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loading relevant external CSS file as per resolution..... HOW?

    Hi,

    i want that a separate CSS file be used for different types of resolution. i am building pages for 2 resolutions only - 800x600 and 1024x768. how do i do it using DOM? Any help is appreciated.

    Thanx,
    shivboy
    Internet is a massive abode,
    Built of PURE code!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With respect - this is insane; don't do it.


    But your choice - you can use the screen.width and screen.height properties and that will tell you the screen resolution; then you create the applicable stylesheet <link> - either document.write or do it in the DOM.
    Last edited by brothercake; 04-09-2003 at 08:26 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    New Coder
    Join Date
    Nov 2002
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi brothercake,

    why do u call that insane? i didn't get u on that. could u tell me how to link up those files using DOM? i'll be really grateful.


    thanx,
    shivboy
    Internet is a massive abode,
    Built of PURE code!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this
    Code:
    var screenw = screen.width;
    	
    var sheet = '800.css';
    if(screenw > 800) { sheet = '1024.css'; }
    
    var linkEle = document.createElement("link");
    linkEle.setAttribute("rel","stylesheet");
    linkEle.setAttribute("type","text/css");
    linkEle.setAttribute("media","screen");
    linkEle.setAttribute("href",sheet);
    
    document.getElementsByTagName("head")[0].appendChild(linkEle);
    I called it insane for several reasons - what if someone visits your site with a lower or much higer screen res? or a non-standard res? what if they use a browser which doesn't report any screen dimensions at all.

    And even told - you're giving yourself a maintenance headache - you'll have two stylesheets to maintain instead of one. And for what - so you can tweak the layout for the sake of two specific screen resolutions? Why not just build a flexible layout?
    Last edited by brothercake; 04-10-2003 at 12:03 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New Coder
    Join Date
    Nov 2002
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey brothercake,

    thanx a lot man for the code and swift and helpful replies. but, what do u mean by a flexible layout? can u elucidate that a bit please? how wud u suggest to go about it?

    thanx again,
    shivboy
    Internet is a massive abode,
    Built of PURE code!

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Try to code something that looks good when you have the window maximised and your screen resolution set to something high. Then you set your screen resolution to 600x800 and look at the site when it takes about half the screen. Try to get your site to look good in both and breaking in no size, and you'll have a flexible design. The trick is mostly to not rely on certain widths but let the browser decide how much space each element should take. Don't use too large images unless they can be cut without harming the design. Use relative font sizes instead of absolute. And don't try to get it to look pixel perfect in all browsers at all resolutions. Instead try to make all the glitches so small that they don't really harm the design.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    New Coder
    Join Date
    Nov 2002
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi brothercake,

    so what u r trying to suggest here is to go for %-based values rather than specific pixel based values, right? and position should also be relative rather absolute. am i right?

    thanx,

    shivboy
    Internet is a massive abode,
    Built of PURE code!

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Percentages are good; you can also use "em" which is an absolute unit but it scales relative to view text size.

    You can actually use absolute positioning if you want - in % and/or em units - and you'll still have a flexible layout.

    But as liorean said, remember you won't get your design to look exactly the same for everyone.
    Last edited by brothercake; 04-10-2003 at 12:10 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by brothercake
    With respect - this is insane; don't do it.
    With all due respect, I think this is a valid approach.
    Here is my implementation (still working on content). The script checks the width of the browser window (not the screen width !!!) and loads one of the three stylesheets (more to come) one for <600px browser width; one for >1200px width and one for in-between. The page still allows user to select one of the available stylesheets which will be remembered for the subsequent visits.
    All page graphical elements are backgrounds of block elements, so they can be changed with the stylesheet.

    Still think it's insane
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Vladdy
    Still think it's insane
    Wow ... that's excellent.

    But what shivboy originally asked for was to select stylesheets based on screen resolution; I still think that's a bad idea, as much as anything else because it presumes a visitor is using a maximized window; dunno about anyone else but I never surf in maximized windows.

    But either way ... I'll doff my cap on this occasion - I did jump to conclusions without thinking outside the box
    Last edited by brothercake; 04-10-2003 at 07:20 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree that it is insane to design for a specific screen resolution, as very few browse with browser maximised.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    In fact, most people use maximised windows when they surf. Most of the computer users actually don't know about multitasking, and maximise all their windows all the time.

    Technical savvy persons such as web designers seldom surf with their browser maximised, though.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by liorean
    In fact, most people use maximised windows when they surf.
    Really? Do you know of any research findings to support that, or on surfing / computer-use habits in general?
    Last edited by brothercake; 04-10-2003 at 11:59 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    We performed one at our school including 1200 persons in the age range 25-60. Only about 130 used multiple programs as once about 90 of them used to place programs side-by-side. All were volunteers (they got a T-shirt and some money for participating), but they came out of a randomly selected group of about 4 000 individuals. 13% used Mac, 3% used DOS/Win3.1, one used linux. (Did this in 1999.)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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