Ipad sniffer

Dev Shed Forums Sponsor:

November 28th, 2012, 09:12 AM

lelales

Contributing User

Join Date: Mar 2008

Posts: 601

Time spent in forums: 4 Days 40 m 3 sec
Reputation Power: 37

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

November 28th, 2012, 01:55 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 606

Time spent in forums: 1 Week 1 Day 17 h 1 m 3 sec
Reputation Power: 69

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>

November 28th, 2012, 02:30 PM

lelales

Contributing User

Join Date: Mar 2008

Posts: 601

Time spent in forums: 4 Days 40 m 3 sec
Reputation Power: 37

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!

November 28th, 2012, 02:44 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 606

Time spent in forums: 1 Week 1 Day 17 h 1 m 3 sec
Reputation Power: 69

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.

November 28th, 2012, 03:38 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 35 m 30 sec
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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

November 28th, 2012, 03:45 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 606

Time spent in forums: 1 Week 1 Day 17 h 1 m 3 sec
Reputation Power: 69

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

Developer Shed Advertisers and Affiliates