SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS style switch based on resolution

    Right heres my problem.

    I need it so when a user goes onto my website depending on there resolution a style sheet loads. There will only be 2 style sheets, 1 for resolutions of 1024 and below and 1 for 1152 and above. Is there anyway I can use javascript or xml or ajax to do this ? There is ways out there based on the browser size but i want it for the whole desktop resolution instead.

    Thanks again.

    edit - would this work


    <link href="manager.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    if (screen.width < 1024)
    link = document.getElementsByTagName( "link" )[ 0 ];
    link.href = "manager800.css";
    </script>
    <head>

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats browser window though not screen resolution. I tested that code in my first post which i found and it seems to work.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code won't work in Firefox (at least according to a website I read last night) because Firefox requires the link to be entirely new and apparently doesn't recognize an attribute change for a link (this appears to be true when doing favicon switching, but I'm not sure for style sheets).

    I'd try

    Code:
    <script type="text/javascript">
    if (screen.width < 1024) {
       var links = document.getElementsByTagName("link");
       for (var i = 0; i < links.length; i++) {
            if (/manager\.css/.test(links[i].href)) { 
                 var link = document.createElement("link");
                 var docHead = document.getElementsByTagName("head")[0];
                 link.href = "manager800.css";
                 link.rel = "stylesheet";
                 link.type = "text/css";
                 docHead.removeChild(links[i]);
                 docHead.appendChild(link);
            }
        }
    }
    </script>

  5. #5
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you can disable link, try

    Code:
    <link rel="alternate stylesheet" type="text/css" media="screen,projection" title="manager800" href="manager800.css" />
    <link rel="stylesheet" type="text/css" media="screen,projection" href="somename.css" title="default" />
    
    function setid(){
    sheet=document.getElementsByTagName('link');
    for(var i=0;i<sheet.length;i++){
    var popisek=sheet[i].getAttribute('title');
    if(popisek){
    sheet[i].setAttribute('id',popisek);
    }}}
    function styl(jaky){
    setid();
    sheet=document.getElementsByTagName('link');
    for(var i=0;i<sheet.length;i++){
    sheet[i].disabled=true;
    if(jaky){
    document.getElementById(jaky).disabled=false;
    }}}
    function init(){
    if(screen.width<1024){
    styluj('manager800')//manager800.css has to have title  manager800
    }
    else{styluj('default')}
    }
    window.onresize=init
    window.onload=init
    Some simple styleswitcher based on this idea I have here http://xy.wz.cz/layout4/ at the bottom of page


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
  •