tag:blogger.com,1999:blog-50813287444302578722024-03-08T10:41:00.713-08:00Make an N-tier architecture And give Stylish effect with Ajax & JavascriptKrunalhttp://www.blogger.com/profile/04242353408598622857noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-5081328744430257872.post-44859940626799264372008-09-04T03:52:00.000-07:002008-09-04T04:00:55.467-07:00Benefits of using the n-tiered approach for web applicationsThe concept of tiered architectures in application development is evolving from a 1- tier approach to an n-tiered approach. While all approaches have their benefits, the nature of web-based applications lend themselves to an n-tiered approach.<br /><div style="text-align: justify;"><br /></div>This article describes some basic tiered architectures and explains some of the benefits of adopting an n-tiered approach to web application development.<br /><br /><table style="text-align: left; margin-left: 0px; margin-right: 0px;" border="0" cellpadding="0" cellspacing="0" width="80%"><tbody><tr><td class="mmbody" align="left" valign="top"><p>Before delving into explanations of the various tiered architecture, an important first step is to clarify what exactly "architecture" represents. In the context of this article, architecture refers to the blue print, or the underlying schematics used to map out or design a web application. The basic concept of a tiered architecture involves breaking up an application into logical chunks, or tiers, each of which is assigned general or specific roles. Tiers can be located on different machines or on the same machine where they are virtually or conceptually separate from one another. The more tiers used, the more specific each tier's role.</p> <p><b>How many tiers?</b><br /> A 1-tier architecture is the most basic setup because it involves a single tier on a single machine. Think of an application that runs on your PC: Everything you need to run the application (data storage, business logic, user interface, and so forth) is wrapped up together. An example of a 1-tiered application is a basic word processor or a desktop file utility program. Although the 1-tier approach is a simple design that's easy to distribute, it does not scale well. In addition, because you are limited to running the entire application (including the user interface) on single machine, a 1-tier architecture does not adequately address the needs of a web-based application.</p> <p>A 2-tier architecture is the basic terminal-to-server or browser-to-server relationship. You could have a "smart" client that performs most of the work talking to a "dumb" server; or, more commonly, a "dumb" client talking to a "smart" server. Sometimes you have both. In essence, the client handles the display, the server handles the database, and the business logic is contained on one or both of the two tiers. An example of a 2-tier approach is the basic web model where a web server serves pages to a web browser. Another example of a 2-tier approach is a specialized terminal-to-server application. </p> <p>Although the 2-tier approach increases scalability and separates the display and database layers, it does not truly separate the application into highly specialized, functional layers. Because of this lack of specialization, most applications quickly outgrow this model.</p> <p>A 3-tier architecture is the most common approach used for web applications today. In the typical example of this model, the web browser acts as the client, an application server (such as Macromedia ColdFusion) handles the business logic, and a separate tier (such as Oracle or MySQL database servers) handles database functions. </p> <p>Although the 3-tier approach increases scalability and introduces a separation of business logic from the display and database layers, it does not truly separate the application into specialized, functional layers. For prototype or simple web applications, a 3-tier architecture may be sufficient. However, with complex demands placed on web applications, a 3-tiered approach falls short in several key areas, including flexibility and scalability. These shortcomings occur mainly because the business logic tier is still too broad- it has too many functions grouped into one tier that could be separated out into a finer grained model.</p> </td> </tr> <tr> <td class="mmbody" align="left" valign="top"><br /></td> </tr> <tr> <td class="mmbody" align="left" valign="top" height="410"><img style="width: 352px; height: 365px;" src="http://www.adobe.com/devnet/coldfusion/articles/ntier/3tier.jpg" alt="Conventional 3-tier architecture" /></td> </tr> <tr> <td class="mmbody" align="left" valign="top"><br /></td> </tr> <tr> <td class="mmbody" align="left" valign="top"><p>This is where an n-tier architecture can provide a suitable structure for your application. The letter "n" stands for any number of tiers. Traditionally, it starts with a basic 3-tier model and expands on it to allow for greater performance, scalability, and a host of other benefits. The single most important benefit of an n-tiered architecture, compared to a 3-tier approach, is breaking up the business logic from the application-server level into a more fine-grained model. More details on this and other benefits of an n-tiered architecture are discussed below.</p> <p><b>Example of an n-tiered architecture</b><br /> This example shows a generic shopping-cart web application. The tiers used for this example include the client, presentation, business logic, integration, and data. </p> <p>The client tier represents how the user interacts with your sample application. Because this is a web-based application, the client will use a browser for this task. For a rich user experience, you might use Macromedia Flash MX. Additionally, the Macromedia Flash MX footprint is small and you can include auto-detection and auto-installation so that requiring it in your application is seamless to the user.</p> <p>The presentation tier represents the dynamic creation of display code (HTML) that is sent to the user's browser. This layer dynamically displays information, such as merchandise and the contents of your shopping cart. It communicates with the other tiers by way of outputting the results to the client tier (browser) and all other tiers by calling custom tags, calling database stored procedure, invoking ColdFusion components (CFCs), calling Enterprise JavaBeans (EJBs), calling web services, and so forth. This layer is the glue that holds the entire application together. It binds all of the tiers and ensures that the client sees what was requested in the browser. A typical tool for this tier is an application server, such as Macromedia ColdFusion or Macromedia JRun. As I mentioned before, you may want to use Macromedia Flash MX.</p> <p>The business logic tier represents the core functionality of your application. It performs low-level code and number crunching. In the shopping-cart example, business logic calculates sales tax and shipping costs and performs credit card authorizations. Pull this logic out of the presentation tier and place it into its own tier. Common tools you can use to encapsulate business logic include EJBs, web services, database stored procedures, CFCs, or very specialized JavaServer Pages (JSP) or ColdFusion custom tags or templates. </p> <p>The integration tier encapsulates the functionality required for an application to talk to the data tier, or sometimes the business logic tier, in an easy-to-use format. This way, a developer working on the presentation tier can focus on HTML and output, and simply call the custom tag, CFC, EJB, web service, and so forth, without knowing the low-level details of database interaction or object invocation. Furthermore, if you change database vendors you won't break any presentation tier code that may include vendor-specific functionality. Simply adjust your custom tag library and let the presentation-tier developers focus on presentation content.</p> <p>Some common tools you can use to build the integration tier are CFCs, web services, ColdFusion custom tags, or JSP custom tags. For example, in a shopping-cart application, you might have a simple custom tag that hides all of the complexities of querying a database to get detailed inventory information. </p> <p>The data tier is the final tier of your application. The most common solutions for this level are database servers such as Oracle, MySQL, and Microsoft SQL Server. Pulling your data into its own tier is one of the most important steps you can take to break up an application. Not only does it keep the data neutral (not tied into your application server or business logic, and so forth), but it has the added benefit of improved performance and scalability. As your data needs increase, you can move this tier to its own (or a more powerful) machine and eventually to its own cluster of machines. </p> <p><b>Applying an n-tiered architecture to a sample application</b><br /> The following example illustrates how all of the tiers would work together in the fictional shopping-cart application. This example focuses specifically on what takes place behind the scenes to calculate and display sales tax for an order.</p> <p>First, the presentation tier calls a business tier custom tag, EJB, CFC, and so forth that performs a series of calculations on the contents of the shopping cart to compute a total sales price. The business logic tier pulls up the appropriate tax rate from the database by working with the integration tier (a custom tag, CFC, and so forth). A simple call to the integration tier masks the complexities of talking to the data tier and retrieves the required tax rate so that the business logic can finish its task. Once the business logic tier calculates the sales tax, the presentation tier takes over and formats the results and passes it to the client tier (web browser) for display.</p> </td> </tr> <tr> <td class="mmbody" align="left" valign="top"><br /></td> </tr> <tr> <td class="mmbody" align="left" valign="top" height="403"><img style="width: 376px; height: 403px;" src="http://www.adobe.com/devnet/coldfusion/articles/ntier/example.jpg" alt="Example of an n-tiered architecture" /></td> </tr> <tr> <td class="mmbody" align="left" valign="top"><br /></td> </tr> <tr> <td class="mmbody" align="left" valign="top"><p><b>Benefits of an n-tiered model</b><br /> Separating the responsibilities of an application into multiple tiers makes it easier to scale the application. For example, look again at the sample shopping-cart application. If you are on a limited budget, begin by running all the tiers on a single machine. As traffic increases and performance starts to suffer, separate each tier on its own machine and eventually cluster some or all of the tiers on multiple machines.</p> <p>An n-tiered architecture allows you to separate the workload better for developers. By breaking design into tiers, developers with different specialties can focus on a tier that best suits their skill set. You can let your graphic artists and Macromedia Flash experts focus on the presentation tier, while the Oracle database administrator focuses on the data tier and database-stored procedures. </p> <p>An n-tiered model also makes an application more readable and its components more reusable. By separating an application into tiers you make it much harder to fall into the trap of writing spaghetti code-which refers to huge line counts of code with a complex, tangled control structure and deeply nested if-then statements. Simply put, you can only place so much logic on a single template before readability and maintainability suffer. Also, it's easier to port a custom tag library, CFC, or EJB to a new application than directly by cutting and pasting logic from a messy template. </p> <p>Finally, an n-tiered approach makes your applications more robust by eliminating a single point of failure. For example, if you decide to change database vendors you won't have to hunt through every single template of your application to make the necessary changes. Simply replace the data tier and adjust the applicable portions of the integration tier to query the new database. You will not break the business logic or, more importantly, presentation tier code. Suppose your user interface requirements change. To take advantage of Macromedia Flash in the new user interface, simply replace the applicable portions of the presentation layer. No other tiers are broken or need to be modified based on the presentation layer changes. If you were still using a 3-tier architecture where your business logic is intermingled with your presentation logic, you would have to hunt and pick over most of your code in order to implement this type of a change.</p> <p>The concept of tiered architectures in application development has evolved from one tier to n tiers. While all approaches have their benefits, the nature of web-based applications lend themselves to an n-tiered approach. You can let specific parts of your team focus on their specialties and create highly scalable, reusable, and robust applications. </p></td></tr></tbody></table>Krunalhttp://www.blogger.com/profile/04242353408598622857noreply@blogger.com13tag:blogger.com,1999:blog-5081328744430257872.post-14491201611738456972008-09-04T03:16:00.000-07:002008-09-04T21:45:39.232-07:0060 More Ajax & Javascript Solutions for Professional coding..<a href="http://greghoustondesign.com/demos/mocha/">Mocha UI</a><br /><p>Mocha is a web applications user interface library built on the Mootools javascript Framework.</p><p>The Mocha GUI components are made with<br /></p> <p class="showcase"><a href="http://greghoustondesign.com/demos/mocha/"><img src="file:///C:/Documents%20and%20Settings/user/Desktop/60%20More%20AJAX-%20and%20Javascript%20Solutions%20For%20Professional%20Coding%20_%20Developer%27s%20Toolbox%20_%20Smashing%20Magazine_files/ajax-21.jpg" alt="" /></a></p> <p><a href="http://www.filamentgroup.com/lab/developing_an_accessible_slider/">An Accessible Slider</a><br />“Recently we designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.”</p> <p class="showcase"><a href="http://www.filamentgroup.com/lab/developing_an_accessible_slider/"><img src="http://88.198.60.17/images/ajax2/ajax-05.jpg" alt="AJAX Screenshot" width="378" height="130" /></a></p> <p><a href="http://digitarald.de/playground/uplooad.html">FancyUpload</a><br />Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.</p> <p class="showcase"><a href="http://digitarald.de/playground/uplooad.html" title="FancyUpload"><img src="http://88.198.60.17/images/ajax2/ajax-23.jpg" alt="Modalbox" width="353" height="278" /></a></p> <p><a href="http://jqueryfordesigners.com/coda-popup-bubbles/">Coda Popup Bubbles</a><br />“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”</p> <p class="showcase"><a href="http://jqueryfordesigners.com/coda-popup-bubbles/"><img src="http://88.198.60.17/images/ajax2/ajax-04.jpg" alt="AJAX Screenshot" width="400" height="234" /></a></p> <p><a href="http://devthought.com/textboxlist-meets-autocompletion/">Facebook Style Input Box</a><br />The approach to re-create the <strong>autocomplete method</strong> of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”</p> <p class="showcase"><a href="http://devthought.com/textboxlist-meets-autocompletion/"><img style="width: 395px; height: 189px;" src="http://88.198.60.17/images/ajax2/auto.png" alt="Screenshot" /></a></p> <p><a href="http://developer.yahoo.com/yui/examples/editor/index.html">Rich Text Editor</a><br />The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon <a href="http://developer.yahoo.com/yui/">Yahoo UI Library</a>.</p> <p class="showcase"><a href="http://developer.yahoo.com/yui/examples/editor/index.html"><img style="width: 411px; height: 265px;" src="http://88.198.60.17/images/ajax2/texteditor.png" alt="Texteditor" title="Texteditor" /></a></p> <p><a href="http://zendold.lojcomm.com.br/icarousel/">iCarousel</a><br />iCarousel is an open source (free) javascript tool for creating carousel like widgets.</p> <p class="showcase"><a href="http://zendold.lojcomm.com.br/icarousel/"><img style="width: 411px; height: 360px;" src="http://88.198.60.17/images/ajax2/screenshot-22.jpg" /></a></p> <p><a href="http://extjs.com/">Ext JS - JavaScript Library</a><br />An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications.</p> <p class="showcase"><a href="http://extjs.com/"><img style="width: 413px; height: 431px;" src="http://88.198.60.17/images/ajax2/ext.png" alt="ext" /></a></p> <p><a href="http://www.unwieldy.net/moowheel/">Moo Wheel</a><br />The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas>-object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.</canvas></p> <p class="showcase"><a href="http://www.unwieldy.net/moowheel/"><img src="http://88.198.60.17/images/ajax2/ajax-15.jpg" alt="AJAX Screenshot" width="400" height="323" /></a></p> <p><a href="http://jqueryfordesigners.com/slider-gallery/">Product Slider</a><br />This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.</p> <p class="showcase"><a href="http://jqueryfordesigners.com/slider-gallery/"><img src="http://88.198.60.17/images/ajax2/ajax-06.jpg" alt="AJAX Screenshot" width="400" height="181" /></a></p> <p><a href="http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx">Taggify Tooltips</a><br />This post demonstrates how you can use <a href="http://www.taggify.net/">Taggify widget</a> to enhance your blog with the functionality to show popup tooltips for parts of your images.</p> <p class="showcase"><a href="http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx"><img src="http://88.198.60.17/images/ajax2/ajax-09.jpg" alt="AJAX Screenshot" width="400" height="455" /></a></p> <p><a href="http://woork.blogspot.com/2008/02/gettyone-like-search-options-menu-with.html">Gettyone Search Options Menu</a><br />Learn how to implement a <a href="http://www.gettyone.com/">Gettyone</a>-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.</p> <p class="showcase"><a href="http://woork.blogspot.com/2008/02/gettyone-like-search-options-menu-with.html"><img src="http://88.198.60.17/images/ajax2/ajax-16.jpg" alt="AJAX Screenshot" width="334" height="226" /></a></p> <p><a href="http://ibolmo.com/projects/moocanvas/">Moo Canvas</a><br />Modern browser support the <canvas> tag to allow 2D command-based drawing. This script provides the third dimension, allowing for browser drawing with pure JavaScript. To use, web developers only need to include a single script tag in their existing web pages.</canvas></p> <p class="showcase"><a href="http://ibolmo.com/projects/moocanvas/"><img src="http://88.198.60.17/images/ajax2/ajax-13.jpg" alt="AJAX Screenshot" width="400" height="240" /></a></p> <p><a href="http://ecosmear.com/relay/">Relay - Ajax Directory Manager</a><br />Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.</p> <p class="showcase"><a href="http://ecosmear.com/relay/"><img src="http://88.198.60.17/images/ajax2/ajax-00.jpg" alt="AJAX Screenshot" width="398" height="434" /></a></p> <p><a href="http://www.glassbox-js.com/">GlassBox</a><br />GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).</p> <p class="showcase"><a href="http://www.glassbox-js.com/"><img src="http://88.198.60.17/images/ajax2/ajax-11.jpg" alt="AJAX Screenshot" width="400" height="312" /></a></p> <p><a href="http://qgallery.quadrifolia.de/">qGallery</a><br />qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.</p> <p class="showcase"><a href="http://qgallery.quadrifolia.de/"><img src="http://88.198.60.17/images/ajax2/ajax-12.jpg" alt="AJAX Screenshot" width="400" height="260" /></a></p> <p><a href="http://amberjack.org/">Amberjack</a><br />Amberjack is a lightweight Open Source library, enabling you to create site tours. The JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize.</p> <p class="showcase"><a href="http://amberjack.org/"><img src="http://88.198.60.17/images/ajax2/ajax-01.jpg" alt="AJAX Screenshot" width="402" height="304" /></a></p> <p><a href="http://gwt-ext.com/">GWT-Ext Widget Library</a><br />GWT-Ext is a powerful widget library that provides rich widgets like <strong>Grid with sort, paging and filtering</strong>, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses <a href="http://code.google.com/webtoolkit/">GWT</a> and <a href="http://extjs.com/">Ext</a>.</p> <p class="showcase"><a href="http://gwt-ext.com/"><img style="width: 403px; height: 228px;" src="http://88.198.60.17/images/ajax2/gwt.png" alt="Screenshot" /></a></p> <p><a href="http://webplicity.net/flexigrid/">Flexigrid</a><br />Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.</p> <p class="showcase"><a href="http://webplicity.net/flexigrid/"><img style="width: 405px; height: 277px;" src="http://88.198.60.17/images/ajax2/screenshot-18.jpg" /></a></p> <p><a href="http://www.deliciousdays.com/cforms-plugin/">cforms II</a><br />cforms is a plugin for WordPress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page. The form submission utilizes AJAX, falls back, however, to a standard method in case AJAX/Javascript is not supported or disabled.</p> <p class="showcase"><a href="http://www.deliciousdays.com/cforms-plugin/"><img src="http://88.198.60.17/images/ajax2/ajax-02.jpg" alt="AJAX Screenshot" width="400" height="404" /></a></p> <p><a href="http://digitalbush.com/projects/masked-input-plugin">Masked Input Plugin</a><br />A masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.</p> <p class="showcase"><a href="http://digitalbush.com/projects/masked-input-plugin"><img src="http://88.198.60.17/images/ajax2/ajax-03.jpg" alt="AJAX Screenshot" width="400" height="270" /></a></p> <p><a href="http://creativepony.com/journal/scripts/sliding-tabs/">Oversized Sliding Tabs</a><br />Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s <a href="http://www.panic.com/coda/">Coda site</a>, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar <a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/">jQuery solution</a>.</p> <p class="showcase"><a href="http://creativepony.com/journal/scripts/sliding-tabs/"><img src="http://88.198.60.17/images/ajax2/ajax-22.jpg" alt="AJAX Screenshot" width="400" height="345" /></a></p> <p><a href="http://widowmaker.kiev.ua/checkbox/">Custom Checkbox with jQuery</a><br />This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.</p> <p class="showcase"><a href="http://widowmaker.kiev.ua/checkbox/"><img src="http://88.198.60.17/images/ajax2/ajax-07.jpg" alt="AJAX Screenshot" width="385" height="169" /></a></p> <p><a href="http://nicedit.com/">NicEdit</a><br />NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. </p> <p class="showcase"><a href="http://nicedit.com/"><img src="http://88.198.60.17/images/ajax2/edi.gif" alt="AJAX Screenshot" width="400" height="112" /></a></p> <p><a href="http://www.ajaxim.com/">AJAX Instant Messenger</a><br />is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this "web application" to work, as everything is updated in real-time via JavaScript.</p> <p class="showcase"><a href="http://www.ajaxim.com/"><img src="http://88.198.60.17/images/ajax2/ajaxim.gif" alt="AJAX Screenshot" width="243" height="183" /></a></p> <p><a href="http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html">Mootools animated sidebar menu</a><br />This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.</p> <p class="showcase"><a href="http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html"><img src="http://88.198.60.17/images/ajax2/moomenu.jpg" alt="AJAX Screenshot" width="400" height="116" /></a></p> <p><a href="http://www.livevalidation.com/">LiveValidation</a><br />LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.</p> <p class="showcase"><a href="http://www.livevalidation.com/"><img src="http://88.198.60.17/images/ajax2/livevalid.gif" alt="AJAX Screenshot" width="400" height="195" /></a></p> <p><a href="http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html">Creating a table with dynamically highlighted columns</a><br />There is a number of impressive things happening within this small area. </p> <p class="showcase"><a href="http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html"><img src="http://88.198.60.17/images/ajax2/cssguy.gif" alt="AJAX Screenshot" width="400" height="298" /></a></p> <p><a href="http://cssglobe.com/lab/tablecloth/">Tablecloth</a><br />Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.</p> <p class="showcase"><a href="http://cssglobe.com/lab/tablecloth/"><img src="http://88.198.60.17/images/ajax2/tablecloth.gif" alt="AJAX Screenshot" width="400" height="250" /></a></p> <p><a href="http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script">Unobtrusive Table Actions Script</a><br />An attempt at writing an unobtrusive (and fast) script that adds commonly required "actions" to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects</p> <p class="showcase"><a href="http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script"><img src="http://88.198.60.17/images/ajax2/table.gif" alt="AJAX Screenshot" width="401" height="264" /></a></p> <p><a href="http://lipidity.com/fancy-form/">FancyForm</a><br />FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.</p> <p class="showcase"><a href="http://lipidity.com/fancy-form/"><img src="http://88.198.60.17/images/ajax2/fancyform.gif" alt="AJAX Screenshot" width="400" height="252" /></a></p> <p><a href="http://www.nickstakenburg.com/projects/starbox/">Starbox</a><br />Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.</p> <p class="showcase"><a href="http://www.nickstakenburg.com/projects/starbox/"><img src="http://88.198.60.17/images/ajax2/starbox.gif" alt="AJAX Screenshot" width="400" height="219" /></a></p> <p><a href="http://cssglobe.com/post/1202/searchfield-unobtrusive-search-field-solution">Style Your Website’s Search Field with JS/CSS</a><br />Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before.</p> <p class="showcase"><a href="http://cssglobe.com/post/1202/searchfield-unobtrusive-search-field-solution"><img src="http://88.198.60.17/images/ajax2/search.jpg" alt="AJAX Screenshot" width="400" height="268" /></a></p> <p><a href="http://ajaxorized.com/introducing-the-sliding-date-picker/">The sliding Date-Picker</a><br />Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. </p> <p class="showcase"><a href="http://ajaxorized.com/introducing-the-sliding-date-picker/"><img src="http://88.198.60.17/images/ajax2/slider.gif" alt="AJAX Screenshot" width="400" height="136" /></a></p> <p><a href="http://www.prototype-ui.com/">Carousel</a><br />Prototype UI. Carousel are great to display a large set of data like images. </p> <p class="showcase"><a href="http://www.prototype-ui.com/"><img src="http://88.198.60.17/images/ajax2/carousel.jpg" alt="AJAX Screenshot" width="400" height="245" /></a></p> <p><a href="http://minishowcase.frwrd.net/">minishowcase</a><br />minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.</p> <p class="showcase"><a href="http://minishowcase.frwrd.net/"><img src="http://88.198.60.17/images/ajax2/minishow.jpg" alt="AJAX Screenshot" width="399" height="291" /></a></p> <p><a href="http://simile.mit.edu/timeline/">Timeline</a><br />Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.</p> <p class="showcase"><a href="http://simile.mit.edu/timeline/"><img src="http://88.198.60.17/images/ajax2/timeline.gif" alt="AJAX Screenshot" width="400" height="209" /></a></p> <p><a href="http://icant.co.uk/sandbox/ajax-code-display/">Displaying source code with Ajax</a><br />The script fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers.</p> <p class="showcase"><a href="http://icant.co.uk/sandbox/ajax-code-display/"><img src="http://88.198.60.17/images/ajax2/code.gif" alt="AJAX Screenshot" width="400" height="258" /></a></p> <p><a href="http://www.artviper.net/test/ajaxslide/">mooSlideBox 3</a><br />The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.</p> <p class="showcase"><a href="http://www.artviper.net/test/ajaxslide/"><img src="http://88.198.60.17/images/ajax2/slidebox.gif" alt="AJAX Screenshot" width="400" height="146" /></a></p> <p><a href="http://www.reindel.com/accessible_news_slider">Accessible News Slider</a><br />Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.</p> <p class="showcase"><a href="http://www.reindel.com/accessible_news_slider"><img src="http://88.198.60.17/images/ajax2/newsslider.gif" alt="AJAX Screenshot" width="398" height="128" /></a></p> <p><a href="http://www.bram.us/projects/js_bramus/jsprogressbarhandler/">jsProgressBarHandler</a> (Dynamic Unobtrusive Javascript Progress/Percentage Bar)<br />jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.</p> <p class="showcase"><a href="http://www.bram.us/projects/js_bramus/jsprogressbarhandler/"><img src="http://88.198.60.17/images/ajax2/progress.gif" alt="AJAX Screenshot" width="400" height="363" /></a></p> <p><a href="http://mattberseth.com/blog/2008/01/cnn_style_scrolling_ticker_wit.html">CNN Style Scrolling Ticker with the Marquee Toolkit Control</a><br />Besides scrolling the items from right to left, the liScroll plugin supports two additional features</p> <p class="showcase"><a href="http://mattberseth.com/blog/2008/01/cnn_style_scrolling_ticker_wit.html"><img src="http://88.198.60.17/images/ajax2/ticker.gif" alt="AJAX Screenshot" width="400" height="136" /></a></p> <p><a href="http://www.artviper.net/moosocialize.php">mooSocialize - ajax based social bookmark widget</a><br />Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. </p> <p class="showcase"><a href="http://www.artviper.net/moosocialize.php"><img src="http://88.198.60.17/images/ajax2/artviper.jpg" alt="AJAX Screenshot" width="403" height="307" /></a></p> <p><a href="http://blog.lavablast.com/post/2008/01/CheckBoxList-hover-extender.aspx">CheckBoxList hover extender</a><br />“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”</p> <p class="showcase"><a href="http://blog.lavablast.com/post/2008/01/CheckBoxList-hover-extender.aspx"><img src="http://88.198.60.17/images/ajax2/check.jpg" alt="AJAX Screenshot" width="400" height="176" /></a></p> <p><a href="http://parkerfox.parkerfox.railsplayground.net/cornerz/">Cornerz</a><br />Bullet Proof Corners plugin for jQuery using Canvas/VML</p> <p class="showcase"><a href="http://parkerfox.parkerfox.railsplayground.net/cornerz/"><img src="http://88.198.60.17/images/ajax2/corners.gif" alt="AJAX Screenshot" width="400" height="299" /></a></p> <p><a href="http://www.nickstakenburg.com/projects/lightview/">Lightview</a><br />Lightview was built to change the way you overlay content on a website. Works on all modern browsers</p> <p class="showcase"><a href="http://www.nickstakenburg.com/projects/lightview/"><img src="http://88.198.60.17/images/ajax2/lightview.jpg" alt="AJAX Screenshot" width="400" height="245" /></a></p> <p><a href="http://stickmanlabs.com/lightwindow/">lightWindow</a><br />Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.</p> <p class="showcase"><a href="http://stickmanlabs.com/lightwindow/"><img src="http://88.198.60.17/images/ajax2/ajax-17.jpg" alt="AJAX Screenshot" width="400" height="304" /></a></p> <p><a href="http://www.eulerian.com/en/opensource/datepicker-prototype-scriptaculous">DatePicker using Prototype and Scriptaculous</a><br />An unobtrusive and flexible date picker widget which uses Prototype and Scriptaculous libraries. <a href="http://www.smileycat.com/design_elements/calendars_date_pickers/">52 More Calendars and Date Picker Designs</a>.</p> <p class="showcase"><a href="http://www.eulerian.com/en/opensource/datepicker-prototype-scriptaculous" title="Datepicker"><img src="http://88.198.60.17/images/ajax2/datepicker.png" alt="Date Picker" width="187" height="204" /></a></p> <p><a href="http://wildbit.com/demos/modalbox/">ModalBox</a><br />ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional pop-ups and page reloads.</p> <p class="showcase"><a href="http://wildbit.com/demos/modalbox/" title="Modalbox"><img style="width: 408px; height: 419px;" src="http://88.198.60.17/images/ajax2/modalbox.png" alt="Modalbox" /></a></p> <p><a href="http://www.stickmanlabs.com/accordion/">Accordion v2.0</a><br />A lightweight accordion that is built with <a href="http://script.aculo.us/">Scriptaculous</a>, has vertical, horizontal and nested styles and works properly in every browser.</p> <p class="showcase"><a href="http://www.stickmanlabs.com/accordion/"><img src="http://88.198.60.17/images/ajax2/ajax-20.jpg" alt="Ajax Script" width="400" height="183" /></a></p> <p><a href="http://www.wait-till-i.com/index.php?p=484">New unobtrusive dynamic flickr badge</a><br />A compact Flickr-Badge for presentation of Flickr-images with a navigation option.</p> <p class="showcase"><a href="http://www.wait-till-i.com/index.php?p=484"><img style="width: 404px; height: 147px;" src="http://88.198.60.17/images/ajax2/flickrbadge.png" alt="Flickrbadge" /></a></p> <p><a href="http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html">13 Awesome Javascript CSS Menus</a><br />13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things <a href="http://www.dynamicdrive.com/dynamicindex1/slashdot.htm">Slashdot Menu</a> and <a href="http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools">Sexy Sliding Menu</a> displayed below.</p> <p class="showcase"><a href="http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html"><img style="width: 400px; height: 175px;" src="http://88.198.60.17/images/ajax2/menu1.gif" alt="CSS Menu" /></a></p> <p class="showcase"><a href="http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html"><img style="width: 402px; height: 177px;" src="http://88.198.60.17/images/ajax2/menu2.gif" alt="CSS Menu" /></a></p> <h3><br /></h3>Krunalhttp://www.blogger.com/profile/04242353408598622857noreply@blogger.com1tag:blogger.com,1999:blog-5081328744430257872.post-19444833798804113492008-09-03T04:26:00.000-07:002008-09-03T04:31:59.749-07:00Make N -tier Application for Yr Website<pre style="white-space: pre-wrap;"><p style="margin: 0cm 0cm 0pt; font-weight: bold;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">N-tier application helps us distribute the overall functionality into various tiers or layers. </span></p><p style="margin: 0cm 0cm 0pt;"> </p><p style="margin: 0cm 0cm 0pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">They are as follows:</span></p><p style="margin: 0cm 0cm 0pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">1) Presentation Layer<br />2) Business Layer<br />3) Data Access Layer<br />4) Database/Data store </span></p><p style="margin: 0cm 0cm 0pt;"> </p><p style="margin: 0cm 0cm 0pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">In certain scenarios some of the layers mentioned above may be split further into one or more sub layers. </span></p><p style="margin: 0cm 0cm 0pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Each Layer can be developed independently of the other provided that it adheres to the standards and communicates with the other layers as per the specifications. </span></p><p> </p><h4><span style="color: blue; font-family: 'Verdana','sans-serif';">The Logical Building Blocks </span></h4><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"> </p><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"> </p><p style="margin: 0cm 0cm 0pt 108pt; text-indent: -72pt;"><strong><span style="font-size: 12pt; color: rgb(0, 176, 80); font-family: 'Verdana','sans-serif';">These layers are described below:</span></strong></p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"> </p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">1) The Presentation Layer: </span></strong></p><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"><strong><span style="font-weight: normal; font-size: 12pt; font-family: 'Verdana','sans-serif';">It is </span></strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">also called as the client layer or <span>Presentation Layer or Graphical User Interface (GUI) layer</span> comprises of components that are dedicated to presenting the data to the user. For example: Windows/Web Forms and buttons, edit boxes, Text boxes, labels, grids, etc. </span></p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">2) The Business Layer: </span></strong></p><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">This layer encapsulates the Business rules or the business logic of the encapsulations. To have a separate layer for business logic is of a great advantage. This is because any changes in Business layer can be easily handled in this layer. As long as the interface between the layers remains the same, any changes to the functionality/processing logic in this layer can be made without impacting the others. </span></p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"> </p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"> </p><p style="margin: 0cm 0cm 0pt; text-indent: 36pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">3) The Data Access Layer: </span></strong></p><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">This layer comprises of components that help in accessing the Database. If used in the right way, this layer provides a level of abstraction for the database structures. Simply put changes made to the database, tables, etc do not effect the rest of the application because of the Data Access layer. The different application layers send the data requests to this layer and receive the response from this layer. </span></p><p style="margin: 0cm 0cm 0pt 72pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">The database is not accessed directly from any other layer/component. Hence the table names, field names are not hard coded anywhere else. This layer may also access any other services that may provide it with data, for instance Active Directory, Services etc. Having this layer also provides an additional layer of security for the database. As the other layers do not need to know the database credentials, connect strings and so on. </span></p><p style="margin: 0cm 0cm 0pt 36pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">4) The Database Layer: </span></strong></p><p style="margin: 0cm 0cm 0pt 72pt; text-indent: 36pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">This layer comprises of the Database Components such as DB Files, Tables, Views, etc. The Actual database could be created using SQL Server, Oracle, Flat files, etc.<br />In an n-tier application, the entire application can be implemented in such a way that it is independent of the actual Database. For instance, you could change the Database Location with minimal changes to Data Access Layer. The rest of the Application should remain unaffected. </span></p><p style="margin: 0cm 0cm 0pt 72pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Many packaged n-tier Applications are created so that they can work the same with SQL Server, Oracle, UDB and so on.</span></p><p style="text-indent: 36pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">FEATURES:</span></strong></p><p style="margin-left: 36pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">The N-tier Applications provide specific advantages that are vital to the business continuity of the enterprise. Typical features of a real life n-tier may include the following:</span></p><ul><li><strong><span style="font-weight: normal; font-family: 'Georgia','serif';"><span>1)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></strong><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Security:</span></strong></li></ul><p style="margin-left: 72pt; text-indent: 36pt;"><span>Application has Appropriate Authentication, logging and monitoring mechanisms </span></p><ul><li><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';"><span>2)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></strong><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Availability and Scalability: </span></strong></li></ul><p style="margin-left: 108pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Application should be reliable and should have sufficient fail-over mechanisms (redundancy) such as fail-over clusters </span></p><ul><li><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';"><span>3)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></strong><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Manageability: </span></strong></li></ul><p style="margin-left: 108pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Application should be designed to have the capability to Deploy, Monitor and troubleshoot. Methodology to handle Errors, log Errors and provide useful information for problem resolution </span></p><ul><li><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';"><span>4)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></strong><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Easy Maintenance: </span></strong></li></ul><p style="margin-left: 108pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">This is generally achieved by adopting coding standards, deployment standards, modular application design, ‘data abstraction' and application frameworks. </span></p><ul><li><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';"><span>5)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></strong><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Data Abstraction: </span></strong></li></ul><p style="margin: 0cm 0cm 0pt 108pt;"><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Easily make changes to the functionality, business rules with the least amount of impact to the entire applications.</span></p><p style="margin: 0cm 0cm 0pt;"> </p><p style="margin: 0cm 0cm 0pt;"> </p><p style="margin: 0cm 0cm 0pt;"> </p><p style="margin: 0cm 0cm 0pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Implementing n-tier architecture in Practical: </span></strong></p><p style="margin: 0cm 0cm 0pt;"><strong><span style="font-size: 12pt; font-family: 'Verdana','sans-serif';">Steps for creating:</span></strong></p><p style="margin: 0cm 0cm 0pt;"> </p><p style="text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">1) Click on start button-> programs->Microsoft Visual Studio2005-> Microsoft Visual </span></p><p style="margin-left: 54pt;"><span style="font-family: 'Verdana','sans-serif';">Studio2005.</span></p><ul><li><span style="font-size: 13pt; font-family: 'Georgia','serif';"><span>2)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><span style="font-family: 'Verdana','sans-serif';">Start Page will appear then click on create Projects->projects Types select any language like Visual C# -> Select a template like Windows Application ->ok. By default a form will appear.</span></li><li><span style="font-size: 13pt; font-family: 'Georgia','serif';"><span>3)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><span style="font-family: 'Verdana','sans-serif';">Design the form.</span></li><li><span style="font-size: 13pt; font-family: 'Georgia','serif';"><span>4)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><span style="font-family: 'Verdana','sans-serif';">Double click on add button and write the following code:</span></li></ul><p><span style="font-family: 'Verdana','sans-serif';"><span> </span></span></p><p style="margin-left: 36pt; text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">private</span><span style="font-family: 'Verdana','sans-serif';"> <span style="color: blue;">void</span> button1_Click(<span style="color: blue;">object</span> sender, <span style="color: teal;">EventArgs</span> e)</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span>{</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: teal;">blUsers</span> obj = <span style="color: blue;">new</span> <span style="color: teal;">blUsers</span>();</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>obj.Username = textBox1.Text;</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>obj.Password1 = textBox2.Text;</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>obj.Role = textBox3.Text;</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>obj.adddata();</span></p><p style="margin-left: 72pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: teal;">MessageBox</span>.Show(<span style="color: maroon;">"rec inserted succ"</span>);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>}</span></p><p style="text-indent: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';">5)Steps for Business Layer:</span></strong></p><p style="text-indent: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';"><span> </span></span></strong></p><p style="margin-left: 36pt;"><span style="font-family: 'Verdana','sans-serif';">a)Go to solution explorer (Ctrl+Alt+L).</span></p><p style="text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">b)Right click on windows Application -> Add -> new item-> blUsers.cs</span></p><p style="margin-left: 36pt;"><span style="font-family: 'Verdana','sans-serif';">c)Write the code for business layer.</span></p><p> </p><p style="margin-left: 36pt; text-indent: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';">Code for Business layer:</span></strong></p><p> </p><p style="margin-left: 72pt; text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">namespace</span><span style="font-family: 'Verdana','sans-serif';"> WindowsApplication1</span></p><p style="margin-left: 108pt; text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">{</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">class</span> <span style="color: teal;">blUsers</span></span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>{</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: teal;">String</span> username, Password, role;</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">public</span> <span style="color: teal;">String</span> Username</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>{</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">get</span> { <span style="color: blue;">return</span> username; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">set</span> { username = <span style="color: blue;">value</span>; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>}</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">public</span> <span style="color: teal;">String</span> Password1</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>{</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">get</span> { <span style="color: blue;">return</span> Password; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">set</span> { Password = <span style="color: blue;">value</span>; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>}</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span></span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">public</span> <span style="color: teal;">String</span> Role</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>{</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">get</span> { <span style="color: blue;">return</span> role; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">set</span> { role = <span style="color: blue;">value</span>; }</span></p><p style="margin-left: 144pt;"><span style="font-family: 'Verdana','sans-serif';"><span> </span>}</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">public</span> <span style="color: blue;">void</span> adddata()</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span>{</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span><span style="color: teal;">DALUsers</span>.adddata(username, Password, role);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>}</span></p><p style="margin-left: 144pt; text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">}</span></p><p style="margin-left: 108pt; text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">}</span></p><p style="text-indent: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';">6)Steps for Data Access Layer:</span></strong></p><p style="margin-left: 36pt;"> </p><p style="margin-left: 36pt;"><span style="font-family: 'Verdana','sans-serif';">a) Go to solution explorer (Ctrl+Alt+L).</span></p><ul><li><span style="font-family: 'Verdana','sans-serif';"><span>b)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><span style="font-family: 'Verdana','sans-serif';">Right click on windows Application -> Add -> new item->DALUser.cs</span></li></ul><p style="margin-left: 36pt;"><span style="font-family: 'Verdana','sans-serif';">c)Write the code for Data Access layer.</span></p><p style="margin-left: 36pt;"> </p><p style="margin-left: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';">Code for Data Access Layer:</span></strong></p><p style="margin-left: 72pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">using</span><span style="font-family: 'Verdana','sans-serif';"> System.Data.SqlClient;</span></p><p style="margin-left: 72pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">using</span><span style="font-family: 'Verdana','sans-serif';"> System.Data;</span></p><p> </p><p style="margin-left: 36pt; text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">namespace</span><span style="font-family: 'Verdana','sans-serif';"> WindowsApplication1</span></p><p style="margin-left: 72pt; text-indent: 36pt;"><span style="font-family: 'Verdana','sans-serif';">{</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">class</span> <span style="color: teal;">DALUsers</span></span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span>{</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">static</span><span> </span><span style="color: teal;">SqlConnection</span> cn;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span><span> </span><span style="color: blue;">static</span> <span style="color: teal;">SqlCommand</span> cmd;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">void</span> adddata(<span style="color: blue;">string</span> a, <span style="color: blue;">string</span> b, <span style="color: blue;">string</span> c)</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>{</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: teal;">SqlParameter</span> parm1;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cn = <span style="color: blue;">new</span> <span style="color: teal;">SqlConnection</span>(<span style="color: maroon;">"user id=sa;database=useraccess;data source=server"</span>);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cn.Open();</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd = <span style="color: blue;">new</span> <span style="color: teal;">SqlCommand</span>(<span style="color: maroon;">"spInsertData"</span>, cn);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd.CommandType = <span style="color: teal;">CommandType</span>.StoredProcedure;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1 = <span style="color: blue;">new</span> <span style="color: teal;">SqlParameter</span>(<span style="color: maroon;">"@username"</span>, <span style="color: teal;">SqlDbType</span>.VarChar, 30);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1.Value = a;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd.Parameters.Add(parm1);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1 = <span style="color: blue;">new</span> <span style="color: teal;">SqlParameter</span>(<span style="color: maroon;">"@password"</span>, <span style="color: teal;">SqlDbType</span>.VarChar, 30);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1.Value = b;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd.Parameters.Add(parm1);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1 = <span style="color: blue;">new</span> <span style="color: teal;">SqlParameter</span>(<span style="color: maroon;">"@role"</span>, <span style="color: teal;">SqlDbType</span>.VarChar, 30);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>parm1.Value = c;</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd.Parameters.Add(parm1);</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>cmd.ExecuteNonQuery();</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span> </span>}</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span>}</span></p><p style="margin-left: 36pt;"><span style="font-family: 'Verdana','sans-serif';">}</span></p><p style="margin-left: 36pt;"> </p><p style="margin-left: 36pt;"> </p><p style=""><strong><span style="font-family: 'Verdana','sans-serif';">7) Creating DATABASE<span>:</span></span></strong></p><p style=""><strong><span style="font-family: 'Verdana','sans-serif';"><span> </span>Create Table:</span></strong></p><p style=""> </p><table style="border: medium none ; margin-left: 68.4pt; border-collapse: collapse;" border="1" cellpadding="0" cellspacing="0"><tbody><tr><td style="border: 1pt solid windowtext; padding: 0cm 5.4pt; width: 124.2pt;" valign="top" width="166"><p style=""><strong><span style="font-family: 'Verdana','sans-serif';">Username</span></strong></p></td><td style="border-style: solid solid solid none; border-color: windowtext windowtext windowtext -moz-use-text-color; border-width: 1pt 1pt 1pt medium; padding: 0cm 5.4pt; width: 127.8pt;" valign="top" width="170"><p style=""><strong><span style="font-family: 'Verdana','sans-serif';">Password</span></strong></p></td><td style="border-style: solid solid solid none; border-color: windowtext windowtext windowtext -moz-use-text-color; border-width: 1pt 1pt 1pt medium; padding: 0cm 5.4pt; width: 90pt;" valign="top" width="120"><p style=""><strong><span style="font-family: 'Verdana','sans-serif';">Role</span></strong></p></td></tr><tr><td style="border-style: none solid solid; border-color: -moz-use-text-color windowtext windowtext; border-width: medium 1pt 1pt; padding: 0cm 5.4pt; width: 124.2pt;" valign="top" width="166"><p style=""><span style="font-family: 'Verdana','sans-serif';">Kamala</span></p></td><td style="border-style: none solid solid none; border-color: -moz-use-text-color windowtext windowtext -moz-use-text-color; border-width: medium 1pt 1pt medium; padding: 0cm 5.4pt; width: 127.8pt;" valign="top" width="170"><p style=""><span style="font-family: 'Verdana','sans-serif';">Star111</span></p></td><td style="border-style: none solid solid none; border-color: -moz-use-text-color windowtext windowtext -moz-use-text-color; border-width: medium 1pt 1pt medium; padding: 0cm 5.4pt; width: 90pt;" valign="top" width="120"><p style=""><span style="font-family: 'Verdana','sans-serif';">Manager</span></p></td></tr><tr><td style="border-style: none solid solid; border-color: -moz-use-text-color windowtext windowtext; border-width: medium 1pt 1pt; padding: 0cm 5.4pt; width: 124.2pt;" valign="top" width="166"><p style=""><span style="font-family: 'Verdana','sans-serif';">Raju</span></p></td><td style="border-style: none solid solid none; border-color: -moz-use-text-color windowtext windowtext -moz-use-text-color; border-width: medium 1pt 1pt medium; padding: 0cm 5.4pt; width: 127.8pt;" valign="top" width="170"><p style=""><span style="font-family: 'Verdana','sans-serif';">Fivestar</span></p></td><td style="border-style: none solid solid none; border-color: -moz-use-text-color windowtext windowtext -moz-use-text-color; border-width: medium 1pt 1pt medium; padding: 0cm 5.4pt; width: 90pt;" valign="top" width="120"><p style=""><span style="font-family: 'Verdana','sans-serif';">Programmer</span></p></td></tr></tbody></table><p style=""> </p><p style=""><strong><span style="font-family: 'Verdana','sans-serif';"><span> </span>Procedure for Insert:</span></strong></p><p style=""> </p><p><span style="color: blue; font-family: 'Verdana','sans-serif';"><span> </span>create PROCEDURE </span><span style="font-family: 'Verdana','sans-serif';">dbo.spInsertData </span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>(</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>@username <span style="color: blue;">varchar</span>(30),</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>@password <span style="color: blue;">varchar</span>(30),</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>@role <span style="color: blue;">varchar</span>(30)</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>)</span></p><p style="text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">AS</span></p><p style="text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">insert into </span><span style="font-family: 'Verdana','sans-serif';">users <span style="color: blue;">values</span>(@username,@password,@role)</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span> </span><span style="color: blue;">RETURN</span></span></p><p> </p><p style="text-indent: 36pt;"> </p><p style="text-indent: 36pt;"><strong><span style="font-family: 'Verdana','sans-serif';">Procedure for Delete:</span></strong></p><p> </p><p style="text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">Create PROCEDURE </span><span style="font-family: 'Verdana','sans-serif';">dbo.spDelete</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span>(@username <span style="color: blue;">varchar</span>(50))</span></p><p style="text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">AS</span></p><p style="text-indent: 36pt;"><span style="color: blue; font-family: 'Verdana','sans-serif';">delete from </span><span style="font-family: 'Verdana','sans-serif';">users <span style="color: blue;">where </span>username =@username</span></p><p><span style="font-family: 'Verdana','sans-serif';"><span> </span><span style="color: blue;">RETURN</span></span></p><p> </p><ul><li><span style="font-family: 'Verdana','sans-serif';"><span>8)<span style="font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><span style="font-family: 'Verdana','sans-serif';">Run the entire project.</span></li></ul></pre>Krunalhttp://www.blogger.com/profile/04242353408598622857noreply@blogger.com1tag:blogger.com,1999:blog-5081328744430257872.post-61493475963270324552008-09-03T02:22:00.000-07:002008-09-03T03:25:12.030-07:00Give Nice Look TO Your Website with Ajax , Javascript , JqueryNice Looking Simple Downloadable dhtml and ajax code<br /><div id="top"> <!-- <a style="MARGIN-RIGHT: 35px" rel="nofollow" title="Tags" onclick="document.getElementById('about').style.display='block';aboutHeight.toggle();return false;" href="#"><img style="MARGIN-BOTTOM: -3px; MARGIN-RIGHT: 3px" src="uu_files/house.png" width="16" height="16" /> Tags</a> <a style="MARGIN-RIGHT: 35px" rel="nofollow" title="Dates" onclick="document.getElementById('about').style.display='block';aboutHeight.toggle();return false;" href="#"><img style="MARGIN-BOTTOM: -3px; MARGIN-RIGHT: 3px" src="uu_files/tag4.png" width="16" height="16" /> Dates</a>--> <a style="margin-right: 35px;" rel="nofollow" title="mailto:submit-a-script@miniajax.com" href="mailto:submit-a-script@miniajax.com"></a> </div> <div id="content-wrapper"> <div id="content" class="clearfix"> 1. <div id="about" style="display: none; height: 0px;"> <div> <p> <img src="http://miniajax.com/uu_files/line.png" border="0" /> </p> <p> <img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/alpha.png" width="16" height="16" /> <span style="color: rgb(216, 59, 59);">BETA </span> version. Navigation is<span style="color: rgb(216, 59, 59);"> NOT WORKING </span> yet. <img src="http://miniajax.com/uu_files/march1.png" border="0" /> <a style="margin-right: 35px;" href="http://feeds.feedburner.com/miniajax" rel="nofollow" target="_blank"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/rss.png" width="16" height="16" /> Grab our feed for updates.</a> </p> <p> <img src="http://miniajax.com/uu_files/line.png" border="0" /> </p> <p> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Drag and Drop</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Flash applications</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Forms</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Image galleries and effects</a></p><p> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Lightbox's</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Menus</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> MooTools</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Page effects</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Uncategorized stuff</a></p> <p> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Webmaster tools</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/house.png" width="16" height="16" /> Window effects</a></p><p> <img src="http://miniajax.com/uu_files/line.png" border="0" /> </p> <p> There is only <img src="http://miniajax.com/uu_files/noth.png" border="0" width="1" height="5" /> <img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/tag4.png" width="16" height="16" /><span style="color: rgb(69, 95, 148);"> March '07</span> <img src="http://miniajax.com/uu_files/noth.png" border="0" width="4" height="5" />collection of scripts on this page <img src="http://miniajax.com/uu_files/march1.png" border="0" /> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/tag4.png" width="16" height="16" /> April '07</a> <a style="margin-right: 35px;" href="http://miniajax.com/#" rel="nofollow"><img style="margin-bottom: -3px; margin-right: 3px;" src="http://miniajax.com/uu_files/tag4.png" width="16" height="16" /> May '07</a> </p><p> <img src="http://miniajax.com/uu_files/line.png" border="0" /> </p> </div></div> <div class="p"> <div class="item"><a href="http://prototype-window.xilinus.com/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/the.gif" width="325" height="100" /></a> <div class="caption"> <h1 style="font-family: arial;"><a href="http://prototype-window.xilinus.com/" target="_blank" rel="nofollow">Prototype Window - </a><a href="http://prototype-window.xilinus.com/samples.html" target="_blank" rel="nofollow">Demo</a></h1> This javascript class allows you to add window in a HTML page.<div class="caption"> </div><br />2.<br /><br /></div> </div> <div class="item"><a href="http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/star.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/" target="_blank" rel="nofollow">AJAX Star Rating Bar - </a><a href="http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/" target="_blank" rel="nofollow">Demo</a></h1> <p>This is a rating bar script that allows users to rate things with no page refresh.</p><p>3.<br /></p> </div> </div> <div class="item"><a href="http://www.dustindiaz.com/ajax-contact-form/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/contact.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dustindiaz.com/ajax-contact-form/" target="_blank" rel="nofollow">An AJAX contact form - </a><a href="http://www.dustindiaz.com/testJax/" target="_blank" rel="nofollow">Demo</a></h1> <p>A drop-in AJAX contact form that can be used in WP. PHP () Mail ready.</p><p>4.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.labsmedia.com/clickheat/" rel="nofollow"><img src="http://miniajax.com/uu_files/egg.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.labsmedia.com/clickheat/" target="_blank" rel="nofollow">Heatmap for your website - </a><a href="http://sourceforge.net/project/showfiles.php?group_id=181196" target="_blank" rel="nofollow">Download</a></h1> <p>ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.</p><p>5.<br /></p> </div> </div> <div class="item"><a href="http://orangoo.com/labs/GreyBox/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/greybox.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://orangoo.com/labs/GreyBox/" target="_blank" rel="nofollow">GreyBox: An easy javascript popup box</a></h1> <p>GreyBox can be used to display websites, images and other content in a beautiful way.</p><p>6.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://leftlogic.com/lounge/articles/jquery_spy2/" rel="nofollow"><img src="http://miniajax.com/uu_files/diggspy.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://leftlogic.com/lounge/articles/jquery_spy2/" target="_blank" rel="nofollow">Digg - like spy script - </a><a href="http://leftlogic.com/jquery/spy.html" target="_blank" rel="nofollow">Demo</a></h1> <p>Examples and code on how to create a digg spy page.</p><p>7.<br /></p> </div> </div> <div class="item"><a href="http://web-graphics.com/mtarchive/001717.php" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/tips.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://web-graphics.com/mtarchive/001717.php" target="_blank" rel="nofollow">Bubble Tooltips - </a><a href="http://web-graphics.com/mtarchive/BubbleTooltips.html" target="_blank" rel="nofollow">Demo</a></h1> <p>Easy way to add fancy tooltips with a balloon shape to any web page.</p><p>8.<br /></p> </div> </div> <div class="item"><a href="http://cow.neondragon.net/stuff/reflection/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/refl.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://cow.neondragon.net/stuff/reflection/" target="_blank" rel="nofollow">Reflection.js 1.6 - </a><a href="http://cow.neondragon.net/stuff/reflection/" target="_blank" rel="nofollow">Demo</a></h1> <p>To add a reflection just add a class="reflect" to the image.</p><p>9.<br /></p> </div> </div> <div class="item"><a href="http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/edit.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20/" target="_blank" rel="nofollow">Edit-in-Place with Ajax - </a><a href="http://www.yvoschaap.com/instantedit/" target="_blank" rel="nofollow">Demo</a></h1> <p>A nice little AJAX function that allows users to edit text on a page without any forms.</p><p>10.<br /></p> </div> </div> <div class="item"><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/table.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/" target="_blank" rel="nofollow">Ajax Tabs Content script - </a><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/" target="_blank" rel="nofollow">Demo</a></h1> <p>Fetch and display an external page inside a container when a tab is clicked on.</p><p>11.<br /></p> </div> </div> <div class="item"><a href="http://www.dhtmlgoodies.com/index.html?whichScript=dragable-boxes" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/rss.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dhtmlgoodies.com/index.html?whichScript=dragable-boxes" target="_blank" rel="nofollow">Dragable RSS boxes script - </a><a href="http://www.dhtmlgoodies.com/scripts/dragable-boxes/dragable-boxes.html" target="_blank" rel="nofollow">Demo</a></h1> <p>Tutorial and downloadable files to create draggable boxes like on online desktops.</p><p>12.<br /></p> </div> </div> <div class="item"><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/poll.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller" target="_blank" rel="nofollow">AJAX poller script - </a><a href="http://www.dhtmlgoodies.com/scripts/ajax-poller/ajax-poller.html" target="_blank" rel="nofollow">Demo</a></h1> <p>A poller script that uses Ajax to send vote to the server & receives results from the server.</p><p>13.<br /></p> </div> </div> <div class="item"><a href="http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=dragable-content" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/tables.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=dragable-content" target="_blank" rel="nofollow">Dragable content script - </a><a href="http://www.dhtmlgoodies.com/scripts/dragable-content/dragable-content-demo3.html" target="_blank" rel="nofollow">Demo</a></h1> <p>In this script you can drag nodes to a set of boxes.</p><p>14.<br /></p> </div> </div> <div class="item"><a href="http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/login.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox" target="_blank" rel="nofollow">Lightbox/Modal window effect using CSS</a></h1> <p>The Lightbox Effect without Lightbox. Lightbox alternative and login method.</p><p>15.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://dojotoolkit.org/demos/fisheye" rel="nofollow"><img src="http://miniajax.com/uu_files/123.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://dojotoolkit.org/demos/fisheye" rel="nofollow">AJAX Fisheye List Widget - </a><a target="_blank" href="http://dojotoolkit.org/demos/fisheye" rel="nofollow">Demo</a></h1> <p>Dojo Tool Kit has come up with a new web based non-flash menu which is easy to use.</p><p>16.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://elliottback.com/wp/archives/2005/03/16/google-x-pulled/" rel="nofollow"><img src="http://miniajax.com/uu_files/google.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://elliottback.com/wp/archives/2005/03/16/google-x-pulled/" rel="nofollow">Google X script - </a><a target="_blank" href="http://elliottback.com/wp/wp-content/google-x/googlex.htm" rel="nofollow">Demo</a></h1> <p>Cool trick with javascript - google page with crazy rollovers.</p><p>17.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.amcharts.com/pie/" rel="nofollow"><img src="http://miniajax.com/uu_files/how.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.amcharts.com/pie/" target="_blank" rel="nofollow">Create Pie and Donut Charts - </a><a href="http://www.amcharts.com/pie/examples/1/" target="_blank" rel="nofollow">Demo</a></h1> <p>PHP/Flash. Using it you can easily create animated pies or donuts for your web site.</p><p>18.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://infusion.110mb.com/enter/downloads.php" rel="nofollow"><img src="http://miniajax.com/uu_files/email.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://infusion.110mb.com/enter/downloads.php" target="_blank" rel="nofollow">Ajax subscription box - Mailist 0.9</a></h1> <p>An email address can be submitted without having to reload the whole page.</p><p>19.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.solmetra.com/en/disp.php/en_products/en_scripts/en_maps" rel="nofollow"><img src="http://miniajax.com/uu_files/map.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.solmetra.com/en/disp.php/en_products/en_scripts/en_maps" rel="nofollow">Googlemap with geocode support - </a><a target="_blank" href="http://www.solmetra.com/scripts/maps/demo/index.php?query=Monaco" rel="nofollow">Demo</a></h1> <p>SOLMETRA Maps is a PHP class meant to simplify display of Google Maps on your site.</p><p>20.<br /></p> </div> </div> <div class="item"><a href="http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/tab.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/" target="_blank" rel="nofollow">Tabbed content browser - </a><a href="http://www.ajaxlessons.com/demo/workshop2.html" target="_blank" rel="nofollow">Demo</a></h1> <p>Tutorial: Building AJAX tabbed content with Prototype.</p><p>21.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.unwieldy.net/ajaxim/" rel="nofollow"><img src="http://miniajax.com/uu_files/chat.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.unwieldy.net/ajaxim/" target="_blank" rel="nofollow">Browser-based instant messaging client</a></h1> <p>Ajax powered IM system that sits right on your web site.</p><p>22.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.ajaxdomainsearch.com/blog/" rel="nofollow"><img src="http://miniajax.com/uu_files/domain.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.ajaxdomainsearch.com/blog/" target="_blank" rel="nofollow">Ajax domain search script - </a><a target="_blank" href="http://www.ajaxdomainsearch.com/" rel="nofollow">Demo</a></h1> <p>Simple and very easy to understand - Wrote in PHP + AJAX.</p><p>23.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://amberjack.org/" rel="nofollow"><img src="http://miniajax.com/uu_files/tours.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://amberjack.org/" target="_blank" rel="nofollow">Amberjack site tours - </a><a href="http://amberjack.org/?tourId=AJTour" target="_blank" rel="nofollow">Demo</a></h1> <p>A lightweight Open Source library that allows you to create cool site tours.</p><p>24.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.cyberdummy.co.uk/2005/07/18/gmail-ajax-style-username-signup/" rel="nofollow"><img src="http://miniajax.com/uu_files/bill.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.cyberdummy.co.uk/2005/07/18/gmail-ajax-style-username-signup/" target="_blank" rel="nofollow">Gmail style, AJAX check username signup</a></h1> <p>Signup check username suggest new (php, AJAX, Javascript).</p><p>25<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.robertnyman.com/ask/content.php"><img src="http://miniajax.com/uu_files/get.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.robertnyman.com/ask/content.php" target="_blank">Easy Ajax with ASK</a></h1> <p>ASK - Add dynamic content to a page unobtrusively.</p><p>26.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://sonspring.com/journal/slideshow-alternative" rel="nofollow"><img src="http://miniajax.com/uu_files/slide.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://sonspring.com/journal/slideshow-alternative" rel="nofollow">Slideshow Alternative - </a><a target="_blank" href="http://host.sonspring.com/slideshow/" rel="nofollow">Demo</a></h1> <p>An excellent javascript slideshow with cross fade transition effects and linkable slides.</p><p>27.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://slideshow.triptracker.net/" rel="nofollow"><img src="http://miniajax.com/uu_files/slideshow.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://slideshow.triptracker.net/" rel="nofollow">Roll-your-own AJAX Slideshow</a></h1> <p>Just import their script in your web page to add a cool popup slideshow.</p><p>28.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://billwscott.com/carousel/" rel="nofollow"><img src="http://miniajax.com/uu_files/3.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://billwscott.com/carousel/" target="_blank" rel="nofollow">Carousel Component -</a> <a href="http://billwscott.com/carousel/carousel_ajax_search.html" target="_blank" rel="nofollow">Demo</a></h1> <p>Photo library / slideshow code. Animated or non, static or fresh-fresh ajax.</p><p>29.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.activecollab.com/" rel="nofollow"><img src="http://miniajax.com/uu_files/activecollab.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.activecollab.com/" target="_blank" rel="nofollow">ActiveCollab - open source project planner</a></h1> <p>An easy to use, web based, open source collaboration and project management tool.</p><p>30.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited" rel="nofollow"><img src="http://miniajax.com/uu_files/tabl.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited" rel="nofollow">Unobtrusive table sort script - </a><a target="_blank" href="http://www.frequency-decoder.com/demo/table-sort-revisited/paginate.html" rel="nofollow">Demo</a></h1> <p>Add sortable tables to your web page with this (unobtrusive) Javascript routine.</p><p>31.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" rel="nofollow"><img src="http://miniajax.com/uu_files/validate.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" rel="nofollow">Really Easy Field validation with Prototype</a></h1> <p>Here's a form validation script that is very easy to use.</p><p>32.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://okonet.ru/projects/modalbox/" rel="nofollow"><img src="http://miniajax.com/uu_files/modalbox.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://okonet.ru/projects/modalbox/" rel="nofollow">ModalBox 1.5 - User friendly web-based</a></h1> <p>popups & wizards. Prototype JS framework & script.aculo.us toolkit.</p><p>33.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.broken-notebook.com/magnetic/info.php" rel="nofollow"><img src="http://miniajax.com/uu_files/magnetic.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.broken-notebook.com/magnetic/info.php" target="_blank" rel="nofollow">Magnetic AJAX - </a><a href="http://www.broken-notebook.com/magnetic/" target="_blank" rel="nofollow">Demo</a></h1> <p>This is just like the magnetic word kits you've seen before except this is on the internet.</p><p>34.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://transparent-message.xilinus.com/" rel="nofollow"><img src="http://miniajax.com/uu_files/message.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://transparent-message.xilinus.com/" target="_blank" rel="nofollow">Transparent message - </a><a href="http://transparent-message.xilinus.com/" target="_blank" rel="nofollow">Demo</a></h1> <p>Very nice looking implementation of alert and message overlay using ROR and JS.</p><p>35.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://jquery.com/demo/thickbox/" rel="nofollow"><img src="http://miniajax.com/uu_files/2.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://jquery.com/demo/thickbox/" rel="nofollow">ThickBox 2.1.1 - a webpage UI dialog widget</a></h1> <p>Similar to lightbox, but more versatile. Can be used with inline content, iframes & images.</p><p>36.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/" rel="nofollow"><img src="http://miniajax.com/uu_files/4.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/" target="_blank" rel="nofollow">Suckerfish HoverLightbox</a></h1> <p>Roll over a title, it shows a grid of thumbnails. Rolling over a thumbnail shows a slightly...</p><p>37.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://ecosmear.com/relay/" rel="nofollow"><img src="http://miniajax.com/uu_files/5.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://ecosmear.com/relay/" target="_blank" rel="nofollow">Relay - AJAX directory manager -</a> <a href="http://ecosmear.com/relay/demo/" target="_blank" rel="nofollow">Demo</a></h1> <p>Nice and small AJAX based online file and directory manager tool.</p><p>38.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://smoot.sourceforge.net/" rel="nofollow"><img src="http://miniajax.com/uu_files/7.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://smoot.sourceforge.net/" rel="nofollow">Smoot - Web-based diagram and GIS tool</a></h1> <p>Smoot is a downloadable tool for creating diagrams of icons and links between them.</p><p>39.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://sonspring.com/journal/jquery-portlets" rel="nofollow"><img src="http://miniajax.com/uu_files/6.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://sonspring.com/journal/jquery-portlets" target="_blank" rel="nofollow">jQuery Portlets -</a> <a href="http://host.sonspring.com/portlets/" target="_blank" rel="nofollow">Demo</a></h1> <p>Boxes of content that can be expanded / coallapsed and dragged to a new position.</p><p>40.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://vikjavev.no/highslide/" rel="nofollow"><img src="http://miniajax.com/uu_files/8.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://vikjavev.no/highslide/" target="_blank" rel="nofollow">Highslide JS thumbnail viewer</a></h1> <p>Animated, shadowed popups from thumbnails with CSS-styled captions.</p><p>41.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://simile.mit.edu/timeline/" rel="nofollow"><img src="http://miniajax.com/uu_files/11.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://simile.mit.edu/timeline/" target="_blank" rel="nofollow">Timeline</a></h1> <p>Timeline is a DHTML-based AJAXy widget for visualizing time-based events.</p><p>42.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://orangoo.com/labs/?page_id=3" rel="nofollow"><img src="http://miniajax.com/uu_files/13.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://orangoo.com/labs/?page_id=3" rel="nofollow">GoogieSpell - Demo</a></h1> <p>Gmail like downloadable spell checker for your own web application.</p><p>43.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://thinkingphp.org/demos/cake-timer/" rel="nofollow"><img src="http://miniajax.com/uu_files/14.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://thinkingphp.org/demos/cake-timer/" rel="nofollow">An Ajax file uploads progress bar</a></h1> <p>AJAX powered progressbar to monitor file uploads with (Cake)PHP.</p><p>44.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.turboajax.com/turbodbadmin/" rel="nofollow"><img src="http://miniajax.com/uu_files/15.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.turboajax.com/turbodbadmin/" rel="nofollow">TurboDbAdmin -</a> <a target="_blank" href="http://www.turboajax.com/turbodbadmin_demo" rel="nofollow">Demo</a></h1> <p>A single-page solution for exploring and editing databases from a browser.</p><p>45.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip" rel="nofollow"><img src="http://miniajax.com/uu_files/16.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip" target="_blank" rel="nofollow">jTip - A jQuery Tool Tip -</a> <a href="http://www.codylindley.com/blogstuff/js/jtip/" target="_blank" rel="nofollow">Demo</a></h1> <p>A JavaScript library that provides pop-up help messages. Uses the jQuery library.</p><p>46.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.systemsevendesigns.com/phoogle" rel="nofollow"><img src="http://miniajax.com/uu_files/17.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.systemsevendesigns.com/phoogle" rel="nofollow">Phoogle Maps v2.01</a></h1> <p>With about 5 lines of code you can display a customized Google Map on your website.</p><p>47.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://smoothgallery.jondesign.net/" rel="nofollow"><img src="http://miniajax.com/uu_files/18.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://smoothgallery.jondesign.net/" rel="nofollow">JonDesign's SmoothGallery -</a> <a href="http://smoothgallery.jondesign.net/showcase/gallery/" target="_blank" rel="nofollow">Demo</a></h1> <p>A slide show javascript making use of javascript libraries - prototype and moo.fx</p><p>48.<br /></p> </div> </div> <div class="item"><a target="_blank" href="http://www.solutoire.com/plotr" rel="nofollow"><img src="http://miniajax.com/uu_files/19.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.solutoire.com/plotr" target="_blank" rel="nofollow">Plotr - Javascript graphics</a></h1> <p>With Prototype you can plot data on a graph on your web site. Pretty sweet.</p><p>49.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.millstream.com.au/view/code/tablekit/"><img src="http://miniajax.com/uu_files/20.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.millstream.com.au/view/code/tablekit/" rel="nofollow">Sortable, resizable, editable tables</a> <a href="http://www.millstream.com.au/upload/code/tablekit/" target="_blank" rel="nofollow">- Demo</a></h1> <p>TableKit is a collection of HTML table enhan- cements using the Prototype framework.</p><p>50.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://millstream.com.au/view/code/cross-fade-anything"><img src="http://miniajax.com/uu_files/21.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" rel="nofollow" href="http://millstream.com.au/view/code/cross-fade-anything">Cross-fading Slideshow</a> <a target="_blank" href="http://millstream.com.au/upload/code/crossfade/" rel="nofollow">- Demo</a></h1> <p>This is a demo of a simple slideshow with a cross-fading effect.</p><p>51.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.puidokas.com/portfolio/frogjs/"><img src="http://miniajax.com/uu_files/22.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.puidokas.com/portfolio/frogjs/" target="_blank" rel="nofollow">FrogJS Javascript Gallery</a></h1> <p>FrogJS is a simple, unobtrusive javascript gallery script with smooth transitions.</p><p>52.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.dynamicdrive.com/dynamicindex17/rsstickerajax/index.htm"><img src="http://miniajax.com/uu_files/23.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.dynamicdrive.com/dynamicindex17/rsstickerajax/index.htm" target="_blank" rel="nofollow">Advanced RSS Ticker</a></h1> <p>RSS ticker script to display any RSS content on your site in a ticker fashion.</p><p>53.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://swfupload.mammon.se/"><img src="http://miniajax.com/uu_files/24.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://swfupload.mammon.se/" rel="nofollow">SWFUpload</a></h1> <p>Upload files via flash to get the flash-upload dialog goodness.</p><p>54.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.nofunc.com/Sexy_Box/"><img src="http://miniajax.com/uu_files/25.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.nofunc.com/Sexy_Box/" rel="nofollow">NoFunc - Sexy Box</a></h1> <p>This will create a basic lightbox interface using AJAX Requests and HTML masking.</p><p>55.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.nofunc.com/DHTML_Color_Picker/"><img src="http://miniajax.com/uu_files/1.jpg" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.nofunc.com/DHTML_Color_Picker/" rel="nofollow">DHTML Color Picker -</a> <a href="http://www.colorjack.com/plugin/" target="_blank" rel="nofollow">Demo</a></h1> <p>Very light weight color picker, 24.5k vs. it?s nearest competitors 72.3k.</p><p>56.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://la.ma.la/misc/js/debugscreen/"><img src="http://miniajax.com/uu_files/26.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://la.ma.la/misc/js/debugscreen/" rel="nofollow">DebugScreen</a></h1> <p>A solution for more friendly JavaScript debugging. The page is in Japanese.</p><p>57.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.liquidx.net/plotkit/"><img src="http://miniajax.com/uu_files/27.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.liquidx.net/plotkit/" target="_blank" rel="nofollow">PlotKit - Javascript Chart Plotting</a> <a href="http://media.liquidx.net/js/plotkit-tests/quickstart-svg.html" target="_blank" rel="nofollow">- Demo</a></h1> <p>PlotKit is a Chart and Graph Plotting Library for Javascript.</p><p>58.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://www.schillmania.com/projects/35mm/"><img src="http://miniajax.com/uu_files/28.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://www.schillmania.com/projects/35mm/" rel="nofollow">35mm Photo Viewer -</a> <a href="http://www.schillmania.com/projects/35mm/demo/" target="_blank" rel="nofollow">Demo</a></h1> <p>Web-based DHTML image/photo display and browsing application.</p><p>59.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://calendar.swazz.org/"><img src="http://miniajax.com/uu_files/29.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://calendar.swazz.org/" target="_blank" rel="nofollow">Swazz Javascript Calendar</a></h1> <p>Lightweight widget which shows a calendar for use in picking dates on form fields.</p><p>60.<br /></p> </div> </div> <div class="item"><a target="_blank" rel="nofollow" href="http://prototype-carousel.xilinus.com/"><img src="http://miniajax.com/uu_files/30.gif" width="325" height="100" /></a> <div class="caption"> <h1><a target="_blank" href="http://prototype-carousel.xilinus.com/" rel="nofollow">Prototype Carousel Class -</a> <a target="_blank" href="http://prototype-carousel.xilinus.com/ajax" rel="nofollow">Demo</a></h1> <p>Carousel image slideshow viewing using Prototype and scriptaculous.</p><p>61.<br /></p> </div> </div> <div class="item"><a href="http://www.netzgesta.de/loupe/" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/32.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://www.netzgesta.de/loupe/" target="_blank" rel="nofollow">Loupe.js - Javascript Image Loupe</a></h1> <p>Loupe.js allow you to add a loupe to images on your webpages (FFox 1.5+, Opera 9+, Safari)</p><p>62.<br /></p> </div> </div> <div class="item"><a href="http://valid.tjp.hu/tjpzoom" target="_blank" rel="nofollow"><img src="http://miniajax.com/uu_files/33.gif" width="325" height="100" /></a> <div class="caption"> <h1><a href="http://valid.tjp.hu/tjpzoom" target="_blank" rel="nofollow">TJPzoom - JS / CSS / DOM image magnifier</a></h1> <p>Makes large images completely visibly through small page-areas.</p><p style="font-weight: bold;"><span style="font-size:180%;">Some More Javascript/Ajax Effects for Modern Web Design...</span></p><p><br />1- <a href="http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery">Easiest Tooltip and Image Preview Using jQuery</a> - A clean and easy to use jQuery tooltip & image preview script </p><p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtooltip-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtooltip-thumb.png" alt="tooltip" width="489" height="186" /></a></p> <p>2- <a href="http://www.sunsean.com/idTabs/" target="_blank">jQuery idTabs</a> - These days using tabs in Wordpress themes and websites is common. iTabs is a plugins for jQuery that makes adding tabs to a website really simple.<br /><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdidtabs-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdidtabs-thumb.png" alt="idtabs" width="498" height="95" /></a></p> <p>3- <a href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank">Coda-Slider</a> - A jQuery plugins for tabs with sliding animation<br /><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdcodeslider-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdcodeslider-thumb.png" alt="codeslider" width="333" height="221" /></a></p> <p>4- <a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" target="_blank">prettyPhoto a jQuery lightbox clone</a> - A very beautiful lightbox for images with next/previous buttons, caption and preload animation for both single images and galleries.<br /><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdlight-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdlight-thumb.png" alt="light" width="207" height="193" /></a></p> <p>5- <a href="http://www.glassbox-js.com/#Home" target="_blank">Glass Box</a> - GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. The GlassBox library ..<br /><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdglassbox-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdglassbox-thumb.png" alt="glassbox" border="0" width="301" height="189" /></a></p> <p>6- <a href="http://www.ericmmartin.com/simplemodal/" target="_blank">SimpleModal Dialog Box</a> - it comes with 3 example, basic dialog box, contact form and confirm override.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccddialog-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccddialog-thumb.png" alt="dialog" width="304" height="199" /></a></p> <p>7- <a href="http://cssglobe.com/lab/textgradient/" target="_blank">CSS Text Gradient</a> - “Text Gradient is a simple css trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.”</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdgradient-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdgradient-thumb.png" alt="gradient" width="437" height="84" /></a></p> <p>8- <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple Javascript Accordions </a> - is a very small JS accordion script which is really handy in today’s web projects.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdjsacc-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdjsacc-thumb.png" alt="jsacc" width="403" height="154" /></a></p> <p>9- <a href="http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/" target="_blank">Custom JavaScript Dialog Boxes</a> - “The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files.”</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdcustomdialog-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdcustomdialog-thumb.png" alt="customdialog" width="370" height="177" /></a></p> <p>10- <a href="http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/" target="_blank">Dynamic JavaScript Form Validation</a> - It’s clear:)</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdmsg-screenshot-2.gif"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdmsg-screenshot-thumb.gif" alt="msg_screenshot" border="0" width="459" height="185" /></a></p> <p>11- <a href="http://jquery.com/plugins/project/jquerylightbox_bal">jQuery Lightbox Plugin (balupton edition)</a> - another jQuery lightbox plugins with only 15KB size<br /><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdlight2-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdlight2-thumb.png" alt="light2" width="353" height="276" /></a></p> <p>12- <a href="http://digitarald.de/project/autocompleter/">AutoCompleter </a>- This AutoCompleter script for <a href="http://mootools.net/">MooTools</a> provides the functionality for text suggestion and completion. It features different data-sources (local, <abbr>JSON</abbr> or <abbr>XML</abbr>), a variety of user interactions, custom formatting, multiple selection, animations and much more.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdthumb-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdthumb-thumb.png" alt="thumb" width="200" height="100" /></a></p> <p>13- <a href="http://roshanbh.com.np/2008/07/top-floating-message-box-using-jquery.html" target="_blank">Top Floating message box using jQuery</a> - This effect will be useful for advertising, hot news, etc</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtopfloat-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtopfloat-thumb.png" alt="topfloat" border="0" width="445" height="67" /></a></p> <p>14- <a href="http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20/">Easy AJAX inline text edit 2.0</a> - an easy to integrate inline text edit script. No JavaScript knowledge needed, just follow the five steps for integration.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdinlineedit-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdinlineedit-thumb.png" alt="inlineedit" width="363" height="125" /></a></p> <p>15- <a href="http://amberjack.org/" target="_blank">Create site tours with Amberjack</a> - Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtour-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtour-thumb.png" alt="tour" width="365" height="200" /></a></p> <p>16- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm" target="_blank">Accordion Menu script</a> - It became really easy to make accordion menu using this script.</p> <p><a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdaccordion-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdaccordion-thumb.png" alt="accordion" width="178" height="436" /></a></p> <p>17- <a href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">Create a Slick Tabbed Content Area using CSS & jQuery</a> - Finally, this tutorial from NETTUTS demonstrates how to create a slick tabbed content area for your themes. You see tabbed content boxes in a lot of websites these days specially in Wordpress themes.</p> <a href="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtabbed-2.png"><img src="http://acomment.net/wp-content/uploads/2008/08/windowslivewriter15topjavascriptajaxeffectsformodernwebde-12ccdtabbed-thumb.png" alt="tabbed" width="301" height="422" /></a><br /><br /><h2><a href="http://sixrevisions.com/rapid-development/10_ajax_effects_website_fanciness/" rel="bookmark" title="Permanent Link to 10 JavaScript Effects to Boost Your Website’s Fanciness Factor">10 JavaScript Effects to Boost Your Website’s Fanciness Factor</a></h2><br />10 Javascript Effect to Boost Yoyr Website's Fanciness Factor<br /><h3 style="clear: both;">1) <a href="http://orangoo.com/labs/GreyBox/" title="Orangegoo Labs page for Graybox">GreyBox</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/graybox.jpg" alt="graybox screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>GreyBox</em> allows you to launch other websites in a <a href="http://javascript.about.com/library/blmodal.htm" title="About.com article on modal windows"><em>modal window</em></a> (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and <em>don’t want the user to navigate away from your web page</em> or to o<em>pen another browser window that might be blocked</em> by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.</p> <p>Here’s some key pages regarding GreyBox: <a href="http://orangoo.com/labs/GreyBox/Download/" title="Download page of GreyBox">Download page</a>, <a href="http://orangoo.com/labs/GreyBox/Documentation/" title="Documentation page of GreyBox - Organgegoo Labs">Documentation</a>, <a href="http://orangoo.com/labs/greybox/examples.html" title="GreyBox Examples page">Examples</a>, <a href="http://orangoo.com/labs/greybox/installation.html" title="GreyBox installation instructions">Installation</a>, and <a href="http://orangoo.com/labs/greybox/advance_usage.html" title="Advanced Usage of GreyBox">Advanced Usage</a> (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).</p> <h3 style="clear: both;">2) <a href="http://www.netzgesta.de/instant/" title="instant.js demo page">instant.js </a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/instant_js1.jpg" alt="instantjs screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>instant.js</em> effect <em>dynamically adds a Polaroid-like effect</em> to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.</p> <p>This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).</p> <h3 style="clear: both;">3) <a href="http://joomlicious.com/mootable/" title="mootable demo page">mooTable</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/mootables1.jpg" alt="mooTable screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" />mooTable allows you the ability to provide <em>sorting of table data </em>( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze.</p> <p>This library needs the mootools framework, which you can <a href="http://mootools.net/download" title="mootools download">download here</a>. You can also find a <a href="http://forum.mootools.net/topic.php?id=1267" title="mooTable">forum post</a> on the mootools boards by the author of mooTable, with feedback from other mootools developers.</p> <h3 style="clear: both;">4) <a href="http://lipidity.com/fancy-form/#example" title="FancyForm Example section">FancyForm</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/fancy_forms.jpg" alt="FancyForm screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>FancyForm</em> <em>replaces boring form controls</em> such as radio buttons and check boxes, with fancier ones. The basic implementation is a two-step process: (1) include JavaScript files on the web page, and (2) assign your form controls the <code>class="checked"</code> or <code>class="unchecked"</code> for checkboxes and <code>class="selected"</code> and <code>class="unselected"</code> for radio buttons. Very unobtrusive JavaScript.</p> <p>This script needs <a href="http://mootools.net/download" title="mootools download page">mootools</a> as well (and was developed for version 1.1).</p> <h3 style="clear: both;">5) <a href="http://www.phatfusion.net/imagemenu/index.htm" title="Phat fusion's image menu">image menu</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/phatfusion_image_menu.jpg" alt="Phatfusion image menu screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>image menu</em>, developed by phatfusion, is a spiffy horizontal menu that expands when you hover over menu items (such as images).</p> <p>You can use this for displaying a montage of images that are each partly hidden, but that the user can reveal fully by hovering over it.</p> <p>This script needs <a href="http://mootools.net/download" title="mootools download page">mootools</a> as well (and was developed for version 1.1)</p> <h3 style="clear: both;">6) <a href="http://amberjack.org/" title="AmberJack - Site Tour">AmberJack: Site Tour Creator</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/amberjac_site_tour_creatopr.jpg" alt="AmberJack Site Tour Creator screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" />Here’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.</p> <p>This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the<a href="http://amberjack.org/skins/" title="Skins gallery of AmberJack"> skins gallery </a>so you may see if they have a theme that doesn’t clash with your website.</p> <h3 style="clear: both;">7) <a href="http://194.95.111.244/%7Ecountzero/scripts/_myImageFlow/" title="ImageFlow 0.8 Demo page">ImageFlow</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/imageflow_0_8.jpg" alt="ImageFlow screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" />Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that <em>displays a collection of images that the user can scroll there</em> using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.</p> <p>When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.</p> <p><em><strong>Update: </strong> Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out <a href="http://194.95.111.244/%7Ecountzero/scripts/_myImageFlowLightbox2/" title="ImageFlow update version 0.9">here</a> (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!</em></p> <h3 style="clear: both;">8) <a href="http://mjijackson.com/shadowbox/" title="ShadowBox.js demo page">ShadowBox.js Media viewer</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/shadowbo_js.jpg" alt="ShadowBox.js Media viewer screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" />ShadowBox is “<em>a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScrip</em>t” (wow that’s a mouthful, isn’t it?).</p> <p>What distinguishes shadowbox from the plethora of other modal boxes out there like <a href="http://www.huddletogether.com/projects/lightbox2/" title="Lightbox 2 demo page">Lightbox 2</a>, is that it supports other file types besides images, such as a flash videos, embedded youtube videos, Apple.com Trailers, and web pages (a log-in page for example, that saves the user a trip to another page just to log on). Worthwhile script to test and play around with.</p> <h3 style="clear: both;">9) <a href="http://valid.tjp.hu/tjpzoom/" title="TPJzoom 3 demo page">TJPzoom 3 - image magnifier</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/tjpzoom_3_image_magnifier.jpg" alt="TJPzoom 3 image magnifier screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>TJPzoom</em> allows you to <em>zoom in on particular sections of a high-resolution image</em>. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool.</p> <p>One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.</p> <h3 style="clear: both;">10) <a href="http://demos.mootools.net/Tips" title="mootools demos - Tips"> mootools Tips</a></h3> <p><img src="http://sixrevisions.com/wp-content/uploads/2008/03/mootools_tips.jpg" alt="mootools Tips screenshot" style="border: 0pt none ; padding-left: 10px;" align="right" /><em>mootools Tips</em> is part of the mootools framework that allows you to provide a highly configurable way of showing tool tips to the user; when the user hovers over a link or image, additional information about the element appears on the screen.</p> <p>Some options that you can tweak are the: CSS styles (to make it look different from the default black background and white text), transition speed, style of how the tool tip appears on-screen, and how long you want the tool tip be displayed. This requires the <a href="http://mootools.net/download" title="mootools download">mootools</a> framework.</p><br /><br /></div> </div> </div> </div> </div> <div id="top11"> <!-- <map name="Map"><area shape="RECT" coords="'0," href="http://www.digg.com/tech_news/miniAJAX_com_Amazing_DHTML_and_AJAX_Code" rel="nofollow" target="_blank"> <area shape="RECT" coords="'61," href="http://www.technorati.com/faves?add=http://www.miniajax.com/" rel="nofollow" target="_blank"> <area shape="RECT" coords="'112," href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;" rel="nofollow"> <area shape="RECT" coords="'167," href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=http://www.miniajax.com/" rel="nofollow" target="_blank"> <area shape="RECT" coords="'263," href="http://www.stumbleupon.com/submit?url=http://www.miniajax.com&title=Miniajax+A+Showroom+of+nice+looking+simple+downloadable+DHTML+and+AJAX+scripts" rel="nofollow" target="_blank"> <area shape="RECT" coords="'484," href="mailto:submit-a-script@miniajax.com" rel="nofollow" target="_blank"> <area shape="RECT" coords="'214," href="http://feeds.feedburner.com/miniajax" rel="nofollow" target="_blank"> </map><img src="uu_files/footer1.png" usemap="#Map" border="0" width="750" height="66" /> --> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2487231-1"; urchinTracker(); </script>Krunalhttp://www.blogger.com/profile/04242353408598622857noreply@blogger.com1