iframe location based on mouse location 1

[Graeme06]

Yet another question. After this though I should be done (well maybe one more question, but that's it).

Anyways, basically I've got a floating inner frame. This is working great, but it always shows up in the same spot, which kind of defeats the point of it being floating. I have an idea of how to go about this but theres 3 things I'm wondering:

1.) How do you find out the current mouse location (at the time of a certain function being called - oh and I just need the Y value)? Also is this number the location relative to the top of the website or position on the users screen? I tried Googling this and got nowhere (maybe I used the wrong keywords).

2.) So I have the iframe and it's within a CSS area <div id="floating">, the CSS is in an external file. Now if these are both already declared at the time of finding out the mouse location, how would I be able to reposition it while the page is being viewed?

3.) THis is similar, but a bit different, is it possible for the frame to move along with the mouse? Maybe using action listeners for mousemove or something?


Thanks a lot, and hopefully this is just about it,
Graeme

 

[kaht]

this code should answer all of your questions, copy/paste it in a new html file to see how it works:

<script type="text/javascript">

function getMouseXY(e) {
   var posX = 0;
   var posY = 0;
   var e = (!e) ? window.event : e;
   if (e.pageX || e.pageY) {
      posX = e.pageX;
      posY = e.pageY;
   }
   else if (e.clientX || e.clientY) {
      if (document.body.scrollLeft || document.body.scrollTop) {
         posX = e.clientX + document.body.scrollLeft;
         posY = e.clientY + document.body.scrollTop;
      }
      else {
         posX = e.clientX + document.documentElement.scrollLeft;
         posY = e.clientY + document.documentElement.scrollTop;
      }
   }
   document.getElementById("blah").style.left = posX;
   document.getElementById("blah").style.top = posY;
}

document.onmousemove = getMouseXY;

</script>



<div id="blah" style="position:absolute; width:25px; height:25px; border:1px solid black"></div>

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[Graeme06]

ah excellent, with a little modification that should work exactly for what I want.

Thanks a lot (and I'm guessing all those conditionals are just to get cross browser compatibility?)

 

[kaht]

and I'm guessing all those conditionals are just to get cross browser compatibility?

Correct:

   if (e.pageX || e.pageY) {
      //firefox
   }
   else if (e.clientX || e.clientY) {
      if (document.body.scrollLeft || document.body.scrollTop) {
         //ie - quirks mode
      }
      else {
         //ie - standards compliance mode
      }
   }

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[Graeme06]

again thanks

 

[Graeme06]

oh one more question, the code: var e = (!e) ? window.event : e; I get that its saying if e doesn't exist then e = window.event, but why do you need to do this? (and how can e not exist or not be initialized or whatever !e means?)