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.
Next: Creating dynamic pop-up notes >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
