Fun Jumper

Just for fun, let's put a div on the web page that jumps. The div can contain any valid HTML content. For this article, the div will contain an image.

When the mouse pointer moves over the image, the image jumps to a new location. For devices without a mouse, tapping the image makes it jump.

The demonstration image is an outline of an envelope within a colored circle. The image has the word "Possibilities" above the envelope.

If you're using a laptop or desktop computer to read this article, try putting the mouse pointer on the demonstration image. The image will jump to a new location.

On the other hand, if you are using a phone or tablet to read the article, tap the image to make it jump.

When the image jumps, it relocates itself to a random location within the browser window (the viewport). The window can be scrolled, and the image remains at its viewport location.

Fun ideas include an image of a squirrel, a small video playing, the words "May problems elude you", a laughing cartoon face, or an eagle in flight. You're probably thinking of something right now that would be fun on your web page.

Here is the source code to implement the demonstration. The source code has HTML and JavaScript. After the demonstration is working, the HTML code may be modified to suit your preference. No customization is required for the JavaScript.

<div style="position:fixed; left:125px; top:200px; width:118px; height:118px;"
onmouseover="JumpToNewLocation(this)" 
onclick="JumpToNewLocation(this)">
<img src="https://www.willmaster.com/images/icons/possibilities-newsletter-2.png" style="max-width:100%;" alt="envelope in a cirle">
</div>

<script type="text/javascript">
function JumpToNewLocation(d)
{
   d.style.top=Math.floor(Math.random()*(window.innerHeight-parseInt(d.style.height)))+"px";
   d.style.left=Math.floor(Math.random()*(window.innerWidth-parseInt(d.style.width)))+"px";
}
</script>

Pop the above code into a test web page, and you should be good to go.

A not about code positioning: Where you place the above code can affect how the fun jumper works. The fun jumper will tend to hide behind images and some other elements that appear in the source code after the fun jumper code. You can see the effect on this page. The fun jumper code is at the end of the article. The fun jumper hides under the "support this website" box below the article and the image in the navigation colomn on the right (or below if you are on a phone).

When you are ready to define your own content instead of the demonstration image, return here for how-to information.

The div contains five inline CSS declarations that are required. The values may be changed for all but one of the declarations. Additional CSS declarations may be added to the div. Here are the five required ones.

• position:fixed;

  The position:fixed; declaration must be present with the same value as the demonstration.

• left:125px; top:200px; (both)

  Both left:125px; and top:200px; are required. They position the fun jumper div when the page first loads. Change the values as appropriate for your implementation. Adjust the numbers to your preference.

• width:118px; height:118px; (both)

  Both width:118px; and height:118px; are required for the JavaScript to calculate a new location. The width and height tell the JavaScript the closest to calculate to the right edge and bottom of the viewport. Adjust the numbers according to your requirements. The width and height values may differ from each other.

Replace the img tag with your own div content.

The fun jumper is easy to implement.

Paste the code into one of your web pages. When you are ready to define your own content, replace the image tag.

"May you bring smiles to your site visitors." — Me

(This content first appeared in Possibilities newsletter.)

Will Bontrager