<?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>Orite Blog &#187; jQuery</title>
	<atom:link href="http://blog.orite.com.au/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.orite.com.au</link>
	<description>Think Work Learn Share</description>
	<lastBuildDate>Fri, 24 Jul 2009 00:08:02 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>FREE Instant Email Standard Test Tool</title>
		<link>http://blog.orite.com.au/web_development/2009-07-08/free-instant-email-standard-testing-tool/</link>
		<comments>http://blog.orite.com.au/web_development/2009-07-08/free-instant-email-standard-testing-tool/#comments</comments>
		<pubDate>Wed, 08 Jul 2009 12:46:57 +0000</pubDate>
		<dc:creator>Frank Liu</dc:creator>
				<category><![CDATA[Open Source Releases]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[email]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.orite.com.au/?p=117</guid>
		<description><![CDATA[Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the Email CSS support Guide from Campaign Monitor, and utilizing the email-standards.org Email ACID test page as the example. You may paste in your own email template to test in.
Please note, this tool only provides a brief demonstration, [...]]]></description>
			<content:encoded><![CDATA[<p>Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the <a href="http://www.campaignmonitor.com/css/" target="_blank">Email CSS support Guide</a> from Campaign Monitor, and utilizing the <a href="http://www.email-standards.org/acid-test/" target="_blank">email-standards.org Email ACID test</a> page as the example. You may paste in your own email template to test in.</p>
<p>Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try <a href="http://litmusapp.com/email-testing" target="_blank">Litmus Email Testing</a> or the <a href="http://www.campaignmonitor.com/testing/" target="_blank">Campaign Monitor Email Testing tool</a>. If you want to convert any external CSS to inline style, <a href="http://inlinestyler.torchboxapps.com/" target="_blank">Inline Styler</a> and <a href="http://www.pelagodesign.com/sidecar/emogrifier/" target="_blank">Emogrifier</a> may come to help. Here goes the FREE tool, post your comments.</p>
<style type="text/css">
#mbody h2{
	font-size: 16px;
	padding: 2px;
	margin: 0;
}
#mbody div{
	margin-bottom:10px;
	text-align: left;
}
#mbody label{
	margin-right: 5px;
	white-space: nowrap;
	cursor: pointer;
	line-height: 20px;
	padding: 2px;
}
#mbody label.hi{
	font-weight: bold;
	background-color: #ffc;
	color: #f60;
}
#mbody input[type=button]{
	padding: 3px;
}
#mbody .show_input{
	display: none;
}
#mbody .longbox{
	width:650px;
	height:800px;
	border: 1px solid #ccc;
}
</style>

<div id="mbody">
<div style="border: 1px solid #f60; padding: 10px; background-color: #d7d7ff;">
<h2>Email Client:</h2>
<div id="email_clients"></div>
<h2 style="float:left;padding-right:10px;">Images:</h2>
<div>
  <label class="hi"><input type="radio" name="show_image" id="show_image" value="1" checked="checked" />Show</label>
  <label><input type="radio" name="show_image" id="hide_image" value="0" />Hide</label>
</div>
</div>
<div style="clear:both"><input type="button" class="show_email" id="input_email_btn" value="View/Change Source" /><input type="button" id="load_email_btn" class="show_input" value="Test Again" /></div>
<iframe id="email" class="show_email longbox" name="email"></iframe>
<textarea id="email_acid" name="email_acid" class="show_input longbox">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	/* common
	--------------------------------------------------*/
	
	body {
		margin: 0px;
		padding: 0px;
		color: #fff;
		background: #930;
	}
	#BodyImposter {
		color: #fff;
		background: #930 url("http://www.email-standards.org/acid/img/bgBody.gif") repeat-x;
		background-color: #930;
		font-family: Arial, Helvetica, sans-serif;
		width: 100%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	#BodyImposter dt {
		font-size: 14px;
		line-height: 1.5em;
		font-weight: bold;
	}
	#BodyImposter dd,
	#BodyImposter li,
	#BodyImposter p,
	#WidthHeight span {
		font-size: 12px;
		line-height: 1.5em;
	}
	#BodyImposter dd,
	#BodyImposter dt {
		margin: 0px;
		padding: 0px;
	}
	#BodyImposter dl,
	#BodyImposter ol,
	#BodyImposter p,
	#BodyImposter ul {
		margin: 0px 0px 4px 0px;
		padding: 10px;
		color: #fff;
		background: #ad5c33;
	}
	#BodyImposter small {
		font-size: 11px;
		font-style: italic;
	}
	#BodyImposter ol li {
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}
	#BodyImposter ul#BulletBg li {
		background: url("http://www.email-standards.org/acid/img/bullet.gif") no-repeat 0em 0.2em;
		padding: 0px 0px 0px 20px;
		margin: 0px;
		list-style: none;
	}
	#BodyImposter ul#BulletListStyle li {
		margin: 0px 0px 0px 22px;
		padding: 0px;
		list-style: url("http://www.email-standards.org/acid/img/bullet.gif");
	}
	
	/* links
	--------------------------------------------------*/
	
	#BodyImposter a {
		text-decoration: underline;
	}
	#BodyImposter a:link,
	#BodyImposter a:visited {
		color: #dfb8a4;
		background: #ad5c33;
	}
	#ButtonBorders a:link,
	#ButtonBorders a:visited {
		color: #fff;
		background: #892e00;
	}
	#BodyImposter a:hover {
		text-decoration: none;
	}
	#BodyImposter a:active {
		color: #000;
		background: #ad5c33;
		text-decoration: none;
	}
	
	/* heads
	--------------------------------------------------*/
	
	#BodyImposter h1,
	#BodyImposter h2,
	#BodyImposter h3 {
		color: #fff;
		background: #ad5c33;
		font-weight: bold;
		line-height: 1em;
		margin: 0px 0px 4px 0px;
		padding: 10px;
	}
	#BodyImposter h1 {
		font-size: 34px;
	}
	#BodyImposter h2 {
		font-size: 22px;
	}
	#BodyImposter h3 {
		font-size: 16px;
	}
	#BodyImposter h1:hover,
	#BodyImposter h2:hover,
	#BodyImposter h3:hover,
	#BodyImposter dl:hover,
	#BodyImposter ol:hover,
	#BodyImposter p:hover,
	#BodyImposter ul:hover {
		color: #fff;
		background: #892e00;
	}
	
	/* boxes
	--------------------------------------------------*/
	
	#Box {
		width: 470px;
		margin: 0px auto;
		padding: 40px 20px;
		text-align: left;
	}
	p#ButtonBorders {
		clear: both;
		color: #fff;
		background: #892e00;
		border-top: 10px solid #ad5c33;
		border-right: 1px dotted #ad5c33;
		border-bottom: 1px dashed #ad5c33;
		border-left: 1px dotted #ad5c33;
	}
	p#ButtonBorders a#Arrow {
		padding-right: 20px;
		background: url("http://www.email-standards.org/acid/img/arrow.gif") no-repeat right 2px;
	}
	p#ButtonBorders a {
		color: #fff;
		background-color: #892e00;
	}
	p#ButtonBorders a#Arrow:hover {
		background-position: right -38px;
	}
	#Floater {
		width: 470px;
	}
	#Floater #Left {
		float: left;
		width: 279px;
		height: 280px;
		color: #fff;
		background: #892e00;
		margin-bottom: 4px;
	}
	#Floater #Right {
		float: right;
		width: 187px;
		height: 280px;
		color: #fff;
		background: #892e00 url("http://www.email-standards.org/acid/img/ornament.gif") no-repeat right bottom;
		margin-bottom: 4px;
	}
	#Floater #Right p {
		color: #fff;
		background: transparent;
	}
	#FontInheritance {
		font-family: Georgia, Times, serif;
	}
	#MarginPaddingOut {
		padding: 20px;
	}
	#MarginPaddingOut #MarginPaddingIn {
		padding: 15px;
		color: #fff;
		background: #ad5c33;
	}
	#MarginPaddingOut #MarginPaddingIn img {
		background: url("http://www.email-standards.org/acid/img/bgPhoto.gif") no-repeat;
		padding: 15px;
	}
	span#SerifFont {
		font-family: Georgia, Times, serif;
	}
	p#QuotedFontFamily {
		font-family: "Trebuchet MS", serif;
	}
	#WidthHeight {
		width: 470px;
		height: 200px;
		color: #fff;
		background: #892e00;
	}
	#WidthHeight span {
		display: block;
		padding: 10px;
	}
	
</style>
</head>

<body>
<div id="BodyImposter">
	<div id="Box">
		<div id="FontInheritance">
			<h1>H1 headline (34px/1em)</h1>
			<h2>H2 headline (22px/1em)</h2>
			<h3>H3 headline (16px/1em)</h3>
		</div>
		<p>Paragraph (12px/1.5em) Lorem ipsum dolor sit amet, <a href="http://www.email-standards.org/" target="_blank">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <span id="SerifFont">(This is a serif font inside of a paragraph styled with a sans-serif font.)</span> <small>(This is <code>small</code> text.)</small></p>
		<p id="QuotedFontFamily">This is a font (Trebuchet MS) which needs quotes because its label comprises two words.</p>
		<ul id="BulletBg">
			<li>background bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ul id="BulletListStyle">
			<li>list-style bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ol>
			<li>ordered list sit amet, consectetuer adipiscing elit</li>
			<li>sed diam nonummy nibh euismod tincidunt ut laoreet</li>

			<li>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</li>
		</ol>
		<dl>
			<dt>Definition list</dt>
			<dd>lorem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
			<dd>sed diam nonummy nibh euismod tincidunt ut laoreet</dd>
			<dd>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</dd>
		</dl>
		<div id="Floater">
			<div id="Left">
				<div id="MarginPaddingOut">
					<div id="MarginPaddingIn">
						<img src="http://www.email-standards.org/acid/img/photo.jpg" width="180" height="180" alt="[photo: root canal]" />
					</div>
				</div>
			</div>
			<div id="Right">
				<p>Right float with a positioned background</p>
			</div>
		</div>
		<p id="ButtonBorders"><a href="http://www.email-standards.org/" target="_blank" id="Arrow">Borders and an a:hover background image</a></p>
		<div id="WidthHeight">
			<span>Width = 470, height = 200</span>
		</div>
	</div>
</div>
</body>
</html>
</textarea>
<p><i>Currently tested under FF3/3.5, Safari4, Chrome2/3, IE7/8, Opera9.6</i></p>
</div>
<script type="text/javascript" src="http://blog.orite.com.au/email_test.min.js"></script>


]]></content:encoded>
			<wfw:commentRss>http://blog.orite.com.au/web_development/2009-07-08/free-instant-email-standard-testing-tool/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery IE detection issue workaround</title>
		<link>http://blog.orite.com.au/web_development/2009-06-30/jquery-ie-detection-issue-workaround/</link>
		<comments>http://blog.orite.com.au/web_development/2009-06-30/jquery-ie-detection-issue-workaround/#comments</comments>
		<pubDate>Tue, 30 Jun 2009 02:00:34 +0000</pubDate>
		<dc:creator>Frank Liu</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[IE8]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.orite.com.au/?p=110</guid>
		<description><![CDATA[We recently discovered an issue with jQuery.browser.version detection, it reports wrong Internet Explorer versions on some corrupted IE userAgent strings. A corrupted IE8 userAgent string may look like,


Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR [...]]]></description>
			<content:encoded><![CDATA[<p>We recently discovered an issue with <a href="http://docs.jquery.com/Utilities/jQuery.browser.version">jQuery.browser.version</a> detection, it reports wrong Internet Explorer versions on some corrupted <a href="http://msdn.microsoft.com/en-us/library/ms537503%28VS.85%29.aspx">IE userAgent strings</a>. A corrupted IE8 userAgent string may look like,</p>

<p style="font-size:10px">
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30618; .NET CLR 1.1.4322; InfoPath.2)
</p>

<p>In this case jQuery.browser.version will report browser version 6.0 instead of 8.0, this will result some jQuery plugins to show a 'not implemented' error in IE8. So far we know <a href="http://dev.iceburg.net/jquery/jqModal/">jqModal</a> and <a href="http://fancy.klade.lv/">FancyBox</a> are affected. Because they rely on jQuery.browser.version to detect IE6, and run some IE6 specific codes, which caused IE8 to fail, another sad story from MS.</p>

<p>Although we believe it's not the problem with jQuery or IE (Microsoft) alone, the best fix will be patching the plugins to detect IE6. i.e. to detect IE6 properly with jQuery, you will need the following code, which has an extra check by using window.XMLHttpRequest.</p>


<div class="wp_codebox_msgheader"><span class="right"></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p110code2'); return false;">View Code</a> JS</span><div class="codebox_clear"></div></div><div class="wp_codebox" id="p1102"><div class="line_numbers"><pre>1

</pre></div><div class="code" id="p110code2"><pre class="js" style="font-family:monospace;">ie6=$.browser.msie&amp;&amp;($.browser.version == &quot;6.0&quot;)&amp;&amp;!window.XMLHttpRequest;</pre></div></div>




<p>If you curious about how userAgnet string got corrupted, we don't have much clue about it, some say it's due to an earlier release of IE8 (however as we aware, some IE7 has got the same issue), but in our office 3 out of 10 PCs has got the corrupted string. To fix it, you need to look for the following registry keys,</p>
<pre style="font-size:10px">
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform
</pre>

<p>Or if you want to do more then just differentiate IEs, you may find a good <a href="http://www.quirksmode.org/js/detect.html">browser detection Javascript here</a>.</p>

<p>Some side note, you might notice jQuery has marked jQuery.browser deprecated since 1.3 in the favour of jQuery.support. We understand why jQuery would want to take this approach, and it's a good step forward. However jQuery.support would only be good if it tells all the feature differences among browsers, rendering engines, and standard modes. As web develops we don't learn the differences first then start developing a site, we only come across the differences and try to figure out what feature difference cause the different final result will be really time consuming. Until the time all the browsers come to the same standard and feature set, patching and hacking may be the only way for web developers, no one-stop solution would be available at any moment before that epoch. May God blessing all the web developers please.</p>

]]></content:encoded>
			<wfw:commentRss>http://blog.orite.com.au/web_development/2009-06-30/jquery-ie-detection-issue-workaround/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>45 Useful and Fancy jQuery Techniques</title>
		<link>http://blog.orite.com.au/web_development/2009-01-20/45-useful-and-fancy-jquery-techniques/</link>
		<comments>http://blog.orite.com.au/web_development/2009-01-20/45-useful-and-fancy-jquery-techniques/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 11:58:05 +0000</pubDate>
		<dc:creator>Frank Liu</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.orite.com.au/?p=44</guid>
		<description><![CDATA[Please check out this post on Smashing Magazine,
45+ New jQuery Techniques For Good User Experience
really good collection of jQuery tricks for web development.]]></description>
			<content:encoded><![CDATA[Please check out this post on Smashing Magazine,
<a title="45+ New jQuery Techniques For Good User Experience" rel="bookmark" href="http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/" target="_blank">45+ New jQuery Techniques For Good User Experience</a>
really good collection of jQuery tricks for web development.]]></content:encoded>
			<wfw:commentRss>http://blog.orite.com.au/web_development/2009-01-20/45-useful-and-fancy-jquery-techniques/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
