Log in

View Full Version : script for reading IOS version on iPad


Shammus
02-06-2012, 08:46 PM
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>
Shammus
02-06-2012, 09:04 PM
Sorry, guys, I think I just fixed my own problem....added the call to jquery back in there...

thanks much,
Brian
jscheuer1
02-06-2012, 09:15 PM
At least three things could be going wrong there, one of them certainly is, probably two, and perhaps the third, in that order:


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


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


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:


<!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.