<?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>Mascot &#187; Javascript</title>
	<atom:link href="http://www.mstindia.com/category/resources/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mstindia.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Tue, 23 Mar 2010 13:52:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>40 Excellent Resources for JavaScript Coders</title>
		<link>http://www.mstindia.com/resources/javascript/40-excellent-resources-for-javascript-coders/</link>
		<comments>http://www.mstindia.com/resources/javascript/40-excellent-resources-for-javascript-coders/#comments</comments>
		<pubDate>Sun, 12 Oct 2008 06:04:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.mstindia.com/?p=92</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><!-- close: meta paragraph --><!--<span class="diggbookmark"> <script type="text/javascript"> digg_url = ''; digg_skin = 'compact'; digg_window = 'new'; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></span></p>
<p>&#8211;><a href="http://www.flickr.com/people/dmitry-baranovskiy/"><img src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/leading_the-javascript-code_by_dmitry-baranovskiy.jpg" alt="photo provided by Dmitry Baranovskiy - the JavaScript Code" width="574" height="180" /></a></p>
<p>Are you an advanced JavaScript coder looking for more sites to sharpen your coding prowess? Maybe you’re a web designer wanting to double as a developer (or at least know enough to add a bit of rich content into your designs). Either way, if you’re looking for more information on the <strong>topic of JavaScript</strong>, the following resources are worth a gander.</p>
<p> </p>
<h3>Reference, Resources, &amp; Tutorials</h3>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/01_dev_guru.jpg" alt="DevGuru" width="60" height="60" /><a title="DevGuru - JavaScript Quick Reference" href="http://www.devguru.com/technologies/javascript/index.asp">DevGuru &#8211; JavaScript Quick Reference</a></h4>
<p>DevGuru provides an extensive list of JavaScript syntax, alphabetized similar to a glossary for easy scanning and searching.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/05_tech_javascript_cheatsheet.jpg" alt="TechCheatSheets.com - Javascript Cheat Sheets" width="60" height="60" /><a title="Javascript Cheat Sheets" href="http://techcheatsheets.com/tag/javascript/">TechCheatSheets.com &#8211; Javascript Cheat Sheets</a></h4>
<p>A roundup of <strong>10 JavaScript cheat sheets</strong> in one place; includes cheatsheets for frameworks such as jQuery and Prototype.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/03_google_groups.jpg" alt="Google Groups - comp.lang.javascript" width="60" height="60" /><a title="Google Groups - comp.lang.javascript" href="http://groups.google.com/group/comp.lang.javascript/topics?lnk=sg&amp;hl=en">Google Groups &#8211; comp.lang.javascript</a></h4>
<p>If you’re looking for a community of JavaScript’ers <em>comp.lang.javascrip</em>t is an active and helpful community of developers.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/04_jquery_for_Designers.jpg" alt="jQuery for Designers" width="60" height="60" /><a title="jQuery for Designers" href="http://jqueryfordesigners.com/">jQuery for Designers</a></h4>
<p><em>jQuery for Designers</em> is geared towards <strong>designers</strong> who want to learn about the jQuery library to add more dynamic content in their designs.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/06_free_tech_books.jpg" alt="Freetechbooks.com - Free Online JavaScript Books" width="60" height="60" /><a title="Freetechbooks.com - Free Online JavaScript Books" href="http://www.freetechbooks.com/javascript-f68.html">Freetechbooks.com &#8211; Free Online JavaScript Books</a></h4>
<p>In this collection, you’ll be able to download <strong>5 excellent e-books</strong> on the topic of JavaScript, all for free.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/02_dzone.jpg" alt="DZone" width="60" height="60" /><a title="http://www.dzone.com/links/" href="http://www.dzone.com/links/">DZone</a></h4>
<p>Although not purely a JavaScript resource, <em>DZone</em> regularly features articles, tutorials, resources, and news about JavaScript.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/16_w3Schools.jpg" alt="W3Schools - JavaScript Tutorial" width="60" height="60" /><a title="W3Schools - JavaScript Tutorial" href="http://www.w3schools.com/JS/default.asp">W3Schools &#8211; JavaScript Tutorial</a></h4>
<p>W3School’s section on JavaScript offers <strong>beginning to advanced JavaScript topics</strong>.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/07_15_Days_of_jquery.jpg" alt="15 Days Of jQuery" width="60" height="60" /><a title="15 Days Of jQuery" href="http://15daysofjquery.com/">15 Days Of jQuery</a></h4>
<p>Straight off the home page, <em>15 Days of jQuery</em> has &#8220;<em>Fantastic tutorials and example code that takes you from zero to hero in no time flat</em>&#8220;.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/08_mootorial.jpg" alt="The &quot;Mootorial&quot;" width="60" height="60" /><a title="The " href="http://clientside.cnet.com/wiki/mootorial">The &#8220;Mootorial&#8221;</a></h4>
<p><em>//clientside’s</em> tutorial on the mootools framework has a built-in console for you to try out JS code.</p>
<h3 class="clear">Premade Scripts/Code</h3>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/09_ajax_daddy.jpg" alt="AjaxDaddy" width="60" height="60" /><a title="AjaxDaddy" href="http://www.ajaxdaddy.com/">AjaxDaddy</a></h4>
<p>A collection of downloadable DHTML scripts. <em>AjaxDaddy </em>provides a demo for the featured scripts.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/10_miniajax.jpg" alt="MiniAjax.com" width="60" height="60" /><a title="MiniAjax.com - A showroom of nice looking simple downloadable DHTML and AJAX scripts" href="http://miniajax.com/">MiniAjax.com</a></h4>
<p>Another site with a collection of DHTML and Ajax code, similar to AjaxDaddy.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/11_javascript_kit.jpg" alt="JavaScript Kit" width="60" height="60" /><a title="JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop" href="http://www.javascriptkit.com/">JavaScript Kit</a></h4>
<p>Here, you’ll find downloadable scripts, as well as tutorials and guides on JavaScript.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/12_dynamic_drive.jpg" alt="Dynamic Drive JavaScript code library" width="60" height="60" /><a title="Dynamic Drive JavaScript code library" href="http://www.dynamicdrive.com/">Dynamic Drive JavaScript code library</a></h4>
<p>DHTML scripts organized into <strong>16 categories</strong>
<p style="display:none"><a href="http://alanquinn.com/?movie_beverly_hills_chihuahua">Beverly Hills Chihuahua movie</a></p>
<p>  including <em>Calendars</em>, <em>Image Effects</em>, <em>Links &amp; Tooltips</em>, and more.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/13_dhtml_goodies.jpg" alt="DHTMLgoodies.com" width="60" height="60" /><a title="DHTMLgoodies.com - A library of DHTML and Ajax scripts" href="http://www.dhtmlgoodies.com/">DHTMLgoodies.com</a></h4>
<p>Yet another place to get your fix of DHTML/Ajax scripts. They also have a fairly nice and straight-forward <a href="http://www.dhtmlgoodies.com/index.html?whichTutorial=ajax-basics">Ajax basics tutorial</a>.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/14_4um_useful_javascripts.jpg" alt="4umi useful Javascript" width="60" height="60" /><a title="4umi useful Javascript" href="http://4umi.com/web/javascript/">4umi useful Javascript</a></h4>
<p>A &#8220;database&#8221; of useful scripts and code snipplets that are updated fairly often.</p>
<h3 class="clear">Articles &amp; Blog Posts</h3>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/15_most_complete_framework.jpg" alt="The Most Complete AJAX Framework and JavaScript Libraries List(124+)" width="60" height="60" /><a title="The Most Complete AJAX Framework and JavaScript Libraries List(124+)" href="http://ntt.cc/2008/02/13/the-most-complete-ajax-framework-and-javascript-libraries-list.html">The Most Complete AJAX Framework and JavaScript Libraries List(124+)</a></h4>
<p>The title pretty much says it all — it’s a huge list of JS frameworks/libraries.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/16_seven_rules_of_unobtrusive_js.jpg" alt="The seven rules of unobtrusive JavaScript" width="60" height="60" /><a title="The seven rules of unobtrusive JavaScript" href="http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/">The seven rules of unobtrusive JavaScript</a></h4>
<p>This excellent article outlines seven things to keep in mind when trying to develop unobtrusive JavaScript solutions.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/17_simple_unobtrusive_javascript.jpg" alt="How simple is making your javascript unobtrusive? Easy as Pie" width="60" height="60" /><a title="How simple is making your javascript unobtrusive? Easy as Pie" href="http://www.phazm.com/notes/javascript/easy-as-pie-unobtrusive-javascript/">How simple is making your javascript unobtrusive? Easy as Pie.</a></h4>
<p>A basic introductory article on &#8220;unobtrusive JavaScript.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/18_speckyboy.jpg" alt="The Top 40 Free Ajax &amp; Javascript Code for Web Designers" width="60" height="60" /><a title="The Top 40 Free Ajax &amp; Javascript Code for Web Designers" href="http://speckyboy.com/2008/02/10/the-top-40-free-ajax-javascript-code-for-web-designers/">The Top 40 Free Ajax &amp; Javascript Code for Web Designers</a></h4>
<p>A list of scripts geared towards web designers (i.e. not a lot of manual coding involved).</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/19_top_forty_free_ajax_javascript.jpg" alt="How to choose a JavaScript framework" width="60" height="60" /><a title="How to choose a JavaScript framework" href="http://blog.reindel.com/2007/10/30/how-to-choose-a-javascript-framework/">How to choose a JavaScript framework</a></h4>
<p>Outlines a few considerations when deciding which JS framework is right for you.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/20_how_to_choose_javascript_framework.jpg" alt="Efficient JavaScript" width="60" height="60" /><a title="Efficient JavaScript - http://dev.opera.com/articles/view/efficient-javascript/" href="http://dev.opera.com/articles/view/efficient-javascript/">Efficient JavaScript</a></h4>
<p>An article on <strong>quick tips</strong> for optimizing your JavaScript code.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/21_10_javascript_tools.jpg" alt="Ten Javascript Tools Everyone Should Have" width="60" height="60" /><a title="Ten Javascript Tools Everyone Should Have" href="http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have">Ten Javascript Tools Everyone Should Have</a></h4>
<p>A list of <strong>JS code snipplets</strong> recommended to have in your coding arsenal; among them are <em>numeric sorting</em> and <em>working with cookies</em>.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/22_serve_javascript_fast.jpg" alt="Serving JavaScript Fast" width="60" height="60" /><a title="Serving JavaScript Fast" href="http://www.thinkvitamin.com/features/webapps/serving-javascript-fast">Serving JavaScript Fast</a></h4>
<p>Optimal tips for serving/loading your JavaScript libraries quickly.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/23_great_browser_showdown.jpg" alt="The Great Browser JavaScript Showdown" width="60" height="60" /><a href="http://www.codinghorror.com/blog/archives/001023.html">The Great Browser JavaScript Showdown</a></h4>
<p>A comparison of the <strong>top 4 web browsers </strong>(IE7, Firefox 2, Safari 3.0.4, and Opera 9.5) when it comes to handling JS.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/24_somewhat_advanced_javascript.jpg" alt="Quick guide to somewhat advanced JavaScript" width="60" height="60" /><a title="Quick guide to somewhat advanced JavaScript" href="http://www.sergiopereira.com/articles/advjs.html">Quick guide to somewhat advanced JavaScript</a></h4>
<p>A guide on Object-Oriented JavaScript coding.</p>
<h3 class="clear">Blogs &amp; News</h3>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/25_john_reisig.jpg" alt="John Resig - Blog" width="60" height="60" /><a title="John Resig - Blog" href="http://ejohn.org/blog/">John Resig &#8211; Blog</a></h4>
<p>John Resig is the creator/lead developer of jQuery and author of &#8220;<a title="Pro Javascript Techniques by John Resig" href="http://jspro.org/">Pro Javascript Techniques</a>&#8220;.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/26_ajaxian.jpg" alt="Ajaxian - JavaScript" width="60" height="60" /><a title="Ajaxian &gt;&gt; JavaScript" href="http://ajaxian.com/by/topic/javascript/">Ajaxian &#8211; JavaScript</a></h4>
<p><em>Ajaxian</em> is a news site about Ajax and Rich Internet Applications. Over <strong>850 stories</strong> have been tagged under the JavaScript topic.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/27_snookca.jpg" alt="Snook.CA - JavaScript Category" width="60" height="60" /><a title="Snook.CA (JavaScript Category)" href="http://www.snook.ca/archives/javascript/">Snook.CA &#8211; JavaScript Category</a></h4>
<p><em>Snook.CA</em> is <a title="About Johnathan Snook" href="http://www.snook.ca/jonathan/about/">Johnathan Snook</a>’s site on the topic of web development. He writes about JavaScript, as well as other web dev topics.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/28_ajaxlines.jpg" alt="Ajaxlines" width="60" height="60" /><a title="Ajaxlines - Asynchronous JavaScript, XML and XMLHTTP" href="http://www.ajaxlines.com/">Ajaxlines</a></h4>
<p><em>Ajaxlines</em> provides news and resources on the topic of Ajax. It currently has <strong>140+ posts</strong> tagged under JavaScript.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/29_quirksblog.jpg" alt="QuirksBlog" width="60" height="60" /><a title="QuirksBlog" href="http://www.quirksmode.org/blog/index.html">QuirksBlog</a></h4>
<p>QuirksBlog is part of JavaScript guru/web developer <a title="About Peter-Paul Koch" href="http://www.quirksmode.org/about/intro.html">Peter-Paul Koch</a>’s <a title="QuirksMode.org home" href="http://www.quirksmode.org/">QuirksMode.org</a>. His book <a title="ppk on JavaScript review on 456 Berea St" href="http://www.456bereastreet.com/archive/200611/ppk_on_javascript_book_review/">ppk on JavaScript</a> is an excellent book to own.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/30_ajaxonomy.jpg" alt="Ajaxonomy - Blogs" width="60" height="60" /><a title="Ajaxonomy - Blogs" href="http://www.ajaxonomy.com/blog">Ajaxonomy &#8211; Blogs</a></h4>
<p><em>Ajaxonomy </em>is a wonderful resource for JavaScript’ers interested in Ajax and other web technologies. It has many<a title="Posts on Ajaxonomy Blogs tagged with JavaScript" href="http://www.ajaxonomy.com/tag/JavaScript"> posts tagged with JavaScript</a>.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/31_ajax_beastiary.jpg" alt="Ajax Bestiary - A JavaScript Field Guide" width="60" height="60" /><a title="Ajax Bestiary - A JavaScript Field Guide" href="http://www.ajaxbestiary.com/">Ajax Bestiary &#8211; A JavaScript Field Guide</a></h4>
<p><em>Ajax Bestiary</em> is a regularly updated blog on JavaScript.</p>
<p> </p>
<h3>Awesome Frameworks/Libraries</h3>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/32_prototypejs.jpg" alt="Prototype JavaScript framework" width="60" height="60" /><a title="Prototype JavaScript framework" href="http://www.prototypejs.org/">Prototype JavaScript framework</a></h4>
<p><em>Prototype</em> was one of the first popular frameworks. Several libraries and frameworks are based on Prototype (or still require it).</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/33_jquery.jpg" alt="jQuery" width="60" height="60" /><a title="jQuery" href="http://jquery.com/">jQuery</a></h4>
<p><em>jQuery</em> is lightweight, <strong>elegant</strong>, and touted as one of the <strong>easiest</strong> JS frameworks to use.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/34_mootools.jpg" alt="mootools" width="60" height="60" /><a title="mootools" href="http://mootools.net/">mootools</a></h4>
<p>My personal favorite.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/35_yui.jpg" alt="The Yahoo! User Interface Library (YUI)" width="60" height="60" /><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">The Yahoo! User Interface Library (YUI)</a></h4>
<p>A big and extremely robust JavaScript toolkit by Yahoo!.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/36_javascriptmvc.jpg" alt="JavaScriptMVC" width="60" height="60" /><a title="JavaScriptMVC" href="http://javascriptmvc.com/">JavaScriptMVC</a></h4>
<p><em>JavaScriptMVC</em> is a relatively <em>new</em> but <em>very</em> promising framework that offers a lot of unique components and features not found in other frameworks.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/37_scriptaculous.jpg" alt="script.aculo.us" width="60" height="60" /><a title="script.aculo.us" href="http://script.aculo.us/">script.aculo.us</a></h4>
<p>A robust effects library that’s been used by top websites such as Digg, Feedburner, and Apple; requires the inclusion of Prototype.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/38_extjs.jpg" alt="Ext JS" width="60" height="60" /><a title="Ext JS - JavaScript Library" href="http://extjs.com/">Ext JS</a></h4>
<p>Another solid framework; it does have a restrictive license for commercial purposes. Check out the <a title="Web Desktop demo" href="http://extjs.com/deploy/dev/examples/desktop/desktop.html">Web Desktop demo</a>.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/39_mochiads.jpg" alt="MochiKit" width="60" height="60" /><a title="MochiKit - A lightweight Javascript library" href="http://mochikit.com/">MochiKit</a></h4>
<p><em>MochiKit</em> is a robust library that offers a lot of utility functions and effects classes.</p>
<h4 class="clear"><img class="floatLeft" src="http://sixrevisions.com/images/46_excellent_resources_javascript_coders/40_dojo.jpg" alt="Dojo" width="60" height="60" /><a title="Dojo" href="http://dojotoolkit.org/">Dojo</a></h4>
<p>Dojo is another framework to consider. visit the <a title="Spotlight on Dojo" href="http://dojotoolkit.org/spotlight">Spotlight section</a> on the website to see real companies using <em>Dojo</em>.</p>
<h3 class="clear">Additional Resources</h3>
<p><em><strong>Author’s note &#8211; April 16, 2008.</strong></em> After the publication of this article, I recieved several recommendations from readers about additional resources that didn’t make the list. I’d like to add <strong>even more excellent JavaScript resources</strong> worth taking a look at. I’ll add more as suggestions come along.</p>
<ul>
<li><a title="Learning jQuery - Getting to know the library of choice for unobtrusive JavaScript" href="http://www.learningjquery.com/"><strong>Learning jQuery</strong></a> &#8211; a multi-author weblog dedicated to sharing information about jQuery. It’s geared at all levels of JS coders wanting to learn about jQuery.</li>
<li><a title="d’bug  » Mastering JavaScript — concept and resource guide" href="http://blog.reindel.com/2007/10/16/mastering-javascript-concept-and-resource-guide/"><strong>Mastering JavaScript — concept and resource guide</strong></a> &#8211; A great list of resources pertaining to grokking JS.</li>
</ul>
<p class="clear"><em><strong>Got any other resources you’d like to share with us? Make sure to talk about it in the comments section!</strong></em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mstindia.com/resources/javascript/40-excellent-resources-for-javascript-coders/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript Useful scripts</title>
		<link>http://www.mstindia.com/resources/javascript/javascript-useful-scripts/</link>
		<comments>http://www.mstindia.com/resources/javascript/javascript-useful-scripts/#comments</comments>
		<pubDate>Fri, 03 Oct 2008 10:29:30 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.mstindia.com/?p=89</guid>
		<description><![CDATA[Image Zoom and Popup







Lightbox
You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.
jQuery lightBox Plugin
This is exactly the same as Lightbox JS, but [...]]]></description>
			<content:encoded><![CDATA[<h3>Image Zoom and Popup</h3>
<p class="image right"><a href="http://soobox.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/soobox.jpg" alt="sample site" /></a><br />
<a href="http://www.grafikas.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/grafikas2.jpg" alt="sample site" /></a><br />
<a href="http://www.tumblize.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/tumblize.jpg" alt="sample site" /></a><br />
<a href="http://poolga.com/en"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/poolga.jpg" alt="sample site" /></a><br />
<a href="http://www.stoodeo.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/stoodeo2.jpg" alt="sample site" /></a><br />
<a href="http://www.gap.com/browse/product.do?cid=11540&amp;pid=569988"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/gap.jpg" alt="sample site" /></a><br />
<a href="http://www.betseyjohnson.com/Charmeuse_Ruffle_Dress/pd/c/0/np/0/p/5626.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/betseyjohnson.jpg" alt="sample site" /></a></p>
<h4><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox</a></h4>
<p>You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The <a href="http://www.huddletogether.com/projects/lightbox/">original Lightbox</a> was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.</p>
<h4><a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightBox Plugin</a></h4>
<p>This is exactly the same as Lightbox JS, but written on top of jQuery library.</p>
<h4><a href="http://jquery.com/demo/thickbox/">Thickbox</a></h4>
<p>Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.</p>
<p>Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.</p>
<h4><a href="http://vikjavev.no/highslide/">Highslide JS</a></h4>
<p>Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.</p>
<h4><a href="http://fancy.klade.lv/">FancyBox</a></h4>
<p>FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).</p>
<h4><a href="http://www.mind-projects.it/blog/jqzoom_v10">jQZoom</a></h4>
<p>jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the <a href="http://www.gap.com/browse/product.do?cid=11540&amp;pid=569988">Gap site</a> for a sample).</p>
<h3>Gallery and Slideshow</h3>
<p class="image right"><a href="http://muse.drewwilson.com/showcase/61/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/muse.jpg" alt="sample site" /></a><br />
<a href="http://devkick.com/lab/galleria/demo_01.htm"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/devkick.jpg" alt="sample site" /></a><br />
<a href="http://www.estudiomopa.com/site/?p=188&amp;lang=en#ancorimage"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/estudiomopa.jpg" alt="sample site" /></a><br />
<a href="http://www.apple.com/mac/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/apple-mac.jpg" alt="sample site" /></a></p>
<h4><a href="http://www.electricprism.com/aeron/slideshow/">Slideshow 2! for Mootools</a></h4>
<p>Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.</p>
<h4><a href="http://smoothgallery.jondesign.net/showcase/timed-gallery/">SmoothGallery</a></h4>
<p>Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.</p>
<h4><a href="http://devkick.com/lab/galleria/">jQuery Galleria</a></h4>
<p>Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.</p>
<h4><a href="http://www.efectorelativo.net/laboratory/noobSlide/">Noobslide</a></h4>
<p>NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the <a href="http://www.efectorelativo.net/laboratory/noobSlide/">website</a> to view the demos.</p>
<h4><a href="http://jqueryfordesigners.com/slider-gallery/">Product Slider</a> <small><span style="font-size: x-small;">(</span><a href="http://jqueryfordesigners.com/demo/slider-gallery.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the <a href="http://www.apple.com/mac/">Apple &#8211; Mac website</a>.</p>
<h3>Carousel</h3>
<p class="image right"><a href="http://www.vivaviralvideo.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/vivaviralvideo.jpg" alt="sample site" /></a><br />
<a href="http://metalabdesign.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/metalabdesign.jpg" alt="sample site" /></a><br />
<a href="http://www.playintraffik.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/playintraffik.jpg" alt="sample site" /></a><br />
<a href="http://ketchup-2007.nyxen.net/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/ketchup2.jpg" alt="sample site" /></a></p>
<h4><a href="http://sorgalla.com/jcarousel/">jCarousel</a></h4>
<p>jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).</p>
<h4><a href="http://billwscott.com/carousel/">YUI Carousel Component</a></h4>
<p>The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).</p>
<h4><a href="http://www.dynamicdrive.com/dynamicindex14/carousel.htm">DynamicDrive &#8211; Carousel Slideshow</a></h4>
<p>Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.</p>
<h4><a href="http://zendold.lojcomm.com.br/icarousel/">iCarousel &#8211; MooTools</a></h4>
<p>iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.</p>
<h3>Panel Slider</h3>
<p class="image right"><a href="http://www.panic.com/coda"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/coda.jpg" alt="sample site" /></a><br />
<a href="http://www.phorsite.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/phorsite.jpg" alt="sample site" /></a></p>
<h4><a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/">Coda Slider Plugin</a></h4>
<p>Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the <a href="http://www.panic.com/coda/">Coda</a> website.</p>
<h4><a href="http://jqueryfordesigners.com/coda-slider-effect/">jQuery Coda Slide Tutorial</a> <small><span style="font-size: x-small;">(</span><a href="http://jqueryfordesigners.com/demo/coda-slider.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>This is a tutorial from <a href="http://jqueryfordesigners.com/coda-slider-effect/">jQuery For Designers</a> to show you how to create the Coda panel slider.</p>
<h4><a href="http://creativepony.com/journal/scripts/sliding-tabs/">Sliding Tabs</a> <small><span style="font-size: x-small;">(</span><a href="http://creativepony.com/demos/sliding-tabs/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.</p>
<h3>Tabs</h3>
<p class="image right"><a href="http://www.komodomedia.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/komodomedia.jpg" alt="sample site" /></a><br />
<a href="http://www.ijsfontein.nl/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/ijsfontein.jpg" alt="sample site" /></a><br />
<a href="http://www.headscape.co.uk/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/headscape.jpg" alt="sample site" /></a></p>
<h4><a href="http://www.stilbuero.de/jquery/tabs_3/">jQuery UI Tabs</a></h4>
<p>jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).</p>
<h4><a href="http://jqueryfordesigners.com/jquery-tabs/">jQuery Tabs Tutorial</a> <small><span style="font-size: x-small;">(</span><a href="http://jqueryfordesigners.com/demo/tabs.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>Another awesome tutorial from <a href="http://jqueryfordesigners.com/demo/tabs.html">jQueryForDesigners.com</a> to show you how to create a basic tab navigation with jQuery.</p>
<h4><a href="http://www.silverscripting.com/mootabs/">MooTabs</a></h4>
<p>MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.</p>
<h4><a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Sliding Tabs Tutorial</a> <small><span style="font-size: x-small;">(</span><a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A tutorial from <a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Nettuts.com</a> to show you how to create a sliding tab with jQuery.</p>
<h3>Scroll to Anchor</h3>
<p class="image right"><a href="http://lukelarsen.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/lukelarsen2.jpg" alt="sample site" /></a><br />
<a href="http://www.campingilfrutteto.it/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/campingilfrutteto2.jpg" alt="sample site" /></a><br />
<a href="http://www.volll.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/volll2.jpg" alt="sample site" /></a></p>
<h4><a href="http://plugins.jquery.com/project/scrollto">jQuery ScrollTo</a> <small><span style="font-size: x-small;">(</span><a href="http://demos.flesler.com/jquery/scrollTo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.</p>
<h4><a href="http://davidwalsh.name/smoothscroll-mootools-12">SmoothScroll</a> <small><span style="font-size: x-small;">(</span><a href="http://davidwalsh.name/dw-content/moo1.2-smoothscroll.php"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A simple MooTools script that creates smooth scrolling to anchors on a web page.</p>
<h4><a href="http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12">Animated Scrolling with jQuery</a></h4>
<p><a href="http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12">Learning jQuery</a> shows you how to create an animated &#8220;scroll to anchor&#8221; with just a few lines of code.</p>
<h3>Tooltips</h3>
<p class="image right"><a href="http://bestwebgallery.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/bestwebgallery.jpg" alt="sample site" /></a><br />
<a href="http://www.shiftspace.org/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/shiftspace.jpg" alt="sample site" /></a></p>
<h4><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip">jTips</a> <small><span style="font-size: x-small;">(</span><a href="http://www.codylindley.com/blogstuff/js/jtip/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.</p>
<h4><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/">jQuery Tooltip Plugin</a> <small><span style="font-size: x-small;">(</span><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>Another nice Tooltip plugin.</p>
<h4><a href="http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery">Tooltip and Image Preview</a> <small><span style="font-size: x-small;">(</span><a href="http://cssglobe.com/lab/tooltip/02/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A very simple jQuery script that displays tooltip and image preview (I use it on <a href="http://bestwebgallery.com/">Best Web Gallery</a>).</p>
<h3>Accordion</h3>
<p class="image right"><a href="http://www.juliendassonval.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/juliendassonval2.jpg" alt="sample site" /></a><br />
<a href="http://www.mariusroosendaal.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/mariusroosendaal2.jpg" alt="sample site" /></a><br />
<a href="http://www.apple.com/downloads/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/apple-sidebar.jpg" alt="sample site" /></a></p>
<h4><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/">jQuery Accordion</a> <small><span style="font-size: x-small;">(</span><a href="http://jquery.bassistance.de/accordion/demo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.</p>
<h4><a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Apple.com Sidebar Accordion</a> <small><span style="font-size: x-small;">(</span><a href="http://jqueryfordesigners.com/demo/plugin-slide-demo.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p><a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">jQueryForDesigner.com</a> shows you how to create the accordion slider as seen on the <a href="http://www.apple.com/downloads/">Apple website</a>.</p>
<h4><a href="http://demos.mootools.net/Accordion">MooTools Accordion</a></h4>
<p>The Accordion gives you a fancy way to show only the content you really need.</p>
<h4><a href="http://www.phatfusion.net/imagemenu/">MooTools Image Menu</a></h4>
<p>Image Menu is a MooTools plugin that creates the horizontal accordion image menu.</p>
<h3>Flash and Image Text Replacement</h3>
<p class="image right"><a href="http://www.hotmeteor.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/hotmeteor2.jpg" alt="sample site" /></a><br />
<a href="http://blog.epicerastudio.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/epicerastudio.jpg" alt="sample site" /></a><br />
<a href="http://darkmotion.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/darkmotion.jpg" alt="sample site" /></a></p>
<h4><a href="http://novemberborn.net/sifr3">sIFR 3</a> <small><span style="font-size: x-small;">(</span><a href="http://dev.novemberborn.net/sifr3/beta2/demo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.</p>
<h4><a href="http://jquery.thewikies.com/sifr/">jQuery sIFR</a> <small><span style="font-size: x-small;">(</span><a href="http://jquery.thewikies.com/sifr/#examples"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A jQuery plugin that does the sIFR for you.</p>
<h4><a href="http://facelift.mawhorter.net/examples/">FLIR</a> <small><span style="font-size: x-small;">(</span><a href="http://facelift.mawhorter.net/preview/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.</p>
<h3>CSS Stylesheet Switcher</h3>
<p class="image right"><a href="http://www.mariusroosendaal.com/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/mariusroosendaal-theme.jpg" alt="sample site" /></a><br />
<a href="http://www.wishtree.org/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/wishtree.jpg" alt="sample site" /></a></p>
<h4><a href="http://www.alistapart.com/stories/alternate/">A List Apart &#8211; Alternative Style</a></h4>
<p>The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).</p>
<h4><a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery">Switch Stylesheets with jQuery</a><small><span style="font-size: x-small;"> (</span><a href="http://www.kelvinluck.com/assets/jquery/styleswitch/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>Stylesheet switcher with jQuery.</p>
<h4><a href="http://www.mensching.info/program/mootools-styleswitcher-en.html">MooTools Styleswitcher </a><small><span style="font-size: x-small;">(</span><a href="http://www.mensching.info/program/demo-styleswitcher1/styleswitcher-demo-en.html"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>CSS stylesheet switcher with MooTools.</p>
<h3>Form Styling</h3>
<p class="image right"><a href="http://lipidity.com/fancy-form/demo/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/fancy-form.jpg" alt="sample site" /></a><br />
<a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/prettycheckboxes.jpg" alt="sample site" /></a><br />
<a href="http://www.frequency-decoder.com/demo/slider-v2/colourPicker/"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/slider-control.jpg" alt="sample site" /></a></p>
<h4><a href="http://lipidity.com/fancy-form/">FancyForm &#8211; MooTools</a> <small><span style="font-size: x-small;">(</span><a href="http://lipidity.com/fancy-form/demo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.</p>
<h4><a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/">PrettyCheckboxes &#8211; jQuery</a></h4>
<p>Same as FancyForm, but using jQuery library.</p>
<h4><a href="http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/">jQuery Selectbox Plugin</a> <small><span style="font-size: x-small;">(</span><a href="http://www.brainfault.com/demo/selectbox/0.5/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A simple plugin that allows you to replace the form select list with custom styles.</p>
<h4><a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/">Custom Checkboxes, Radio Buttons, Select Lists</a></h4>
<p>Give your form a complete makeover with this Javascript and CSS.</p>
<h4><a href="http://mucur.name/posts/jquery-example">jQuery Form Input Example Plugin</a> <small><span style="font-size: x-small;">(</span><a href="http://mucur.name/system/jquery_example/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A jQuery plugin that gives user hints on what to enter in the input fields.</p>
<h4><a href="http://www.frequency-decoder.com/2008/08/01/unobtrusive-slider-control-v2">Unobtrusive Slider Control V2</a><a href="http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/"></a> <small><span style="font-size: x-small;">(</span><a href="http://www.frequency-decoder.com/demo/slider-v2/colourPicker/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>This script lets you create custom slider controls associated with input fields.</p>
<p><em>More Form styling links at <a href="http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html">Noupe.com/css/form-elements…</a></em></p>
<h3>Form Validation</h3>
<p class="image right"><a href="http://www.tastebook.com/collections/0?show_new_tb=true&amp;virtual=true"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/tastebook.jpg" alt="sample site" /></a><br />
<a href="http://www.tumblize.com/#form"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/08/tumblize-form.jpg" alt="sample site" /></a></p>
<h4><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validate</a><small><span style="font-size: x-small;"> (</span><a href="http://jquery.bassistance.de/validate/demo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>A very plugin that allows you to build client-side validation and Ajax form.</p>
<h4><a href="http://www.phatfusion.net/validate/">MooTools Validate</a></h4>
<p>A MooTools form validation plugin (similar to jQuery Validate).</p>
<h4><a href="http://www.jsvalidate.com/">JSValidate</a><small><span style="font-size: x-small;"> (</span><a href="http://www.jsvalidate.com/demo/"><span style="font-size: x-small;">demo</span></a><span style="font-size: x-small;">)</span></small></h4>
<p>JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mstindia.com/resources/javascript/javascript-useful-scripts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FCKeditor validation javascript</title>
		<link>http://www.mstindia.com/resources/javascript/fckeditor-validation-javascript/</link>
		<comments>http://www.mstindia.com/resources/javascript/fckeditor-validation-javascript/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 22:17:11 +0000</pubDate>
		<dc:creator>kumar</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://mstindia.com/blog/?p=52</guid>
		<description><![CDATA[you can get this like
 
function FCKeditor_OnComplete(editorInstance)
{
alert( editorInstance.Name );
}
after that you will be able to access the editors contents using the javascript API.
var oEditor = FCKeditorAPI.GetInstance(instancename);
var contents = oEditor.GetXHTML(true);
alert(contents);
]]></description>
			<content:encoded><![CDATA[<p>you can get this like</p>
<p> </p>
<p>function FCKeditor_OnComplete(editorInstance)<br />
{<br />
alert( editorInstance.Name );<br />
}</p>
<p>after that you will be able to access the editors contents using the javascript API.</p>
<p>var oEditor = FCKeditorAPI.GetInstance(instancename);<br />
var contents = oEditor.GetXHTML(true);<br />
alert(contents);</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mstindia.com/resources/javascript/fckeditor-validation-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>nice javascript framework</title>
		<link>http://www.mstindia.com/resources/javascript/nice-javascript-framework/</link>
		<comments>http://www.mstindia.com/resources/javascript/nice-javascript-framework/#comments</comments>
		<pubDate>Sun, 20 Jul 2008 10:11:27 +0000</pubDate>
		<dc:creator>kumar</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://mstindia.com/blog/?p=50</guid>
		<description><![CDATA[Shadowbox.js
http://mjijackson.com/shadowbox/
]]></description>
			<content:encoded><![CDATA[<h1><a name="top">Shadowbox.js</a></h1>
<p><a href="http://mjijackson.com/shadowbox/">http://mjijackson.com/shadowbox/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mstindia.com/resources/javascript/nice-javascript-framework/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Beautiful Javascript and Flash Galleries</title>
		<link>http://www.mstindia.com/resources/javascript/beautiful-javascript-and-flash-galleries/</link>
		<comments>http://www.mstindia.com/resources/javascript/beautiful-javascript-and-flash-galleries/#comments</comments>
		<pubDate>Fri, 18 Jul 2008 13:08:15 +0000</pubDate>
		<dc:creator>kumar</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://mstindia.com/blog/?p=49</guid>
		<description><![CDATA[This is Vivalogo&#8217;s list of the most beautiful free Javascript and Flash gallery software.
Note: listed in no particular order.
JAVASCRIPT
GalleriaDemo

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose [...]]]></description>
			<content:encoded><![CDATA[<p>This is Vivalogo&#8217;s list of the most beautiful free Javascript and Flash gallery software.<br />
<em>Note: listed in no particular order.</em></p>
<h3>JAVASCRIPT</h3>
<h4><a href="http://www.monc.se/galleria/">Galleria</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.monc.se/galleria/demo/demo_01.htm">Demo</a></span></h4>
<p><a href="http://www.monc.se/galleria/"><img src="http://mstindia.com/blog/wp-admin/images/galleria2.jpg" alt="" /></a></p>
<p>Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.</p>
<h4><a href="http://stickmanlabs.com/lightwindow/">LightWindow</a></h4>
<p><a href="http://stickmanlabs.com/lightwindow/"><img src="http://mstindia.com/blog/wp-admin/images/lw2.jpg" alt="" /></a></p>
<h4><a href="http://www.e2interactive.com/e2_photo_gallery/">(E)2 Photo Gallery</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.e2interactive.com/e2_photo_gallery/demo.php">Demo</a></span></h4>
<p><a href="http://www.e2interactive.com/e2_photo_gallery/"><img src="http://mstindia.com/blog/wp-admin/images/e2.jpg" alt="" /></a></p>
<h4><a href="http://labs.adobe.com/technologies/spry/demos/gallery/index.html">Spry</a></h4>
<p><a href="http://labs.adobe.com/technologies/spry/demos/gallery/index.html"><img src="http://mstindia.com/blog/wp-admin/images/spry.jpg" alt="" /></a></p>
<h4><a href="http://codeboje.de/imago/">Imago</a> <span style="font-weight: normal; margin-left: 20px;"><a href="http://codeboje.de/imago/sample_gallery_with_flickr/">Demo</a></span></h4>
<p><a href="http://codeboje.de/imago/"><img src="http://mstindia.com/blog/wp-admin/images/imago.jpg" alt="" /></a></p>
<h4><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">jQuery slideViewer</a></h4>
<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html"><img src="http://mstindia.com/blog/wp-admin/images/sv.jpg" alt="" /></a></p>
<h4><a href="http://minishowcase.frwrd.net/">minishowcase</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://minishowcase.frwrd.net/demo/">Demo</a></span></h4>
<p><a href="http://minishowcase.frwrd.net/"><img src="http://mstindia.com/blog/wp-admin/images/ms.jpg" alt="" /></a></p>
<h4><a href="http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/">AJAX Image Gallery powered by Slideflow</a></h4>
<p><a href="http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/"><img src="http://mstindia.com/blog/wp-admin/images/sf.jpg" alt="" /></a></p>
<h4><a href="http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://monc.se/kitchen/stew/gallery/">Demo</a></span></h4>
<p><a href="http://www.e2interactive.com/e2_photo_gallery/"><img src="http://mstindia.com/blog/wp-admin/images/lv2.jpg" alt="" /></a></p>
<h4><a href="http://livepipe.net/projects/photo_folder/">Live Pipe PhotoFolder</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://livepipe.net/ryan/photos/">Demo</a></span></h4>
<p><a href="http://livepipe.net/projects/photo_folder/"><img src="http://mstindia.com/blog/wp-admin/images/pf.jpg" alt="" /></a></p>
<h4><a href="http://www.robertnyman.com/jas/">JaS</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.robertnyman.com/jas/Vanilla/index.htm">Demo</a></span></h4>
<p>JaS is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they&#8217;re looking for. You can use it any way you like in your own web site, and adapt it to your specific needs.</p>
<p><a href="http://www.robertnyman.com/jas/"><img src="http://mstindia.com/blog/wp-admin/images/jas.jpg" alt="" /></a></p>
<h4><a href="http://www.outcut.de/MooFlow/">MooFlow</a></h4>
<p>MooFlow is a Javascript based Gallery looks like Apple&#8217;s iTunes or Finders CoverFlow.</p>
<p><a href="http://www.outcut.de/MooFlow/"><img src="http://mstindia.com/blog/wp-admin/images/mf.jpg" alt="" /></a></p>
<h4><a href="http://cross-browser.com/toys/img_gallery_2.php">xImgGallery</a></h4>
<p><a href="http://cross-browser.com/toys/img_gallery_2.php"><img src="http://mstindia.com/blog/wp-admin/images/ximg.jpg" alt="" /></a></p>
<h4><a href="http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/">mooCicle</a> <span style="font-weight: normal; margin-left: 20px;"><a href="http://www.thedeveloperinside.com/sandbox/mooCicle/">Demo</a></span></h4>
<p><a href="http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/"><img src="http://mstindia.com/blog/wp-admin/images/mc2.jpg" alt="" /></a></p>
<h4><a href="http://www.nickstakenburg.com/projects/lightview/">Lightview</a></h4>
<p>Lightview was built to change the way you overlay content on a website.</p>
<h4><a href="http://diverged.org/thumbnail/klimas/">Live Thumbnail</a></h4>
<h4><a href="http://vikjavev.no/highslide/">Highslide</a></h4>
<h4><a href="http://www.couloir.org/js_slideshow/">Couloir.org: Resizing, Fading Slideshow</a></h4>
<h4><a href="http://smoothgallery.jondesign.net/showcase/gallery/">JonDesign&#8217;s SmoothGallery</a></h4>
<h3>FLASH</h3>
<h4><a href="http://www.flashgallery.org/">Flash Gallery</a> <span style="font-weight: normal; margin-left: 20px;"><a href="http://www.flashgallery.org/demo.html">Demo</a></span></h4>
<p><a href="http://www.flashgallery.org/"><img src="http://mstindia.com/blog/wp-admin/images/fg.jpg" alt="" /></a></p>
<p>Flash Gallery is a FREE, simple photo gallery built in Macromedia Flash 2004, that uses XML files to store the information about which images to display. The gallery is easy to configure and update since you need to change only the XML file.</p>
<h4><a href="http://www.dezinerfolio.com/2007/06/07/dfgallery/">dfGallery</a></h4>
<p><a href="http://www.dezinerfolio.com/2007/06/07/dfgallery/"><img src="http://mstindia.com/blog/wp-admin/images/df2.jpg" alt="" /></a></p>
<h4><a href="http://airtightinteractive.com/simpleviewer/">SimpleViewer</a></h4>
<p><a href="http://airtightinteractive.com/simpleviewer/"><img src="http://mstindia.com/blog/wp-admin/images/sv2.jpg" alt="" /></a></p>
<p>SimpleViewer is a free, customizable Flash image viewing application. There`s also a nice <a href="http://www.redsplash.de/projects/simplevieweradmin/">administration panel</a> available.</p>
<h4><a href="http://www.paulvanroekel.nl/picasa/photostack/index.asp">Flash Photo Stack</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.paulvanroekel.nl/picasa/photostackdemo/index.html">Demo</a></span></h4>
<p><a href="http://www.paulvanroekel.nl/picasa/photostack/index.asp"><img src="http://mstindia.com/blog/wp-admin/images/ps2.jpg" alt="" /></a></p>
<p>Flash Photo Stack is a simple Flash template that enables you to click through a stack of your favourite photographs.</p>
<h4><a href="http://www.airtightinteractive.com/projects/autoviewer/">AutoViewer</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.airtightinteractive.com/projects/autoviewer/app/">Demo</a></span></h4>
<p><a href="http://www.airtightinteractive.com/projects/autoviewer/"><img src="http://mstindia.com/blog/wp-admin/images/av.jpg" alt="" /></a></p>
<p>AutoViewer is a free, customizable Flash image viewer. AutoViewer is designed to display a linear sequence of images and captions.</p>
<h4><a href="http://www.paulvanroekel.nl/picasa/flashpageflip/">FlashPageFlip</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.paulvanroekel.nl/picasa/flashpageflipdemo/landscape/index.html">Demo</a></span></h4>
<p><a href="http://www.paulvanroekel.nl/picasa/flashpageflip/"><img src="http://mstindia.com/blog/wp-admin/images/pf2.jpg" alt="" /></a></p>
<h4><a href="http://www.flshow.net/">Flash Carousel Slideshow</a> <span style="font-weight: normal; margin-left: 20px;"><a href="http://www.flshow.net/carousel/examples/">Demo</a></span></h4>
<p><a href="http://www.flshow.net/"><img src="http://mstindia.com/blog/wp-admin/images/fls.jpg" alt="" /></a></p>
<h4><a href="http://flash-gallery.com/">Art Flash Gallery</a></h4>
<p>Art Flash Gallery is based on Adobe Flash (cs3) technology. It will help you easily post any images on your site in a matter of minutes. The gallery will organically blend with any design thanks to multiple appearance settings.</p>
<h4><a href="http://www.flashimagegallery.com/">Flash Image Gallery &#8211; FIG</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.flashimagegallery.com/demo/gallery/">Demo</a></span></h4>
<p>The FIG is a gallery application that can be used by anyone to display multiple galleries of photos, artwork, or other pictures with descriptions. It requires no server-side language and will run on any web host. It is idealy suited for artists with online galleries, but can be used by anyone.</p>
<h4><a href="http://www.airtightinteractive.com/projects/tiltviewer/">TiltViewer</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.airtightinteractive.com/projects/tiltviewer/app/">Demo</a></span></h4>
<p>TiltViewer is a free, customizable 3D Flash image viewing application.</p>
<h4><a href="http://www.search-this.com/tools/">Photo Viewer</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.search-this.com/tools/photo-viewer/">Demo</a></span></h4>
<p><a href="http://www.search-this.com/tools/"><img src="http://mstindia.com/blog/wp-admin/images/pv2.jpg" alt="" /></a></p>
<p>The Photo Viewer uses both Flash and XML. All data is stored within an XML file making it easy to make modifications and update.</p>
<h4><a href="http://www.flashgallerygenerator.com/main.aspx">FlashGalleryGenerator</a><span style="font-weight: normal; margin-left: 20px;"><a href="http://www.flashgallerygenerator.com/main.aspx?p=demo">Demo</a></span></h4>
<p><a href="http://www.flashgallerygenerator.com/main.aspx"><img src="http://mstindia.com/blog/wp-admin/images/fgg.jpg" alt="" /></a></p>
<h4><a href="http://www.agilegallery.com/flash-photo-gallery.html">Agile Gallery</a></h4>
<p>The Flash version of AgileGallery is a free Flash photo gallery that rips through the XML output from Picasa and generates the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. It also includes a slideshow feature.</p>
<h4><a href="http://www.ideaography.net/fullscreen-flash-gallery-class/">Fullscreen Gallery Flash Class</a> <span style="font-weight: normal; margin-left: 20px;"><a href="http://www.ideaography.net/fGallery/">Demo</a></span></h4>
<p>This is a simple, one page, full screen gallery class that loads thumbnails and images via XML.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mstindia.com/resources/javascript/beautiful-javascript-and-flash-galleries/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
