0

I have a jQuery that on mouse move it fade in/fade out a div object, however it doesn't work correctly when on view there is an iframe.

This is my jQuery:

var timer, myDiv = $('#mydiv');
$(document).on('mousemove', function(ev) {
    var _self = $(ev.target);

    clearTimeout(timer);

    if (_self.attr('id') === 'mydiv' || _self.parents('#mydiv').length) {
        return;
    }    

    if(!myDiv.hasClass('show')) {
       myDiv.fadeIn();
    }          

    timer = setTimeout(function() { 
        myDiv.fadeOut(1000, function() {
            myDiv.removeClass('show');
        });
    }, 1960);    
});

Why this jQuery doesn't work when the mouse pointer is hover an iframe object?

Here the DEMO

You can see on top of the demo page the proper functioning of the jQuery, it display the red square on mouse movement and hide it after n seconds of inactivity.

Instead if you try to do the same but on the iframe, the red square become hidden and nothing else.

UPDATE

Thanks to A. Wolff that shown me this I know that the solution is more complex than thought.

If the documents are not on the same document.domain it becomes quite a bit mroe complex, and you will need the iframes page to run javascript itself that sets the mousemove event listener. and then you can do cross frame communication as described here: http://softwareas.com/cross-domain-communication-with-iframes

The iFrame is referred to my subdomain page, so I can edit in any way needed.

How could I proceed?

Community
  • 1
  • 1
NineCattoRules
  • 2,253
  • 6
  • 39
  • 84
  • `doesn't work` isn't a very descriptive problem statement. Please elaborate on relationship between div and iframe and give better explanation of the problem. A demo would definitely help – charlietfl Apr 16 '15 at 16:03
  • as @charlietfl mentioned, this doesn't explain much. can you provide a jsfiddle? – Sushil Apr 16 '15 at 16:05
  • @charlietfl the iframe is on background (100% in height and width) the mydiv is above this iframe in a small portion...Ok I'll try to make a fiddle – NineCattoRules Apr 16 '15 at 16:07
  • "How can I pause a jQuery ... ?" How can anyone pause a jQuery? The concept of pausing a jQuery needs to be explained. – Roamer-1888 Apr 16 '15 at 16:07
  • @Roamer-1888 on mouse movement...indeed my jQuery works with a timer – NineCattoRules Apr 16 '15 at 16:08
  • @Sushil I'll make a fiddle! – NineCattoRules Apr 16 '15 at 16:09
  • 2
    Could be duplicate of: http://stackoverflow.com/questions/5261328/receive-mousemove-events-from-iframe-too – A. Wolff Apr 16 '15 at 16:11
  • @A.Wolff yes it's that I think...how to configure the listener on external domain? – NineCattoRules Apr 16 '15 at 16:15
  • 1
    @Simone External domain? Do you you mean cross domain iframe? If ya, your only solution i guess would be to use CSS `pointer-events: none;` on the iframe (or setting a transparent element as a DIV above the iframe for older browsers support) but this will disable all interaction with the iframe. – A. Wolff Apr 16 '15 at 16:18
  • @A.Wolff from the best answer:"you will need the iframes page to run javascript itself that sets the mousemove event listener" I was talking about this...I need interaction of the iframe and it's not a problem to edit the page because I need to iframe a portion of my subdomain – NineCattoRules Apr 16 '15 at 16:26
  • @Sushil I added the demo to my question – NineCattoRules Apr 16 '15 at 16:36
  • @charlietfl I added the fiddle to my question – NineCattoRules Apr 16 '15 at 16:36
  • 1
    can set `document.domain` inside iframe to match main domain which allows script access from parent window – charlietfl Apr 16 '15 at 16:55
  • @charlietfl could you please show an example or add your answer perhaps? – NineCattoRules Apr 16 '15 at 17:00
  • have you tried enclosing the iframe in a div and giving the div a mousemove event? – Sushil Apr 16 '15 at 17:03
  • @Sushil I tried and it doesn't work – NineCattoRules Apr 16 '15 at 17:06
  • @Simone can you try this fiddle and let me know if this is what you're looking at? i just added borders to see both the objects clearly. http://fiddle.jshell.net/res8ymp6/1/ – Sushil Apr 16 '15 at 17:12
  • @Sushil no, it's not...try this [demo](http://fiddle.jshell.net/res8ymp6/2/) . At the top you can see the correct working and what it's wrong when you are hover the iframe – NineCattoRules Apr 16 '15 at 17:31
  • 1
    You can post message from iframe to the parent window and handle it like in following example: http://jsfiddle.net/gcgx58dc/2 – A. Wolff Apr 16 '15 at 17:46
  • @A.Wolff I tried to add my `iframe` tag right after the `\ `. Is it correct? Because if you use the mouse only inside the iframe, the jQuery doesn't work – NineCattoRules Apr 16 '15 at 17:59
  • 1
    @Simone The posted jsFiddle sample was to demonstrate how you should ( inside **your iframe** ) post message to parent window. If you don't have access to iframe source code, to allow it to post message, you are out of luck. So add inside your iframe source code: `window.addEventListener("mousemove", function (e) { window.parent.postMessage({pageX: e.pageX, pageY: e.pageY}, "*"); }, false);` And listen to it in parent window using: `$(window).on('message', function (m) { var e = jQuery.Event("mousemove", { target: $('#divFrame').get(0) }); MouseOver(e, true); });` – A. Wolff Apr 16 '15 at 18:05
  • @A.Wolff A BIG hug to you, it works...thank you :) – NineCattoRules Apr 16 '15 at 23:54

0 Answers0