Home arrow JavaScript arrow Page 4 - Creating Pop-up Notes with CSS and JavaScript Part II
JAVASCRIPT

Creating Pop-up Notes with CSS and JavaScript Part II


A pop-up note contains information and can be made to appear when a visitor to your website moves the mouse over the appropriate area. In our second of two articles about pop-up notes, Alejandro Gervasio explains how to create multiple pop-up notes on a Web page using CSS and JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
January 24, 2005
TABLE OF CONTENTS:
  1. · Creating Pop-up Notes with CSS and JavaScript Part II
  2. · The HTML markup
  3. · The complete code
  4. · Summary

print this article
SEARCH DEVARTICLES

Creating Pop-up Notes with CSS and JavaScript Part II - Summary
(Page 4 of 4 )

Weíve gone a long way to make sure that our scripts works with multiple pop-up notes, and is useful when working with modern browsers. However, what about older browsers, or current browsers with JavaScript turned off? What about people with disabilities who use a screen reader? Considering that the number of people that fall under any of these categories is small, itís still a strong reason to use JavaScript code prudently. Regarding this particular example, if JavaScript is turned off, the rest of the Web page content will still work, even without the notes. But itís strongly recommended to use pop-up notes to provide additional information. Sensitive and critical information should always be presented to the users in the safest way possible.

Before we go deeper into the code, itís valid to consider that when weíre working with CSS and JavaScript, browser incompatibility issues might come up. So, itís always advisable to perform a browser checking process to generate the proper code, in order to determine which version of the Document Object Model (DOM) to use, which is often associated with the old browsers.

var ns4=document.layers; // Nestcape 4

var ie4=document.all;  // Internet Explorer 4

var nn6=document.getElementById && ! document.all; // Nestcape 6

if(ns4){
            // code for Netscape 4 goes here
}
else if(ie4){
            // code for Internet Explorer 4 goes here
}
else if(nn6){
            // code for Nestcape 6 goes here
}

Keep browser compatibility issues in mind when creating pop-up notes. I hope you've found these articles useful. 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials