Your Mouse Is A Magician

Not really, but the simple act of something on the screen following my mouse cursor still fascinates me, but so do many little things in life.

In addition to adding this interactive map, I decided to make the text follow the mouse. And I decided to tell you about it in case you wanted to do it yourself.

interactivemap
First, download JqueryUI and place it in your usual js location. This library gives you all kinds of nice stuff, like moving a <div> around a page that follows your mouse.

Next, reference it in your page, something like this:

<script src="/js/vendor/jquery-ui.min.js"></script>

Here’s my <div> by the way, this is what I’ll be using.

<div id="forworldmapcomment" style="position:absolute;"></div>

In your $(document).ready(function() {}); function add this:

$("#forworldmap").mousemove(function(e){
  $("#forworldmapcomment").position({
	my: "bottom-20",
	of: e,
	collision: "fit"
  });
});

That’s all there is to it, your <div> with id forworldmapcomment will follow the mouse around the screen.

I’ve positioned it 20 pixels above the event (mouse)’s position to avoid most conflicts.

Advertisements
Leave a comment

2 Comments

  1. Yaz

     /  04/04/2013

    Thanks for being generous enough to share what you learn. We’re lucky to have you around!

    Reply
    • Yaz!! Happy Thursday! And that was a very sweet comment! I appreciate it, and same to you! If I can give someone even one nugget that helps them out, great!!

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: