Add easy jQuery link popups – free script

Today I needed to send a site that I’m developing to a potential client.  I needed to show them an example of a feature that I’d put into the site. I was getting close to finished, but it was still a site in development. I had to send it the way it was.

But, being a weirdo, I wanted to make sure they knew that I knew that parts of the site were not yet functional. Particularly, that I hadn’t added locations for any of the links. Every link just went to site.com/# (that’s my normal link placeholder during site development).

I was already anticipating the email: “hey, that thing you wanted me to see is great, but none of the links work on the rest of the site. Do you really know what you’re doing?”

Yes! I know what I’m doing… jeez. ( That’s human nature, I think. We spot one odd thing and it calls into question everything else that we already accept as good. That’s why negative product reviews online are so annoyingly powerful.)

So what to do? Well, I thought I’d make a simple script that would give a popup warning whenever a link was clicked to warn that the links were intentionally not yet functional.

Anyway, here’s the script so that when any <a> link is clicked, a small jQuery popup window lets the user know that the link has intentionally been left non-functional.

 

3 Steps

1. Add a <div class=”linkhover”> to your html page with the message you want to display. (You could also do this part in the script, but that wasn’t necessary for me. You can remove this later when you no longer need the message.)

2. Add a few styles to your stylesheet (or inline, since we’ll just be deleting this later).

3. Add the script.

 

I’ve added comments liberally to help explain functionality.

The HTML - Add this to the bottom of your html just above </body>

<div class="linkhover">
 <p>This is a link that would go somewhere if this was a real website.
 <a href="#" class="close-hover"><strong>Close</strong></a></p>
 </div>

The CSS

.linkhover {
 display: block;
 padding: 18px;
 width: 201px;
 height: 90px;
 background-color: #fff;
 border: 1px solid #000;
 position: absolute; (this part is really important otherwise our jQuery positioning won't work right )
 z-index: 90;
 display: none;
}
.linkhover a {
 color: #ea193a;
}
/* this is the class that the script adds to change the display property from 'none' to 'block' */
.show {
 display: block;
}

The jQuery - a  version without comments is below for your copy/paste pleasure


$(document).ready(function() {
/* create variables to hold mouse location coordinates */
 var mouseX;
 var mouseY;
/* save pointer coordinates to the variables. This triggers on the mousemove event */
 $(document).mousemove(function(e) {
 mouseX = e.pageX;
 mouseY = e.pageY;
 });
/* I set a page width variable so I could tell if the popup box would push off the right side of the page */
 var width = $(window).width();
/* add a function to every <a>. Make sure to give (event) to the function */
 $("a").click(function(event) {
/* prevent the default action of the <a> click */
 event.preventDefault();
/* determine here if the popup should go on the left or right side of the pointer. Since the popup box will be about 225px wide */
 if(mouseX < width - 250) {
/* this is the class I gave my link div. Here we'll add a class (defined in our stylesheet), top and left px coordinates for positioning */
 $('.linkhover').toggleClass('show').css({
 'top' : mouseY + 'px',
 'left' : mouseX + 'px'
 });
} else {
/* the same thing happens here except we move the left edge of the popup to mouseX - 300px so it doesn't spill off the edge of the page */
 $('.linkhover').toggleClass('show').css({
 'top' : mouseY + 'px',
 'left': (mouseX - 300) + 'px',
 'right' : mouseX + 'px'
 });
 }
 });
}); /* End doc ready */

 The basics of what’s happening here: we set variables that are constantly getting the x and y coordinates of the mouse pointer. Then we listen for a click on any <a>. Then we add a special class to the <div> that changes its display property to dispaly: block;  and its left and top properties to the x and y coordinates (respectively) of the location of the mouse clicks.

One catch: if your link is really close to the right edge of the screen, the popup will go off screen. So the else clause moves it to the left side of the pointer location instead of the right side.

That’s it. Easy peasy, right?

Copy/Paste script

$(document).ready(function() {

var mouseX;
var mouseY;

$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
var width = $(window).width();

$(“a”).click(function(event) {

event.preventDefault();
if(mouseX < width – 250) {
$(‘.linkhover’).toggleClass(‘show’).css({
‘top’ : mouseY + ‘px’,
‘left’ : mouseX + ‘px’
});

} else {

$(‘.linkhover’).toggleClass(‘show’).css({
‘top’ : mouseY + ‘px’,
‘left’: (mouseX – 300) + ‘px’,
‘right’ : mouseX + ‘px’
});
}
});
}); /* End doc ready */