AJAX Samples Part 4: Visual Effects for HTML

Why AJAX needs visual effects

Implementing a web based application by using AJAX techniques is about improving the backside, will elable the right user experience and will make your application work the way it should.

If you want that your application really looks like AJAX you also have to give your application a modern design together with all kinds of visual effects. That will really impress!

Don't you think that this is nonsense ? - I did for some time last year but I had to change my mind - at least a little bit.

If you travel across the web sides of the commercial AJAX frameworks you will find on almost every site a bunch of visual effect libraries that are technically not bound to asyncronous JavaScript and XML nor xmlhttp.
Commercial frameworks like backbase or frameworks like script.aculo.us do offer visual effects side by side with AJAX functionality.
Some of the effects shown here are really stupid eye-catcher effects.
Web applications that do not use xmlhttp but do asynchronous image loading are seen as AJAX applications.
Articles about AJAX do mix up client-server communications with visual effects. A sample on that: http://www.maxkiesler.com/index.php/weblog/comments/451/
Another article: Ajax Workshop 2 - Building Tabbed Content at http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/
... and you can find a lot more of them

Visual effects are definitvely an important aspect for AJAX applications today. Maybe the "market" will learn the technical difference in some near future. Maybe a "get-it-all-together" solution is the right approach for the "market".

So here is a list of visual effects and other "cool" looking stuff. Some of these effects can also be used in any other html based application, some of them will use AJAX. I'll explain the HTML+CSS+JavaScript that makes the effect but I will also bring the higher level approach using ASP.NET web controls that makes using them really easy.

AJAX applications look great! :-)

So here comes a library of visual effects. From time to time I will add another one and you will find them also on the demo side at http://www.mathertel.de/AJAXEngine/Default.aspx see Examples -> Visual Effects .

The documentation you will find here on my blog and (with a little delay) in the AJAX eBook at AJAXeBook.aspx. You will not find only a working solution but also a brief description on how it works so you can also use it in any of your projects too.

A list of visual effects for html, css and javascript

This is a list of patterns of visual effects that can help you to make your AJAX application (or maybe any other web application) more attractive. Open the demo pages and look at the source code of the pages to see how it's implemented.

More detailed information is available in my blog.

	Sliding effects Sliding and zooming effects, especially with pictures. If you have to move something, move it slow so the user can understand where the information comes from and goes to. See a simple demo page and explanation at SlidingDemo.aspx.
	Drag & Drop Arranging parts with drag and drop functionality on a portal site. To enable moving html objects I add a mover element and a JavaScript behaviour that is attached to all the relevant mouse events. See a simple demo page and explanation at MoverDemo.aspx.
	Web Parts By reusing the shadow effect and the mover behavior a webpart can be realized. The web part contains content and so a WebControl (a class derived from Panel) is used here and not a User Control (*.ascx). See a simple demo page and description at PartDemo.aspx.
	Popup information A popup mechanism can be used for showing more details for a specific topic or item that is not visible by default but can be opened by staying over a keyword or a specific icon. The popUp is shown on the current web page without navigating away or refreshing the content of the current page. See a simple demo page and explanation at PopUpDemo.aspx.
	LightBox Demo The LightBox is another visual effect that can be used to implement a kind of modal user interaction without leaving the current loaded page. Because there is no unloading this feature can easily be used in AJAX applications. See a simple demo page and explanation at LightBoxDemo.aspx.
	The fade effect The DataFade control can be used to display changing values on a web page and bringing the users attention to the updated value. See a simple demo page and explanation at FadeDemo.aspx.
	Overlay panels The space on a web page is rare. Stacking multiple panels and using tabs to swtch between them is a solution to this problem and the look & feel is very well known to many users. This is often a better solution than scrolling down to the bottom of the page.
	Inline text editing This is an inline editor with some formatting capabilities to capture rich formatted text. This is the key step for building a special wiki or blogging side. See a simple demo page and explanation at InlineEditDemo.aspx.
	Accordion menu The accordion menu is a collection of multiple, stacked panels. Only one of them is visible and another can be opened by clicking the header of a closed one. Opening and closing the panels is implemented using smooth size transitions. See on the demo page including explanation at AccordionDemo.aspx.
	tags and tag clouds If you have too much pages or articles that need some order, tags are a common way of classifying and indexing. Tag clouds are used to show the used tag names and highlighting the most often used tags.
	Pager Control ViewPage.cs (view source) / ViewPage.js (view source) This is a WebControl extending the panel ASP.NET Control. This control is shown or hidden, depending on the value if the "view" property on the page. together with the ViewSelector Control it can realize a tabbed page layout. Sample: <ajax:ViewPage ID="Documentation" name="Documentation" runat='server'> </ajax:ViewPage> When the view property is set to the value of the name of this control or a '' charachter the inner content of the control is displayed. ViewSelector.cs* (view source) / ViewSelector.js (view source) This is a WebControl that displays a list of LinkButtons. These buttons can control the property "view" on the page. The attribute "views" of this controls can be set to a semicolon separated list of view values in the form of "values:caption". Sample: <ajax:ViewSelector runat="server" views="Home:Home;Documentation;Samples;Downloads;License;Impressum;*:All" /> For every item in the views list a Link-Button is generated. The ViewSelector Control and multiple ViewPage controls can be seen on the home page of this web.