CODEWITHSUNDEEP
javascriptiframesame-origin-policy
leonsas
leonsas

Reputation: 4908

Mouse position over iframe

I have a div that act as a sidebar on the left, and then the rest (to the right) is an IFrame. My sidebar has a width of 50, and I want that whenever the mouse is towards the right of that it hides, and then when the mouse "enters the <50 zone" the sidebar shows again.

Would this be possible or there is a problem with cross domain access?

Upvotes: 2

Views: 1115

Answers (3)

Ohgodwhy
Ohgodwhy

Reputation: 50797

I think that If I understood your question right, it's not about capturing the mouse position (based on the pageX / pageY principle); but instead, it's that you want to simply have actions fire on mouseenter and mouseleave (hover).

You can achieve these results by building your DOM properly, and then styling it the way you want.

Without having to predict the position of the mouse, we can simply dictate when to show, and when to hide the content. In this scenario, we're using the 50px you wanted, and are 'showing/hiding' based on the action of the user. See working jsFiddle below:

EDIT

I choose to use .css() as opposed to .animate() because of the performance problems. If you want to tweak it, let me know.

http://jsfiddle.net/YGmN3/3/

Upvotes: 1

quodlibetor
quodlibetor

Reputation: 8433

there are definitely complications involved when you start using iframes--this doesn't work:

<Doctype! html>

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
          body iframe {
              margin-left: 100;
              border: 2px solid red;
          }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
          $(function(){
              $(document).on('mousemove', function(evt){
                  $('#pagex').text(evt.pageX);
              });
          })
        </script>
    </head>
    <body>
      <div id="pagex"></div>
        <iframe id="theframe">
          <div id="innepage"></div>
        <script type="text/javascript">
              $(document).on('mousemove', function(evt){
                      console.log(evt);
                  $('#innerpage').text(evt.pageX);
              });
        </script>
        </iframe>
    </body>
</html>

In fact, I wasn't able to place a mousemove listener anywhere that would successfully fire inside the iframe.

I know that iframes have their own rules, but I also know it's possible to interact with them because people do it all the time. Unfortunately I don't actually work with them, so I don't have the answer.

Upvotes: 0

wkm
wkm

Reputation: 1762

Maybe something like this:

HTML

<div id="sidebar" style="float:left; width:50px; background-color:green; height:250px;"></div>

​JS

$("html").mousemove(function(event) 
{

    var xPos = event.pageX;
    if (xPos <= 50) 
    {
        $("#sidebar").show();
    }
    else 
    {
        $("#sidebar").hide();
    }
});​

​http://jsfiddle.net/5VEzx/

Upvotes: 0

Related Questions