Thread: Ipad sniffer

    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    657
    Rep Power
    38

    Ipad sniffer


    OK, I have JS for the Ipad sniffer which looks like this
    Code:
    <script language=”javascript”>
    if (navigator.userAgent && ( navigator.userAgent.indexOf(“iPad”) > -1 || navigator.userAgent.indexOf(“iPhone”) > -1 ))
    {
    window.location.replace(“http://www.YOUR-URL-GOES-HERE.com/iPhone-iPad.html”);
    }
    </script>
    But instead of redirecting, I want to include a different css file.
    How do I do this with JavaScript?
    thanks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Code:
    <script>
    
    function iPad_Alt_CSS()
    {
    var oldCSS = document.getElementsByTagName("link")[0];
    var newCSS = document.createElement("link");
    newCSS.setAttribute("rel","stylesheet");
    newCSS.setAttribute("type","text/css");
    newCSS.setAttribute("href","iPad.css");
     if (navigator.userAgent && ( navigator.userAgent.indexOf(“iPad”) > -1 || navigator.userAgent.indexOf(“iPhone”) > -1 ))
      {
       document.getElementsByTagName("head")[0].removeChild(oldCSS);
       document.getElementsByTagName("head")[0].appendChild(newCSS);
      }
    }
    
    document.onreadystatechange = function() {
    new iPad_Alt_CSS();
    }
    
    </script>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    657
    Rep Power
    38

    thanks web__loone08


    But I just need to include an extra css file in the header for Ipads. My code should look something like this::
    Code:
    <script language=”javascript”>
    if (navigator.userAgent && ( navigator.userAgent.indexOf(“iPad”) > -1 || navigator.userAgent.indexOf(“iPhone”) > -1 ))
    {
    // include extra css here. for example, css/ipad.css
    }
    </script>
    thanks for your help!
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Then... this will just add another link tag for your iPad.css file; instead of removing your existing CSS link tag... like I originally did.

    Code:
    <script>
    
    function iPad_Alt_CSS()
    {
    var newCSS = document.createElement("link");
    newCSS.setAttribute("rel","stylesheet");
    newCSS.setAttribute("type","text/css");
    newCSS.setAttribute("href","iPad.css");
     if (navigator.userAgent && ( navigator.userAgent.indexOf(“iPad”) > -1 || navigator.userAgent.indexOf(“iPhone”) > -1 ))
      {
       document.getElementsByTagName("head")[0].appendChild(newCSS);
      }
    }
    
    document.onreadystatechange = function() {
    new iPad_Alt_CSS();
    }
    
    </script>
    Are you wanting the "style" tag (internal css) added to the head of the document; instead of using a "link" tag (for external css file)?

    If so... you could do something like this:

    Code:
    <script>
    
    var iPad_CSS = "\nbody {\nbackground:blue\n}\n"; // add your style to this variable
    
    function iPad_Alt_CSS()
    {
    var newCSS = document.createElement("style");
    var defineCSS = document.createTextNode(iPad_CSS);
    newCSS.setAttribute("type","text/css");
    newCSS.setAttribute("media","screen");
     if (navigator.userAgent && ( navigator.userAgent.indexOf(“iPad”) > -1 || navigator.userAgent.indexOf(“iPhone”) > -1 ))
      {
       document.getElementsByTagName("head")[0].appendChild(newCSS);
       document.getElementsByTagName("style")[0].appendChild(defineCSS);
      }
    }
    
    document.onreadystatechange = function() {
     if (document.readyState=="interactive") {
      new iPad_Alt_CSS();
     }
    }
    </script>
    Last edited by web_loone08; November 28th, 2012 at 03:34 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Is there a particular reason why you need to use JavaScript for this? CSS3 Media Queries were designed for this kind of thing. Target iPhone and iPad with CSS3 Media Queries

    @web_loone08: Do you know which browsers (besides IE, which introduced it long ago) support the "onreadystatechange" event on the "document"?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    @Kravvitz: IE, FF, & Chrome... all support the "document.onreadystatechange" event. I cannot say that I have tested it in other OS platforms; but these are three of the most commonly used OS platforms. I would assume Apple supports this event in Safari browsers, as well. Also... I thought about suggesting media queries, as an answer to this question; I just thought the OP wanted something like this for a specific reason. However, CSS3 Media Queries are not supported by the majority of older browser versions; hence a JavaScript workaround is sometimes required to replicate a media query affect.
    Last edited by web_loone08; November 28th, 2012 at 05:27 PM.

IMN logo majestic logo threadwatch logo seochat tools logo