Home arrow JavaScript arrow Page 2 - 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 - 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.


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