Results 1 to 3 of 3

Thread: script for reading IOS version on iPad

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default script for reading IOS version on iPad

    Was trying to implement a script that would read whether or not you're using IOS 5 for the iPad and adjust the CSS accordingly. The script below assumes that the app is being built in 4.3 and adds an adjustment to the <footer> CSS class if the page is being viewed in IOS 5.

    Problem is, it's not working. Any thoughts on what I might be doing wrong?

    Thanks in advance....

    -----------------------------------------

    <!DOCTYPE html>

    <html lang="en">
    <head>


    <style type="text/css">

    body {}
    article {position:relative; height:500px; background:red;}
    footer {position:absolute; bottom:100px;}
    h3 {position:absolute; top:100px;}

    </style>

    <script type="text/javascript" charset="utf-8">

    var iOS5 = navigator.userAgent.match(/OS 5_/i) != null;
    if (iOS5) {

    $("footer").css('bottom','0');
    $("body").append('<h3>This is for iOS5</h3>');

    }

    </script>

    </head>

    <body>

    <article>
    <footer>This is the footer.</footer>

    </article>

    </body>
    </html>

  2. #2
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Sorry, guys, I think I just fixed my own problem....added the call to jquery back in there...

    thanks much,
    Brian

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    At least three things could be going wrong there, one of them certainly is, probably two, and perhaps the third, in that order:

    1. Neither the body nor the footer have been parsed yet, so those commands will have no affect.

    2. Those are jQuey functions, but jQuery doesn't appear to be associated with the page.

    3. The test for the userAgent string might be too vague.


    I may have missed something else though. And now this isn't a problem, but you don't have to match, test() will do and it's more efficient.

    Assuming your regular expression is detailed enough, try:

    Code:
    <!DOCTYPE html>
    
     <html lang="en">
     <head>
    
    
     <style type="text/css">
    
     body {}
     article {position:relative; height:500px; background:red;}
     footer {position:absolute; bottom:100px;}
     h3 {position:absolute; top:100px;}
    
     </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
     <script type="text/javascript">
    
    jQuery(function($){
    	 var iOS5 = /OS 5_/i.test(navigator.userAgent);
    	 if (iOS5) {
    	
    		 $("footer").css('bottom','0');
    		 $("body").append('<h3>This is for iOS5</h3>');
    	
    	 }
    }); 
    
     </script>
    
     </head>
    
     <body>
    
     <article>
     <footer>This is the footer.</footer>
    
     </article>
    
     </body>
     </html>
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •