www.mathertel.deThe AJAX EngineSamples 4: visual effects
View Source

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.

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 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.

Moving objects arround

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.

A moveable web part.

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.

Show more details in PopUp elements.

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.

Some kind of modal user interaction using a lightbox.

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 DataFade control can be used to display changing values on a web page.

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.

Using tabs and panels to save space.

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.

Edit text fragments inline with rich formatting.

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.

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.

to be done.

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.

AJAX based Validator Control

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'>

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.