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.
Next: The HTML markup >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 46 
