Mouse following content

@QuattroSep 17.2011

I have tried to do this a few different ways and have not been able to figure this out yet.

Basically I want to show content from an iframe just below ond to the right of the cursor, and have it move along with the cursor anywhere on the page.

I would like to have it where I can enter the URL of the iframe and the size it will be, and anything from that iframe will folow the cursor just below and to the right (like 4 o clock) of the cursor.

I can pay or give you adwords or facebook coupon vouchers. Thanks again guys!

to post a comment

JavaScript

6 Comments(s) _↴

@JMRKERSep 17.2011 — #See if you can modify this script.

See: http://www.dynamicdrive.com/dynamicindex13/trailer.htm

You might be able to substitute the position of an <iframe> or <div> tag

for the current array defining the '.gif' images.

The array would be only one element long to avoid multiples.

@xelawhoSep 17.2011 — #here you go.

you need to load a new iframe and click the button before the follow function fires, otherwise it gets annoying. It gets annoying anyway, imho, but hey - it's your page. If you want it to fire straight away all you have to do is move the ToggleCapture (); call into the body onload.

and (of course) it doesn't work in IE. I believe it will in v9 but I don't have that to test. I guess it's a start, anyway...

[CODE]<!DOCTYPE html>
 <html>
 <head>
 <title>Untitled</title>
 <meta charset="UTF-8">
 <style>
 #square {
 position:absolute;
 }
 </style>
 <script type="text/javascript">
 
  var capturing = false;
 
   function ToggleCapture () {
   var square = document.getElementById ("square");
   if (capturing) {
   if (window.removeEventListener) { 
   capturing = false;
   window.removeEventListener ("mousemove", MoveSquare, true);
   }
   else {
   if (square.releaseCapture) { 
   square.releaseCapture ();
   }
   }
   }
   else {
   if (window.addEventListener) { 
   capturing = true;
   window.addEventListener ("mousemove", MoveSquare, true);
   }
   else {
   if (square.setCapture) { 
   capturing = true;
   square.setCapture ();
   }
   }
   }
   }
 
   function OnLoseCapture () {
   capturing = false;
   }
 
   function MoveSquare (event) {
   if (capturing) {
   var square = document.getElementById ("square");
   square.style.left = event.clientX + "px";
   square.style.top = event.clientY + "px";
   }
   }
 
 function changeIframeSrc(id) {
 ToggleCapture ();
 var el = document.getElementById(id);
 if (el && el.src) {
 el.src = document.getElementById("url").value;
 el.style.width=document.getElementById('width').value+'px'
 el.style.height=document.getElementById('height').value+'px'
 return false;
 }
 return true;
 } 
 </script>
 </head>
 
 <body>
 <div style="width:100&#37;">
 </div>
 choose iframe source:
 <input type="text" id="url" value="http://"></input>
 choose iframe height (pixels):
 <input type="text" id="height"></input>
 choose iframe width (pixels):
 <input type="text" id="width"></input>
 Change iframe:
 <input type="button" value="Go!" onclick="changeIframeSrc('ifrm')">
 </div>
 </div>
 <div id="square" onmousemove="MoveSquare(event);" onlosecapture="OnLoseCapture()">
 <iframe id="ifrm" src="http://www.google.com" frameborder="0" style="width:200px; height:200px"></iframe>
 </div>
 </body>
 </html>
 [/CODE]

@xelawhoSep 17.2011 — #sorry for the double post - can't figure out how to edit my previous.

here's a version that works in FF, IE & Chrome ?

[CODE]
 <!DOCTYPE html>
 <html>
 <head>
 <title>Untitled</title>
 <meta charset="UTF-8">
 <style>
 #square {
 position:absolute;
 }
 </style>
 <script type="text/javascript">
 
   function MoveSquare (e) {
   var square = document.getElementById ("square");
   var posx = 0;
   var posy = 0;
   if (e==null)
   e = window.event;
   if (e.pageX || e.pageY){
   posx = e.pageX + "px";
   posy = e.pageY + "px";
   }
   else if (e.clientX || e.clientY){
   posx = (e.clientX + document.body.scrollLeft
   + document.documentElement.scrollLeft) + "px";
   posy = (e.clientY + document.body.scrollTop
   + document.documentElement.scrollTop) + "px";
   } 
   square.style.left = posx;
   square.style.top = posy;
   }
 
 function changeIframeSrc(id) {
 document.onmousemove=MoveSquare;
 var el = document.getElementById(id);
 if (el && el.src) {
 el.src = document.getElementById("url").value;
 el.style.width=document.getElementById('width').value+'px'
 el.style.height=document.getElementById('height').value+'px'
 return false;
 }
 return true;
 } 
 </script>
 </head>
 
 <body>
 <div style="width:100&#37;">
 </div>
 choose iframe source:
 <input type="text" id="url" value="http://yahoo.com"></input>
 choose iframe height (pixels):
 <input type="text" id="height"></input>
 choose iframe width (pixels):
 <input type="text" id="width"></input>
 Change iframe:
 <input type="button" value="Go!" onclick="changeIframeSrc('ifrm')">
 </div>
 </div>
 <div id="square">
 <iframe id="ifrm" src="" frameborder="1" style="width:200px; height:200px"></iframe>
 </div>
 </body>
 </html>
 [/CODE]

@QuattroauthorSep 18.2011 — #Ok, great thanks!

2 questions:

-How do I offset it so that it is below and to the right of the cursor, it is too much having it right on top of the cursor, I want the mouse to still be functional ?

-Is there any way to make it fluidly stay with the mouse, and not have to play catch up? I have seen before and tried to do it like using an image as a cursor, that way it is always following the mouse at a set point and not "glitchy"?

Thanks again!

@xelawhoSep 18.2011 — #actually for simplicity, the MoveSquare function should be like this:

[CODE]function MoveSquare (e) {
 var square = document.getElementById ("square");
 var posx = 0;
 var posy = 0;
 if (e==null)
 e = window.event;
 if (e.pageX || e.pageY){
 posx = e.pageX;
 posy = e.pageY;
 }
 else if (e.clientX || e.clientY){
 posx = (e.clientX + document.body.scrollLeft
 + document.documentElement.scrollLeft);
 posy = (e.clientY + document.body.scrollTop
 + document.documentElement.scrollTop);
 } 
 square.style.left = posx+15 + "px";
 square.style.top = posy+20 + "px";
 }[/CODE]

and then you can just play around with the 15 and 20 at the end there until you have it how you like it.

For your second question, I have no idea.

@QuattroauthorSep 18.2011 — #Swell, works great! I will try to find out how to make it stick right with the mouse without delay, I basically want to offer advertisers the ability to put a movie trailer or commercial on my site that will auto-play and follow the mouse around for 14 seconds or so.

Also in #JavaScript _↴

jQuery show/hide Favorite Icon Zipcode data base

Success!

Help @Quattro spread the word by sharing this article on Twitter...

Tweet This

Mouse following content

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Mouse following content

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴