iFrame and mouse interactions

Question

When using any type of jQuery UI control (ie: a jQuery slider control), the control will stay active if the mouseup is released while passing over an iFrame. By active, I mean it's like you never moused-up.

I'm building an app that uses an iFrame in 1 area so this has become a big problem. Is there a way to fix this problem?

cliffbarnes · Answer 1 · 2012-11-13T21:41:13.430

0

Have you tried the iframeFix helper? It places a transparent screen over the iframe. I have used it with draggable/droppable UI. Not sure about the slider control.

http://api.jqueryui.com/draggable/#option-iframeFix

If this doesn't work (short of being able to see the code) my guess is the problem is because of the interaction with the iframe. When you mouseover the iframe it messes with the event handlers in the parent DOM, like mousing out of the browser window itself.

Have you tried putting your own transparent layer over the iframe?

edited Nov 13 '12 at 21:41

answered Nov 12 '12 at 12:47

cliffbarnes

1,396
11
21

Thanks - I'll take look and post back – Andrew Nov 12 '12 at 14:36
I think iframefix may only work for draggable, resizable, etc... I tried with slider and it didn't help. – Andrew Nov 12 '12 at 14:44

score 0 · Answer 2 · answered Jul 26 '13 at 09:02

I opted for a basic timer solution, I tried other methods but it seemed to make the slider sluggish

// fix for jq-ui slider not releasing outside of iframe
$(document).on('mouseout', 'body', function(){
        outOfFrame = true;
});

$(document).on('mouseover', 'body', function(){
        outOfFrame = false;
});

setInterval(function(){

    if(outOfFrame) {
         $('#wrap').trigger('mousedown').trigger('mouseup');
    }

}, 1500);

score 0 · Answer 3 · answered Mar 04 '16 at 11:59

This thread is old but I had the issue myself recently and this is what solved my problem with the jquery ui slider inside iframe on internet explorer.

$("#wrapper").mouseleave(function (){
   $('#wrapper').trigger('mousedown').trigger('mouseup');
})

iFrame and mouse interactions

3 Answers3