Home arrow JavaScript arrow Page 2 - 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 / 85
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 - Creating static pop-up notes
(Page 2 of 4 )

Static pop-up notes are really simple to create. They only appear statically positioned around the page element which we want to be affected by the note. Let's get started generating our first pop-up note by making use of the code below, which generates a simple Web page and the styled elements. Here's the CSS code:

<style type="text/css">

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

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

The corresponding HTML markup is the following:

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

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

Let's explain in detail the CSS declarations and the HTML, respectively. 

We've redefined the <p> tag to show the text which the pop-up is applied to. Feel free to include any CSS rule that suits your needs. Next, we've declared our "#note1" contextual selector, which takes care of styling the pop-up note itself accordingly. As we can see, it has been absolutely positioned with top and left coordinates. Also, it presents a yellow background, a border of 1px, and the font family is set to Verdana, Arial, Helvetica, sans-serif. In fact, it's very simple.

Next, within the HTML markup, we have a paragraph containing the text itself. Inside of it we've included the link with an id attribute "a1," which will be triggering the JavaScript functions to show and hide accordingly the pop-up note:

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

Finally, the containing <div> for the pop-up note is properly defined. As we can see, the text included in the <div> element is the descriptive content that will appear when the pop-up note is activated:

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

So far, we have explained these sections of our Web page, but we need a script to put into action our desirable static pop-up note. The JavaScript functions needed to make the notes work are as follow:

<script language="javascript">

createNotes=function(){

            showNote=function(){
                        // gets note1 element
                        var note1=document.getElementById('note1');
                        // shows note1 element
                        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 note1 element when mouse is out 
            a1.onmouseout=hideNote;
}
// execute code once page is loaded
window.onload=createNotes;
</script>

The operation of this JavaScript snippet is really pretty simple. We position a styled paragraph in the appropriate spot using CSS, and then show or hide the containing <div> for the note by changing its CSS visibility property, based on whether the user passes the mouse over the link or positions it outside that area.

The showNote() function, as its name suggest, shows the pop-up note, by setting the visibility property to visible. In a similar fashion, the hideNote() function sets the visibility property to hidden.

As shown below, the showNote() function changes the visibility property to: "visible" for the "note1" element:

showNote=function(){
            // gets note1 element
            var note1=document.getElementById('note1');
            // shows note1 element
            note1.style.visibility='visible';
}

Simililary, the hideNote() function sets the visibility property to "hidden", by reversing the work done by the showNote() function:

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

By attaching the "mouseover" and "mouseout" event handlers to the link, we achieve the desired result:

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

The complete code is shown below. Just copy and paste it into your HTML editor, save it and make it work.

<html>
<head>
<title>STATIC 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');
                        // shows note1 element
                        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 note1 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 12px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

#note1 {
            position: absolute;
            top: 30px;
            left: 160px;
            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">PHP</a> is just great.</p>

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

The visual output for this static pop-up note is illustrated below:

Now the static pop-up works the way we want. But it's still not good enough for our purposes. Let's expand our JavaScript code to create dynamic notes, which look a lot more professional. By manipulating mouse events, we'll be able to generate more appealing pop-ups, well suited for most websites. That's the subject of the next section.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials