Home arrow JavaScript arrow Building Pop-Up DIVs with the DOM and AJAX
JAVASCRIPT

Building Pop-Up DIVs with the DOM and AJAX


Pop-up DIVs can be used for displaying static and dynamic content into any web page. This three-part series will show you how to create and use pop-up DIVs with AJAX and the DOM.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 28
January 31, 2007
TABLE OF CONTENTS:
  1. · Building Pop-Up DIVs with the DOM and AJAX
  2. · Developing a basic pop-up DIV
  3. · Dynamically creating a pop-up DIV
  4. · Completing the pop-up DIV script

print this article
SEARCH DEVARTICLES

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.

Nevertheless, not all is lost here. Using a proper combination of well-structured markup, along with the help of JavaScript, itís possible to create the advertising application that I discussed a few lines above (or a similar one, of course), which also can be provided with the ability to display content pulled directly from remote sources like a database table or an XML file. Naturally, the question that comes up now is: is this a hard thing to do? Not at all, believe me!

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!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials