Home arrow JavaScript arrow Page 3 - 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 - Creating dynamic pop-up notes
(Page 3 of 4 )

As we can see, the current script is a little weak and inefficient, because we're using absolute coordinates to position our pop-up note on the web document. Let's say visitors have changed their browser settings to use several font sizes, or set different screen resolutions. This might easily break down our note layout, since the text or element which the note is applied to would get expanded or contracted along with the Web page, and our pop-up note wouldn't be located in the right spot.

The solution for this issue is to rewrite our script in a way that detects the mouse coordinates when users pass over the link, and then position the note at those coordinates. To do this, let's modify our JavaScript code in order to increase its capabilities:

<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 note1 element when mouse is out 
            a1.onmouseout=hideNote;
}
// execute code once page is loaded
window.onload=createNotes;
</script>

Here, the script remains mostly the same, except that we have modified the showNote() function, which now is taking the x, y mouse coordinates, assigning them to the left and top properties of the pop-up note:

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';
}

We're making use of the powerful JavaScript Event Object. Since we're showing the pop-up note through the mouseover event handler, each time the visitor passes the mouse over the link, this object is available within the script, and therefore we are able to get the mouse coordinates. We do that with the following lines:

note1.style.left=event.clientX;

note1.style.top=event.clientY;

clientX and clientY are the object properties to obtain the X,Y mouse coordinates, which are assigned to the left and top positions of our note. Doing so, we've generated a pop-up note that will appear positioned at the corresponding mouse position when the visitor hovers over the link. This is a big improvement compared to the first example above, since it was only static.

The CSS code is very similar to the first case, and is shown below:

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

As we can appreciate, the only noticeable differences are that we've styled the link applying to it the class "special," just to differentiate from the other links present on the page. Again, feel free to add your own CSS rules and naming techniques. I have taken this approach for the sake of the example.

Next, the "#note1" selector is styled similarly, but the top and left properties are set to 0px. Since this box will be initially hidden from view, and then displayed according to the user's action, these values are not critical.


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