DHTML & AJAX in Content Management

In this series of articles we take a look at some of the possibilities of Web Design with DHTML - focusing on the idea of using DHTML layers for content management. The content may be text, images, video or combinations of these. The management may involve simple direct placement of the content in a new layer by means of an onclick event for example, or it may mean using server-side scripting to dynamically populate the layer according to some conditions.

In particular we will look at using AJAX with DHTML so as to minimize the loading time of the popup content or just a part of it. This will not involve just images, but data such as product data which is updated according to user selections - rather than reload the whole content of the popup dhtml, we will be able to use AJAX to update just that part of it much faster.

The management side will also involve what happens to the content in the layer, and how the layer parameters and design change according to the content - to take a simple example making the layer adjust its size and position in the page according to the image. Also, the positioning of the layer can be adjusted depending on its relation to the web page content.

In this article we take a look at a simple way to show enlarged images from a gallery of thumbnails laid out in a table. When the mouse passes over the thumbnails, a magnified version shows up in the DHTML popup window below. These images could be pre-loaded so that there is no delay in the loading. We chose our popup so that it is always attached to the bottom edge of the browser window, scrolls with the page and repositions itself as the browser is resized.

Trafalgar: 1

Trafalgar: 2

Trafalgar: 3

Many rows and columns of images can be presented, and as the visitor scrolls down the page to bring them into view the DHTML window stays fixed at the bottom (it scrolls with the page). Also, if the browser is resized the DHTML window will adjust its position to stay in the same relative location.

Trafalgar: 4

Trafalgar: 5

Trafalgar: 6

In this case, on mouseover of the thumbnails, a function is called from the Advanced DHTML Popup compiled JavaScript library to update the content of the DHTML layer below. The function takes just two arguments, the unique ID (uid) of the popup on this page, and the new content. The content is in the form of a string which contains HTML, and is predefined by the user to contain the new content. This is obtained from the application or by direct editing of a file.

Other functions could be called at the same time to manipulate the popup in size, position, design aspects, colors etc. The title could be updated also, switched on and off, just about anything can be achieved with the help of additional functions, scriptlets and imagination.

In this case the images are sourced from the server using simple JavaScript, in which case the image is downloaded when the mouseover happens and then it is cached. The next time the thumbnail is viewed the content update is fast, since it exists on the client and there is no need to download it again.

This may be an example where the use of AJAX is not particularly beneficial, since in that case the image would be downloaded each time. But in the next article we will take a closer look at AJAX.

Article Index