<?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>SublimeOrange &#187; jQuery</title>
	<atom:link href="http://sublimeorange.com/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://sublimeorange.com</link>
	<description>Hello, I&#039;m Sean a student with a passion for &#60;br&#62;web development.</description>
	<lastBuildDate>Mon, 16 Nov 2009 10:12:03 +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>Tweetify</title>
		<link>http://sublimeorange.com/jquery/tweetify/</link>
		<comments>http://sublimeorange.com/jquery/tweetify/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 22:19:45 +0000</pubDate>
		<dc:creator>Sean</dc:creator>
				<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://sublimeorange.com/?p=154</guid>
		<description><![CDATA[This is David Walsh&#8217;s String.Tweetify in jQuery.
$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp&#124;http&#124;https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/&#124;\/([\w#!:.?+=&#038;%@!\-\/]))?)/gi,'$1')
				.replace(/(^&#124;\s)#(\w+)/g,'$1#$2')
				.replace(/(^&#124;\s)@(\w+)/g,'$1@$2')
		);
	});
	return $(this);
}

$("p").tweetify();

Before:
&#60;p&#62;@seanhood have you seen this http://icanhascheezburger.com/ #lol&#60;/p&#62;

After:
&#60;p&#62;&#60;a href="http://twitter.com/seanhood"&#62;@seanhood&#60;/a&#62; have you seen this
&#60;a href="http://icanhascheezburger.com/"&#62;http://icanhascheezburger.com/&#60;/a&#62;
&#60;a href="http://search.twitter.com/search?q=%23lol"&#62;#lol&#60;/a&#62;&#60;/p&#62;

Demo
]]></description>
			<content:encoded><![CDATA[<p>This is David Walsh&#8217;s <a href="http://davidwalsh.name/tweetify">String.Tweetify</a> in jQuery.</p>
<pre><code>$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&#038;%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
				.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
		);
	});
	return $(this);
}

$("p").tweetify();

Before:
&lt;p&gt;@seanhood have you seen this http://icanhascheezburger.com/ #lol&lt;/p&gt;

After:
&lt;p&gt;&lt;a href="http://twitter.com/seanhood"&gt;@seanhood&lt;/a&gt; have you seen this
&lt;a href="http://icanhascheezburger.com/"&gt;http://icanhascheezburger.com/&lt;/a&gt;
&lt;a href="http://search.twitter.com/search?q=%23lol"&gt;#lol&lt;/a&gt;&lt;/p&gt;
</code></pre>
<p><a href='http://sublimeorange.com/uploads/2009/09/tweetify.html'>Demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sublimeorange.com/jquery/tweetify/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery animated hover links</title>
		<link>http://sublimeorange.com/jquery/jquery-animated-hover-links/</link>
		<comments>http://sublimeorange.com/jquery/jquery-animated-hover-links/#comments</comments>
		<pubDate>Tue, 21 Jul 2009 23:28:20 +0000</pubDate>
		<dc:creator>Sean</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Awesome]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://sublimeorange.com/wordpress/?p=3</guid>
		<description><![CDATA[I like to use jQuery to make the hover states of my site different
Here the code i use to do it
$("li a").hover(function() {
	$(this).stop().animate({paddingLeft : "10px"},200);
},function() {
	$(this).stop().animate({paddingLeft : "0px"},200);
});

With this code we&#8217;re basically selecting the anchor tag within a list item, then when a user hovers over it we&#8217;re pushing it 10px to the right then [...]]]></description>
			<content:encoded><![CDATA[<p>I like to use jQuery to make the hover states of my site different</p>
<p>Here the code i use to do it</p>
<pre><code>$("li a").hover(function() {
	$(this).stop().animate({paddingLeft : "10px"},200);
},function() {
	$(this).stop().animate({paddingLeft : "0px"},200);
});
</code></pre>
<p>With this code we&#8217;re basically selecting the anchor tag within a list item, then when a user hovers over it we&#8217;re pushing it 10px to the right then returning it to where it was after they mouse off it.</p>
<p>You can change the speed that the link slides by changing the number in the code, you will see that it is currently set as 200, this means that the left margin increases from 0px to 10px in 200 Milliseconds.</p>
<p>For this to work with javascript turned off we need to add this bit of css:</p>
<pre><code>li a:hover {
    padding-left: 10px;
}
</code></pre>
<p>More info on the jQuery animate effect here <a href="http://docs.jquery.com/Effects/animate">http://docs.jquery.com/Effects/animate</a></p>
<p>This is my first ever blog tutorial so just drop me a comment on how i did.</p>
<p><strong>Update:</strong><br />
From trying this script again I&#8217;ve realised it should be paddingLeft rather than marginLeft, so I&#8217;ve amended the code above.</p>
]]></content:encoded>
			<wfw:commentRss>http://sublimeorange.com/jquery/jquery-animated-hover-links/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->