<?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>bavotasan.com</title>
	<atom:link href="http://bavotasan.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://bavotasan.com</link>
	<description>by c.bavota</description>
	<lastBuildDate>Thu, 19 Jan 2012 18:04:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Increase Max Upload File Size in WordPress</title>
		<link>http://bavotasan.com/2012/increase-max-upload-file-size-in-wordpress/</link>
		<comments>http://bavotasan.com/2012/increase-max-upload-file-size-in-wordpress/#comments</comments>
		<pubDate>Tue, 17 Jan 2012 21:12:51 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[post_max_size]]></category>
		<category><![CDATA[uploader]]></category>
		<category><![CDATA[upload_max_filesize]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3764</guid>
		<description><![CDATA[Sometimes, you need to upload a large file to your site, and the default 8mb limit in WordPress isn&#8217;t enough. I attempted to change my limit directly on my server, then in the .htaccess file and then in wp-config.php but neither change worked for me. Then I came across this little snippet by Word Impressed [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes, you need to upload a large file to your site, and the default 8mb limit in WordPress isn&#8217;t enough. I attempted to change my limit directly on my server, then in the .htaccess file and then in wp-config.php but neither change worked for me. Then I came across this little snippet by <a href="http://www.wordimpressed.com/coding/how-to-increase-wordpress-file-upload-size-correctly/">Word Impressed</a> which actually worked and allowed me to increase my max upload file size limit.</p>
<p>All you need to do is create a <code>php.ini</code> file and upload it into your <code>/wp-admin</code> folder. Then add the following:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">memory_limit <span style="color: #339933;">=</span> 32M
upload_max_filesize <span style="color: #339933;">=</span> 32M
post_max_size <span style="color: #339933;">=</span> 32M
file_uploads <span style="color: #339933;">=</span> On</pre></div></td></tr></table></div>

<p>You can change <code>32m</code> to whatever max file size you want.</p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2012/increase-max-upload-file-size-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Update to Add Logo to Admin Plugin</title>
		<link>http://bavotasan.com/2012/update-to-add-logo-to-admin-plugin/</link>
		<comments>http://bavotasan.com/2012/update-to-add-logo-to-admin-plugin/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 20:40:32 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[add logo to admin]]></category>
		<category><![CDATA[update]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress plugin]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3780</guid>
		<description><![CDATA[I have had a lot of requests to revisit and update my Add Logo to Admin WordPress plugin so today I sat down and went over the code. There have been quite a few changes in WordPress 3.3 so I had to make things a little different but the plugin is now compatible with the [...]]]></description>
			<content:encoded><![CDATA[<p>I have had a lot of requests to revisit and update my <a href="http://bit.ly/cQ6Pa0">Add Logo to Admin</a> WordPress plugin so today I sat down and went over the code. There have been quite a few changes in WordPress 3.3 so I had to make things a little different but the plugin is now compatible with the latest release of WP.</p>
<p><img src="http://bavotasan.com/wp-content/uploads/2012/01/addlogo_big.jpg" alt="" title="addlogo_big" width="550" height="402" class="aligncenter size-full wp-image-3783" /></p>
<p>If you have any feedback please leave a comment below or open up a discussion in my <a href="http://themes.bavotasan.com/support/">support forum</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2012/update-to-add-logo-to-admin-plugin/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Shortcode to Encode Email in WordPress Posts</title>
		<link>http://bavotasan.com/2012/shortcode-to-encode-email-in-wordpress-posts/</link>
		<comments>http://bavotasan.com/2012/shortcode-to-encode-email-in-wordpress-posts/#comments</comments>
		<pubDate>Wed, 11 Jan 2012 22:18:05 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[antispambot]]></category>
		<category><![CDATA[Email]]></category>
		<category><![CDATA[shortcode]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3762</guid>
		<description><![CDATA[A while back I wrote a short tutorial entitled &#8220;A Clever and Safe Way to Display your Email Address&#8221; which explained how you could use CSS to safely display your email on a web page. That way still works well but if you&#8217;re using WordPress, you can take advantage of a function called antispambot() to [...]]]></description>
			<content:encoded><![CDATA[<p>A while back I wrote a short tutorial entitled <a href="http://bit.ly/cuRBa2">&#8220;A Clever and Safe Way to Display your Email Address&#8221;</a> which explained how you could use CSS to safely display your email on a web page. That way still works well but if you&#8217;re using WordPress, you can take advantage of a function called <code>antispambot()</code> to display emails addresses anywhere on your site. </p>
<p>If you code a page template directly, you can add the function like so:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">antispambot<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;youremail@yoursite.com&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div>

<p>I needed a away to take advantage of the <code>antispambot()</code> function within my post and page content, so I decided to create a shortcode that would make it super easy to reuse.</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// EMAIL ENCODE SHORTCODE</span>
<span style="color: #000000; font-weight: bold;">function</span> email_encode_function<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$atts</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'&lt;a href=&quot;'</span><span style="color: #339933;">.</span>antispambot<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;mailto:&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;&gt;'</span><span style="color: #339933;">.</span>antispambot<span style="color: #009900;">&#40;</span><span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/a&gt;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_shortcode<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'email'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'email_encode_function'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div>

<p>Once you add the above code snippet to your theme&#8217;s function.php file you can use the following structure to safely display an email address in your post or page content:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #009900;">&#91;</span>email<span style="color: #009900;">&#93;</span>you<span style="color: #339933;">@</span>you<span style="color: #339933;">.</span>com<span style="color: #009900;">&#91;</span><span style="color: #339933;">/</span>email<span style="color: #009900;">&#93;</span></pre></div></td></tr></table></div>

<p>You can read more about <code>antispambot()</code> in the codex: <a href="http://codex.wordpress.org/Function_Reference/antispambot">http://codex.wordpress.org/Function_Reference/antispambot</a></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2012/shortcode-to-encode-email-in-wordpress-posts/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Log in to WordPress using an Email Address</title>
		<link>http://bavotasan.com/2011/log-in-to-wordpress-using-an-email-address/</link>
		<comments>http://bavotasan.com/2011/log-in-to-wordpress-using-an-email-address/#comments</comments>
		<pubDate>Wed, 28 Dec 2011 16:26:52 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[email address]]></category>
		<category><![CDATA[functions.php]]></category>
		<category><![CDATA[login]]></category>
		<category><![CDATA[username]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3744</guid>
		<description><![CDATA[I needed to figure out how to allow a user to use either their username or email address to log into WordPress. It took a bit of rooting around but the final piece of code ended up being pretty simple. function login_with_email_address&#40;$username&#41; &#123; $user = get_user_by_email&#40;$username&#41;; if&#40;!empty&#40;$user-&#62;user_login&#41;&#41; $username = $user-&#62;user_login; return $username; &#125; add_action&#40;'wp_authenticate','login_with_email_address'&#41;; Place [...]]]></description>
			<content:encoded><![CDATA[<p>I needed to figure out how to allow a user to use either their username or email address to log into WordPress. It took a bit of rooting around but the final piece of code ended up being pretty simple.</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> login_with_email_address<span style="color: #009900;">&#40;</span><span style="color: #000088;">$username</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$user</span> <span style="color: #339933;">=</span> get_user_by_email<span style="color: #009900;">&#40;</span><span style="color: #000088;">$username</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$user</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user_login</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$username</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$user</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user_login</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$username</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_authenticate'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'login_with_email_address'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div>

<p>Place that in your <code>functions.php</code> file and you will be able to sign into your WordPress site using an email address or by default, the username.</p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/log-in-to-wordpress-using-an-email-address/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Introducing Abby</title>
		<link>http://bavotasan.com/2011/introducing-abby/</link>
		<comments>http://bavotasan.com/2011/introducing-abby/#comments</comments>
		<pubDate>Tue, 27 Dec 2011 17:05:47 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[a.bavota]]></category>
		<category><![CDATA[baby]]></category>
		<category><![CDATA[bavotachan]]></category>
		<category><![CDATA[writing]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3768</guid>
		<description><![CDATA[Things have been pretty crazy over the last little while and I thought it would be a good idea to explain why I haven&#8217;t been updating the site as much as I should. My wife was pregnant and the home stretch ended up being a bit more demanding than we had hoped for so I [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://bavotasan.com/wp-content/uploads/2011/12/abby_big.jpg" alt="" title="abby_big" width="550" height="413" class="aligncenter size-full wp-image-3770" />Things have been pretty crazy over the last little while and I thought it would be a good idea to explain why I haven&#8217;t been updating the site as much as I should. My wife was pregnant and the home stretch ended up being a bit more demanding than we had hoped for so I had very little time in front of my computer. Thankfully, Abby Eloise Bavota (aka a.bavota, aka bavotachan) was born on December 23rd at 8:14am with no complications. Both Abby and my wife are doing great so hopefully that means I will have some time to get back to writing and updating things. Hopefully&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/introducing-abby/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Holiday Bundle</title>
		<link>http://bavotasan.com/2011/holiday-bundle/</link>
		<comments>http://bavotasan.com/2011/holiday-bundle/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 17:42:51 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[magazine flow]]></category>
		<category><![CDATA[magazine premium]]></category>
		<category><![CDATA[Themes]]></category>
		<category><![CDATA[themes by bavotasan.com]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3748</guid>
		<description><![CDATA[The year is almost over and the holidays are coming closer, so I thought it would be a good time to package together some WordPress themes and offer people a great deal. For the month of December, you can now get Magazine Premium, Magazine Flow and Arturo all for only $99.99. That’s a savings of [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://themes.bavotasan.com/wp-content/uploads/2011/12/holidaybundle2.jpg" alt="" class="aligncenter" />The year is almost over and the holidays are coming closer, so I thought it would be a good time to package together some WordPress themes and offer people a great deal. For the month of December, you can now get <a href="http://themes.bavotasan.com/2010/magazine-premium/">Magazine Premium</a>, <a href="http://themes.bavotasan.com/2010/magazine-flow/">Magazine Flow</a> and <a href="http://themes.bavotasan.com/2010/arturo/">Arturo</a> all for only $99.99. That’s a savings of almost $80! All you have to do is click on the link below to take advantage of this amazing deal.</p>
<form id="buynow" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="_xclick">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="c@bavotasan.com" />
<input type="hidden" name="currency_code" value="CAD" />
<input type="hidden" name="item_name" value="Holiday Bundle" />
<input type="hidden" name="item_number" value="wpt-bundle" />
<input type="hidden" name="amount" value="99.99" /></form>
<p><a class="purchase buynow" style="margin: 30px auto;" href="javascript:void(0)">Purchase Now</a></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/holiday-bundle/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML5 Placeholder jQuery Fix</title>
		<link>http://bavotasan.com/2011/html5-placeholder-jquery-fix/</link>
		<comments>http://bavotasan.com/2011/html5-placeholder-jquery-fix/#comments</comments>
		<pubDate>Sun, 20 Nov 2011 17:00:45 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[input type]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[placeholder]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3734</guid>
		<description><![CDATA[I was working with placeholder text for the input fields on a recent project and I needed to make sure that the text would appear in all browsers. I had to use a old technique that many of you might be familiar with: &#60;input type=&#34;text&#34; name=&#34;first_name&#34; value=&#34;First Name&#34; onfocus=&#34;if(this.value == 'First Name') { this.value = [...]]]></description>
			<content:encoded><![CDATA[<p>I was working with placeholder text for the input fields on a recent project and I needed to make sure that the text would appear in all browsers. I had to use a old technique that many of you might be familiar with:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text&quot;</span> name<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;first_name&quot;</span> value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;First Name&quot;</span> onfocus<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;if(this.value == 'First Name') { this.value = ''; }&quot;</span> onblur<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;if(this.value == '') { this.value = 'First Name'; }&quot;</span> <span style="color: #339933;">/&gt;</span></pre></div></td></tr></table></div>

<p>That technique uses inline JavaScript to check if the value of the input field matches the default placeholder text. It works in every browser but it does require a lot of extra code on each of your input fields. It would also submit the placeholder text as the value of the input so you would have to place some validation to remove any value that matched the placeholder text. </p>
<p>All of those issues are solved in HTML5 with the <code>placeholder</code> parameter. Now your input tag would just look like this:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text&quot;</span> name<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;first_name&quot;</span> placeholder<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;First Name&quot;</span> <span style="color: #339933;">/&gt;</span></pre></div></td></tr></table></div>

<p>That does the exact same thing and will not submit a value for the empty input fields. </p>
<p>This HTML5 feature is supported in the following browsers:</p>
<p>Firefox: 3.7+<br />
Safari: 4.0+<br />
Chrome: 4.0+<br />
Opera: 11.0+<br />
iPhone: 4.0+</p>
<p>Since it doesn&#8217;t work in IE and older browsers, you need to use something like this jQuery fix:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #009966; font-style: italic;">/* &lt;![CDATA[ */</span>
$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> input <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;input&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span> <span style="color: #000066; font-weight: bold;">in</span> input<span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'[placeholder]'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> i.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'password'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					i.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'password'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">type</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'password'</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>			
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span> <span style="color: #339933;">||</span> i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> i.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">type</span><span style="color: #339933;">==</span><span style="color: #3366CC;">'password'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					i.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'password'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">type</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'text'</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				i.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>i.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parents</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'form'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'[placeholder]'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> i.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'placeholder'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
					i.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/* ]]&gt; */</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div>

<p>First thing it does is check whether the <code>placeholder</code> parameter is supported. If it is, it will do nothing. If it isn&#8217;t it will perform a few things to emulate the HTML5 <code>placeholder</code> parameter. In order to style how your placeholder text appears you can use the following CSS:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.placeholder</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#aaa</span><span style="color: #00AA00;">;</span>
  <span style="color: #00AA00;">&#125;</span></pre></div></td></tr></table></div>

<p>The fix will also switch the input type to &#8220;text&#8221; for all password inputs so that your placeholder text will not appear as a bunch of black dots. The final part of the fix will empty the value of the input field if it contains the placeholder text so that it is not submitted as a real value in your form.</p>
<p>Since this is a jQuery fix, you need to make sure that you have included a link to jQuery between your head tags:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div>

<p>With everything in place, you now have a backwards compatible way of using the new HTML5 <code>placeholder</code> parameter so that all of your visitors have the same experience when they are on your site.</p>
<p><strong>Resources:</strong></p>
<p><a href="http://www.webgeekly.com/tutorials/jquery/creating-a-cross-browser-form-field-placeholder/">http://www.webgeekly.com/tutorials/jquery/creating-a-cross-browser-form-field-placeholder/</a><br />
<a href="http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html">http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/html5-placeholder-jquery-fix/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>A Better Voting System for WordPress</title>
		<link>http://bavotasan.com/2011/a-better-voting-system-for-wordpress/</link>
		<comments>http://bavotasan.com/2011/a-better-voting-system-for-wordpress/#comments</comments>
		<pubDate>Mon, 24 Oct 2011 11:14:56 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Php]]></category>
		<category><![CDATA[voting]]></category>
		<category><![CDATA[voting system]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3718</guid>
		<description><![CDATA[I published a tutorial quite a while back called Simple Voting for WordPress with PHP and jQuery. It was not without its problems, and recently I needed to improve on it for a client, so I thought it would be a good idea to finally release an updated version. The original tutorial relied on an [...]]]></description>
			<content:encoded><![CDATA[<p>I published a tutorial quite a while back called <a href="http://bit.ly/aLhLbd">Simple Voting for WordPress with PHP and jQuery</a>. It was not without its problems, and recently I needed to improve on it for a client, so I thought it would be a good idea to finally release an updated version.</p>
<p>The original tutorial relied on an outside PHP file to process the votes but now I use the built-in Ajax function in WordPress. That way it&#8217;s more secure and efficient. To get everything started, let&#8217;s take a look at the jQuery required:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #009966; font-style: italic;">/* &lt;![CDATA[ */</span>	
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#vote&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.disabled&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> el <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> nonce <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;input#voting_nonce&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			action<span style="color: #339933;">:</span> <span style="color: #3366CC;">'add_votes_options'</span><span style="color: #339933;">,</span>
			nonce<span style="color: #339933;">:</span> nonce<span style="color: #339933;">,</span>
			postid<span style="color: #339933;">:</span> <span style="color: #3366CC;">'&lt;?php echo $post-&gt;ID; ?&gt;'</span><span style="color: #339933;">,</span>
			ip<span style="color: #339933;">:</span> <span style="color: #3366CC;">'&lt;?php echo $_SERVER['</span>REMOTE_ADDR<span style="color: #3366CC;">']; ?&gt;'</span>			
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		$.<span style="color: #660066;">post</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;?php echo admin_url('</span>admin<span style="color: #339933;">-</span>ajax.<span style="color: #660066;">php</span><span style="color: #3366CC;">'); ?&gt;'</span><span style="color: #339933;">,</span> data<span style="color: #339933;">,</span>
		<span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>response<span style="color: #339933;">!=</span><span style="color: #3366CC;">&quot;-1&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;VOTED&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">unbind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;click&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>response<span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;null&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;A vote has already been registered to this IP address.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#votecounter&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Thanks for your vote.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;There was a problem registering your vote. Please try again later.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/* ]]&gt; */</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div>

<p>If the vote button is clicked, it will send the Ajax request and process it accordingly, depending on a few things. The only thing missing, is the code to register a cookie once the vote has been calculated so that voters can only vote once. Let&#8217;s include two cookie functions originally created by <a href="http://www.quirksmode.org/js/cookies.html">Peter-Paul Koch</a> and add a block of code to our original script:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #009966; font-style: italic;">/* &lt;![CDATA[ */</span>	
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">function</span> setCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span>value<span style="color: #339933;">,</span>days<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>days<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	        <span style="color: #003366; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        date.<span style="color: #660066;">setTime</span><span style="color: #009900;">&#40;</span>date.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>days<span style="color: #339933;">*</span><span style="color: #CC0000;">24</span><span style="color: #339933;">*</span><span style="color: #CC0000;">60</span><span style="color: #339933;">*</span><span style="color: #CC0000;">60</span><span style="color: #339933;">*</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        <span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;; expires=&quot;</span><span style="color: #339933;">+</span>date.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
	    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	    document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> <span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;=&quot;</span><span style="color: #339933;">+</span>value<span style="color: #339933;">+</span>expires<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;; path=/&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">function</span> getCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #003366; font-weight: bold;">var</span> nameEQ <span style="color: #339933;">=</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;=&quot;</span><span style="color: #339933;">;</span>
	    <span style="color: #003366; font-weight: bold;">var</span> ca <span style="color: #339933;">=</span> document.<span style="color: #660066;">cookie</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">';'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i <span style="color: #339933;">&lt;</span> ca.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	        <span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> ca<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	        <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">' '</span><span style="color: #009900;">&#41;</span> c <span style="color: #339933;">=</span> c.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>nameEQ<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> c.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>nameEQ.<span style="color: #660066;">length</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
	    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#vote&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.disabled&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> el <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span id=&quot;loader&quot;&gt;&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> nonce <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;input#voting_nonce&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			action<span style="color: #339933;">:</span> <span style="color: #3366CC;">'add_votes_options'</span><span style="color: #339933;">,</span>
			nonce<span style="color: #339933;">:</span> nonce<span style="color: #339933;">,</span>
			postid<span style="color: #339933;">:</span> <span style="color: #3366CC;">'&lt;?php echo $post-&gt;ID; ?&gt;'</span><span style="color: #339933;">,</span>
			ip<span style="color: #339933;">:</span> <span style="color: #3366CC;">'&lt;?php echo $_SERVER['</span>REMOTE_ADDR<span style="color: #3366CC;">']; ?&gt;'</span>			
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		$.<span style="color: #660066;">post</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;?php echo admin_url('</span>admin<span style="color: #339933;">-</span>ajax.<span style="color: #660066;">php</span><span style="color: #3366CC;">'); ?&gt;'</span><span style="color: #339933;">,</span> data<span style="color: #339933;">,</span>
		<span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>response<span style="color: #339933;">!=</span><span style="color: #3366CC;">&quot;-1&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;VOTED&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">unbind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;click&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>response<span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;null&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;A vote has already been registered to this IP address.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#votecounter&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Thanks for your vote.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #003366; font-weight: bold;">var</span> cookie <span style="color: #339933;">=</span> getCookie<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;better_votes&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>cookie<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> newcookie <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&lt;?php echo $post-&gt;ID; ?&gt;&quot;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> newcookie <span style="color: #339933;">=</span> cookie <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;,&lt;?php echo $post-&gt;ID; ?&gt;&quot;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				setCookie<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;better_votes&quot;</span><span style="color: #339933;">,</span> newcookie<span style="color: #339933;">,</span> <span style="color: #CC0000;">365</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;There was a problem registering your vote. Please try again later.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/* ]]&gt; */</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div>

<p>Now a cookie will be registered once the vote has been tallied. This is all the jQuery we need to make our voting system work. If jQuery is not already loaded in your WordPress theme, you may also need to add this into your header.php file before the <code>wp_head()</code> code:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;?</span>php wp_enqueue_script<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'jquery'</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">?&gt;</span></pre></div></td></tr></table></div>

<p>The following is the PHP code that we need to process the vote on the server side. This will need to be placed in your theme&#8217;s functions.php file. If the file doesn&#8217;t exist, just create it and make sure this code is placed between the PHP tags:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;wp_ajax_add_votes_options&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;add_votes_options&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;wp_ajax_nopriv_add_votes_options&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;add_votes_options&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> add_votes_options<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>wp_verify_nonce<span style="color: #009900;">&#40;</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'nonce'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'voting_nonce'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$postid</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'postid'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$ip</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'ip'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$voter_ips</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$postid</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;voter_ips&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$voter_ips</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$ip</span><span style="color: #339933;">,</span> <span style="color: #000088;">$voter_ips</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;null&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$voter_ips</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$ip</span><span style="color: #339933;">;</span>
		update_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$postid</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;voter_ips&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$voter_ips</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>	
&nbsp;
	<span style="color: #000088;">$current_votes</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$postid</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;votes&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$new_votes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">intval</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$current_votes</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	update_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$postid</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;votes&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$new_votes</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$return</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$new_votes</span><span style="color: #339933;">&gt;</span><span style="color: #cc66cc;">1</span> ? <span style="color: #000088;">$new_votes</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot; votes&quot;</span> <span style="color: #339933;">:</span> <span style="color: #000088;">$new_votes</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot; vote&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$return</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></td></tr></table></div>

<p>The two action calls at the beginning hook into the Ajax function from the jQuery. We need both since one is for logged-in users and the other is for guests. Next we check for the security nonce, and end the process if it is not set correctly. This is a huge improvement over my old code that had absolutely no security whatsoever. If all is good, we start processing the vote by checking if the voters IP address has already been registered. If so, the process stops and returns a &#8220;null&#8221; value. Otherwise we registered the vote and IP address and echo out the total votes.</p>
<p>If you take a look at the jQuery above, you can see how the different responses will be processed. A &#8220;null&#8221; response will alert the voter that their IP address has already been registered so their new vote will not count. A response of &#8220;-1&#8243; means something went wrong and we alert the voter. If everything goes well, the vote is registered, the voter is thanked and the total number of votes increases on the page.</p>
<p>There you have all the jQuery and PHP required to get it working on the backend, but you still need some PHP/HTML in order for things to work on the front end.</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">// This will display &quot;0 votes&quot; and increase as votes are added</span>
<span style="color: #000088;">$votes</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;votes&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$votes</span> <span style="color: #339933;">=</span> <span style="color: #339933;">!</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$votes</span><span style="color: #009900;">&#41;</span> ? <span style="color: #000088;">$votes</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;0&quot;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$votes</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$plural</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">else</span> <span style="color: #000088;">$plural</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;s&quot;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;div id=&quot;votecounter&quot;&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$votes</span><span style="color: #339933;">.</span><span style="color: #0000ff;">' vote'</span><span style="color: #339933;">.</span><span style="color: #000088;">$plural</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/div&gt;'</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">// This will display the vote button and disable it if a cookie has already</span>
<span style="color: #666666; font-style: italic;">// been set. We also add the security nonce here. </span>
<span style="color: #000088;">$hasvoted</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_COOKIE</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'better_votes'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$hasvoted</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;,&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$hasvoted</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #000088;">$hasvoted</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$vtext</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;VOTED&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">' class=&quot;disabled&quot;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$vtext</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;VOTE&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;a href=&quot;javascript:void(0)&quot; id=&quot;vote&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$class</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$vtext</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_nonce_field'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> wp_nonce_field<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'voting_nonce'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'voting_nonce'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></td></tr></table></div>

<p>So there you have it, a more efficient voting system for WordPress that is secure and will hopefully double guard you against fraudulent voting. You can see this working live on the new <a href="http://2011.bloodshotscanada.com">Bloodshots</a> website. It will only be active between Oct 24th and Oct 28th while people can vote for the films.</p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/a-better-voting-system-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>Simple Textarea Word Counter jQuery Plugin</title>
		<link>http://bavotasan.com/2011/simple-textarea-word-counter-jquery-plugin/</link>
		<comments>http://bavotasan.com/2011/simple-textarea-word-counter-jquery-plugin/#comments</comments>
		<pubDate>Thu, 20 Oct 2011 15:49:44 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Downloads]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery plugin]]></category>
		<category><![CDATA[textarea]]></category>
		<category><![CDATA[word count]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3707</guid>
		<description><![CDATA[I know there are a few textarea word counter jQuery plugins out there already, but I felt like building my own since I wasn&#8217;t a fan of the ones that are available. Nothing new here but I did my best at making it as simple to use and efficient as possible. /** * jQuery.textareaCounter * [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://bavotasan.com/wp-content/uploads/2011/10/textareacounter_big.jpg" alt="" title="textareacounter_big" width="550" height="200" class="aligncenter size-full wp-image-3713" />I know there are a few textarea word counter jQuery plugins out there already, but I felt like building my own since I wasn&#8217;t a fan of the ones that are available. Nothing new here but I did my best at making it as simple to use and efficient as possible.</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">textareaCounter</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">// setting the defaults</span>
		<span style="color: #006600; font-style: italic;">// $(&quot;textarea&quot;).textareaCounter({ limit: 100 });</span>
		<span style="color: #003366; font-weight: bold;">var</span> defaults <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			limit<span style="color: #339933;">:</span> <span style="color: #CC0000;">100</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>	
		<span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>defaults<span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// and the plugin begins</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> obj<span style="color: #339933;">,</span> text<span style="color: #339933;">,</span> wordcount<span style="color: #339933;">,</span> limited<span style="color: #339933;">;</span>
&nbsp;
			obj <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			obj.<span style="color: #660066;">after</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span style=&quot;font-size: 11px; clear: both; margin-top: 3px; display: block;&quot; id=&quot;counter-text&quot;&gt;Max. '</span><span style="color: #339933;">+</span>options.<span style="color: #660066;">limit</span><span style="color: #339933;">+</span><span style="color: #3366CC;">' words&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			obj.<span style="color: #660066;">keyup</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    text <span style="color: #339933;">=</span> obj.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>text <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    	wordcount <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				    wordcount <span style="color: #339933;">=</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>wordcount <span style="color: #339933;">&gt;</span> options.<span style="color: #660066;">limit</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#counter-text&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span style=&quot;color: #DD0000;&quot;&gt;0 words left&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					limited <span style="color: #339933;">=</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #339933;">,</span> options.<span style="color: #660066;">limit</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					limited <span style="color: #339933;">=</span> limited.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>limited<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#counter-text&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">limit</span> <span style="color: #339933;">-</span> wordcount<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">' words left'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> 
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div>

<p>Load that up and then you can use the following to make it work:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;textarea&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">textareaCounter</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> limit<span style="color: #339933;">:</span> <span style="color: #CC0000;">100</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div>

<p>The default limits to 100 words but you can change that to whatever you like. Here is a simple HTML setup using the plugin:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>html<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #009933; font-style: italic;">/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/</span>
<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #339933;">.</span>fn<span style="color: #339933;">.</span>textareaCounter <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// setting the defaults</span>
		<span style="color: #666666; font-style: italic;">// $(&quot;textarea&quot;).textareaCounter({ limit: 100 });</span>
		<span style="color: #000000; font-weight: bold;">var</span> defaults <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			limit<span style="color: #339933;">:</span> <span style="color: #cc66cc;">100</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>	
		<span style="color: #000000; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> $<span style="color: #339933;">.</span>extend<span style="color: #009900;">&#40;</span>defaults<span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">// and the plugin begins</span>
		<span style="color: #b1b100;">return</span> this<span style="color: #339933;">.</span><span style="color: #990000;">each</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> obj<span style="color: #339933;">,</span> text<span style="color: #339933;">,</span> wordcount<span style="color: #339933;">,</span> limited<span style="color: #339933;">;</span>
&nbsp;
			obj <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			obj<span style="color: #339933;">.</span>after<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;span style=&quot;font-size: 11px; clear: both; margin-top: 3px; display: block;&quot; id=&quot;counter-text&quot;&gt;Max. '</span><span style="color: #339933;">+</span>options<span style="color: #339933;">.</span>limit<span style="color: #339933;">+</span><span style="color: #0000ff;">' words&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			obj<span style="color: #339933;">.</span>keyup<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    text <span style="color: #339933;">=</span> obj<span style="color: #339933;">.</span>val<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>text <span style="color: #339933;">===</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    	wordcount <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
				    wordcount <span style="color: #339933;">=</span> $<span style="color: #339933;">.</span><span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>length<span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			    <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>wordcount <span style="color: #339933;">&gt;</span> options<span style="color: #339933;">.</span>limit<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			        $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#counter-text&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>html<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;span style=&quot;color: #DD0000;&quot;&gt;0 words left&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					limited <span style="color: #339933;">=</span> $<span style="color: #339933;">.</span><span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span> options<span style="color: #339933;">.</span>limit<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					limited <span style="color: #339933;">=</span> limited<span style="color: #339933;">.</span><span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>val<span style="color: #009900;">&#40;</span>limited<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
			        $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#counter-text&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>html<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>options<span style="color: #339933;">.</span>limit <span style="color: #339933;">-</span> wordcount<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #0000ff;">' words left'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span> 
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>
<span style="color: #339933;">&lt;/</span>head<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>textarea rows<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;15&quot;</span> cols<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;50&quot;</span><span style="color: #339933;">&gt;&lt;/</span>textarea<span style="color: #339933;">&gt;</span>
&nbsp;
	<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;textarea&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>textareaCounter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div>

<p>That would give you a textarea box that looks like this:</p>
<p><textarea rows="14" cols="" style="width: 100%;" class="textareaCounter"></textarea></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/simple-textarea-word-counter-jquery-plugin/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Zombie with Film Camera for Head</title>
		<link>http://bavotasan.com/2011/zombie-with-film-camera-for-head/</link>
		<comments>http://bavotasan.com/2011/zombie-with-film-camera-for-head/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 15:17:25 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Downloads]]></category>
		<category><![CDATA[free image]]></category>
		<category><![CDATA[horror]]></category>
		<category><![CDATA[JPG]]></category>
		<category><![CDATA[Png]]></category>
		<category><![CDATA[website]]></category>
		<category><![CDATA[zombie]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=3689</guid>
		<description><![CDATA[I am working on a website for a horror film festival and created this image by splicing a few things together. Sadly, we won&#8217;t be using on the site but I thought it was cool enough that I should put it here so people can check it out. Feel free to download it and use [...]]]></description>
			<content:encoded><![CDATA[<p>I am working on a website for a horror film festival and created this image by splicing a few things together. Sadly, we won&#8217;t be using on the site but I thought it was cool enough that I should put it here so people can check it out. Feel free to download it and use it on your own project, just leave a comment so I can see what you do with it.</p>
<p><img src="http://bavotasan.com/wp-content/uploads/2011/10/zombiecam_big.png" alt="" title="zombiecam_big" width="300" height="550" class="aligncenter size-full wp-image-3698" /></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2011/zombie-with-film-camera-for-head/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 2.204 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2012-02-04 14:46:42 -->

