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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

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

The HTML markup is almost identical, and is shown here:

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

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

The full code for the page is as follows:

<html>
<head>
<title>DYNAMIC POP-UP NOTE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

createNotes=function(){
            showNote=function(){
                        // gets note1 element
                        var note1=document.getElementById('note1');
                        // assigns X,Y mouse coordinates to 'note1' element
                        note1.style.left=event.clientX;
                        note1.style.top=event.clientY;
                        // makes note1 element visible
                        note1.style.visibility='visible';
            }

            hideNote=function(){
                        // gets note1 element
                        var note1=document.getElementById('note1');
                        // hides note1 element
                        note1.style.visibility='hidden';
            }

            var a1=document.getElementById('a1');
            // shows note1 element when mouse is over
            a1.onmouseover=showNote;
            // hides note element when mouse is out 
            a1.onmouseout=hideNote;
}

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

<style type="text/css">

p {
            font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

a.special:link,a.special:visited {
            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #00f;
            text-decoration: underline;
}

a.special:hover {
            color: #f00;
}

#note1 {
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffc;
            padding: 10px;
            border: 1px solid #000;
            z-index: 1;
            visibility: hidden;
            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

</style>

</head>
<body>

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

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

</body>
</html>

The visual output is illustrated in the following images, indicating X - Y mouse coordinates:

As we can appreciate from these screenshots, the pop-up note appears at the mouse coordinates, expanding the limits of the previous static example, and displaying a more polished look.

If we wish improve the script even more, we might replace the "onmouseover" event handler with the "onmousemove" event handler within the code. Doing so, the note will be displayed "chasing" the mouse pointer, implementing an additional effect that can be potentially more appealing to visitors. All we have to do is replace the following line:

a1.onmouseover=showNote;

with this:

a1.onmousemove=showNote;

and that's all. We have a fully functional pop-up note that is very useful to include in our pages. Are we done? Not quite.

Note that in its current from, this script doesn't scale very well, since we're manipulating a single pop-up note. We did this to simplify the script, just so it's easier to understand how the JavaScript code is manipulating CSS. The next logical step would be expanding out the limits of the script to handle any number of notes across the Web document, which is the goal initially intended. In Part 2, we'll cover the creation of multiple pop-up notes. 


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