<?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>Adnan Rashid &#187; javascript</title>
	<atom:link href="http://www.adnan-rashid.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.adnan-rashid.com</link>
	<description>Web Technologist</description>
	<lastBuildDate>Thu, 09 Sep 2010 00:24:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Prevent users from copy-pasting text inputs</title>
		<link>http://www.adnan-rashid.com/2010/07/25/prevent-users-from-copy-pasting-text-inputs/</link>
		<comments>http://www.adnan-rashid.com/2010/07/25/prevent-users-from-copy-pasting-text-inputs/#comments</comments>
		<pubDate>Sun, 25 Jul 2010 04:00:01 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.adnan-rashid.com/?p=136</guid>
		<description><![CDATA[You might have across various registration pages, where you need to re-confirm your email. This validation step is to ensure that a erroneous email address is prevented. However, most of us instead of usually entering the email address twice, simply copy-paste it from the previous email address field. So if we (or our users) did]]></description>
			<content:encoded><![CDATA[<p>You might have across various registration pages, where you need to re-confirm your email. This validation step is to ensure that a erroneous email address is prevented. However, most of us instead of usually entering the email address twice, simply copy-paste it from the previous email address field. So if we (or our users) did a typo in the first field, then it will also be copied to the second field, defeating the whole purpose in the first place.</p>
<p>We can prevent users from bypassing this validation using simple JavaScript and the jQuery library. The primary idea is to handle the cut, copy, paste events and handling them according to our requirements. Please note that Firefox, Chrome and Safari will fire the copy, cut, paste events anywhere in the document, whereas in Internet Explorer these events are fired only within a form, within an text input / image or on a HTML element.</p>
<p>The first step as always is to add a reference to the jQuery library to our page. I recommend referencing the library from <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" target="_blank">Google&#8217;s CDN</a> or <a href="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" target="_blank">Microsoft&#8217;s CDN</a>. Next step is to prevent users from copy-pasting into our form text fields.</p>
<pre name="code" class="javascript">
<script type="text/javascript">
	$(document).ready(function () {
		$('input[type=text]').bind('copy paste', function (e) {
			e.preventDefault();
		});
	});
</script>
</pre>
<p>As you can see above, we are adding this behavior to all text input fields. If required, we can apply this to specific fields by using a different selector such as $(&#8216;.copy_paste&#8217;) or $(&#8216;#txtConfirmPassword&#8217;) instead of the $(&#8216;input[type=text]&#8216;).</p>
<p>For more information on preventDefault() you can refer the <a href="https://developer.mozilla.org/en/DOM/event.preventDefault" target="_blank">Mozilla Developer Center</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2010/07/25/prevent-users-from-copy-pasting-text-inputs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sliding Labels Form</title>
		<link>http://www.adnan-rashid.com/2010/01/23/sliding-labels-form/</link>
		<comments>http://www.adnan-rashid.com/2010/01/23/sliding-labels-form/#comments</comments>
		<pubDate>Sat, 23 Jan 2010 04:00:20 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=46</guid>
		<description><![CDATA[I came across an interesting article at CSSKarma about form designing. The author explains that form labels need not always be outside the input controls. Using jQuery and pinch of CSS, the article focuses on a creative implementation of designing forms, while retaining the intended User Experience. Check out the article&#8230;]]></description>
			<content:encoded><![CDATA[<p>I came across an interesting article at <a href="http://www.csskarma.com/">CSSKarma</a> about form designing. The author explains that form labels need not always be outside the input controls. Using jQuery and pinch of CSS, the article focuses on a creative implementation of designing forms, while retaining the intended User Experience. Check out the <a href="http://www.csskarma.com/blog/sliding-labels/">article</a>&#8230;</p>
<p><a href="http://www.csskarma.com/blog/sliding-labels/" target="_blank"><img class="aligncenter size-full wp-image-47" title="SlidingLabel" src="http://www.adnan-rashid.com/wp-content/uploads/2010/06/slidinglabel.jpg" alt="" width="580" height="120" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2010/01/23/sliding-labels-form/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>14 Days of jQuery</title>
		<link>http://www.adnan-rashid.com/2010/01/10/14-days-of-jquery/</link>
		<comments>http://www.adnan-rashid.com/2010/01/10/14-days-of-jquery/#comments</comments>
		<pubDate>Sun, 10 Jan 2010 04:00:56 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=44</guid>
		<description><![CDATA[January 14 marks the birth of jQuery. To celebrate the release of jQuery 1.4 (also on January 14), the jQuery team is bringing fourteen consecutive days of new releases. Each day, they will publish videos, tutorials, code releases and other fun stuff. They have already announced the re-design of the jQuery API site. For more]]></description>
			<content:encoded><![CDATA[<p><a href="http://jquery14.com/pre-release-1/new-jquery-api-site" target="_blank"><img class="alignright size-full wp-image-94" title="jQuery" src="http://www.adnan-rashid.com/wp-content/uploads/2010/01/jquery.jpg" alt="" width="235" height="73" /></a>January 14 marks the birth of jQuery. To celebrate the release of jQuery 1.4 (also on January 14), the jQuery team is bringing fourteen consecutive days of new releases. Each day, they will publish videos, tutorials, code releases and other fun stuff. They have already announced the re-design of the jQuery API site. For more information, about how the new site will help developers embrace one of the most popular JavaScript frameworks, click <a href="http://jquery14.com/pre-release-1/new-jquery-api-site" target="_blank">here</a>.</p>
<p>The event also focuses on sharing videos and tutorials detailing the awesome features of jQuery 1.4. To ensure you don&#8217;t miss out on any of the goodies, subscribe to the email/rss feed or visit the <a href="http://jquery14.com/" target="_blank">site</a>.</p>
<p>I have been using jQuery in most of my projects and am quite excited about the new release. Aren&#8217;t you?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2010/01/10/14-days-of-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Self-Executing JavaScript functions</title>
		<link>http://www.adnan-rashid.com/2009/10/25/self-executing-javascript-functions/</link>
		<comments>http://www.adnan-rashid.com/2009/10/25/self-executing-javascript-functions/#comments</comments>
		<pubDate>Sun, 25 Oct 2009 04:00:48 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=37</guid>
		<description><![CDATA[This post explains self-executing functions and its benefits. So lets started by breaking down a normal function and converting it into one &#8230; var myVar = "This is a normal function..."; function ShowAlert(textToAlert) { alert(textToAlert); } ShowAlert(myVar); We all know that functions are also objects in JavaScript. Thus they can be evaluated using the eval()]]></description>
			<content:encoded><![CDATA[<p>This post explains self-executing functions and its benefits. So lets started by breaking down a normal function and converting it into one &#8230;</p>
<pre name="code" class="javascript">
var myVar = "This is a normal function...";

function ShowAlert(textToAlert)
{
	alert(textToAlert);
}

ShowAlert(myVar);
</pre>
<p>We all know that functions are also objects in JavaScript. Thus they can be evaluated using the eval() function and also in the case of setInterval() function you can pass the name of the function as an object. Thus like other objects, we can also use grouping operators like ( and ).</p>
<pre name="code" class="javascript">
var myVar = "This is still a normal function...";

function ShowAlert(textToAlert)
{
	alert(textToAlert);
}

(ShowAlert)(myVar);
</pre>
<p>We are halfway there. Lets replace the name of the function with the function definition and make it a single statement.</p>
<pre name="code" class="javascript">
var myVar = "This is a self-executing function...";

(function ShowAlert(textToAlert)
{
	alert(textToAlert);
})(myVar);
</pre>
<p>Ok. So far so good. Since we are going to run this function as soon as we create it, it doesn&#8217;t need a name. Next step is to make this function an anonymous function.</p>
<pre name="code" class="javascript">
var myVar = "This is an anonymous self-executing function...";

(function (textToAlert)
{
	alert(textToAlert);
})(myVar);
</pre>
<p>And voila&#8230; We have created a self-executing anonymous function.</p>
<p>Although in this example, the advantage might not be obvious, but in real-world, this technique is quite helpful as it encapsulates the functionality and also prevents the cluttering of the global namespace. If you take a peek at the jQuery source code, you will notice that the whole library is wrapped in a single, self-executing function that is assigned to the jQuery global object. It&#8217;s precisely the reason that jQuery doesn&#8217;t pollute the global namespace nearly as much as other libraries.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2009/10/25/self-executing-javascript-functions/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery Visual Cheat Sheet</title>
		<link>http://www.adnan-rashid.com/2009/10/05/jquery-visual-cheat-sheet/</link>
		<comments>http://www.adnan-rashid.com/2009/10/05/jquery-visual-cheat-sheet/#comments</comments>
		<pubDate>Mon, 05 Oct 2009 04:00:41 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[freebie]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=62</guid>
		<description><![CDATA[Woork author Antonia Lupetti has recently released a visual cheat sheet for jQuery 1.3. The cheat sheet having six pages is a helpful reference containing the complete API reference with descriptions and sample code. What I like most about this cheat sheet, is it&#8217;s simple and elegant design. Kudos to Antonia!]]></description>
			<content:encoded><![CDATA[<p><a href="http://woork.blogspot.com/" target="_blank">Woork</a> author Antonia Lupetti has recently released a visual cheat sheet for jQuery 1.3. The cheat sheet having six pages is a helpful reference containing the complete API reference with descriptions and sample code.</p>
<p>What  I like most about this cheat sheet, is it&#8217;s simple and elegant design. Kudos to Antonia!</p>
<p><a href="http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html" target="_blank"><img class="aligncenter size-full wp-image-63" title="jQuery Visual Cheat Sheet" src="http://www.adnan-rashid.com/wp-content/uploads/2010/06/jquery-visual-cheat-sheet.jpg" alt="" width="450" height="200" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2009/10/05/jquery-visual-cheat-sheet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Tools</title>
		<link>http://www.adnan-rashid.com/2009/08/26/jquery-tools/</link>
		<comments>http://www.adnan-rashid.com/2009/08/26/jquery-tools/#comments</comments>
		<pubDate>Wed, 26 Aug 2009 04:00:01 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=68</guid>
		<description><![CDATA[I recently came across a very nice jQuery control library called jQuery Tools. The library features the following JavaScript tools : Tabs Tooltips Expose Overlay Scrollable FlashEmbed So now you are thinking &#8220;Whats so great about this? We already have tons of jQuery plugins for this&#8230;&#8221;. I thought so too. The striking advantage of this]]></description>
			<content:encoded><![CDATA[<p>I recently came across a very nice jQuery control library called jQuery Tools. The library features the following JavaScript tools :</p>
<ol>
<li>Tabs</li>
<li>Tooltips</li>
<li>Expose</li>
<li>Overlay</li>
<li>Scrollable</li>
<li>FlashEmbed</li>
</ol>
<p>So now you are thinking &#8220;Whats so great about this? We already have tons of jQuery plugins for this&#8230;&#8221;. I thought so too.</p>
<p>The striking advantage of this library is that these tools can be combined, extended and styled, giving you potentially unlimited options for creating customized widgets for your web pages. The website also features great and detailed examples to help you get started, and features some of the best practices recommended by Yahoo engineers. [ref : <a href="http://developer.yahoo.com/performance/rules.html" target="_blank">Best Practices for speeding up your website</a>]</p>
<p><img src="http://www.adnan-rashid.com/wp-content/uploads/2010/06/jquery-tools.png" alt="" title="jQuery Tools" width="550" height="250" class="aligncenter size-full wp-image-69" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2009/08/26/jquery-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript &#8211; Query String Parameters</title>
		<link>http://www.adnan-rashid.com/2009/03/04/73/</link>
		<comments>http://www.adnan-rashid.com/2009/03/04/73/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 04:00:45 +0000</pubDate>
		<dc:creator>Adnan Rashid</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.wtesolutions.com/?p=73</guid>
		<description><![CDATA[Here&#8217;s a small JavaScript helper to read URL Query String Parameters. function GetUrlParams() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf(&#39;?&#39;) + 1).split(&#39;&#38;&#39;); for(var i = 0; i &#60; hashes.length; i++) { hash = hashes[i].split(&#39;=&#39;); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } The above function, will read the URL, get the query]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a small JavaScript helper to read URL Query String Parameters.</p>
<pre name="code" class="javascript">
function GetUrlParams()
{
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf(&#39;?&#39;)
					+ 1).split(&#39;&amp;&#39;);

	for(var i = 0; i &lt; hashes.length; i++)
	{
		hash = hashes[i].split(&#39;=&#39;);
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}
</pre>
<p>The above function, will read the URL, get the query string part i.e from (&#8220;?&#8221;) and split each parameter by the (&#8220;=&#8221;) character and create a name value pair allowing us to access the param value using the param name.</p>
<p>For example, if we are have a test.htm in http://www.example.com and the URL is : http://www.example.com/test.htm?fname=Adnan&amp;lname=Rashid</p>
<p>To access the param values we can use something like :</p>
<pre name="code" class="javascript">
var params = GetUrlParams();
alert(params[&quot;fname&quot;]);
alert(params[&quot;lname&quot;]);
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.adnan-rashid.com/2009/03/04/73/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
