JavaScript
  Home arrow JavaScript arrow Creating Pop-Up Notes with CSS and JavaScr...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Actuate Whitepapers 
VeriSign Whitepapers 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Creating Pop-Up Notes with CSS and JavaScript Part I
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 44
    2005-01-19

    Table of Contents:
  • Creating Pop-Up Notes with CSS and JavaScript Part I
  • Creating static pop-up notes
  • Creating dynamic pop-up notes
  • The HTML markup

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
    Iron Speed
     
    ADVERTISEMENT

    Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

    Creating Pop-Up Notes with CSS and JavaScript Part I


    (Page 1 of 4 )

    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.

    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.

    More JavaScript Articles
    More By Alejandro Gervasio


       · Hello,The article explains in a detailed way, how to build pop-up notes using...
       · It's very useful for all to make web!Thank you!I will hope u post PartII.
       · Hi,Thank you for your feedback. Very much appreciatedAlejandro...
       · However the code is rather sloppy. You don't check for any availability of objects...
       · Thank you for the comment. You point is right, since the title attribute is good...
       · That might be the case, but where is the logical connection between the element and...
       · Yep, I've read carefully your above reasons, and they're pretty good. The whole...
       · This method is very bad from a semantics point of view. If you use a screen reader,...
       ·  Hi there, Thank you for your comments. Of course I agree that the title...
       · Hey,I would just look at the successful exposure, in a pedagogical sense.I...
       · Sure, it could work inserting images inside divs. Jut give a try.Thank you for...
       · There are plenty of occasions where this pop-up note could be useful and...
       · Hello friend,The suggested example is something that I haven't been thinking of,...
       · If you cut and paste the "here's the full code" bit you will find it works fine in...
       · Was it even mentioned? I didn't see anything discussing the compatibility issues. ...
       · Thank you for the good contributions here. As far I know, the script works in...
       · ok the scripts all good and all but what if you are new to css like me how and where...
       · Thank you for commenting on my article. Concerning your question, the tutorial...
     

    JAVASCRIPT ARTICLES

    - Using the Style Object for Zebra Tables with...
    - Binary Searching
    - An Improved Approach to Building Zebra Tables
    - Assigning Background Colors Dynamically to Z...
    - Building Zebra Tables with CSS and JavaScript
    - JavaScript: Array Objects
    - A Closer Look at Smart Markers with Yahoo! M...
    - Using Polylines and Smart Markers with Yahoo...
    - Bulleted Menu of Links
    - Creating Click Loggers and Basic Markers wit...
    - Adding Pan Controls to Yahoo! Maps
    - Adding Zoom Controls to Yahoo! Maps
    - Working with Yahoo! Maps
    - Building Image Zooming Controls with the DOM...
    - Working with Multiple Graphics for a Zoom Ap...

    Iron Speed

    Iron Speed





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway