Home arrow JavaScript arrow Creating Pop-Up Notes with CSS and JavaScript Part I

Creating Pop-Up Notes with CSS and JavaScript Part I

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. Alejandro Gervasio explains how to create several different kinds of pop-up notes using CSS and JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 86
January 19, 2005
  1. · Creating Pop-Up Notes with CSS and JavaScript Part I
  2. · Creating static pop-up notes
  3. · Creating dynamic pop-up notes
  4. · The HTML markup

print this article

Creating Pop-Up Notes with CSS and JavaScript Part I
(Page 1 of 4 )

Within the structure of Web pages, pop-up notes are useful accessibility elements. They are often used to create footnotes, sidebars for articles, or to define an acronym, among other things. They're widely employed by numerous professional websites, fairly expanding their capabilities, in order to make visitors feel a little bit more comfortable during the surfing experience.

However, since pop-up notes rely heavily on JavaScript and CSS to work properly (except for the ones created with Flash), they always present a potential browser compatibility issue. Being applicable to anything on Web pages, we should make sure that any JavaScript code manipulating CSS or HTML objects degrades gracefully if the browser doesn't understand the script. This implies that it's a good idea to use pop-up notes only to provide supplemental information. They should never be used to supply critical information.

With the preliminaries out of the way, we're going to create pop-up notes using CSS and a little JavaScript in a step-by-step process, finally building an efficient script for generating multiple notes. So, let's dive into the code to show how it can work.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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