JavaScript
  Home arrow JavaScript arrow Page 2 - 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  
Moblin 
JMSL Numerical Library 
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 II
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 22
    2005-01-24

    Table of Contents:
  • Creating Pop-up Notes with CSS and JavaScript Part II
  • The HTML markup
  • The complete code
  • Summary

  • 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
     
     
    ADVERTISEMENT


    Creating Pop-up Notes with CSS and JavaScript Part II - The HTML markup


    (Page 2 of 4 )

    Having defined our CSS code, it’s time to list the corresponding HTML markup:

    <p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>

    <div id="note1" class="note">PHP: PHP Hypertext Preprocessor</div>

    <p><a href="#" id="a2" class="special">SQL</a> is the standard language for querying databases.</p>

    <div id="note2" class="note">SQL: Structured Query Language</div>

    <p>In fact <a href="#" id="a3" class="special">DHTML</a>, is a fusion of HTML and client-side programming.</p>

    <div id="note3" class="note">DHTML: Dynamic Hypertext Markup Language</div>

    As we can see, we’ve assigned an ID to each <a> element with class attribute "special" in the form "a1," "a2," "a3" and so on. Similarly, IDs for each <div> element containing pop-up notes have been assigned in the form "note1," "note2," "note3" and the like. Now the relationship between the links and the notes becomes very clear. Our next task is to define the script to make pop-up notes work properly, so let’s define the JavaScript code:

    <script language="javascript">

    createNotes=function(){

                showNote=function(){
                            // gets corresponding id for note element 
                            var id=this.id.replace(/a/,'note');
                            note=document.getElementById(id);
                            // assigns X,Y mouse coordinates to note element
                            note.style.left=event.clientX;
                            note.style.top=event.clientY;
                            // makes note element visible
                            note.style.visibility='visible';
                }

                hideNote=function(){
                            // gets corresponding id for note element
                            var id=this.id.replace(/a/,'note');
                            note=document.getElementById(id);
                            // hides note element
                            note.style.visibility='hidden';
                }

                // gets all <a> elements 
                as=document.getElementsByTagName('a');
                // iterates over all <a> elements
                for(i=0;i<as.length;i++){
                            // assigns mouse event handlers to <a> elements with class name "special"
                            if(/\bspecial\b/.test(as[i].className)){
                                        // shows note element when mouse is over
                                        as[i].onmouseover=showNote;
                                        // hides note element when mouse is out
                                        as[i].onmouseout=hideNote;
                            }
                }
    }

    // execute code once page is loaded
    window.onload=createNotes;
    </script>

    The script looks rather complex, but it’s really simple and straightforward. Let’s break down the code to understand how it works.

    First off, we define the showNote() function, which is very similar to the above previously defined, presenting an additional line:

    var id=this.id.replace(/a/,'note');

    Each time visitors pass a mouse over the link, the function is called, and within it we catch the ID corresponding to that link. Then, in order to obtain the ID for the <div> element containing the pop-up note, we only replace the part starting with "a" with the string "note" thus getting the ID that corresponds to the note. A few examples will help to clarify this concept:

    Given an id "a1" for the link element, the expression evaluates in the following manner:

    a1.replace(/a/,'note');

    and results in the following ID: "note1".

    For the subsequent IDs "a2" and "a3" the resulting IDs will be "note2" and "note3," and so on. Once we’ve obtained the ID that belongs to the containing <div> element for the pop-up note, it’s just matter of setting its visibility property to "visible," making the note visible to visitors.

    In a similar way, the hideNote() function gets the corresponding note id and set its visibility property to "hidden," hiding the note to users.

    The rest of the script is pretty easy to follow. First, we get all of the <a> elements present on the Web document. Next we check which ones have the class name attribute "special," and then assign them the "onmouseover" and "onmouseout" event handlers. The full code is wrapped into the createNotes() function, which will be executed once the page finishes loading.

    Finally, all the "special" links will display a pop-up note when the visitor hovers over the links. That’s pretty good, right? We’ve got a working script that allows displaying multiple notes on a Web page.

    More JavaScript Articles
    More By Alejandro Gervasio


       ·  Here's the second part of the article. We're dealing with creating multiple...
       · I'm confused as to why you've used visibility:hidden; instead of...
       ·  That's right. Visibiliy simply hides the element without removing it from the...
       · The notes stay visible in Safari (1.2.4) when using onmousemove - changing to...
       ·  Yes,I've tried with Firefox, but it doesn't handle properly the event object when a...
       · Error: event is not definedSource File:...
       · Hi,I was unable to acces your provided URL.Alejandro Gervasio
       · As the code is it does not work with Firefox. It did, however, work properly with...
       · Hi Alejandro,Great article. From it, I figured out 2 things:1) simpler way...
       · Hi thereI have tried this with long pages. The pop-up notes work in the top part...
       · Hello,Thank for your comments on this article. With reference to your question,...
       · Hello,Thanks for the comments. Regarding your question, here's a modified...
       · Thank you very much AlejandroI used some bits of your code along with info from...
       · Hello again,Thank you for posting your message. I'm glad to hear that you found...
       · Even with this modified code, I still see the same problem. The pops aren't visible...
       · Thank you for your feedback. I changed the function I posted before, in order to...
       · Hi, I am trying to get multiple pop-up notes to appear when I click on an image...
       · Thanks for commenting on my JavaScript article. Concerning your question, this...
     

    JAVASCRIPT ARTICLES

    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...
    - Dynamically Generate a Selection List in a R...
    - Intergrate DWR into Your Java Web Application
    - Detect Browser Compatibility with the Reques...
    - Using the EXT JS Date Picker Widget
    - Ajax Hack for Entering Information Without R...
    - EXT JS 2.1 Overview
    - Using the Style Object for Zebra Tables with...
    - Binary Searching
    - An Improved Approach to Building Zebra Tables






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