tag:blogger.com,1999:blog-30899434492449369012024-03-18T04:47:53.898-05:00Abhinay's Web-Dev BlogVarious tools, tips, tricks and hacks for web developers encompassing HTML, CSS, jQuery, JavaScript, PHP, ASP.NET etc.Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-3089943449244936901.post-13224143646226402212014-08-01T11:17:00.000-05:002014-08-01T11:17:14.029-05:00Bootstrap Youtube Playlist Popup Player Plugin<div dir="ltr" style="text-align: left;" trbidi="on">
<p>
In continuation to my previous <a href="http://web3o.blogspot.com/2014/03/bootstrap-youtube-popup-player-plugin.html" target="_blank">Bootstrap YouTube Popup Player Plugin</a>, which was only good for playing a single video, I've created another version which can work with a play-list of YouTube videos. It uses Bootstrap's Modal Popup to embed the YouTube Player and does not need any extra CSS at all.
</p>
<p>
Use the link below to view a demo or read the documentation on how to include this on your page. You can download the latest version of this plugin’s library from Github page.
</p>
<p>
<span style="font-size: large;"><i class="icon-youtube"></i> Demo and Documentation: <a href="http://lab.abhinayrathore.com/bootstrap-youtube-playlist-popup/" target="_blank" title="Bootstrap Youtube Playlist Popup Player Plugin">http://lab.abhinayrathore.com/bootstrap-youtube-playlist-popup/</a></span>
</p>
<p>
<span style="font-size: large;"><i class="icon-github"></i> Github: <a href="https://github.com/abhinayrathore/Bootstrap-Youtube-Playlist-Popup-Player-Plugin" target="_blank" title="Bootstrap Youtube Playlist Popup Player Plugin">https://github.com/abhinayrathore/Bootstrap-Youtube-Playlist-Popup-Player-Plugin</a></span>
</p>
</div>
Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com41tag:blogger.com,1999:blog-3089943449244936901.post-23037606845041935772014-03-31T14:07:00.001-05:002014-03-31T14:07:22.224-05:00Website Performance Optimization Checklist<p>Building high performance websites is very important because it helps in increasing the conversion rate on your website, especially eCommerce websites. There are many <a href="http://www.globaldots.com/how-website-speed-affects-conversion-rates/" target="_blank">statistics</a> on the web which proves that high speed websites retain more users and hence more revenue. You can checkout this nice <a href="http://blog.kissmetrics.com/wp-content/uploads/2011/04/loading-time-lrg.jpg" target="_blank">info-graphic</a> for a quick comparison. Even if you are not able to score a perfect 100 (not even Google.com) on the <a href="http://developers.google.com/speed/pagespeed/insights/" target="_blank">Google PageSpeed Testing Tool</a>, at least try to stay above the 85% mark.</p> <p>There is no single-bullet solution to making your site performing at top speed because every application or website is different in terms of it’s user base, data and interactivity on a multitude of devices. There are a lot of automated tools coming up like Google’s <a href="https://developers.google.com/speed/pagespeed/module" target="_blank">PageSpeed Module</a> which will do most of the stuff for you or a plethora of automated build tools to perform optimizations at deploy time.</p> <p>I myself was learning a lot of performance optimization techniques for my small sites but there isn’t once place where you can find links and tips to all the tools required. So, I thought of creating an exhaustive checklist of front-end performance tips and tricks. I am not a Guru in this field but this is my earnest effort to help other people like me who wants to do more fine grained optimization apart from using the automated tools.</p> <p>Please visit this page and let me know if you know of any more ideas/tools/tricks which I might’ve missed:</p> <p><a title="http://lab.abhinayrathore.com/website-performance-optimization-checklist/" href="http://lab.abhinayrathore.com/website-performance-optimization-checklist/"><font size="4"><strong>http://lab.abhinayrathore.com/website-performance-optimization-checklist/</strong></font></a></p> <p><em>BTW, none of my websites will score 100% on </em><a href="http://developers.google.com/speed/pagespeed/insights/" target="_blank"><em>Google PageSpeed Testing Tool</em></a><em> because I simply don’t case that much optimization in favor of easy maintenance and ease of linking external libraries through CDN :)</em></p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com22tag:blogger.com,1999:blog-3089943449244936901.post-84746711306804905662014-03-11T16:57:00.001-05:002014-03-11T16:57:25.983-05:00jQuery Coding Standards and Best Practices<p>I’ve been using <a href="http://jquery.com/" target="_blank">jQuery</a> for the past couple of years and have seen a lot of bad practices and lack of standards knowledge between the developers. It’s always better to have standards defined around big teams so everyone’s on the same page. I took this effort to unify the coding standards and best practices around jQuery under one page so others can build upon it. Not all standards may apply to your application so feel free to use whatever works best for your application domain.</p> <p><a title="http://lab.abhinayrathore.com/jquery-standards/" href="http://lab.abhinayrathore.com/jquery-standards/" target="_blank"><font size="4">http://lab.abhinayrathore.com/jquery-standards/</font></a></p> <p>If you find any mistakes, have any suggestions or comments, please feel free to drop a word below this post and I’ll try to address it as soon as possible.</p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com35tag:blogger.com,1999:blog-3089943449244936901.post-15657112784331745932014-03-06T13:25:00.001-06:002014-03-06T13:29:36.203-06:00Bootstrap YouTube Popup Player Plugin<p>If you liked my previous <a href="http://web3o.blogspot.com/2011/05/jquery-youtube-popup-player-plugin.html" target="_blank">jQuery YouTube Popup Player Plugin</a>, I've created a <a href="http://getbootstrap.com" target="_blank">Bootstrap</a> version which is very similar in use but uses Bootstrap's Modal Popup to embed the YouTube Player. This plugin will need the complete Bootstrap library or just the Modal component to run this plugin.</p> <p>Use the link below to view a demo or read the documentation on how to include this on your page. You can download the latest version of this plugin’s library from Github.</p> <p><font size="4"><i class="icon-youtube"></i> Demo and Documentation: <a title="Bootstrap YouTube Popup Player Plugin" href="http://lab.abhinayrathore.com/bootstrap-youtube/" target="_blank">http://lab.abhinayrathore.com/bootstrap-youtube/</a></font></p> <p><font size="4"><i class="icon-github"></i> Github: <a title="Bootstrap YouTube Popup Player Plugin Github" href="https://github.com/abhinayrathore/Bootstrap-Youtube-Popup-Player-Plugin" target="_blank">https://github.com/abhinayrathore/Bootstrap-Youtube-Popup-Player-Plugin</a></font></p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com20tag:blogger.com,1999:blog-3089943449244936901.post-44925999998532107442014-03-06T10:55:00.001-06:002014-03-06T10:55:49.982-06:00jQuery Cheatsheet<p>The last and always up-to-date version of <a href="http://api.jquery.com/">jQuery API</a> Cheatsheet you’ll ever need. I use web-scraping to get the latest version of <a href="http://jquery.com/">jQuery</a> and then load the API information into a nicely printable cheat-sheet.</p> <p align="left"><a title="http://lab.abhinayrathore.com/jquery-cheatsheet/" href="http://lab.abhinayrathore.com/jquery-cheatsheet/"><strong><font size="4">http://lab.abhinayrathore.com/jquery-cheatsheet/</font></strong></a></p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com4tag:blogger.com,1999:blog-3089943449244936901.post-72360958358912977942012-05-08T19:00:00.000-05:002012-05-09T17:00:44.928-05:00jQuery and jQueryUI links for Google and Microsoft CDN's<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://jquery.com/" target="_blank"><img src="http://jquery.org/wp-content/uploads/2010/01/JQuery_logo_color_onwhite-300x74.png" style="width:225px; height:auto; float: right; margin:0 0 5px 5px;" /></a>
<a href="http://jqueryui.com/" target="_blank"><img src="http://jquery.org/wp-content/uploads/2010/01/JQuery_UI_logo_color_onwhite-300x72.png" style="width:225px; height:auto; float: right; clear:right; margin:0 0 5px 5px;" /></a>
<p style="text-align:justify;">
The <a href="https://developers.google.com/speed/libraries/devguide" target="_blank">Google Libraries API</a> and <a href="http://www.asp.net/ajaxlibrary/cdn.ashx" target="_blank">Microsoft Ajax</a> Content Delivery Network (CDN) hosts the popular <a href="http://jquery.com/" target="_blank">jQuery</a>
library and enables you to easily add them to your Web applications.
For example, you can start using jQuery which is hosted on this CDN
simply by adding a <script>
tag to your page that points to a CDN link. These CDN's are very efficient and reliable as they have more replications to reduce latency. Browsers limit the number of concurrent connections (file downloads) to a single domain so using CDN's triggers parallel downloads leading to faster page loading.
Here are some reasons to <a href="http://www.sitepoint.com/7-reasons-to-use-a-cdn/" target="_blank">USE</a> and <a href="http://www.sitepoint.com/7-reasons-not-to-use-a-cdn/" target="_blank">NOT USE</a> the CDN networks.</p>
<p style="text-align:justify;">
The versions of jQuery keeps getting updated every now and then and it's difficult to keep track of the latest releases. For that reason I've created a page that automatically pulls in the latest versions and links for the <a href="http://jquery.com/" target="_blank">jQuery</a>, <a href="http://jqueryui.com/" target="_blank">jQueryUI</a> and <a href="http://jqueryui.com/themeroller/" target="_blank">jQueryUI Theme</a> libraries for both Google and Microsoft CDN's. Keep it bookmarked to stay up-to-date on jQuery releases.</p>
<p style="text-align:center;">
<span style="font-size: large;"><a href="http://lab.abhinayrathore.com/jquery_cdn/" target="_blank">http://lab.abhinayrathore.com/jquery_cdn/</a></span>
</p>
</div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com48tag:blogger.com,1999:blog-3089943449244936901.post-2647370855246014362012-02-26T20:02:00.001-06:002012-02-26T20:02:18.435-06:00Weather Geocoder with Google Maps and Google Weather API<p align="justify"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 0px 5px 5px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top: 0px; border-right: 0px; padding-top: 0px" title="Google Weather Geocoder" border="0" alt="Google Weather Geocoder" align="right" src="http://lh5.ggpht.com/-oaHEsGLyb20/T0rkKDfyqAI/AAAAAAAAK8I/JKn3h1CUNnw/Google_Weather_Geocoder%25255B5%25255D.png?imgmax=800" width="286" height="383" />I got tired of searching locations on weather reporting websites to get instant updates, so I thought of building an instant weather reporting application which would give me information for any location I click on the map. Google Maps API provides an inbuilt <a href="http://code.google.com/apis/maps/documentation/javascript/geocoding.html#ReverseGeocoding" target="_blank">reverse-geocoding</a> service which can geocode an IP Address to a place on the map. To get weather information, I’ve used the so called secret Weather API from Google which they use on the <em><a href="http://www.google.com/ig" target="_blank">iGoogle</a></em> page widget. Google has not officially published this API but we would love if they do so. The good thing about Google’s weather API is that it is easy to use and includes the weather icons, but there is no way as of now to get the data in other formats apart from XML: <br /> <a title="http://www.google.com/ig/api?weather=Chicago" href="http://www.google.com/ig/api?weather=Chicago" target="_blank">http://www.google.com/ig/api?weather=Chicago</a>.</p> <p><strong><font size="3">Demo on my Labs page: </font></strong><a title="http://lab.abhinayrathore.com/geocode_weather/" href="http://lab.abhinayrathore.com/geocode_weather/" target="_blank"><strong><font size="3">http://lab.abhinayrathore.com/geocode_weather/</font></strong></a></p> <p align="justify">You can play around with the app on my labs page and view the source on the page to get the JavaScript code to build this tool on your own website. To convert the XML data from Google Weather API to JSONP, I’ve written a small PHP script you can download from the link below. </p> <p align="justify"><a href="http://lab.abhinayrathore.com/geocode_weather/getWeatherData.htm" target="_blank"><strong>Click here</strong></a> to get the PHP Script for converting Google Weather API’s XML data to JSON/JSONP format.</p> <p align="justify">You can style the Weather Information window according to your needs or you can use the one I’ve created: <a title="http://lab.abhinayrathore.com/geocode_weather/weather.css" href="http://lab.abhinayrathore.com/geocode_weather/weather.css" target="_blank">http://lab.abhinayrathore.com/geocode_weather/weather.css</a>. You can freely modify the JavaScript code to suit your needs. If you find any bugs or see improvement opportunities, please do drop a comment below and I’ll look into it asap :)</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:522c508f-a09a-4b74-9677-20fa73c90022" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/Weather+Geocoder" rel="tag">Weather Geocoder</a>,<a href="http://del.icio.us/popular/Google+Weather+API" rel="tag">Google Weather API</a>,<a href="http://del.icio.us/popular/Google+Maps+API" rel="tag">Google Maps API</a>,<a href="http://del.icio.us/popular/Google+Maps+Weather+Geocoder" rel="tag">Google Maps Weather Geocoder</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com41tag:blogger.com,1999:blog-3089943449244936901.post-60301934073520922312011-10-30T11:08:00.001-05:002012-05-09T17:23:31.751-05:00IMDb Search Suggestions with jQuery Autocomplete<p>
<a href="http://www.imdb.com/" target="_blank"><img src="https://imdbmobile.googlecode.com/svn/trunk/0.7/ImdbMobile/Skins/Android/IMDB_Logo_Large.png" style="float:right; margin:0 0 5px 5px;" /></a>
In conjunction of my previous posts on <a href="http://web3o.blogspot.com/2010/10/php-imdb-scraper-for-new-imdb-template.html" target="_blank">IMDb Scraper API</a> and <a href="http://web3o.blogspot.com/2011/10/jquery-autocomplete-with-multiple.html" target="_blank">jQuery Autocomplete with multiple search suggestions</a>, on popular demand, I’ve created yet another search suggestion tool to fetch suggestions from <a href="http://www.IMDb.com" target="_blank">IMDb.com</a>. I’ve implemented a simple PHP Proxy script to get search suggestions from IMDb and format it according to <a href="http://jqueryui.com/demos/autocomplete/" target="_blank">jQuery Autocomplete Widget’s</a> JSON data format.</p> <p>For downloading and a guide to setup the suggestions tool on your website please visit the demo page on my labs section. You will need the <em>suggest.php</em> and <em>imdbImage.php</em> Proxy files for pulling content from IMDb.</p>
<p><strong><font size="3">Demo: </font></strong><a title="http://lab.abhinayrathore.com/imdb_suggest/" href="http://lab.abhinayrathore.com/imdb_suggest/" target="_blank"><strong><font size="3">http://lab.abhinayrathore.com/imdb_suggest/</font></strong></a></p>
<p>
<a href="http://www.imdb.com/" target="_blank"><img src="http://lab.abhinayrathore.com/imdb_suggest/imdb_suggest.jpg" style="float:right; margin:0 0 5px 5px;" /></a>
IMDb’s suggestion API provides Title Name, Title Id, Cast, Type and Poster URL to display in the dropdown. You can customize the JavaScript code for your needs. IMDb has a <a href="http://en.wikipedia.org/wiki/Leech_%28computing%29" target="_blank">leechers</a> policy in place for media images so I’ve also included a PHP Proxy script to show IMDb Posters on search dropdown.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:0172b502-2385-4fc9-8d48-1c20dd18a52a" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/IMDb" rel="tag">IMDb</a>,<a href="http://del.icio.us/popular/IMDb+Search+Suggestions" rel="tag">IMDb Search Suggestions</a>,<a href="http://del.icio.us/popular/IMDb+Autocomplete." rel="tag">IMDb Autocomplete.</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com30tag:blogger.com,1999:blog-3089943449244936901.post-70284051253761428952011-10-01T13:33:00.001-05:002011-10-01T13:34:50.988-05:00jQuery Autocomplete with Multiple Search Engines<p>Search suggestions are one of the most important features people like to include on their sites as it minimizes the chances of typo errors and facilitate easy search my providing relevant suggestions in real time. I use a similar search suggestion tool on my personal dashboard page which works exactly like the Google suggest page. I thought of expanding it to include suggestions from multiple search engines so if I want to search some product on Amazon or some knowledge article on Wikipedia, it would get suggestions from all the engines at once. Here you can find an easy way to incorporate multiple search suggestions on your pages using jQuery and a small PHP script which combines the search suggestions.</p> <p><font size="4">Demo and Download: </font><a title="jQuery Autocomplete with Multiple Search Engines" href="http://lab.abhinayrathore.com/autocomplete/" target="_blank"><font size="4">http://lab.abhinayrathore.com/autocomplete/</font></a></p> <p>Search suggestion engines it can support out of the box are: <strong>Google, Bing, Yahoo, Wikipedia, Amazon</strong> and <strong>Ebay</strong>.</p> <p>For adding more suggestion engines, you can read the Configuration Options section on the page above. You can download the PHP script to combine multiple search suggestions from the link above.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:da8bc6ab-b300-4d95-b4fd-a56f5a27bf5c" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery+Autocomplete" rel="tag">jQuery Autocomplete</a>,<a href="http://del.icio.us/popular/jQuery+Autocomplete+with+Multiple+Search+Suggestion+Engines." rel="tag">jQuery Autocomplete with Multiple Search Suggestion Engines.</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com7tag:blogger.com,1999:blog-3089943449244936901.post-91183162291558316142011-06-14T10:22:00.001-05:002012-06-13T13:15:46.843-05:00IP Address Geocoding API for Google Maps<p align="justify">
<a href="http://www.imdb.com/" target="_blank"><img src="http://lab.abhinayrathore.com/ipmapper/ipaddress_geocoding.jpg" style="float:right; margin:0 0 5px 5px;" /></a>
IP Address Geocoding is getting more and more popular with people who are building their own analytics tools or want to track their users. There are a lot of free geocoding web services available which can return the geocoded data in text, XML or JSON format, the most popular ones being <a href="http://freegeoip.net" target="_blank">http://freegeoip.net</a>, <a href="http://ipinfodb.com" target="_blank">http://ipinfodb.com</a>, <a href="http://www.hostip.info" target="_blank">http://www.hostip.info</a>, <a href="http://www.maxmind.com" target="_blank">http://www.maxmind.com</a> and many others. Geocoded data from these website can be easily accesses by using any server side scripts, but I wanted to build a JavaScript based solution which only works using asynchronous AJAX calls. For this API I used a free web service provided by <a href="http://freegeoip.net/" target="_blank">http://freegeoip.net/</a> which returns data in XML(<a href="http://freegeoip.net/xml/" target="_blank">http://freegeoip.net/xml/</a>) or JSON(<a title="http://freegeoip.net/json/" href="http://freegeoip.net/json/" target="_blank">http://freegeoip.net/json/</a>) format and recently added JSONP callbacks so we can implement a pure JavaScript based API.</p> <p>This API uses Google Map Api to display map and geotag the IP Address. You will have to sign up for <a href="http://code.google.com/apis/maps/signup.html" target="_blank">Google Map API</a> if you haven't already done for your domain.</p> <p>For demo and more information on how to use this API, please visit my lab page at: <br /><a title="http://lab.abhinayrathore.com/ipmapper/" href="http://lab.abhinayrathore.com/ipmapper/" target="_blank"><font size="4">http://lab.abhinayrathore.com/ipmapper/</font></a></p> <p>Please drop a comment below if you like this API or have any modifications or improvements.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:df618fc7-c382-4bd7-8970-e530ca7a1fa9" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/IP+Geocoding" rel="tag">IP Geocoding</a>,<a href="http://del.icio.us/popular/Google+Maps" rel="tag">Google Maps</a>,<a href="http://del.icio.us/popular/IP+Geocoding+on+Google+Maps" rel="tag">IP Geocoding on Google Maps</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com40tag:blogger.com,1999:blog-3089943449244936901.post-80647620300496638022011-05-07T10:45:00.001-05:002013-02-26T22:33:01.006-06:00jQuery YouTube Popup Player Plugin<p align="justify">As an enhancement to the <a href="http://web3o.blogspot.com/2009/06/easy-to-use-popup-youtube-player-using.html" target="_blank">YouTube Popup player</a> tool I built almost 2 years back, I have created a jQuery plugin to display YouTube videos in a popup dialog box. This plugin embeds YouTube video using the latest <em>iFrame</em> code which features both Flash and HTML5 players. To display the popup dialog box I have used the <a href="http://jqueryui.com/demos/dialog/" target="_blank">jQuery UI Dialog Widget</a> which provides a robust cross-browser dialog box with title bar and supports a movable box with modal behavior. You can even <a href="http://jqueryui.com/themeroller/" target="_blank">customize</a> the jQuery UI Dialog Widget theme to suit the color and style of you website.</p> <p align="justify">This is a very easy to use plugin and is flexible enough to be used on any DOM element which supports the JavaScript <em>onclick</em> event. You will just need to include the YouTube Video Id in any of the DOM element attributes (default: <em>rel</em>) and initialize it in the plugin options (if other than <em>rel</em>). You can even provide a Title to the popup dialog box by defining it in the element’s <em>title</em> attribute or plugin options.</p> <p align="justify">This plugin offers many configuration options for the dialog box and YouTube video player. You can find more detailed information for configuration and setup on the demo/documentation page.</p> <p align="center"><font size="4">For complete demo, documentation and download visit my lab page <br /></font><a title="jQuery YouTube Popup Player Plugin" href="http://lab.abhinayrathore.com/jquery_youtube/" target="_blank"><font size="4">http://lab.abhinayrathore.com/jquery_youtube/</font></a></p> <p><a title="jQuery YouTube Popup Player Plugin" href="http://lab.abhinayrathore.com/jquery_youtube/" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="jQuery_YouTube_Popup_Player_Plugin_700" border="0" alt="jQuery_YouTube_Popup_Player_Plugin_700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5R_E3XMPWozbioZkZ7a1YvqW2VP-qNkkZMvqse_aoxpe5a-_fGGCu2g66Ot6rJ6BsFPO2x7D5DGX0fcurRlP7kAPqbu96aenfny3fyAyiUp7H7_cn7t-jo9Fkn6hB0A49SEHl_YoZLOo/?imgmax=800" width="700" height="404" /></a></p> <p>Please drop me a word in the comments below if you have any modification/enhancements/bug fixes or any new feature to be added to this plugin.</p>
<h3>Changelog</h3>
<p>
<b>UPDATE v2.3, Date: Feb 26, 2013:</b>
The biggest change in this version is that now you don't need to have the YouTube Id to embed the video links. You can now have regular YouTube URLs in the <i>href</i> attribute and don't need to assign the id in a separate attribute for links. If you want to use other DOM elements like images or buttons, you will still need the Id. This version is backward compatible with the old versions.
<br />
Also added a new configuration option:
<ol>
<li><b>cssClass</b>: (default: <i>empty string</i>) Attribute containing the CSS class to be assigned to the popup div.</li>
</ol>
</p>
<p>
<b>UPDATE v2.2, Date: Aug 30, 2012:</b>
Removed some <a href="https://developers.google.com/youtube/player_parameters#Deprecated_Parameters" target="_blank">deprecated parameters</a> from the options list
</p>
<p>
<b>UPDATE v2.1, Date: May 23, 2012:</b>
Added 1 new configuration option:
<ol>
<li><b>useYouTubeTitle</b>: (default: <i>true</i>) Gets the video title from YouTube automatically. This option will not work if the title is overridden using the <i>title</i> option. If set to false, the title will fallback to the title attribute of the element.</li>
</ol>
</p>
<p>
<b>UPDATE v2.0, Date: Oct 20, 2011:</b>
Added 3 new configuration options:
<ol>
<li><b>hideTitleBar</b>: (default: <i>false</i>) Hide the Title Bar of the Dialog Widget. (Only works with <i>Modal</i> option enabled.)</li>
<li><b>clickOutsideClose</b>: (default: <i>false</i>) Closes the Popup Dialog when clicked outside on the <i>Modal</i> overlay. (Only works with <i>Modal</i> option enabled.)</li>
<li><b>overlayOpacity</b>: (default: <i>0.5</i>) Sets the opacity value (from 0 to 1) for the Dialog Widget overlay.</li>
</ol>
</p>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com196tag:blogger.com,1999:blog-3089943449244936901.post-71776263002690448672011-02-26T10:19:00.003-06:002012-06-01T15:03:47.028-05:00jQuery Nivo Slider with CSS3 Round Corners<p align="justify">First things first, kudos to John O'Nolan for <a href="http://nivo.dev7studios.com/" target="_blank">jQuery Nivo Slider</a>. Great stuff! I was trying to use this slider on my website and wanted to use CSS3 round corners. Unfortunately I was not able to use round corners on the outer div because of the multiple slides overlapping over it. I tried many ways of achieving this using CSS but couldn’t find an optimal way to do it. Finally I modified the Nivo Sliders JavaScript library to include round corners without modifying the CSS file. I added a new option (borderRadius) which can be defined when the slider is initialized.</p><p><a href="http://lab.abhinayrathore.com/nivo/" target="_blank"><strong><font size="3">Demo on my Labs page</font></strong></a></p><p style="margin-bottom: 0px"><strong>How to download and use this modified library:</strong></p><ol style="margin-top: 2px"><li><a href="http://nivo.dev7studios.com/" target="_blank">Download</a> and configure the library as described by the original developer: <a title="http://nivo.dev7studios.com/#usage" href="http://nivo.dev7studios.com/#usage" target="_blank">http://nivo.dev7studios.com/#usage</a> </li>
<li>Get the new JavaScript file and use it instead of the original library file:<br />
<ul><li><a href="http://lab.abhinayrathore.com/nivo/jquery.nivo.slider.2.4.js" target="_blank">Version 2.4</a></li>
<li><a href="http://lab.abhinayrathore.com/nivo/jquery.nivo.slider.2.5.1.js" target="_blank">Version 2.5.1</a></li>
<li><a href="http://lab.abhinayrathore.com/nivo/jquery.nivo.slider.2.6.js" target="_blank">Version 2.6</a></li>
<li><a href="http://lab.abhinayrathore.com/nivo/jquery.nivo.slider.2.7.1.js" target="_blank">Version 2.7.1</a></li>
<li><a href="http://lab.abhinayrathore.com/nivo/jquery.nivo.slider.3.0.1.js" target="_blank">Version 3.0.1</a> (Latest version)</li>
</ul></li>
<li>NO changes required in the CSS file. </li>
<li>Add new “borderRadius” option while initialization to define the border radius (default value is 10px). </li>
</ol><p><strong>Example usage: <br />
</strong><font face="Courier New">$(window).load(<em>function</em>() { <br />
    $('<font color="#666666">#slider</font>').nivoSlider({ borderRadius: <font color="#c0504d">20</font> }); <br />
});</font></p><p>Thanks once again to John for this awesome script. Keep up the good work. <br />
Let me know if you find any bugs in the script and I’ll try to address them asap.</p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:9fb3b088-d310-433d-9991-394777a8d37d" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery+Nivo+Slider" rel="tag">jQuery Nivo Slider</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com214tag:blogger.com,1999:blog-3089943449244936901.post-8871795475644949182011-01-29T12:26:00.006-06:002012-05-10T09:56:16.345-05:00Free PHP Rotten Tomatoes Scraping API<p align="justify"><img style="float:right; width:150px; margin:0 0 5px 5px;" src="http://images.rottentomatoescdn.com/images/trademark/fresh.png" />
In continuation to my previous posts on <a href="http://web3o.blogspot.com/2010/10/php-imdb-scraper-for-new-imdb-template.html" target="_blank">PHP</a> and <a href="http://web3o.blogspot.com/2010/11/aspnetc-imdb-scraping-api.html" target="_blank">ASP.NET</a> <a href="http://lab.abhinayrathore.com/imdb/" target="_blank">IMDb Scraping</a> API’s, I have designed one more movie information scraping API for <a href="http://www.RottenTomatoes.com" target="_blank">RottenTomatoes.com</a>. Rotten Tomatoes is one of the most popular movie review website which provides a comprehensive movie rating system involving critics from all the popular news networks.</p><p align="justify">This API includes scraping of lot of attributes from Rotten Tomatoes along with the functionality of scraping newly released DVD list. You can extend the PHP code on your own to include more functionality or drop a comment here and I’ll try to help you as much as I can.</p><p style="margin-bottom: 0px"><strong>Here is a list of all the attributes it scraps from Rotten Tomatoes page:</strong></p><ol style="margin-top: 5px"><li>TITLE </li>
<li>YEAR </li>
<li>POSTER </li>
<li>ALL_CRITICS_PERCENTAGE </li>
<li>ALL_CRITICS_AVERAGE_RATING </li>
<li>ALL_CRITICS_COUNT </li>
<li>USER_PERCENTAGE </li>
<li>USER_AVERAGE_RATING </li>
<li>USER_COUNT </li>
<li>GENRES </li>
<li>SYNOPSIS </li>
<li>MPAA_RATING </li>
<li>RUNTIME </li>
<li>RELEASE_DATE </li>
<li>BOX_OFFICE </li>
<li>DIRECTORS </li>
<li>WRITERS </li>
<li>CAST </li>
<li>REVIEWS </li>
</ol><p><strong>How to use this API: <br />
</strong>Include the class file on your php page <br />
<font face="Courier New"><font color="#804000">include("rottentomatoes.php");</font> <br />
</font>Instantiate the class and get the results in an array: <br />
<font color="#008040" face="Courier New">$rottentomatoes = new RottenTomatoes(); <br />
$movieArray = $rottentomatoes->getMovieInfo("Inception");</font></p><p><strong>How to get the New DVD Release list: <br />
</strong><font color="#008040" face="Courier New">$rottentomatoes = new RottenTomatoes(); <br />
$dvdArray = $rottentomatoes->getNewDvdReleases();</font></p><p><strong>You can try this scraper on my lab page:</strong> <a href="http://lab.abhinayrathore.com/rottentomatoes/" target="_blank">http://lab.abhinayrathore.com/rottentomatoes/</a></p><p><strong>Download PHP Source Code:</strong> <a href="http://lab.abhinayrathore.com/rottentomatoes/rottentomatoes2.htm" target="_blank">http://lab.abhinayrathore.com/rottentomatoes/rottentomatoes2.htm</a></p><p><strong>Example usage:</strong> <a href="http://lab.abhinayrathore.com/rottentomatoes/usage.txt" target="_blank">http://lab.abhinayrathore.com/rottentomatoes/usage.txt</a></p><p>If you need some more additions or corrections to this API, please drop a comment here and I’ll try to include it asap.</p><p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:e68f8fea-bf48-489b-af55-31f444f36f93" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/Rotten+Tomatoes+API" rel="tag">Rotten Tomatoes API</a>,<a href="http://del.icio.us/popular/Rotten+Tomatoes+Scraper" rel="tag">Rotten Tomatoes Scraper</a>,<a href="http://del.icio.us/popular/RottenTomatoes.com+API" rel="tag">RottenTomatoes.com API</a></div></p>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com18tag:blogger.com,1999:blog-3089943449244936901.post-84510904293712043412010-11-25T09:39:00.008-06:002013-07-30T10:50:46.277-05:00FREE! ASP.net/C# IMDb Scraping API<p align="justify"><img style="float:right; margin:0 0 10px 10px;" src="http://lab.abhinayrathore.com/imdb/imdb_asp.png" /><br />
In extension to my previous <a href="http://web3o.blogspot.com/2010/10/php-imdb-scraper-for-new-imdb-template.html" target="_blank">IMDb Scraping API in PHP</a>, I have converted the code to ASP.net/C# based IMDb scraper. In my de facto development style, I have kept the code pretty simple and concise. For more details on the movie information it scraps, please refer to my <a href="http://web3o.blogspot.com/2010/10/php-imdb-scraper-for-new-imdb-template.html" target="_blank">previous post</a>. I don’t have an IIS server running to demonstrate the code but it is functionally similar to my PHP Scraper API so you can test it on the link below. And above all... it’s FREE!!!</p><p align="justify"><strong>Test the Scraper API:</strong> <a title="http://lab.abhinayrathore.com/imdb/" href="http://lab.abhinayrathore.com/imdb/" target="_blank">http://lab.abhinayrathore.com/imdb/</a></p>
<p><strong>Download C# Class file:</strong> <a title="Download ASP.Net/C# Code" href="http://lab.abhinayrathore.com/imdb/imdb_asp_csharp.htm" target="_blank">http://lab.abhinayrathore.com/imdb/imdb_asp_csharp.htm</a> <br />
<font color="#666666">(Add this class file to your project and rename the namespace accordingly) <br />
To convert this C# code to VB.net use this tool: </font><a title="http://www.developerfusion.com/tools/convert/csharp-to-vb/" href="http://www.developerfusion.com/tools/convert/csharp-to-vb/" target="_blank"><font color="#666666">http://www.developerfusion.com/tools/convert/csharp-to-vb/</font></a></p>
<p><i class="icon-github icon-large"></i> <strong>Fork it on GitHub:</strong> <a title="Fork on GitHub" href="https://github.com/abhinayrathore/ASP.NET-IMDb-Scraper" target="_blank">https://github.com/abhinayrathore/ASP.NET-IMDb-Scraper</a></p>
<p><strong>Download DLL file:</strong> <a title="http://lab.abhinayrathore.com/imdb/IMDb.dll" href="http://lab.abhinayrathore.com/imdb/IMDb.dll" target="_blank">http://lab.abhinayrathore.com/imdb/IMDb.dll</a> <br />
<font color="#666666">(Copy this DLL file to your project folder and add it to the project references)</font></p><p style="margin-bottom: 0px"><strong>How to use this class:</strong></p><ol style="margin-top: 0px"><li>Include the class on your ASP page.</li>
<li>Instantiate the class: <font face="Courier New"><span style="font-family: "><font color="#2b91af"><font style="font-size: 9.5pt">IMDb</font></font></span><span style="font-family: "><font style="font-size: 9.5pt"><font color="#000000"> imdb = </font><span><font color="#0000ff">new</font></span><font color="#000000"> </font><span><font color="#2b91af">IMDb</font></span><font color="#000000">(</font><span><font color="#a31515">"The Godfather"</font></span><font color="#000000">, </font><span><font color="#0000ff">true</font></span><font color="#000000">);</font></font></span></font> <br />
(Second parameter is an optional Boolean value for scraping extra movie information.)</li>
<li>Access the movie information using public variables: <font face="Courier New">imdb.Id</font>, <font face="Courier New">imdb.Title</font> etc.</li>
</ol><p>It’s been a while since I worked on ASP.net, so if you have any improvements or suggestions, do let me know :)</p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:846b768d-da83-4be0-80a2-a6999c62db0c" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/ASP.net+IMDb+Scraper" rel="tag">ASP.net IMDb Scraper</a>,<a href="http://del.icio.us/popular/ASP.net+IMDb+API" rel="tag">ASP.net IMDb API</a>,<a href="http://del.icio.us/popular/C%23+IMdb+Scraper" rel="tag">C# IMdb Scraper</a>,<a href="http://del.icio.us/popular/C%23+IMDb+API" rel="tag">C# IMDb API</a>,<a href="http://del.icio.us/popular/VB.net+IMDb+API" rel="tag">VB.net IMDb API</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com200tag:blogger.com,1999:blog-3089943449244936901.post-81063077846665342262010-10-30T20:52:00.015-05:002014-02-01T11:40:56.961-06:00FREE! PHP IMDb Scraper/API for new IMDb Template<p align="justify"><img style="float:right; margin:0 0 10px 10px;" src="http://lab.abhinayrathore.com/imdb/imdb_php.png" /><br />
IMDb is undoubtedly the leading information source for media information and is the top target of <a href="http://en.wikipedia.org/wiki/Web_scraping" target="_blank">web scraping</a> for movie lovers around the world. Unfortunately IMDb does not provide an API to access its database so web scraping is the only resort for us. PHP being one of the most commonly used and powerful web development language enables easy web scraping with the power of PCRE (Perl Compatible Regular Expressions).</p><p align="justify">For my recent project on a Movie Catalog (<a href="http://movies.abhinayrathore.com" target="_blank">http://movies.abhinayrathore.com</a>), I needed a  IMDb scraper and found one built by <a href="http://clickontyler.com/blog/2008/05/scraping-imdb-with-php/" target="_blank">Tyler Hall</a>. His version was not robust enough to scrap all kind of movie pages so I extended it and made it more robust to support different type of titles, BUT recently IMDb changed its page template and most of the old scrapers stopped working including mine. So, I modified my scraper to accommodate the new template changes and considered it as my moral responsibility to contribute back to the developer community.</p><p align="justify">This new scraper is very robust and capable enough to handle a wide variety of new template modifications. Apart from the regular information it even goes deep to scan extra media images and release dates.</p>
<p style="font-size: 1.5em; font-weight:bold;">
<a href="http://lab.abhinayrathore.com/imdb/" target="_blank">Click here for a Demo</a>
</p>
<p style="font-size: 1.2em; font-weight:bold; color: green;">
Last Updated: Feb 1, 2014
</p>
<p style="color:red;">
Major changes in Feb 20, 2013 version:
<ol style="color:red;">
<li>Now we use the <a href="http://www.imdb.com/title/tt1345836/combined" target="_blank">combined information</a> page to scrape the data. This page doesn't change quite often and we can get complete list of individual departments.</li>
<li>Add a few more entities; producers, musicians, cinematographers, editors etc. Removed metascore information. Removed small poster url.</li>
<li>You can now pass a second boolean parameter to the getMovieInfo() and getMovieInfoById() functions to disable the extra information. By default it is set to true and may slow down the scraping. If you don't need all the extra info like Storyline, Release Dates, Recommendations or Media Images, just pass <i>false</i> as second parameter to these methods. Example <i>$movieArray = $imdb->getMovieInfo("The Godfather", false);</i>.</li>
<li>Information for individuals in the list of directors, cast, writers etc. is now in an <a href="http://php.net/manual/en/language.types.array.php" target="_blank">associative array</a> with key being the IMDb id of the individual.</li>
</ol>
</p>
<p align="justify" style="color:#990000; display:none;">
<span style="color:red; font-weight:bold; font-size:1.1em;">UPDATE:</span><br />
As some of you might have noticed, Google is preventing automated script access to its search result pages. I have created 2 search functions for Google and Bing so you can use whichever one works best for you. I have converted the code to use Bing as of now and will look for other alternatives if we run into some hurdles. Keep me updated if you have any better ideas :)</p>
<p style="margin-bottom: 0px"><strong>Here is a list of all the attributes it scraps from the IMDb page:</strong></p><ol style="margin-top: 5px"><li>TITLE_ID </li>
<li>TITLE </li>
<li>YEAR </li>
<li>RATING </li>
<li>GENRES </li>
<li>STARS</li>
<li>DIRECTORS</li>
<li>WRITERS</li>
<li>CAST</li>
<li>PRODUCERS</li>
<li>MUSICIANS</li>
<li>CINEMATOGRAPHERS</li>
<li>EDITORS</li>
<li>ALSO_KNOWN_AS</li>
<li>RELEASE_DATE </li>
<li>RELEASE_DATES </li>
<li>PLOT </li>
<li>POSTER </li>
<li>POSTER_LARGE </li>
<li>RUNTIME </li>
<li>TOP_250 </li>
<li>OSCARS </li>
<li>AWARDS </li>
<li>NOMINATIONS </li>
<li>STORYLINE </li>
<li>TAGLINE </li>
<li>MEDIA_IMAGES </li>
<li>MPAA_RATING </li>
<li>VOTES </li>
<li>RECOMMENDED_TITLES</li>
<li>VIDEOS</li>
</ol><p><strong>How to use this PHP Scraper?</strong> <br />
Include the class file on your php page <br />
<font color="#004000" face="Courier New">include("imdb.php"); <br />
</font>Instantiate the class and get the results in an array: <br />
<font color="#004000" face="Courier New">$imdb = new Imdb(); <br />
$movieArray = $imdb->getMovieInfo("The Godfather");</font></p>
<p>You can try this scraper on my lab page: <a href="http://lab.abhinayrathore.com/imdb/" target="_blank">http://lab.abhinayrathore.com/imdb/</a></p>
<p>To download the PHP Source Code directly use this link: <a title="Download the PHP IMDb scraping API" href="http://lab.abhinayrathore.com/imdb/imdb_php.htm" target="_blank">http://lab.abhinayrathore.com/imdb/imdb_php.htm</a></p>
<p><i class="icon-github icon-large"></i> Fork it on GitHub: <a title="Fork on GitHub" href="https://github.com/abhinayrathore/PHP-IMDb-Scraper" target="_blank">https://github.com/abhinayrathore/PHP-IMDb-Scraper</a></p>
<p>Example usage: <a title="How to use?" href="http://lab.abhinayrathore.com/imdb/usage.htm" target="_blank">http://lab.abhinayrathore.com/imdb/usage.htm</a></p><p>Proxy script for downloading or displaying Media images on your website: <a href="http://lab.abhinayrathore.com/imdb/imdbImage.txt" target="_blank">http://lab.abhinayrathore.com/imdb/imdbImage.txt</a></p>
<p>To implement you own IMDb Web Service API to return data in XML, JSON or JSONP format, use this script along with the API: <a href="http://lab.abhinayrathore.com/imdb/imdbWebService.htm" target="_blank" title="IMDb Web Service API">http://lab.abhinayrathore.com/imdb/imdbWebService.htm</a></p>
<p>To implement IMDb.com's search suggestions on your website, please follow this post: <a href="http://web3o.blogspot.com/2011/10/imdb-search-suggestions-with-jquery.html" target="_blank" title="IMDb Search Suggestions with jQuery Autocomplete">http://web3o.blogspot.com/2011/10/imdb-search-suggestions-with-jquery.html</a></p>
<p>If you find any part of this scraper broken or incorrect, please drop a comment here and I’ll try to fix it as soon as possible.</p><p>IMDb has a <a href="http://en.wikipedia.org/wiki/Leech_%28computing%29" target="_blank">leechers</a> policy in place for media images. You may not be able to use the URL for some of the images to display on your website. As a workaround you can use a PHP Proxy to display or download those images. I’ve written a small proxy script to grab the images: <a href="http://lab.abhinayrathore.com/imdb/imdbImage.txt" target="_blank">http://lab.abhinayrathore.com/imdb/imdbImage.txt</a>. To use this script you just need to pass the image URL as a request parameter: <br />
<font color="#004000" face="Courier New"><img src="imdbImage.php?url=<?=$url?>" /></font></p><p><strong>NOTE: For users outside of USA</strong> <br />
IMDb will automatically redirect you to titles listed in the language used for release in your country (<a href="http://www.imdb.com/help/search?domain=helpdesk_faq&index=1&file=titlelanguagedisplay" target="_blank">Read more</a>). <br />
To see films listed under their original titles regardless of your country region you will have to modify this script to scrap the titles from <a href="http://akas.imdb.com" target="_blank">http://akas.imdb.com</a> because <a href="http://www.imdb.com" target="_blank">http://www.imdb.com</a> will automatically redirect you to your country specific title page.</p><p>Happy Scraping :)</p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:e0798646-6777-4829-b43b-794217519dbf" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/PHP+IMDb+Scraper" rel="tag">PHP IMDb Scraper</a>,<a href="http://del.icio.us/popular/Web+Scraping" rel="tag">Web Scraping</a>,<a href="http://del.icio.us/popular/IMDb" rel="tag">IMDb</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com325tag:blogger.com,1999:blog-3089943449244936901.post-66540534226117903702010-05-28T09:20:00.001-05:002010-05-28T09:34:26.023-05:00Google Maps: Dynamically Drawn and Resizable Polygon Overlay<p align="justify">In extension to my previous post on <a href="http://web3o.blogspot.com/2010/05/google-maps-dynamically-movable-and.html" target="_blank">Dynamically Movable and Resizable Circle Overlay</a>, I created yet another nifty tool to dynamically draw a polygon overlay on Google Maps. You won’t find another robust tool like this for Polygon drawing on the internet. Users can draw polygon dynamically by adding, deleting and moving the polygon boundary nodes. User can press shift+click on the map to add a new node to polygon boundary or they can press ctrl+click on any node marker to remove it. The node markers can be dragged around to resize the polygon.</p> <p><strong>This is how it looks like in action: <br /></strong><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="Google Maps Dynamic Polygon" alt="Google Maps Dynamic Polygon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0BVjCOj9G1_ClgZY7T049a3SC6MgxkH_lyQgkqjlF4LuZok0_YYDtwsdHFkX6pY4zrSTobhc_MXQg1cjJGEJu9jVBlCGR9hyOlRu108oo_0pBP1zfEU0JaaWkR6fY22B7vxEIcnNi1Y/?imgmax=800" width="598" height="527" /> </p> <p>The <strong>JavaScript code</strong> is pretty easy to modify for your custom needs. The <em>initialize()</em> function is used to initialize the Google Map object when the page loads. A <em>click</em> event is also added to the map for adding node markers on the map. The <em>click</em> event takes care of the case when the user click on the previous markers while holding the shift key. When the user clicks on the map, <em>addMarker()</em> function is called to add another boundary node to the polygon. For every newly added marker, <em>drag</em> events are assigned for resizing the polygon and a <em>click</em> event is assigned to delete the node when <em>ctrl</em> key is pressed while clicking the marker pin. The <em>fitPolygon()</em> function is used to set map bounds and center to adjust the polygon inside it.</p> <p><strong>Put the following JavaScript code in the head section of your page:</strong> <br /></p> <span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">src</span><span style="color: blue">="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY&sensor=true"</span> <span style="color: red">type</span><span style="color: blue">="text/javascript"></</span><span style="color: #a31515">script</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Developed by: Abhinay Rathore [web3o.blogspot.com] */</span><span style="font-family: "Courier New"; font-size: 10pt"><span>  </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Global variables</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> global = <span style="color: blue">this</span>; </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> map;</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> PolygonMarkers = []; <span style="color: green">//Array for Map Markers </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> PolygonPoints = []; <span style="color: green">//Array for Polygon Node Markers </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> bounds = <span style="color: blue">new</span> GLatLngBounds; <span style="color: green">//Polygon Bounds </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> Polygon; <span style="color: green">//Polygon overlay object </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> polygon_resizing = <span style="color: blue">false</span>; <span style="color: green">//To track Polygon Resizing </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Polygon Marker/Node icons</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> redpin = <span style="color: blue">new</span> GIcon(); <span style="color: green">//Red Pushpin Icon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.image = <span style="color: #a31515">"http://maps.google.com/mapfiles/ms/icons/red-pushpin.png"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.iconSize = <span style="color: blue">new</span> GSize(32, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.iconAnchor = <span style="color: blue">new</span> GPoint(10, 32); </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> bluepin = <span style="color: blue">new</span> GIcon(); <span style="color: green">//Blue Pushpin Icon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.image = <span style="color: #a31515">"http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.iconSize = <span style="color: blue">new</span> GSize(32, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.iconAnchor = <span style="color: blue">new</span> GPoint(10, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> initialize() { <span style="color: green">//Initialize Google Map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span> (GBrowserIsCompatible()) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map = <span style="color: blue">new</span> GMap2(document.getElementById(<span style="color: #a31515">"map_canvas"</span>)); <span style="color: green">//New GMap object </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.setCenter(<span style="color: blue">new</span> GLatLng(38.90, -94.68007), 13); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> ui = <span style="color: blue">new</span> GMapUIOptions(); <span style="color: green">//Map UI options </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.maptypes = { normal:<span style="color: blue">true</span>, satellite:<span style="color: blue">true</span>, hybrid:<span style="color: blue">true</span>, physical:<span style="color: blue">false</span> } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.zoom = {scrollwheel:<span style="color: blue">true</span>, doubleclick:<span style="color: blue">true</span>}; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.controls = { largemapcontrol3d:<span style="color: blue">true</span>, maptypecontrol:<span style="color: blue">true</span>, scalecontrol:<span style="color: blue">true</span> }; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.setUI(ui); <span style="color: green">//Set Map UI options </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">//Add Shift+Click event to add Polygon markers </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>GEvent.addListener(map, <span style="color: #a31515">"click"</span>, <span style="color: blue">function</span>(overlay, point, overlaypoint) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">var</span> p = (overlaypoint) ? overlaypoint : point; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">//Add polygon marker if overlay is not an existing marker and shift key is pressed </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">if</span> (global.shiftKey && !checkPolygonMarkers(overlay)) { addMarker(p); } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">// Adds a new Polygon boundary marker</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> addMarker(point) {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> markerOptions = { icon: bluepin, draggable: <span style="color: blue">true</span> }; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> marker = <span style="color: blue">new</span> GMarker(point, markerOptions); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>PolygonMarkers.push(marker); <span style="color: green">//Add marker to PolygonMarkers array </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.addOverlay(marker); <span style="color: green">//Add marker on the map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(marker,<span style="color: #a31515">'dragstart'</span>,<span style="color: blue">function</span>(){ <span style="color: green">//Add drag start event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>marker.setImage(redpin.image); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>polygon_resizing = <span style="color: blue">true</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(marker,<span style="color: #a31515">'drag'</span>,<span style="color: blue">function</span>(){ drawPolygon(); }); <span style="color: green">//Add drag event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(marker,<span style="color: #a31515">'dragend'</span>,<span style="color: blue">function</span>(){<span>   </span><span style="color: green">//Add drag end event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>marker.setImage(bluepin.image); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>polygon_resizing = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawPolygon(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>fitPolygon(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(marker,<span style="color: #a31515">'click'</span>,<span style="color: blue">function</span>(point) { <span style="color: green">//Add Ctrl+Click event to remove marker </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (global.ctrlKey) { removeMarker(point); } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>drawPolygon(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//If more then 2 nodes then automatically fit the polygon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span>(PolygonMarkers.length > 2) fitPolygon(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">// Removes a Polygon boundary marker</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> removeMarker(point) {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span>(PolygonMarkers.length == 1){ <span style="color: green">//Only one marker in the array </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.removeOverlay(PolygonMarkers[0]); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.removeOverlay(PolygonMarkers[0]); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>PolygonMarkers = []; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span>(Polygon){map.removeOverlay(Polygon)}; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">else</span> <span style="color: green">//More then one marker </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> RemoveIndex = -1; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> Remove; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">//Search for clicked Marker in PolygonMarkers Array </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">for</span>(<span style="color: blue">var</span> m=0; m<PolygonMarkers.length; m++) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">if</span>(PolygonMarkers[m].getPoint().equals(point)) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>RemoveIndex = m; Remove = PolygonMarkers[m] </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">//Shift Array elemeents to left </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>     </span><span>   </span><span style="color: blue">for</span>(<span style="color: blue">var</span> n=RemoveIndex; n<PolygonMarkers.length-1; n++) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>PolygonMarkers[n] = PolygonMarkers[n+1]; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>PolygonMarkers.length = PolygonMarkers.length-1 <span style="color: green">//Decrease Array length by 1 </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.removeOverlay(Remove); <span style="color: green">//Remove Marker </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawPolygon(); <span style="color: green">//Redraw Polygon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Draw Polygon from the PolygonMarkers Array</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> drawPolygon()</span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>PolygonPoints.length=0; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">for</span>(<span style="color: blue">var</span> m=0; m<PolygonMarkers.length; m++) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>PolygonPoints.push(PolygonMarkers[m].getPoint()); <span style="color: green">//Add Markers to PolygonPoints node array </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Add first marker in the end to close the Polygon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>PolygonPoints.push(PolygonMarkers[0].getPoint()); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span>(Polygon){ map.removeOverlay(Polygon); } <span style="color: green">//Remove existing Polygon from Map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> fillColor = (polygon_resizing) ? <span style="color: #a31515">'red'</span> : <span style="color: #a31515">'blue'</span>; <span style="color: green">//Set Polygon Fill Color </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>Polygon = <span style="color: blue">new</span> GPolygon(PolygonPoints, <span style="color: #a31515">'#FF0000'</span>, 2, 1, fillColor, 0.2); <span style="color: green">//New GPolygon object </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.addOverlay(Polygon); <span style="color: green">//Add Polygon to the Map </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//TO DO: Function Call triggered after Polygon is drawn </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Fits the Map to Polygon bounds</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> fitPolygon(){</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>bounds = Polygon.getBounds(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//check is the marker is a polygon boundary marker</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> checkPolygonMarkers(marker) {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> flag = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">for</span> (<span style="color: blue">var</span> m = 0; m < PolygonMarkers.length; m++) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (marker == PolygonMarkers[m]) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>{ flag = <span style="color: blue">true</span>; <span style="color: blue">break</span>; } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">return</span> flag; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//////////////////[ Key down event handler ]/////////////////////</span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Event handler class to attach events</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> EventUtil = {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>addHandler: <span style="color: blue">function</span>(element, type, handler){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">if</span> (element.addEventListener){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                  </span><span>  </span>element.addEventListener(type, handler, <span style="color: blue">false</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>} <span style="color: blue">else</span> <span style="color: blue">if</span> (element.attachEvent){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                  </span><span>  </span>element.attachEvent(<span style="color: #a31515">"on"</span> + type, handler); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>} <span style="color: blue">else</span> { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                  </span><span>  </span>element[<span style="color: #a31515">"on"</span> + type] = handler; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">};</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">// Attach Key down/up events to document</span> <br /><span style="font-family: "Courier New"; font-size: 10pt">EventUtil.addHandler(document, <span style="color: #a31515">"keydown"</span>, <span style="color: blue">function</span>(event){keyDownHandler(event)}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">EventUtil.addHandler(document, <span style="color: #a31515">"keyup"</span>, <span style="color: blue">function</span>(event){keyUpHandler(event)}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Checks for shift and Ctrl key press</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> keyDownHandler(e)</span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (!e) <span style="color: blue">var</span> e = window.event; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> target = (!e.target) ? e.srcElement : e.target; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (e.keyCode == 16 && !global.shiftKey) { <span style="color: green">//Shift Key </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>global.shiftKey = <span style="color: blue">true</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (e.keyCode == 17 && !global.ctrlKey) { <span style="color: green">//Ctrl Key </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>global.ctrlKey = <span style="color: blue">true</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Checks for shift and Ctrl key release</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> keyUpHandler(e){</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (!e) <span style="color: blue">var</span> e = window.event; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (e.keyCode == 16 && global.shiftKey) { <span style="color: green">//Shift Key </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>global.shiftKey = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span> (e.keyCode == 17 && global.ctrlKey) { <span style="color: green">//Ctrl Key </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>global.ctrlKey = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /> <p>To initialize the map you can call the functions on page load event and include a div tag inside your body to hold the Map. </p> <span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">body</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">onload</span><span style="color: blue">="initialize()"</span> <span style="color: red">onunload</span><span style="color: blue">="GUnload()"></span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">id</span><span style="color: blue">="map_canvas"</span> <span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">width</span>:<span style="color: blue">100%</span>; <span style="color: red">height</span>:<span style="color: blue">450px"></</span><span style="color: #a31515">div</span><span style="color: blue">></span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">body</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /> <p>Feel free to modify and use this code on your website. I have used API v2 for my code but you can easily modify this code for API v3. Happy Mapping!</p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:c358434f-77e2-43df-be48-28159d69986d" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/Google+Maps" rel="tag">Google Maps</a>,<a href="http://del.icio.us/popular/Polygon" rel="tag">Polygon</a>,<a href="http://del.icio.us/popular/Dynamic+Polygon" rel="tag">Dynamic Polygon</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com15tag:blogger.com,1999:blog-3089943449244936901.post-3241942762196629372010-05-27T11:59:00.001-05:002010-05-27T12:04:48.992-05:00Google Maps: Dynamically Movable and Resizable Circle Overlay<p align="justify">Google provides a pretty wholesome Map API for creating customized maps with enhanced features. In a recent project of mine I had to use dynamically drawn map overlays for searching house properties within them. To implement that I looked for some algorithms to draw circles on Google Map Overlays and found a good one at <a href="http://koti.mbnet.fi/ojalesa/googlepages/circle.htm">http://koti.mbnet.fi/ojalesa/googlepages/circle.htm</a>, but this program was built to change the radius using html form field. To take it a few steps further, I planned to make this circle movable and resizable by directly dragging map icons.</p> <p align="justify">      This is one of the best dynamic circle overlay drawing tool you can find on internet. There are two pin markers to alter the circle, the <strong><font color="#0000ff">Blue</font></strong> pin is used to drag the circle around on the map and the <strong><font color="#ff0000">Red</font></strong> one can be dragged to resize the circle. You can even set minimum and maximum radius for the circle in the JavaScript code. The resize marker pin always stays at the 0 degree edge of the circle. The Circle fill color changes to red if the circle is moved or resized.</p> <p><strong>This is how it looks like in action:</strong>  <br /></p> <img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="Google Map Dynamic Circle" border="0" alt="Google Map Dynamic Circle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMhRM2Zc0nHr6YwcuHrNzAr8G229f3-Fzk0ZRuXjUe_YkAtl0bnw715KAblvXf9Tsu5C1iDqgCVKgFvxUb9wZ0k6pmb4PsbmbMem6iwHDAHze13iORM5Gt8aREwq9yYMZnnIBKLYhgOp8/?imgmax=800" width="601" height="527" /> <p align="justify"><strong>JavaScript code: </strong>The logistic code is pretty easy to modify for your custom needs. The <em>initialize()</em> function is used to initialize the Google Map object when the page loads. Circle Center and Resize markers are then added at the default center location. Marker drag events are assigned to Center and Resize markers for dragging and resizing the circle. The <em>drawCircle()</em> function implements the algorithm for drawing the circle and finally the <em>fitCircle()</em> function is used to set the Map bounds to include the full circle inside it. If you want to trigger any other function after the circle is drawn, you can call your function after the <em>fitCircle()</em> function call at the end of <em>drawCircle()</em> function. Google Map uses Metric Units for distance by default, you will have to use conversion factor (1km = 0.621371192mi) to convert radius value into miles if you wish to.</p> <p><strong>Place the following JavaScript code in the head section of your page: <br /></strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">src</span><span style="color: blue">="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY&sensor=true"</span> <span style="color: red">type</span><span style="color: blue">="text/javascript"></</span><span style="color: #a31515">script</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Developed by: Abhinay Rathore [web3o.blogspot.com] */</span><span style="font-family: "Courier New"; font-size: 10pt"> </span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Global variables </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> map; </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> bounds = <span style="color: blue">new</span> GLatLngBounds; <span style="color: green">//Circle Bounds </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> map_center = <span style="color: blue">new</span> GLatLng(38.903843, -94.680096); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> Circle; <span style="color: green">//Circle object </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> CirclePoints = []; <span style="color: green">//Circle drawing points </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> CircleCenterMarker, CircleResizeMarker; </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> circle_moving = <span style="color: blue">false</span>; <span style="color: green">//To track Circle moving </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> circle_resizing = <span style="color: blue">false</span>; <span style="color: green">//To track Circle resizing </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> radius = 1; <span style="color: green">//1 km </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> min_radius = 0.5; <span style="color: green">//0.5km </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> max_radius = 5; <span style="color: green">//5km </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Circle Marker/Node icons </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> redpin = <span style="color: blue">new</span> GIcon(); <span style="color: green">//Red Pushpin Icon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.image = <span style="color: #a31515">"http://maps.google.com/mapfiles/ms/icons/red-pushpin.png"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.iconSize = <span style="color: blue">new</span> GSize(32, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">redpin.iconAnchor = <span style="color: blue">new</span> GPoint(10, 32); </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> bluepin = <span style="color: blue">new</span> GIcon(); <span style="color: green">//Blue Pushpin Icon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.image = <span style="color: #a31515">"http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.iconSize = <span style="color: blue">new</span> GSize(32, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">bluepin.iconAnchor = <span style="color: blue">new</span> GPoint(10, 32); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> initialize() { <span style="color: green">//Initialize Google Map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span> (GBrowserIsCompatible()) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map = <span style="color: blue">new</span> GMap2(document.getElementById(<span style="color: #a31515">"map_canvas"</span>)); <span style="color: green">//New GMap object </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.setCenter(map_center); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> ui = <span style="color: blue">new</span> GMapUIOptions(); <span style="color: green">//Map UI options </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.maptypes = { normal:<span style="color: blue">true</span>, satellite:<span style="color: blue">true</span>, hybrid:<span style="color: blue">true</span>, physical:<span style="color: blue">false</span> } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.zoom = {scrollwheel:<span style="color: blue">true</span>, doubleclick:<span style="color: blue">true</span>}; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>ui.controls = { largemapcontrol3d:<span style="color: blue">true</span>, maptypecontrol:<span style="color: blue">true</span>, scalecontrol:<span style="color: blue">true</span> }; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>map.setUI(ui); <span style="color: green">//Set Map UI options </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>addCircleCenterMarker(map_center); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>addCircleResizeMarker(map_center); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawCircle(map_center, radius); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">// Adds <place w:st="on"><placename w:st="on">Circle</placename> <placetype w:st="on">Center</placetype></place> marker </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> addCircleCenterMarker(point) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> markerOptions = { icon: bluepin, draggable: <span style="color: blue">true</span> }; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>CircleCenterMarker = <span style="color: blue">new</span> GMarker(point, markerOptions); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.addOverlay(CircleCenterMarker); <span style="color: green">//Add marker on the map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleCenterMarker, <span style="color: #a31515">'dragstart'</span>, <span style="color: blue">function</span>() { <span style="color: green">//Add drag start event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>circle_moving = <span style="color: blue">true</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleCenterMarker, <span style="color: #a31515">'drag'</span>, <span style="color: blue">function</span>(point) { <span style="color: green">//Add drag event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawCircle(point, radius); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleCenterMarker, <span style="color: #a31515">'dragend'</span>, <span style="color: blue">function</span>(point) {<span> </span><span style="color: green">//Add drag end event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>circle_moving = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>   </span><span>     </span>drawCircle(point, radius); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">// Adds Circle Resize marker </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> addCircleResizeMarker(point) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> resize_icon = <span style="color: blue">new</span> GIcon(redpin); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>resize_icon.maxHeight = 0; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> markerOptions = { icon: resize_icon, draggable: <span style="color: blue">true</span> }; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>CircleResizeMarker = <span style="color: blue">new</span> GMarker(point, markerOptions); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.addOverlay(CircleResizeMarker); <span style="color: green">//Add marker on the map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleResizeMarker, <span style="color: #a31515">'dragstart'</span>, <span style="color: blue">function</span>() { <span style="color: green">//Add drag start event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>circle_resizing = <span style="color: blue">true</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleResizeMarker, <span style="color: #a31515">'drag'</span>, <span style="color: blue">function</span>(point) { <span style="color: green">//Add drag event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> new_point = <span style="color: blue">new</span> GLatLng(map_center.lat(), point.lng()); <span style="color: green">//to keep resize marker on horizontal line </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> new_radius = new_point.distanceFrom(map_center) / 1000; <span style="color: green">//calculate new radius </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (new_radius < min_radius) new_radius = min_radius; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (new_radius > max_radius) new_radius = max_radius; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawCircle(map_center, new_radius); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>GEvent.addListener(CircleResizeMarker, <span style="color: #a31515">'dragend'</span>, <span style="color: blue">function</span>(point) {<span> </span><span style="color: green">//Add drag end event </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>circle_resizing = <span style="color: blue">false</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> new_point = <span style="color: blue">new</span> GLatLng(map_center.lat(), point.lng()); <span style="color: green">//to keep resize marker on horizontal line </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> new_radius = new_point.distanceFrom(map_center) / 1000; <span style="color: green">//calculate new radius </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (new_radius < min_radius) new_radius = min_radius; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">if</span> (new_radius > max_radius) new_radius = max_radius; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>drawCircle(map_center, new_radius); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Draw Circle with given radius and center </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> drawCircle(center, new_radius) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Number of nodes to form the circle </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> nodes = new_radius * 40; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span>(new_radius < 1) nodes = 40; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//calculating km/degree </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> latConv = center.distanceFrom(<span style="color: blue">new</span> GLatLng(center.lat() + 0.1, center.lng())) / 100; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> lngConv = center.distanceFrom(<span style="color: blue">new</span> GLatLng(center.lat(), center.lng() + 0.1)) / 100; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>CirclePoints = []; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> step = parseInt(360 / nodes) || 10; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> counter = 0; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">for</span> (<span style="color: blue">var</span> i = 0; i <= 360; i += step) { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">var</span> point = <span style="color: blue">new</span> GLatLng(cLat, cLng); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>CirclePoints.push(point); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>counter++; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>CircleResizeMarker.setLatLng(CirclePoints[Math.floor(counter / 4)]); <span style="color: green">//place circle resize marker </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>CirclePoints.push(CirclePoints[0]); <span style="color: green">//close the circle polygon </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span> (Circle) { map.removeOverlay(Circle); } <span style="color: green">//Remove existing Circle from Map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> fillColor = (circle_resizing || circle_moving) ? <span style="color: #a31515">'red'</span> : <span style="color: #a31515">'blue'</span>; <span style="color: green">//Set Circle Fill Color </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>Circle = <span style="color: blue">new</span> GPolygon(CirclePoints, <span style="color: #a31515">'#FF0000'</span>, 2, 1, fillColor, 0.2); <span style="color: green">//New GPolygon object for Circle </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.addOverlay(Circle); <span style="color: green">//Add Circle Overlay on the Map </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>radius = new_radius; <span style="color: green">//Set global radius </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map_center = center; <span style="color: green">//Set global map_center </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">if</span> (!circle_resizing && !circle_moving) { <span style="color: green">//Fit the circle if it is nor moving or resizing </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>fitCircle(); <br /><span style="font-family: 'Courier New'; font-size: 10pt"><span>        </span></span><span style="color: green">//Circle drawing complete trigger function goes here</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">//Fits the Map to Circle bounds </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> fitCircle() { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>bounds = Circle.getBounds(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span></p> <p></p> <p align="justify">To initialize the map you can call the functions on page load event and include a div tag inside your body to hold the Map. <br /></p> <span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">body</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">onload</span><span style="color: blue">="initialize()"</span> <span style="color: red">onunload</span><span style="color: blue">="GUnload()"> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">id</span><span style="color: blue">="map_canvas"</span> <span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">width</span>:<span style="color: blue">100%</span>; <span style="color: red">height</span>:<span style="color: blue">450px"></</span><span style="color: #a31515">div</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">body</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /> <p align="justify">Feel free to modify and use this code on your website. I have used API v2 for my code but you can easily modify this code for API v3. Happy Mapping!</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:a8c5353b-599e-4aa8-b40a-2c23eb3e68ab" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/Google+Maps" rel="tag">Google Maps</a>,<a href="http://del.icio.us/popular/Circle+Overlay" rel="tag">Circle Overlay</a>,<a href="http://del.icio.us/popular/Movable+Circle" rel="tag">Movable Circle</a>,<a href="http://del.icio.us/popular/Resizeable+Circle" rel="tag">Resizeable Circle</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com80tag:blogger.com,1999:blog-3089943449244936901.post-63621522614621567012010-03-24T14:17:00.001-05:002010-03-24T14:19:08.487-05:00JavaScript and jQuery Image Magnifier<p align="justify">In an alternate version to the Image Magnification tool from my <a href="http://web3o.blogspot.com/2010/03/dynamic-popup-image-zoom-with.html" target="_blank">previous post</a>, I have created another magnification tool which works exactly like a magnification glass moving over the picture. This tool is more concise and easy to use then the <a href="http://web3o.blogspot.com/2010/03/dynamic-popup-image-zoom-with.html" target="_blank">previous one</a> where a separate popup with the same aspect ratio was used to display the image. Here the magnified image section keeps moving with the mouse providing an exact magnification glass effect. You also don’t need any separate CSS for the magnification window.</p> <p style="margin-bottom: 0px"><strong>Why should you use this Image Magnification tool:</strong></p> <ol style="margin-top: 3px"> <li>Zero coding required. </li> <li>No CSS required at all. </li> <li>Can be triggered automatically or manually from the image. </li> <li>Works on images of any resolution or aspect ratio. </li> </ol> <p>For testing I have used a very high resolution image of <a href="http://upload.wikimedia.org/wikipedia/commons/archive/a/a9/20080922190920!TajMahal20080211-1.jpg" target="_blank">Taj Mahal</a> (4300x2724 pixels).</p> <p align="justify"><strong>This is how it looks in action:</strong><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="JavaScript Image Magnifier" border="0" alt="JavaScript Image Magnifier" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvypJrXmly4RUYk9mvJOcohJEywJyYEiY1pcFp3zAsGU03j4lWsla-zI34Bo2RgNnKzXTxpAh5elx7zt9GI-dKm01lo6yD1U38inNWBiCxr1MD-bBKrrD73OzZWPU_24V8UifqErQwb4/?imgmax=800" width="511" height="371" />The JavaScript code is very easy to understand and modify. The only thing you will need to modify for automatic magnification functionality is the <span style="font-family: "Courier New"; font-size: 10pt; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: en-us; mso-fareast-language: en-us; mso-bidi-language: ar-sa; mso-no-proof: yes">$(document).ready()</span> function where the jQuery Selectors needs to be modified to point to the images in your HTML document. You can also change the magnifier window size by changing the <em>magnifier_size</em> variable in the JavaScript Code.</p> <p align="justify"><strong>Place the following JavaScript Code in the head section of your HTML page: <br /></strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"</span><span>  </span><span style="color: red">src</span><span style="color: blue">="http://code.jquery.com/jquery-latest.js"></</span><span style="color: #a31515">script</span><span style="color: blue">></span><span>  </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"></span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Developed by: Abhinay Rathore [web3o.blogspot.com] */</span><span style="font-family: "Courier New"; font-size: 10pt"> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">$(document).ready(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">".magnify"</span>).mousemove(<span style="color: blue">function</span>(event){ moveMagnifier(<span style="color: blue">this</span>, event); }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">".magnify"</span>).mouseout(<span style="color: blue">function</span>(event){ hideMagnifier(); }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">});</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> magnifier_size = 200; <span style="color: green">//Change Magnifier size here.</span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> cursor_offset = 10; <span style="color: green">//Change Cursor Offset here.</span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> ratio, mHalf, pic_offset;</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> showMagnifier(picId, e){ <span style="color: green">//Show Magnifier</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>hideMagnifier(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Create and add magnified image to the body</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> magnifier = document.createElement(<span style="color: #a31515">"img"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>magnifier.id = <span style="color: #a31515">"magnifier"</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>magnifier.src = picId.src; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>magnifier.style.position = <span style="color: #a31515">"absolute"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>document.body.appendChild(magnifier); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Calculate size ratio of original and magnified images</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>ratio = magnifier.width / $(picId).width(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>mHalf = magnifier_size / 2; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>pic_offset = $(picId).offset(); <span style="color: green">//Picture offset</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Get mouse position on the image</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> picX = e.pageX - pic_offset.left; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> picY = e.pageY - pic_offset.top; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>clipImage(magnifier, picX, picY); <span style="color: green">//Clip the magnified image</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Position the magnified image next to mouse cursor</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>positionImage(magnifier, picX, picY, e.pageX, e.pageY) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> moveMagnifier(picId, e){ <span style="color: green">//Move Magnifier</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> magnifier = document.getElementById(<span style="color: #a31515">"magnifier"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span>(magnifier){ <span style="color: green">//If magnified image exists...</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">//Get mouse position on the image</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">var</span> picX = e.pageX - pic_offset.left; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">var</span> picY = e.pageY - pic_offset.top; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>clipImage(magnifier, picX, picY); <span style="color: green">//Clip the magnified image</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">//Position the magnified image next to mouse cursor</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>positionImage(magnifier, picX, picY, e.pageX, e.pageY) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} <span style="color: blue">else</span> { <span style="color: green">//If magnified image does not exist...</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>showMagnifier(picId, e); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> clipImage(magnifier, picX, picY){ <span style="color: green">//Clip magnified image...</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> centerX = picX * ratio; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> centerY = picY * ratio; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(magnifier).css(<span style="color: #a31515">"clip"</span>, <span style="color: #a31515">"rect("</span> + Math.round(centerY - mHalf)<span>  </span>+ <span style="color: #a31515">"px,"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                                                </span><span>   </span>Math.round(centerX + mHalf) + <span style="color: #a31515">"px,"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                                                </span><span>   </span>Math.round(centerY + mHalf) + <span style="color: #a31515">"px,"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                                                </span><span>   </span>Math.round(centerX - mHalf) + <span style="color: #a31515">"px)"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> positionImage(magnifier, picX, picY, pageX, pageY){<span>  </span><span style="color: green">//Position magnified image...</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(magnifier).css({<span style="color: #a31515">'top'</span>: pageY - (picY * ratio) + mHalf + cursor_offset, </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                        </span><span> </span><span style="color: #a31515">'left'</span>: pageX - (picX * ratio) + mHalf + cursor_offset}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> hideMagnifier(){ <span style="color: green">//Hide Magnifier</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#magnifier"</span>).remove(); <span style="color: green">//Remove the Magnifier Image</span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span>The <strong>CSS code</strong> I have used here is only to display the original images on the HTML page. You can use you own CSS styles and use the image class in the jQuery Selectors. You actually don’t need any CSS code to use this tool. You can use it directly by assigning mouse events to your images manually. <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/css"></span></span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.magnify</span><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">width</span>: <span style="color: blue">500px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">height</span>: <span style="color: blue">auto</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">cursor</span>: <span style="color: blue">crosshair</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br />The <strong>HTML Code</strong> for this image magnifier is very simple to use. If you are using CSS layout then you can use jQuery Selectors to select the images automatically. <span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">img</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">class</span><span style="color: blue">="magnify"</span> <span style="color: red">src</span><span style="color: blue">="taj.jpg"</span> <span style="color: blue">/></span></span></p> <p align="justify"><span style="font-family: "Courier New"; font-size: 10pt"><span style="color: blue"></span></span>If you want to assign Magnification feature to your images manually, you can add mouse events to your images as shows below:  <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">img</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">src</span><span style="color: blue">="taj.jpg"</span> <span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">width</span>:<span style="color: blue">500px"</span> <span style="color: red">onmousemove</span><span style="color: blue">="moveMagnifier(this, event)"</span> <span style="color: red">onmouseout</span><span style="color: blue">="hideMagnifier()"</span> <span style="color: blue">/></span></span></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:0da7c92a-ee02-443b-a930-d99f96494915" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a>,<a href="http://del.icio.us/popular/Image+Magnifier" rel="tag">Image Magnifier</a>,<a href="http://del.icio.us/popular/Image+Zoom" rel="tag">Image Zoom</a>,<a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com5tag:blogger.com,1999:blog-3089943449244936901.post-86440690283605262012010-03-18T10:17:00.001-05:002010-03-18T10:23:03.898-05:00Dynamic Popup Image Zoom with Magnifying Glass Effect using jQuery<p align="justify">Lot of times on your webpage you might want to include an image of a very large resolution but the users then have to open that image in a new window to view its details in actual resolution. In situations like that, comes in handy some kind of image zoom tool which can display the actual image resolution/details just by hovering your mouse over that. These kind of image popup zoom boxes can be seen on some merchant websites where they don’t want the customers to navigate away from their product page.</p> <p align="justify">      I have implemented a very easy to use image zoom tool where the popup appears just next to the image and the zoomed image pans based upon the mouse position on the original image giving the magnifying glass effect. This tool works with images of any resolution and aspect ratio. The zoom popup box width can be adjusted using the JavaScript and the height is automatically adjusted as per the aspect ratio of the original image.</p> <p style="margin-bottom: 0px"><strong>Why should you use this image zoom tool:</strong></p> <ol style="margin-top: 0px"> <li>Zero coding required.</li> <li>No strict HTML layout/structure needed to place the images in the document.</li> <li>Works with images of any resolution and aspect ratio.</li> <li>Just by modifying the jQuery selectors in <span style="font-family: 'Courier New'; font-size: 10pt">$(document).ready()</span> function you can assign zoom property to the images on your page. For example: to assign zoom effect to all the images on your page, just use <font face="Courier New">$(<span style="color: #a31515">"img"</span>).mouseover()</font> selector.</li> <li>Zoom area width can be easily adjusted using the JavaScript <em>zoom_width</em> variable and the height is adjusted automatically based upon the image aspect ratio.</li> <li>There is not need to have a separate thumbnail for the images to be zoomed.</li> </ol> <p align="justify"><strong>Here are a few examples of how the zooming looks like:</strong><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Dynamic Popup Image Zoom with Magnifying Glass Effect" border="0" alt="Dynamic Popup Image Zoom with Magnifying Glass Effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZBIRw1JUiLxCk8ewCZFqRgIf4Xwir2yPKb7Vtd4v6q2PJbCzYYFOV0aYdwle8a5p5Hgw6wH7HMPo0_BCw6IAminxF6G0g7qlxjeDPQA24N5qQdu0iYi68PaR7xTJ1uXlSYeiivsJnt0/?imgmax=800" width="640" height="346" /> <img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Dynamic Popup Image Zoom with Magnifying Glass Effect" border="0" alt="Dynamic Popup Image Zoom with Magnifying Glass Effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0yL1A3sP2bBkONyhZBuFpVk-00Gauf2mZrWdmDNCRQKTH7BLYpqHRQ8CZLrIldrPqHOF8TK4tdUyBaPDOQhJl1_sbrOBD6NDe-6sDrCVu3gbNikvKU8yGygbFRvmN0puw-7-9E0lkPAY/?imgmax=800" width="640" height="150" /><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Dynamic Popup Image Zoom with Magnifying Glass Effect" border="0" alt="Dynamic Popup Image Zoom with Magnifying Glass Effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFBSmYqm6_2WpwXCooy_6HW0Xdoyas5CLfnGxHxHLHi3rJhi2ufc485JUHN_2OpnWCbKxGq_xH_FJeMKIuv3Ew7eo-XFyNy0i0H9Fl8DHKRNrebGpdp8q240mjTEBBSfkFpeA7ArJ29WQ/?imgmax=800" width="640" height="187" /> </p> <p align="justify">The JavaScript code is very easy to incorporate and robust enough to handle any kind/size of images. You can use your own CSS/HTML to place the pictures in your document. When the page loads for the first time, the <span style="font-family: 'Courier New'; font-size: 10pt">$(document).ready()</span> function assigns mouse events to the pictures you want to zoom. You just need to change the jQuery selectors in the <span style="font-family: 'Courier New'; font-size: 10pt">$(document).ready()</span> function to select the images to zoom if you have a different CSS/HTML layout on your page.</p> <p align="justify">      The <em>showZoom()</em> function is triggered when the user moves the mouse over the image. <em>showZoom()</em> creates the zoom box with the image of actual resolution inside it and calculates the margin ratios required for panning the zoomed image. The <em>moveZoom()</em> function is then used the keep track of the mouse position on the actual image and pan the image in zoom box based upon the mouse position on the actual image (Magnifying Glass Effect). <em>hideZoom()</em> removes the zoom box and its child elements when the user moves the mouse out of the image thumbnail.</p> <p align="justify"><strong>JavaScript Code:</strong> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"</span><span>  </span><span style="color: red">src</span><span style="color: blue">="http://code.jquery.com/jquery-latest.js"></</span><span style="color: #a31515">script</span><span style="color: blue">></span><span>  </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Developed by: Abhinay Rathore [web3o.blogspot.com] */</span><span style="font-family: "Courier New"; font-size: 10pt"> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">$(document).ready(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">".pic_zoom > img"</span>).mouseover(<span style="color: blue">function</span>(){ showZoom(<span style="color: blue">this</span>); }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">".pic_zoom > img"</span>).mousemove(<span style="color: blue">function</span>(event){ moveZoom(<span style="color: blue">this</span>, event); }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">".pic_zoom > img"</span>).mouseout(<span style="color: blue">function</span>(){ hideZoom(); }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">});</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> zoom_width = 500; <span style="color: green">//Change zoom area width here </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">var</span><span style="font-family: "Courier New"; font-size: 10pt"> zoom_left_ratio, zoom_top_ratio;</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> showZoom(picId){ <span style="color: green">//Show Zoom window  <br /><span style="font-family: 'Courier New'; font-size: 10pt"><font color="#000000"><span>      </span>hideZoom();</font></span></span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Create and add zoom div (with image) to the body </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> zoom = document.createElement(<span style="color: #a31515">"div"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>zoom.id = <span style="color: #a31515">"zoom"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> img = document.createElement(<span style="color: #a31515">"img"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>img.src = picId.src; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>zoom.appendChild(img); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>document.body.appendChild(zoom); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Set zoom div height proportionally to the width specified above. </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> offset = $(picId).offset(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(zoom).width(zoom_width); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(zoom).height(Math.round($(zoom).width() * $(picId).height() / $(picId).width())); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(zoom).css({<span style="color: #a31515">'top'</span>: offset.top, <span style="color: #a31515">'left'</span>: offset.left + $(picId).width() + 10}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Calculate zoom ratio </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>zoom_left_ratio = ($(img).width() - $(zoom).width()) / $(picId).width(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>zoom_top_ratio = ($(img).height() - $(zoom).height()) / $(picId).height(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> moveZoom(picId, e){ <span style="color: green">//Move Zoom image </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> zoomed_img = $(<span style="color: #a31515">"#zoom > img"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> zoom = $(<span style="color: #a31515">"#zoom"</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> pic_offset = $(picId).offset(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Get mouse position on the image </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> picX = e.pageX - pic_offset.left; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> picY = e.pageY - pic_offset.top; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Calculate margins for the zoomed image </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> leftMargin = -1 * Math.round(picX * zoom_left_ratio); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">var</span> topMargin = -1 * Math.round(picY * zoom_top_ratio); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">//Ser margins for the zoomed image </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>zoomed_img.css(<span style="color: #a31515">'left'</span>, (leftMargin > 0) ? 0 : leftMargin); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span>zoomed_img.css(<span style="color: #a31515">'top'</span>, (topMargin > 0) ? 0 : topMargin); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> hideZoom(){ <span style="color: green">//Hide Zoom window </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Remove the zoom div and its children from the body </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#zoom"</span>).children().remove(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#zoom"</span>).remove(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br />A very minimal amount of CSS code is used to define the <em>div</em> tag holding the images and the properties for the zoom box. If you use your personalized CSS, then there is no need to modify the zoom box properties.</p> <p align="justify"><span style="font-family: verdana; color: #333333"><strong>CSS Code:</strong></span><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/css"> </span></span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.pic_zoom</span><span style="font-family: "Courier New"; font-size: 10pt"> {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">border</span>: <span style="color: blue">1px</span> <span style="color: blue">solid</span> <span style="color: blue">#9CF</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">width</span>: <span style="color: blue">210px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.pic_zoom</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">img</span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">width</span>: <span style="color: blue">200px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">height</span>: <span style="color: blue">auto</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">5px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">cursor</span>: <span style="color: blue">crosshair</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#zoom</span><span style="font-family: "Courier New"; font-size: 10pt"> {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">absolute</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">border</span>: <span style="color: blue">1px</span> <span style="color: blue">solid</span> <span style="color: blue">#9CF</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">overflow</span>: <span style="color: blue">hidden</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#zoom</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">img</span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">absolute</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: verdana; color: #333333">The HTML code can be modified very easily based upon the layout and style of your HTML document. you can use your own containers or place the images directly on the document. For any modifications in the CSS/HTML layout, the jQuery selectors in the <span style="font-family: 'Courier New'; font-size: 10pt">$(document).ready()</span> function needs to be modified to assign the mouse events to the images for zooming them.</span></p> <p><span style="font-family: verdana; color: #333333"><strong>HTML Code:</strong></span><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">class</span><span style="color: blue">="pic_zoom"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">img</span> <span style="color: red">src</span><span style="color: blue">="WaterLilies.jpg"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">img</span> <span style="color: red">src</span><span style="color: blue">="goldengate.jpg"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">img</span> <span style="color: red">src</span><span style="color: blue">="city.jpg"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:6fe53a72-69d4-4d90-9406-fc60309c907d" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a>,<a href="http://del.icio.us/popular/Image+Zoom" rel="tag">Image Zoom</a>,<a href="http://del.icio.us/popular/Magnifying+Glasss+Effect" rel="tag">Magnifying Glasss Effect</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com2tag:blogger.com,1999:blog-3089943449244936901.post-26622266531295563352010-03-16T09:10:00.001-05:002010-03-16T09:10:28.539-05:00Dynamic Round Cornered Tab Menu without using images<p align="justify">Tab menus are one of the most common form of navigation buttons used in web design, the most common of which is usually a round cornered tab. To make round cornered tabs, you will usually have to use images for the corners/edges to get the effect. I have implemented a dynamic Tab menu using jQuery and CSS without using images. Taking the concept from my previous post on <a href="http://web3o.blogspot.com/2009/05/round-cornered-div-tags-without-using.html" target="_blank">Round Cornered Div tags without using images</a>, I have implemented this round cornered tab menu using the nifty power of jQuery which makes it dynamic in nature.</p> <p style="margin-bottom: 3px"><strong>Why should you use this Tab Menu:</strong></p> <ol style="margin-top: 0px; padding-top: 0px"> <li>VERY easy to use and modify. </li> <li>Easy to understand and modify the CSS. </li> <li>Faster to load because no images are used.</li> <li>The <em>changeTab()</em> function can change the tab selection dynamically. </li> <li>This Tab Menu can be used with Ajax like functionalities as well where the contents can be loaded dynamically based upon the click event. </li> <li>Can be used with your dynamic code just by setting the <<em>li></em> class to ‘sel’ using your code. </li> <li>Scalable to any size by modifying the CSS only. </li> </ol> <p><strong>This is how the tabbed menu looks like:</strong><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzq16WrHOcbUP7Ncydwf-4xHrvXIgoZ43D3QLffjDVyfWGlpkGqNwNU7QA2YBlC6hThLmuaKRw4hKEDl11Nck42l-bAgmuK9Wv_L5E7TFuOJ5viUdc7OcC8_EDn8lBJyXMfwQEkpcsAGY/?imgmax=800" width="508" height="39" /></p> <p align="justify"><strong>How does it work:</strong> The trick is pretty simple; The header for every tab is set dynamically by using jQuery. When a tab selection is made, the inactive tab header is replaced by the active tab header and vice versa.</p> <p align="justify"><strong>The JavaScript/jQuery code:</strong> <br />The jQuery code is pretty simple to understand because only selectors are used to select the appropriate tab and change the CSS styles and colors. When the page loads for the first time, rounded corners and CSS is applied to the <em>li</em> tag with class ‘sel’ and a click event is assigned to all the <em>p</em> or <em>a</em> tags inside the Tab Menu. <br />    The <em>changeTab()</em> function is used to handle the tab click event for swapping the active and inactive tabs. Along with that any kind of Ajax calls or page redirects can be made based upon the tab button clicked. The <em>TabRoundedCorners()</em> function is used to populate the Tab header based upon active or inactive type.</p> <p>Put the following code in the head section of your page: <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Developed by: Abhinay Rathore [web3o.blogspot.com] */</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"</span> <span style="color: red">src</span><span style="color: blue">="http://code.jquery.com/jquery-latest.js"></</span><span style="color: #a31515">script</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">$(document).ready(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add Inactive tab round corners where class not equals to 'sel' </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class!='sel']"</span>).prepend(TabRoundedCorners(<span style="color: #a31515">'inactive'</span>)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add Active tab round corners where class equals to 'sel' </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel']"</span>).prepend(TabRoundedCorners(<span style="color: #a31515">'active'</span>)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Select tab where li class equal to 'sel' </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel'] > p"</span>).addClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel'] > a"</span>).addClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Assign click event to all the tabs </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li > p"</span>).click(<span style="color: blue">function</span>(){ changeTab(<span style="color: blue">this</span>) }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li > a"</span>).click(<span style="color: blue">function</span>(){ changeTab(<span style="color: blue">this</span>) }); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">});</span><span style="font-family: "Courier New"; font-size: 10pt"> <br /></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> changeTab(tabId)</span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Remove Active tab round corners where class equals to 'sel' </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel']"</span>).children(<span style="color: #a31515">":first-child"</span>).remove(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add Inactive tab round corners where class equals to 'sel' </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel']"</span>).prepend(TabRoundedCorners(<span style="color: #a31515">'inactive'</span>)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Remove 'sel' class for the currently selected tab </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel']"</span>).children().removeClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">"#tabs > ul > li[class='sel']"</span>).removeClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Remove Inactive rounded corners from clicked tab </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(tabId).parent().children(<span style="color: #a31515">":first-child"</span>).remove(); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add 'sel' class to p tag under clicked tab </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(tabId).parent().children(<span style="color: #a31515">":first-child"</span>).addClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add 'sel' class to the clicked tab li </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(tabId).parent().addClass(<span style="color: #a31515">'sel'</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Add Active tab round corners to the clicked tab </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(tabId).parent().prepend(TabRoundedCorners(<span style="color: #a31515">'active'</span>)); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">// Perform Action based upon the selected tab button </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">// if you are using <city w:st="on"><place w:st="on">Ajax</place></city> to change your page content </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">switch</span>($(tabId).text()) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"Home"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"Work"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"Personal"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"Blog"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"About"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">case</span> <span style="color: #a31515">"Contact"</span>: <span style="color: blue">break</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>} </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} <br /></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> TabRoundedCorners(type){</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">return</span> <span style="color: #a31515">"<div id=\'"</span> + type + <span style="color: #a31515">"_tab_rounder\'>"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: #a31515">"<div class=\'top_left\'><div class=\'top_left_inside\'>&#8226;</div></div>"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: #a31515">"<div class=\'top_right\'><div class=\'top_right_inside\'>&#8226;</div></div>"</span> + </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: #a31515">"</div>"</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span></p> <p align="justify"><strong>CSS code: <br /></strong>The CSS code contains very minimal amount of CSS for the tabs and the round cornered tab headers. There are two sets of round cornered header CSS for active and inactive tabs. To make any modifications in the size of the tabs should be done to both these sets for consistency. To change the Tab colors, you only need to replace <em>LightBlue</em> and <em>Gainsboro</em> with your custom colors values in the whole CSS section.</p> <p>Place the following CSS code in the head section of your page: <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/css"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><!<span style="color: #a31515">-- </span></span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> {</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">padding</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">ul </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">padding</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">list-style</span>: <span style="color: blue">none</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">li </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">0px</span> <span style="color: blue">1px</span> <span style="color: blue">0px</span> <span style="color: blue">1px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">float</span>: <span style="color: blue">left</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">padding</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">/*Set width to 'auto' for automatic width*/ </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">width</span>: <span style="color: blue">80px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">p</span>, <span style="color: #a31515">#tabs</span> <span style="color: #a31515">a </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">display</span>: <span style="color: blue">block</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">color</span>: <span style="color: blue">#069</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-family</span>: <span style="color: blue">Verdana,</span> <city w:st="on"><place w:st="on"><span style="color: blue">Geneva</span></place></city><span style="color: blue">,</span> <span style="color: blue">sans-serif</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-size</span>: <span style="color: blue">small</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">text-decoration</span>: <span style="color: blue">none</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">background-color</span>: <span style="color: blue">Gainsboro</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">padding</span>: <span style="color: blue">0px</span> <span style="color: blue">8px</span> <span style="color: blue">4px</span> <span style="color: blue">8px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">0px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">cursor</span>: <span style="color: blue">pointer</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">text-align</span>: <span style="color: blue">center</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">p:hover</span>, <span style="color: #a31515">#tabs</span> <span style="color: #a31515">a:hover </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">color</span>: <span style="color: blue">#FFF</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#tabs</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">p.sel</span>, <span style="color: #a31515">#tabs</span> <span style="color: #a31515">a.sel </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">color</span>: <span style="color: blue">#FFF</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">background-color</span>: <span style="color: blue">LightBlue</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-weight</span>: <span style="color: blue">bold</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt"> <br />/* Active Tab rounded corners */</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> { <span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">background-color</span>: <span style="color: blue">LightBlue</span>;} </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left</span>, <span style="color: #a31515">#active_tab_rounder</span> <span style="color: #a31515">.top_right</span> { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>     </span><span> </span><span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">width</span>: <span style="color: blue">5px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">overflow</span>: <span style="color: blue">hidden</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span>  </span><span style="color: red">background-color</span>: <span style="color: blue">White</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left</span> { <span style="color: red">float</span>: <span style="color: blue">left</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_right</span> { <span style="color: red">float</span>: <span style="color: blue">right</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left_inside</span>, <span style="color: #a31515">#active_tab_rounder</span> <span style="color: #a31515">.top_right_inside</span> { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">width</span>: <span style="color: blue">5px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-family</span>: <span style="color: blue">Arial,</span> <span style="color: blue">Helvetica,</span> <span style="color: blue">sans-serif</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-size</span>: <span style="color: blue">36px</span>; <span style="color: red">color</span>: <span style="color: blue">LightBlue</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">line-height</span>: <span style="color: blue">10px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left_inside</span> { <span style="color: red">left</span>: <span style="color: blue">-2px</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#active_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_right_inside</span> { <span style="color: red">left</span>: <span style="color: blue">-6px</span>; } </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: green; font-size: 10pt">/* Inactive Tab rounded corners */</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> { <span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">background-color</span>: <span style="color: blue">Gainsboro</span>;} </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left</span>, <span style="color: #a31515">#inactive_tab_rounder</span> <span style="color: #a31515">.top_right</span> { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">width</span>: <span style="color: blue">5px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">overflow</span>: <span style="color: blue">hidden</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span>  </span><span style="color: red">background-color</span>: <span style="color: blue">White</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left</span> { <span style="color: red">float</span>: <span style="color: blue">left</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_right</span> { <span style="color: red">float</span>: <span style="color: blue">right</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left_inside</span>, <span style="color: #a31515">#inactive_tab_rounder</span> <span style="color: #a31515">.top_right_inside</span> { </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">height</span>: <span style="color: blue">5px</span>; <span style="color: red">width</span>: <span style="color: blue">5px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-family</span>: <span style="color: blue">Arial,</span> <span style="color: blue">Helvetica,</span> <span style="color: blue">sans-serif</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-size</span>: <span style="color: blue">36px</span>; <span style="color: red">color</span>: <span style="color: blue">Gainsboro</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">position</span>: <span style="color: blue">relative</span>; <span style="color: red">line-height</span>: <span style="color: blue">10px</span>; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_left_inside</span> { <span style="color: red">left</span>: <span style="color: blue">-2px</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">#inactive_tab_rounder</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">.top_right_inside</span> { <span style="color: red">left</span>: <span style="color: blue">-6px</span>; } </span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">--></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /></p> <p><strong>HTML code: <br /></strong>The HTML code for the Tab Menu is very simple and easy to modify. The Tab Menu is represented by an unordered HTML list. The list elements can contain HTML links or Paragraph tags for tab heading. The default selected tab can be set by assigning the ‘sel’ class to the <em>li</em> tag.</p> <p>Modify and place the following code inside the your HTML page body: <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">id</span><span style="color: blue">="tabs"> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">ul</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="javascript:void(0)"></span>Home<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">p</span><span style="color: blue">></span>Work<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span> <span style="color: red">class</span><span style="color: blue">="sel"><</span><span style="color: #a31515">p</span><span style="color: blue">></span>Personal<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">p</span><span style="color: blue">></span>Blog<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">p</span><span style="color: blue">></span>About<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">p</span><span style="color: blue">></span>Contact<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">ul</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">div</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /></p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:208da1fa-0ce2-4546-bcca-47f412b5e7c3" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a>,<a href="http://del.icio.us/popular/Tabs" rel="tag">Tabs</a>,<a href="http://del.icio.us/popular/Tab+Navigation" rel="tag">Tab Navigation</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a>,<a href="http://del.icio.us/popular/CSS" rel="tag">CSS</a>,<a href="http://del.icio.us/popular/Round+Cornered+Tabs" rel="tag">Round Cornered Tabs</a></div></p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com5tag:blogger.com,1999:blog-3089943449244936901.post-86432759437958148342010-03-12T10:38:00.001-06:002010-03-12T10:41:35.519-06:00Animated Page Scrolling with jQuery<p align="justify">Many a times we use HTML links to link to some section on the same page and we link them using <em>anchor</em> tags. Using the nifty power of jQuery you can animate this effect by scrolling the page slowly when clicked on the anchor links. I have devised this easy to use function which can be used to scroll the HTML page/window to any HTML element on the page.</p> <p align="justify">The <em>ScrollTo</em> function requires the <em>id</em> of the HTML element you want to scroll to and the duration for how long the animation should run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively. You can even call this function without the duration in which case the default duration is set to 400ms.</p> <p>Just include the following <strong>JavaScript code</strong> in the head section of your HTML page: <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">src</span><span style="color: blue">="http://code.jquery.com/jquery-latest.js"></</span><span style="color: #a31515">script</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> ScrollTo(id, duration) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">{ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">if</span>(!duration) duration = 400; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue">var</span> offset = $(<span style="color: #a31515">'#'</span> + id).offset().top; </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'html,body'</span>).animate({scrollTop: offset}, duration); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">} </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /></p> <p>You can call this <em>ScrollTo</em> function from any DOM event like mouse clicks or key press. It can be used with any HTML element. Just make sure the <em>id</em> you pass to the function should be an unique id of any HTML element on the page.</p> <p><strong>HTML Examples:</strong> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">a</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">href</span><span style="color: blue">="javascript:void(0)"</span> <span style="color: red">onclick</span><span style="color: blue">="ScrollTo('placeToGo', 500)"></span>Go To Link<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">a</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">href</span><span style="color: blue">="javascript:void(0)"</span> <span style="color: red">onclick</span><span style="color: blue">="ScrollTo('placeToGo')"></span>Go To Link<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">img</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">src</span><span style="color: blue">="ClickButton.gif"</span> <span style="color: red">onclick</span><span style="color: blue">="ScrollTo('placetoGo')</span> <span style="color: blue">/></span></span></p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:3a7c1b93-018d-4012-9c6d-9be52c92c574" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a>,<a href="http://del.icio.us/popular/Animated+Scrolling" rel="tag">Animated Scrolling</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a>,<a href="http://del.icio.us/popular/Scroll" rel="tag">Scroll</a></div></p> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com1tag:blogger.com,1999:blog-3089943449244936901.post-79121619594855719112009-11-19T16:17:00.001-06:002009-11-19T16:24:32.474-06:00Draw rotated text in VB/ASP.NET using the Matrix class<p></p> <p align="justify">While working on 2D drawings in VB.NET, you might find yourself in a situation where you may want to rotate a text or any other object on the drawing canvas. I discovered this technique when I was trying to draw my text vertically from bottom to top and the <em><a href="http://msdn.microsoft.com/en-us/library/system.drawing.stringformat.aspx" target="_blank">System.Drawing.StringFormat</a></em> class’s built in vertical text format would only support top to bottom layout. Then I discovered the <em><a href="http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.matrix.aspx" target="_blank">System.Drawing.Drawing2D.Matrix</a></em> class which is used for geometric transformation. Using the Matrix class you can rotate the drawing canvas to any desired angle, draw the text/object and then rotate it back to the original position.</p> <p><strong>Example of rotated text: <br /></strong><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="Rotated text in VB .NET" border="0" alt="Rotated text in VB .NET" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj634uKhcAHlTk2BnKMd-MXkkSjYHSgZV7Z-_iPfGVRWdaQmKMVv1G4M21K6d0pvrMzUCk5zQuzFrOHo8B8zIvTkR-09geShexpFO5cVh74whmSKjeeSsTl0EqLwaVy_4K08yTZ-DgDIgM/?imgmax=800" width="320" height="320" /> </p> <p>I have implemented the drawing by using ASP.NET web application where the drawing is generated by an <em>aspx</em> page. To view the image in web browser, you just need to create an HTML image tag on a new page and set the image source(<em>src</em>) to the .<em>aspx</em> file. The .<em>aspx</em> file code to generate a sample PNG file is given below. The main functionality for rotating the text is implemented in the <em>RotateString</em> subroutine which is provided with the <em>text</em>, rotation <em>angle</em>, and the <em>x</em> and <em>y</em> coordinates.</p> <span style="font-family: "Courier New"; color: blue; font-size: 10pt">Imports</span><span style="font-family: "Courier New"; font-size: 10pt"> System.Drawing</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">Imports</span><span style="font-family: "Courier New"; font-size: 10pt"> System.IO</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">Imports</span><span style="font-family: "Courier New"; font-size: 10pt"> System.Drawing.Drawing2D</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">Partial</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: blue">Public</span> <span style="color: blue">Class</span> TextImageDraw </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Inherits</span> System.Web.UI.Page </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: green">'Dimensions of the bitmap </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Const</span> DRAWING_HEIGHT <span style="color: blue">As</span> <span style="color: blue">Integer</span> = 300 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Const</span> DRAWING_WIDTH <span style="color: blue">As</span> <span style="color: blue">Integer</span> = 300 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Dim</span> bitmap <span style="color: blue">As</span> <span style="color: blue">New</span> Bitmap(DRAWING_WIDTH, DRAWING_HEIGHT) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Dim</span> myDrawing <span style="color: blue">As</span> Graphics = Graphics.FromImage(bitmap) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Page_Load(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> System.EventArgs) <span style="color: blue">Handles</span> <span style="color: blue">Me</span>.Load </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> myDrawingBackgroundColor <span style="color: blue">As</span> <span style="color: blue">New</span> SolidBrush(Color.AliceBlue) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Fill Drawing Background </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.FillRectangle(myDrawingBackgroundColor, 0, 0, DRAWING_WIDTH, DRAWING_HEIGHT) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.TextRenderingHint = Text.TextRenderingHint.AntiAlias </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> myText <span style="color: blue">As</span> <span style="color: blue">String</span> = <span style="color: #a31515">"<span>   </span>web3o.blogspot.com" </span></span> <br /><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Text Rotation Cordinates </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> xCordinate <span style="color: blue">As</span> <span style="color: blue">Integer</span> = DRAWING_WIDTH / 2 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> yCordinate <span style="color: blue">As</span> <span style="color: blue">Integer</span> = DRAWING_HEIGHT / 2 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'<place w:st="on"><placename w:st="on">Draw</placename> <placename w:st="on">Rotation</placename> <placetype w:st="on">Center</placetype></place> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.DrawEllipse(Pens.Black, <span style="color: blue">New</span> Rectangle(xCordinate - 1, yCordinate - 1, 3, 3)) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Draw Header Text </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> headingText <span style="color: blue">As</span> <span style="color: blue">String</span> = <span style="color: #a31515">"Rotating Text" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> headingFont <span style="color: blue">As</span> Font = <span style="color: blue">New</span> Font(<span style="color: #a31515">"arial"</span>, FontSize.XLarge, FontStyle.Regular) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> headingTextWidth <span style="color: blue">As</span> <span style="color: blue">Double</span> = myDrawing.MeasureString(headingText, headingFont).Width </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> headingTextHeight <span style="color: blue">As</span> <span style="color: blue">Double</span> = myDrawing.MeasureString(headingText, headingFont).Height </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.DrawString(headingText, headingFont, Brushes.Red, _ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                             </span>(DRAWING_WIDTH - headingTextWidth) / 2, 2) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Draw Text in 360 degrees with 30 degree interval </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">For</span> angle = 0 <span style="color: blue">To</span> 330 <span style="color: blue">Step</span> 30 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>RotateString(myText, angle, xCordinate, yCordinate) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Next </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Draw Footer Text </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.DrawString(headingText, headingFont, Brushes.Red, _ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                            </span>(DRAWING_WIDTH - headingTextWidth) / 2, _ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                            </span>DRAWING_HEIGHT - headingTextHeight - 2) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Set smoothing mode for the drawing to Anti-alias </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Write the image to browser... </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>Response.ClearContent() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>Response.ContentType = <span style="color: #a31515">"image/png" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> mem <span style="color: blue">As</span> <span style="color: blue">New</span> MemoryStream() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>bitmap.Save(mem, System.Drawing.Imaging.ImageFormat.Png) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>mem.WriteTo(Response.OutputStream) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.Dispose() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>bitmap.Dispose() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Private</span> <span style="color: blue">Sub</span> RotateString(<span style="color: blue">ByVal</span> Text <span style="color: blue">As</span> <span style="color: blue">String</span>, <span style="color: blue">ByVal</span> angle <span style="color: blue">As</span> <span style="color: blue">Integer</span>, _ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                             </span><span style="color: blue">ByVal</span> x <span style="color: blue">As</span> <span style="color: blue">Integer</span>, <span style="color: blue">ByVal</span> y <span style="color: blue">As</span> <span style="color: blue">Integer</span>) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> myFont <span style="color: blue">As</span> Font = <span style="color: blue">New</span> Font(<span style="color: #a31515">"arial"</span>, FontSize.XLarge, FontStyle.Regular) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> myColor <span style="color: blue">As</span> SolidBrush = <span style="color: blue">New</span> SolidBrush(Color.Black) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">' Make a rotation matrix </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> myMatrix <span style="color: blue">As</span> <span style="color: blue">New</span> Matrix </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myMatrix.RotateAt(angle * -1, <span style="color: blue">New</span> Point(x, y)) <span style="color: green">'Rotate drawing </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.Transform = myMatrix </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.DrawString(Text, myFont, myColor, x, y) <span style="color: green">'Draw the text string </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myMatrix.RotateAt(angle, <span style="color: blue">New</span> Point(x, y)) <span style="color: green">'Rotate back </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>myDrawing.Transform = myMatrix </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">End</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: blue">Class</span></span> <br /> <p></p> <p></p> <p>You can just copy the <em>RotateString</em> subroutine to your code and pass the <em>Graphics</em> class object along with other parameters to draw the rotated string on it.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:9e301774-5d5d-4005-917c-a21f8bd2489d" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/ASP.NEt" rel="tag">ASP.NEt</a>,<a href="http://del.icio.us/popular/VB.NET" rel="tag">VB.NET</a>,<a href="http://del.icio.us/popular/Rotate+Text" rel="tag">Rotate Text</a>,<a href="http://del.icio.us/popular/Matrix+Transform" rel="tag">Matrix Transform</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com1tag:blogger.com,1999:blog-3089943449244936901.post-64791701712111252012009-11-19T10:05:00.001-06:002009-11-19T11:29:38.879-06:00Multiple File Uploads in ASP.NET with Add/Remove and Up/Down functionalities<p align="justify">HTML or ASP.NET does not allows you to select more then one file in a single file upload input field. To work around this shortcoming you will either have to add dynamic file upload fields by using JavaScript or use a single file upload field to upload the files one by one.</p> <p align="justify">I have devised a nifty technique by using the ASP.NET <em>ListBox</em> control to keep track of the added files and manage them. You can add/remove or change the upload order of the files before uploading them all to your server/database. Sometimes the order of your file upload is also very important and it becomes more easier with this technique where you can arrange them by using the Up/Down controls.</p> <p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Multiple File Uploads in ASP.NET" border="0" alt="Multiple File Uploads in ASP.NET" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsp6lzEj2BHLcvD3UqDgHrCDazK9Oq-ainsUgHoKuW_QvakLg_rNPwWHfvxkruhhF_R5uZmcgcTxoUxtJRIf6PjB4rPhYvaFC-isBd9HQH1KO2gS4eZDYbQwLADNXkzkCvVocyyj2KcLc/?imgmax=800" width="361" height="202" /> </p> <p align="justify">The code for the .aspx file is pretty straight forward with a <em>FileUpload</em> control, a <em>ListBox</em> control and buttons to handle all the functionalities. You can even implement this code as an ASP.NET User Control for your project. </p> <p><strong>Here is the File Upload code for .aspx file: <br /></strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">table</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">td</span> <span style="color: red">colspan</span><span style="color: blue">="2"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">font</span> <span style="color: red">color</span><span style="color: blue">="red"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Label</span> <span style="color: red">ID</span><span style="color: blue">="Message"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">=""></</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Label</span><span style="color: blue">></</span><span style="color: #a31515">font</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">td</span> <span style="color: red">colspan</span><span style="color: blue">="2"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">FileUpload</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">id</span><span style="color: blue">="FileUploader"</span> <span style="color: red">Width</span><span style="color: blue">="300"></</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">FileUpload</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span> <span style="color: red">ID</span><span style="color: blue">="FileListBox"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Width</span><span style="color: blue">="300"</span> <span style="color: red">Rows</span><span style="color: blue">="5"</span> <span style="color: red">SelectionMode</span><span style="color: blue">="Single"</span> <span style="color: red">BackColor</span><span style="color: blue">="AliceBlue"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Button</span> <span style="color: red">ID</span><span style="color: blue">="Up"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">="&uarr;"</span> <span style="color: red">Font-Bold</span><span style="color: blue">="true"</span> <span style="color: red">Font-Size</span><span style="color: blue">="Large"</span> <span style="color: blue">/><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Button</span> <span style="color: red">ID</span><span style="color: blue">="Down"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">="&darr;"</span> <span style="color: red">Font-Bold</span><span style="color: blue">="true"</span> <span style="color: red">Font-Size</span><span style="color: blue">="Large"</span> <span style="color: blue">/><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">td</span> <span style="color: red">colspan</span><span style="color: blue">="2"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Button</span> <span style="color: red">ID</span><span style="color: blue">="Add"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">="Add"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Button</span> <span style="color: red">ID</span><span style="color: blue">="Remove"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">="Remove"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Button</span> <span style="color: red">ID</span><span style="color: blue">="Upload"</span> <span style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">Text</span><span style="color: blue">="Upload"</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">tr</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">table</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">> </span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">br</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: blue">/><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">asp</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">:</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">Literal</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">ID</span><span style="color: blue">="FileList"</span> <span style="color: red">runat</span><span style="color: blue">="server"></</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">Literal</span><span style="color: blue">> </span></span> <br /></p> <p align="justify">The backend code in VB is also pretty easy to understand with subroutines to handle the button click events. To keep track of all the files added to the list we use a <em>Listbox</em> control and to store the <em>HttpInputFile</em> objects we use a global <em>ArrayList</em> named <em>Files.</em> For saving the files I have used an example of storing the files in a Database using stored procedure, but you can always save the file to your server itself by using the <font face="Courier New">HIF.PostedFile.SaveAs</font> method. Detailed description for the functionality of each button click event subroutine is given below:</p> <ul> <li><strong>Add_Click</strong>: Fires when the user browses a file and click on the Add button. Error checking is done to ensure if the <em>FileUpload</em> control has input file, if the file size is not zero and does the file already exists in the list or not. After error checking is passed, the file name is added to to List Box and also to the global <em>ArrayList</em> which holds the object to the <em>HttpInputFile</em> class. </li> <li><strong>Remove_Click</strong>: This subroutine simply removes the file name at selected index from the List Box and from the <em>Files</em> Array. </li> <li><strong>Up_Click</strong>: The position of the selected item is switched with the item on top of it in the List Box and the Array List. </li> <li><strong>Down_Click</strong>: The position of the selected item is switched with the item below it in the List Box and the Array List. </li> <li><strong>Upload_Click</strong>: All the files in the <em>Files</em> Array are uploaded to the database using stored procedure. </li> </ul> <p><strong>Here is the VB file code for the File Uploader:</strong></p> <span style="font-family: "Courier New"; color: blue; font-size: 10pt">Imports</span><span style="font-family: "Courier New"; font-size: 10pt"> System.Data.SqlClient</span> <br /> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">Partial</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: blue">Public</span> <span style="color: blue">Class</span> _Default </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Inherits</span> System.Web.UI.Page </span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Public</span> <span style="color: blue">Shared</span> Files <span style="color: blue">As</span> ArrayList = <span style="color: blue">New</span> ArrayList() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Page_Load(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> System.EventArgs) <span style="color: blue">Handles</span> <span style="color: blue">Me</span>.Load </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Add_Click(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> EventArgs) <span style="color: blue">Handles</span> Add.Click </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Try </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Message.Text = <span style="color: #a31515">"" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">If</span> FileUploader.HasFile <span style="color: blue">Then</span> <span style="color: green">'Check if file exists... </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue">If</span> FileUploader.PostedFile.ContentLength > 0 <span style="color: blue">Then</span> <span style="color: green">'Check file size </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue">If</span> FileListBox.Items.Contains(<span style="color: blue">New</span> ListItem(System.IO.Path.GetFileName(FileUploader.PostedFile.FileName))) <span style="color: blue">Then </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                        </span>Message.Text = <span style="color: #a31515">"File already in the list!" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue">Else </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                        </span>Files.Add(FileUploader) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                        </span>FileListBox.Items.Add(System.IO.Path.GetFileName(FileUploader.PostedFile.FileName)) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                        </span>Message.Text = <span style="color: #a31515">"Add another file or click Upload to save them all..." </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue">Else </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span>Message.Text = <span style="color: #a31515">"File size cannot be 0!" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Else </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>Message.Text = <span style="color: #a31515">"Please select a file to add!" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Catch</span> ex <span style="color: blue">As</span> Exception </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">' Handle Error </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">End</span> <span style="color: blue">Try </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Remove_Click(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> EventArgs) <span style="color: blue">Handles</span> Remove.Click </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">If</span> FileListBox.Items.Count > 0 <span style="color: blue">Then </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">If</span> FileListBox.SelectedIndex < 0 <span style="color: blue">Then </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>Message.Text = <span style="color: #a31515">"Please select a file to remove!" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Else </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>Files.RemoveAt(FileListBox.SelectedIndex) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>FileListBox.Items.Remove(FileListBox.SelectedItem.Text) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>        </span>Message.Text = <span style="color: #a31515">"File removed..." </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Up_Click(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> EventArgs) <span style="color: blue">Handles</span> Up.Click </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">If</span> FileListBox.Items.Count > 1 <span style="color: blue">AndAlso</span> FileListBox.SelectedIndex > 0 <span style="color: blue">Then </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> index <span style="color: blue">As</span> <span style="color: blue">Integer</span> = FileListBox.SelectedIndex </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> toMove <span style="color: blue">As</span> <span style="color: blue">String</span> = FileListBox.SelectedValue </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">'Move up filename in ListBox </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.Insert(index - 1, toMove) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.RemoveAt(index + 1) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.Item(index - 1).Selected = <span style="color: blue">True </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">'Move up file in Files ArrayList </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> TempFileHandle <span style="color: blue">As</span> FileUpload = Files(index - 1) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Files(index - 1) = Files(index) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Files(index) = TempFileHandle </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Down_Click(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> EventArgs) <span style="color: blue">Handles</span> Down.Click </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">If</span> FileListBox.Items.Count > 1 <span style="color: blue">AndAlso</span> FileListBox.SelectedIndex < FileListBox.Items.Count - 1 <span style="color: blue">Then </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> index <span style="color: blue">As</span> <span style="color: blue">Integer</span> = FileListBox.SelectedIndex + 1 </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> toMove <span style="color: blue">As</span> <span style="color: blue">String</span> = FileListBox.Items.Item(index).Text </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">'Move down filename in ListBox </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.Insert(index - 1, toMove) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.RemoveAt(index + 1) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileListBox.Items.Item(index).Selected = <span style="color: blue">True </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: green">'Move down file in Files ArrayList </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> TempFileHandle <span style="color: blue">As</span> FileUpload = Files(index - 1) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Files(index - 1) = Files(index) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Files(index) = TempFileHandle </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">End</span> <span style="color: blue">If </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">Protected</span> <span style="color: blue">Sub</span> Upload_Click(<span style="color: blue">ByVal</span> sender <span style="color: blue">As</span> <span style="color: blue">Object</span>, <span style="color: blue">ByVal</span> e <span style="color: blue">As</span> EventArgs) <span style="color: blue">Handles</span> Upload.Click </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Dim</span> conn <span style="color: blue">As</span> SqlConnection = <span style="color: blue">New</span> SqlConnection(<span style="color: #a31515">""</span>) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>conn.Open() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">For</span> <span style="color: blue">Each</span> HIF <span style="color: blue">As</span> FileUpload <span style="color: blue">In</span> Files </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>FileList.Text += <span style="color: #a31515">"Uploading file: "</span> & HIF.PostedFile.FileName + <span style="color: #a31515">"<br />"</span> + vbCrLf </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> fileBytes(HIF.PostedFile.InputStream.Length) <span style="color: blue">As</span> <span style="color: blue">Byte </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>HIF.PostedFile.InputStream.Read(fileBytes, 0, fileBytes.Length) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">Dim</span> Command <span style="color: blue">As</span> <span style="color: blue">New</span> SqlCommand </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">With</span> Command </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Connection = conn </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.CommandType = CommandType.StoredProcedure </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.CommandText = <span style="color: #a31515">"upload_files" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@id"</span>, System.Guid.NewGuid.ToString()) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@name"</span>, System.IO.Path.GetFileName(HIF.PostedFile.FileName)) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@size"</span>, HIF.PostedFile.ContentLength) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@type"</span>, HIF.PostedFile.ContentType) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@file"</span>, fileBytes) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>                </span>.Parameters.AddWithValue(<span style="color: #a31515">"@dateadded"</span>, DateTime.Now()) </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">End</span> <span style="color: blue">With </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Command.ExecuteNonQuery() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue">Next </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>conn.Close() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>Message.Text = <span style="color: #a31515">"" </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Clear Files ArrayList </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>Files.Clear() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: green">'Clear File List Box </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>        </span>FileListBox.Items.Clear() </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue">End</span> <span style="color: blue">Sub </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">End</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: blue">Class</span></span> <br /> <p>This implementation contains very minimal amount of code to attain the desired functionalities, you can always add more error checking or styles to suit your website design.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:ce392c8d-f6b6-4fb0-8fc1-9f9fd0aab411" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/ASP.NET" rel="tag">ASP.NET</a>,<a href="http://del.icio.us/popular/Multiple+File+Upload" rel="tag">Multiple File Upload</a>,<a href="http://del.icio.us/popular/VB.NET" rel="tag">VB.NET</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com4tag:blogger.com,1999:blog-3089943449244936901.post-34523365922587004082009-11-13T09:35:00.001-06:002009-11-13T10:16:17.039-06:00Making Checkboxes behave like Radio Buttons using jQuery<p>Sometimes you might need Checkboxes to behave like Radio Buttons on your webpage because you may only want zero or one selection from a category of choices. You cannot select 0 or 1 choice from a Radio Button Group because Radio Button groups are meant to select only one choice from a group.</p> <p>I have written an easy to use and understand code in <em>jQuery</em> for achieving this task. In this example, all the checkboxes with name <em>Colors</em> are assigned a click function (Checkbox_to_RadioButton()) when the page loads for the first time. The Checkbox_to_RadioButton() is a generic function which will automatically uncheck all other other checkboxes with the same name/group.</p> <p>Too make this work on your page, you just need to paste this JavaScript code in the head section of your webpage and set the Checkbox group name in the page ready function.</p> <p><strong>JavaScript Code: <br /></strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"</span> <span style="color: red">src</span><span style="color: blue">="http://jqueryui.com/latest/jquery-1.3.2.js"></</span><span style="color: #a31515">script</span><span style="color: blue">> <br /></span></span><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> </span></span> <br /><span style="font-family: "Courier New"; font-size: 10pt">$(document).ready(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'input:checkbox[name=Colors]'</span>).click(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>Checkbox_to_RadioButton(<span style="color: blue">this</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">});</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> Checkbox_to_RadioButton(box){</span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'input:checkbox[name='</span> + box.name + <span style="color: #a31515">']'</span>).each(<span style="color: blue">function</span>(){ </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">if</span> (<span style="color: blue">this</span> != box) $(<span style="color: blue">this</span>).attr(<span style="color: #a31515">'checked'</span>, <span style="color: blue">false</span>); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>}); </span> <br /><span style="font-family: "Courier New"; font-size: 10pt">}</span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br /></p> <p><strong>HTML Code: <br /></strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">input</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="checkbox"</span> <span style="color: red">name</span><span style="color: blue">="Colors"</span> <span style="color: red">value</span><span style="color: blue">="Red"</span> <span style="color: blue">/></span>Red<span style="color: blue"><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">input</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="checkbox"</span> <span style="color: red">name</span><span style="color: blue">="Colors"</span> <span style="color: red">value</span><span style="color: blue">="Blue"</span> <span style="color: blue">/></span>Blue<span style="color: blue"><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">input</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="checkbox"</span> <span style="color: red">name</span><span style="color: blue">="Colors"</span> <span style="color: red">value</span><span style="color: blue">="Green"</span> <span style="color: blue">/></span>Green<span style="color: blue"><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">input</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="checkbox"</span> <span style="color: red">name</span><span style="color: blue">="Colors"</span> <span style="color: red">value</span><span style="color: blue">="Yellow"</span> <span style="color: blue">/></span>Yellow<span style="color: blue"><</span><span style="color: #a31515">br</span> <span style="color: blue">/> </span></span> <br /></p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:1195a609-acb9-4985-a418-72a195d25a45" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a>,<a href="http://del.icio.us/popular/Checkbox" rel="tag">Checkbox</a>,<a href="http://del.icio.us/popular/Radio+Button" rel="tag">Radio Button</a>,<a href="http://del.icio.us/popular/Checkbox+as+Radio+button" rel="tag">Checkbox as Radio button</a></div> Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com7tag:blogger.com,1999:blog-3089943449244936901.post-50344977623660917202009-09-18T14:26:00.002-05:002011-01-18T08:36:44.119-06:00jQuery Animated Tree Menu<p align="justify">Tree Menu is another important form of navigation menu and is used widely where the content has to be organized in a tree or windows folder like structures. To design our Tree Menu we’ll be using simple unordered lists in HTML and the power of jQuery to animate it. With little CSS trick I have implemented 2 different styles of tree, one by placing the node icon at branch end and second by placing node icon at branch bifurcation.</p><p style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"><strong>Benefits of using this Tree Menu:</strong></p><ol style="margin-top: 0px"><li>Zero coding required. </li>
<li>jQuery based Menu compliant with all the browsers. </li>
<li>Easy to manipulate jQuery code. </li>
<li>Functionality for Expanding, Contracting, and Toggling the nodes in one click. </li>
<li>Choose between 2 different styles just by editing only two lines in CSS code. </li>
<li>Minimal CSS used which you can modify based upon your preferences. </li>
</ol><p style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" align="left"><strong>This is how the two styles look like:</strong></p><table border="0" cellspacing="1" cellpadding="2" width="600" align="center"><tbody>
<tr> <td valign="top" width="300"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="jQuery Tree Menu" border="0" alt="jQuery Tree Menu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju73P0MPjlOI37R1ZCCvTC4-twpwHGVDOKV_HTVlE5Pfnk0Rld_Mz-d_0gTGHAf3dZw9P_BBbfoU4TcQ_T94uwfniMGx0MzT0ENyQZjFf9u8uZ0OQ_4K0Kcd5EPwKimv7Refb1MEOZZVE/?imgmax=800" width="287" height="458" /> </td> <td valign="top" width="300"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="jQuery Tree Menu" border="0" alt="jQuery Tree Menu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy4qQjcPHjUFzEdtA6FirHcezF2zjTGorGeZLWgITIs-1QNK-Jsr9Q6Dv_dyWmTHKxkq7A_ve3S-9Qu35qd9oDiMhjqY8U3ba5Q8kq7gKRKelckBlTAZPfmfRVSmfLkB-oCOCRH0-PQNU/?imgmax=800" width="287" height="458" /></td> </tr>
<tr> <td valign="top" width="300" align="center"><strong>Style 1:</strong> Node icon at branch end. </td> <td valign="top" width="300" align="center"><strong>Style 2:</strong> Node icon at branch division. </td> </tr>
</tbody></table><p style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> </p><p style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">Download other images used for tree branch and nodes (click on image to open in new window):</p><table border="0" cellspacing="1" cellpadding="1" width="399" align="center"><tbody>
<tr> <td style="background-color: #abcdef" valign="top" width="99"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2zvbbfYoQsJi51YkqrSqNBvi_mbFSzfUfJM40gowm3zTGMOrW1WPvEySiwDA0tLCxHVVr8gAUfw5EEyCurcpCzHO9jX7IdXj3-jF0C0ISm058TdwRMigZOUvxKetri3X9myFvHSAG5I/s1600-h/plus%5B12%5D.gif" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="plus" border="0" alt="plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvAy2F6Zkd3xMS3MNRk2pWDOYpJV9jhv0xMMMRKCmVIpcjUf-dJUKJIChMTC5yuvLC4dtrF2cb2YZqSxScyC6i9A9idLwxmtHQPz057b1ywuLrQ1YVljTbYj_Gs1LD7Z7EYqn0tZic0M/?imgmax=800" width="9" height="9" /></a></td> <td style="background-color: #abcdef" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXJkzXnF4rNldlbf6I1FsVj1m_2Gf_d_EsJKntdiqofyckVHiQSpqB1SifuDfyhxaFNTmJfXOn4IQhpdj23bKUZbPEtuGsu2Knr19FEZ0OdP_ZZjavIHs-aztK05RlMjdJ7gKlS9cVZU/s1600-h/minus%5B5%5D.gif" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="minus" border="0" alt="minus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcJQ-Ou9PDw45VlYg2KeGn2112kw5FJDwtqCgADuQ223AzIDOc7-Kf8BQdzwO4ZffVlkzyul4T8FzD1fH_APDDs7GkPahLmPLwoGKGLwcI2sPbulVt_eulCa8nIL1CNBHpLYXZM_9ADw/?imgmax=800" width="9" height="9" /></a> </td> <td style="background-color: #abcdef" valign="top" width="97"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJO52Ahy1wjCdTdJUD895dlj1bA_RaaP26E6ZQUwZ77INWc2RDA3ogj29ku-KoVwjCKNTq0lej-rpvMHackQeEkXkW8dDvCQzdJQsKVgDSCGbtKYukJ0ydDW4vKeW8qonmRQrzRb6tHwU/s1600-h/blank%5B6%5D.gif" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="blank" border="0" alt="blank" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTIylF1p8G0QgjHxitsZ4iD7IldZyFB2pFiZA2SMcm-IM3hmhbmOutvTakyzBOaNJwoKQxFUiCC-2r4UYlS4gofrDpJ3HdM6Cn_H1kM7CLx5NSosH0KXXDXv-VceQtIbtJ48AV7WzQDc/?imgmax=800" width="9" height="9" /></a> </td> <td style="background-color: #abcdef" valign="top" width="96"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIM2JH3eRN-is4O_-VNkpfze2PtewaLQHjXID2GZgDzvk-eZSz0X6kuuz23p3ibxIreZ551dQDzlSZXh-CoUeUuUDo8flMqS0ZHj9mWsTBewC94SbJ42gO2TPICdxQXiKN7ESRregIuuw/s1600-h/branch%5B13%5D.png" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="branch" border="0" alt="branch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wLRvMXwENIkYCAE5Lbk-2tjkvHQzAYmKIZTJZfI-RVyWtMkmz6hOiY63FG1VsyIinA5FdtxU070o_xHClq9KFinYtVQsiNrxbaFq5VfazGmpWKqURwVWd8AIVtFqvDi4EoCgN4YH46E/?imgmax=800" width="6" height="13" /></a> </td> </tr>
<tr> <td style="background-color: #abcdef" valign="top" width="99" align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2zvbbfYoQsJi51YkqrSqNBvi_mbFSzfUfJM40gowm3zTGMOrW1WPvEySiwDA0tLCxHVVr8gAUfw5EEyCurcpCzHO9jX7IdXj3-jF0C0ISm058TdwRMigZOUvxKetri3X9myFvHSAG5I/s1600-h/plus%5B12%5D.gif" target="_blank"><em>plus.gif</em></a> </td> <td style="background-color: #abcdef" valign="top" width="101" align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXJkzXnF4rNldlbf6I1FsVj1m_2Gf_d_EsJKntdiqofyckVHiQSpqB1SifuDfyhxaFNTmJfXOn4IQhpdj23bKUZbPEtuGsu2Knr19FEZ0OdP_ZZjavIHs-aztK05RlMjdJ7gKlS9cVZU/s1600-h/minus%5B5%5D.gif" target="_blank"><em>minus.gif</em></a> </td> <td style="background-color: #abcdef" valign="top" width="97" align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdr5SyukWYjYAmqjZRZ4xMbzp7BdpbDdQJxBWvjLOOB8JxRhbp8LBpliXtC7_EDbFD218P4Pnw0BdummpiHnurSUXuRXfRsmYelffIlkOuzUpcZWeZ5AeJFplZOQBjSF91p6Ux03e8HoI/s1600-h/blank%5B5%5D.gif" target="_blank"><em>blank.gif</em></a> </td> <td style="background-color: #abcdef" valign="top" width="97" align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIM2JH3eRN-is4O_-VNkpfze2PtewaLQHjXID2GZgDzvk-eZSz0X6kuuz23p3ibxIreZ551dQDzlSZXh-CoUeUuUDo8flMqS0ZHj9mWsTBewC94SbJ42gO2TPICdxQXiKN7ESRregIuuw/s1600-h/branch%5B13%5D.png" target="_blank"><em>branch.png</em></a> </td> </tr>
</tbody></table><p style="margin-bottom: 5px" align="justify">Using the mighty power of jQuery, performing tedious operation on HTML DOM elements like selection and animation just becomes more and more easy. Using jQuery this task has been accomplished in less then 10 lines whereas in traditional JavaScript it would have taken up close to 100 lines. I have used nested unordered lists (<em>ul</em>) inside list items (<em>li</em>) to create child tree’s so I’ve implemented jQuery selection wrapper as <strong>li:has(ul)</strong> to select all <em>li</em> nodes with children <em>ul</em>. The JavaScript code is pretty easy to understand, initially when the page loads the tree is initialized as follows:</p><ol style="margin-top: 0px"><li>All tree nodes with children (<font color="#000080" face="Courier New">$('.tree li:has(ul)')</font>) are assigned the <em>plus</em> node icon and all the child nodes are hidden initially. </li>
<li>A click event is assigned to all nodes with children (<font color="#000080" face="Courier New">$('.tree li:has(ul)')</font>). Click event uses the <em>toggle</em> function to show/hide the children of any node and change node icons. </li>
<li>All leaf nodes (<font color="#000080" face="Courier New">$('.tree li:not(:has(ul))')</font>) are assigned blank node icon. </li>
<li>Every last child’s (<font color="#000080" face="Courier New">$('.tree li:last-child')</font>) background images is changed to give the branch ending effect. </li>
</ol><p align="justify">Apart from the initialization function I’ve also provided functions for single click Expansion, Contraction and Toggling of Tree nodes. jQuery’s show and hide functions are used to show/hide the children. The toggling and show/hide speeds can be set to ‘slow’, ‘normal’, or ‘fast’.</p><p>Put the following JavaScript code in the head section of your page. <br />
<strong>JavaScript Code:</strong> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"</span> <span style="color: red">src</span><span style="color: blue">="http://jqueryui.com/latest/jquery-1.3.2.js"></</span><span style="color: #a31515">script</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/javascript"> <br />
<span style="color: green">//Developed By: Abhinay Rathore <br />
<span style="color: green">//Blog: web3o.blogspot.com</span></span></span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">$(<span style="color: blue">function</span>(){ <span style="color: green">//initialize Tree Menu when page loads... </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//For all nodes with children under tree: hide all child nodes initially and change list image </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).css({cursor:<span style="color: #a31515">'pointer'</span>,<span style="color: #a31515">'list-style-image'</span>:<span style="color: #a31515">'url(plus.gif)'</span>}).children().hide(); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Assign Click event to all nodes with children </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).click(<span style="color: blue">function</span>(event){ </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">if</span> (<span style="color: blue">this</span> == event.target) { <span style="color: green">//if target element of the event matches 'this' </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span>  </span><span style="color: green">//toggle list image and show/hide children using toggle('fast') method </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span>  </span>$(<span style="color: blue">this</span>).css(<span style="color: #a31515">'list-style-image'</span>, ($(<span style="color: blue">this</span>).children().is(<span style="color: #a31515">':hidden'</span>)) ? <span style="color: #a31515">'url(minus.gif)'</span> : <span style="color: #a31515">'url(plus.gif)'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span>  </span>$(<span style="color: blue">this</span>).children().toggle(<span style="color: #a31515">'fast'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span>} </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue">return</span> <span style="color: blue">true</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>}); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//For all nodes with no children: change list image to blank </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:not(:has(ul))'</span>).css({cursor: <span style="color: #a31515">'pointer'</span>,<span style="color: #a31515">'list-style-image'</span>:<span style="color: #a31515">'url(blank.gif)'</span>}); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">//Change Background image for every last child </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:last-child'</span>).css({<span style="color: #a31515">'background'</span>:<span style="color: #a31515">'url(branch.png) 0px -1970px no-repeat'</span>}); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">});</span> <br />
<span style="font-family: "Courier New"; color: green; font-size: 10pt">//Expand all tree nodes</span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> ExpandTree(){</span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).css(<span style="color: #a31515">'list-style-image'</span>, <span style="color: #a31515">'url(minus.gif)'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).children().show(<span style="color: #a31515">'fast'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: green; font-size: 10pt">//Contract all tree nodes</span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> ContractTree(){</span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).css(<span style="color: #a31515">'list-style-image'</span>, <span style="color: #a31515">'url(plus.gif)'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).children().hide(<span style="color: #a31515">'fast'</span>); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: green; font-size: 10pt">//Toggle all tree nodes</span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt">function</span><span style="font-family: "Courier New"; font-size: 10pt"> ToggleTree(){</span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span>$(<span style="color: #a31515">'.tree li:has(ul)'</span>).click(); </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">script</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> </p><p align="justify">I have created this Tree Menu with minimal CSS required. You can add extra styling to match the color and styling of your website. For switching between the two styles shown above, you can make the appropriate changes in the CSS as shown in comments below. If you want to change the font size or margins on the tree nodes, you might have to adjust the CSS along with the branch image provided in this post.</p><p><strong>CSS Code: <br />
</strong><span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">type</span><span style="color: blue">="text/css"> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><!<span style="color: #a31515">-- </span></span> <br />
<span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.tree</span><span style="font-family: "Courier New"; font-size: 10pt"> {</span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-family</span>: <span style="color: blue">Verdana,</span> <city w:st="on"><place w:st="on"><span style="color: blue">Geneva</span></place></city><span style="color: blue">,</span> <span style="color: blue">sans-serif</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">font-size</span>: <span style="color: blue">small</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">10px</span>; <span style="color: red">padding</span>: <span style="color: blue">0px</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.tree</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">ul</span> { <span style="color: red">margin</span>: <span style="color: blue">0px</span>;<span> </span><span style="color: red">padding</span>: <span style="color: blue">0px</span>; } <span style="color: green">/* Disable this for 2nd Style */ </span></span> <br />
<span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.tree</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">li</span> { </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">padding</span>: <span style="color: blue">5px</span> <span style="color: blue">0</span> <span style="color: blue">1px</span> <span style="color: blue">30px</span>; <span style="color: green">/* Use this for 1st Style */ </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: green">/*padding: 5px 0 1px 10px; /* Use this for 2nd Style */ </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">margin</span>: <span style="color: blue">-3px</span> <span style="color: blue">0px</span> <span style="color: blue">0px</span> <span style="color: blue">-10px</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">background</span>: <span style="color: blue">url(branch.png)</span> <span style="color: blue">0px</span> <span style="color: blue">0px</span> <span style="color: blue">no-repeat</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">list-style-position</span>: <span style="color: blue">inside</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">.tree</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: #a31515">a</span>{ </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: red">text-decoration</span>: <span style="color: blue">none</span>; </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt">}</span> <br />
<span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">--></span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">style</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> </p><p align="justify">The HTML code for the Tree Menu only consists of unordered list or items nested inside each other. Every list item (<em>li</em>) is considered a leaf node unless another unordered list (<em>ul</em>) is nested inside it. You can either use links or text inside list items. There is no restriction on the depth of the tree. I have also provided 3 links as examples on top to use for the one-click toggling functions.</p><p><strong>HTML Code:</strong> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">a</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">href</span><span style="color: blue">="javascript:ExpandTree()"></span>Expand All<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></span> | </span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">a</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">href</span><span style="color: blue">="javascript:ContractTree()"></span>Contract All<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></span> | </span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">a</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">href</span><span style="color: blue">="javascript:ToggleTree()"></span>Toggle All<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></span></span><span style="font-family: "Courier New"; color: blue; font-size: 10pt"> <br />
</span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"><</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">ul</span><span style="font-family: "Courier New"; font-size: 10pt"> <span style="color: red">class</span><span style="color: blue">="tree"> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 1 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span>  </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 1.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 2 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 1.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 1.2<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 3 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 3.2 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.2.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.2.2<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 3.2.3 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                            </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.2.3.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                            </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.2.3.2<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span>        </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>        </span><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 3.3<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 4 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>          </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>          </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 4.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>          </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 4.2 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>              </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                  </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 4.2.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>                  </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 4.2.2<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>              </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>          </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>          </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">></span>Item 5 </span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span>  </span><span style="color: blue"><</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 5.1<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>            </span><span style="color: blue"><</span><span style="color: #a31515">li</span><span style="color: blue">><</span><span style="color: #a31515">a</span> <span style="color: red">href</span><span style="color: blue">="#"></span>Item 5.2<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>      </span><span style="color: blue"></</span><span style="color: #a31515">ul</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; font-size: 10pt"><span>    </span><span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">> </span></span> <br />
<span style="font-family: "Courier New"; color: blue; font-size: 10pt"></</span><span style="font-family: "Courier New"; color: #a31515; font-size: 10pt">ul</span><span style="font-family: "Courier New"; color: blue; font-size: 10pt">></span> <br />
</p><p>Looking at the Tree Menu code above and comparing it with the functionality it provides, you must have realized the power of jQuery which make HTML DOM selection and event handling so seamless and easy to use.</p><p></p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:6388fbce-76a9-410a-b769-ac1e425cf44c" class="wlWriterEditableSmartContent">del.icio.us Tags: <a href="http://del.icio.us/popular/jQuery" rel="tag">jQuery</a>,<a href="http://del.icio.us/popular/JavaScript" rel="tag">JavaScript</a>,<a href="http://del.icio.us/popular/Tree+Menu" rel="tag">Tree Menu</a></div>Abhinay Rathorehttp://www.blogger.com/profile/00671868616942347147noreply@blogger.com12