Building Pop-Up DIVs with the DOM and AJAX (Page 1 of 4 )
A downloadable zip file for this article is available here.
In that vast and exciting terrain that is web development, thereís a great range of approaches to be followed when it comes to displaying additional information to visitors about the contents of a particular web document. The situation that I just described is usually solved by using some simple, standard solutions, such as including a few ďtitleĒ attributes in a web page. These are usually attached to the links that are required to show this extra information.
However, this schema can be easily applied to different elements of a specific web document, like images, via the corresponding ďaltĒ attribute, or simply by adding the mentioned ďtitlesĒ to other tags, such as DIVs, paragraphs, tables, form boxes, and so forth. Until now, all these simple and effective methods that I mentioned before should be quite familiar to you, right?
But what happens if you want to make your web site even richer and more interesting, and wish to show additional content to different users (without sacrificing accessibility and usability) that canít be housed in simple ďtitleĒ attributes? For instance, say you need to implement a dynamic advertising system in some words that appear in each of the web documents included in your web site, which display small boxes that contain sponsored links related to the terms in question. Certainly, this happens very frequently, and logically it canít be addressed by only a few title attributes.
In the course of this three-part series, Iím going to teach you in a step-by-step format how to built effective pop-up DIVs. These can be used for displaying into any web page not only static information, but dynamic content as well, by utilizing a few simple DOM methods, and the neat functionality provided by AJAX.
At this point, Iím sure that the subject of this article has already caught your attention. So letís move on and learn together how to create these dynamic pop-up DIVs. Itís going to be an educational experience!