<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>favo &#187; Safari</title>
	<atom:link href="http://favo.asia/tag/safari/feed/" rel="self" type="application/rss+xml" />
	<link>http://favo.asia</link>
	<description>Do you remember BTL? Beyond The Limitz? No? Too bad. – Oh, and I don`t tweet.</description>
	<lastBuildDate>Fri, 27 Jan 2012 17:33:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Detect iPad and iPhone using Javascript</title>
		<link>http://favo.asia/2010/09/detect-ipad-using-javascript/</link>
		<comments>http://favo.asia/2010/09/detect-ipad-using-javascript/#comments</comments>
		<pubDate>Tue, 21 Sep 2010 17:40:17 +0000</pubDate>
		<dc:creator>favo</dc:creator>
				<category><![CDATA[Unsorted]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://favo.asia/?p=561</guid>
		<description><![CDATA[I&#8217;ve got some people asking for a simple Javascript-Detection for iPad&#8217;s. It&#8217;s simple, just take a look at the browser identification: function isIPad() { return !!(navigator.userAgent.match(/iPad/)); } function isIPhone() { return !!(navigator.userAgent.match(/iPhone/)); } Am I iPad? Am I iPhone? Example: function isIPad() { return !!(navigator.userAgent.match(/iPad/)); } function isIPhone() { return !!(navigator.userAgent.match(/iPhone/)); } Am I iPad? [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve got some people asking for a simple Javascript-Detection for iPad&#8217;s.</p>
<p>It&#8217;s simple, just take a look at the browser identification:</p>
<pre class="html" name="code">
<script type="text/javascript">
function isIPad() {
 return !!(navigator.userAgent.match(/iPad/));
}
function isIPhone() {
 return !!(navigator.userAgent.match(/iPhone/));
}
</script>
<button onclick="alert(isIPad());">Am I iPad?</button>
<button onclick="alert(isIPhone());">Am I iPhone?</button>
</pre>
<p><a href="http://favo.asia/wp-content/uploads/2010/07/2378867408_5d2ac25d2f_o.jpg"  rel="lightbox[561]"><img class="alignright size-medium wp-image-478" title="Javascript" src="http://favo.asia/wp-content/uploads/2010/07/2378867408_5d2ac25d2f_o-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p><b>Example:</b><br />
 <script type="text/javascript">function isIPad() {
 return !!(navigator.userAgent.match(/iPad/));
}
function isIPhone() {
 return !!(navigator.userAgent.match(/iPhone/));
}
</script><br />
<button onclick="alert(isIPad());">Am I iPad?</button></p>
<p><button onclick="alert(isIPhone());">Am I iPhone?</button></p>
<p><br class="spacer_" /></p>
<p>It basically searches in the browser information for any occurence of &#8220;iPad&#8221; or respectively &#8220;iPhone&#8221; and returns true if found.</p>
<p>Here&#8217;s an example of Safari&#8217;s identification on the iPad:</p>
<p><br class="spacer_" /></p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://favo.asia/2010/09/detect-ipad-using-javascript/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;title=Detect+iPad+and+iPhone+using+Javascript" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;title=Detect+iPad+and+iPhone+using+Javascript" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-misterwong">
			<a href="http://www.mister-wong.com/addurl/?bm_url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;bm_description=Detect+iPad+and+iPhone+using+Javascript&amp;plugin=sexybookmarks" rel="nofollow" class="external" title="Add this to Mister Wong">Add this to Mister Wong</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;title=Detect+iPad+and+iPhone+using+Javascript" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://favo.asia/2010/09/detect-ipad-using-javascript/&amp;title=Detect+iPad+and+iPhone+using+Javascript" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://favo.asia/2010/09/detect-ipad-using-javascript/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Detect+iPad+and+iPhone+using+Javascript+-+http://95a.de/aYERJ4&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="display:none;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>

]]></content:encoded>
			<wfw:commentRss>http://favo.asia/2010/09/detect-ipad-using-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Detecting iPad Orientation in Safari using JavaScript</title>
		<link>http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/</link>
		<comments>http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 16:08:34 +0000</pubDate>
		<dc:creator>favo</dc:creator>
				<category><![CDATA[Unsorted]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://favo.asia/?p=469</guid>
		<description><![CDATA[I stumbled on that by accident. One of my javascript-variables was called orientation and was not correctly used on the iPad&#8217;s Safari. After looking at its content, I found out that you can detect the device orientation. I knew you can handle many cool things on the iOS, like swipes in javascript, but this one [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://favo.asia/wp-content/uploads/2010/07/2378867408_5d2ac25d2f_o.jpg"  rel="lightbox[469]"><img src="http://favo.asia/wp-content/uploads/2010/07/2378867408_5d2ac25d2f_o-300x225.jpg" alt="" title="Javascript" width="300" height="225" class="alignright size-medium wp-image-478" /></a></p>
<p>I stumbled on that by accident. One of my javascript-variables was called <i>orientation</i> and was not correctly used on the iPad&#8217;s Safari.</p>
<p>After looking at its content, I found out that you can detect the device orientation. I knew you can handle many cool things on the iOS, like swipes in javascript, but this one was new to me.</p>
<p>So, what are you going to do with this? It&#8217;s obvious: Style your website or re-order your content to match exactly your iPad&#8217;s orientation ;-)</p>
<p>You can use javascript in an event handler, loop, or whatever by accessing <i>window.orientation</i> (or only <i>orientation</i>).</p>
<p>Here&#8217;s an example on how to detect the current orientation of the iPad device either by pressing a button or when the orientation changes, using an event called onOrientationChange:</p>
<pre name="code" class="html"><button onclick="detectIPadOrientation();">What's my Orientation?</button>

<script type="text/javascript">
 window.onorientationchange = detectIPadOrientation;
 function detectIPadOrientation () {

	if ( orientation == 0 ) {
	 alert ('Portrait Mode, Home Button bottom');
	}
	else if ( orientation == 90 ) {
	 alert ('Landscape Mode, Home Button right');
	}
	else if ( orientation == -90 ) {
	 alert ('Landscape Mode, Home Button left');
	}
	else if ( orientation == 180 ) {
	 alert ('Portrait Mode, Home Button top');
	}
 }
</script>
</pre>
<p><br class="spacer_" /></p>
<p>You can also use CSS Stylesheets using the media definition:</p>
<pre name="code" class="html">
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</pre>
<p><br class="spacer_" /></p>
<p>The detection is not restricted to the iPad, it should work on all iOS devices.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;title=Detecting+iPad+Orientation+in+Safari+using+JavaScript" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;title=Detecting+iPad+Orientation+in+Safari+using+JavaScript" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-misterwong">
			<a href="http://www.mister-wong.com/addurl/?bm_url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;bm_description=Detecting+iPad+Orientation+in+Safari+using+JavaScript&amp;plugin=sexybookmarks" rel="nofollow" class="external" title="Add this to Mister Wong">Add this to Mister Wong</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;title=Detecting+iPad+Orientation+in+Safari+using+JavaScript" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/&amp;title=Detecting+iPad+Orientation+in+Safari+using+JavaScript" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Detecting+iPad+Orientation+in+Safari+using+JavaScript+-+http://95a.de/dmTcUL&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="display:none;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>

]]></content:encoded>
			<wfw:commentRss>http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

