Iframe and absolute positioned elements

Question

I have a small issue with absolute positioned elements inside of iframe.

So I have a page, on the page I have a iframe with small game. In the game is a guy and the guy has absolute positioned pupils. The pupils are moving by javascript. Everything works just fine, but if I open that page, and go ahead and browse other pages in different tabs, After I come back the pupils are on other place than before (completely ut form eyes.)

There are more elements positioned absolutely in that iframe and none have the same problem I guess it is because of the Javascript animation. Did someone encouter similar problem? Im sorry but for many reasons I cannot post the page here.

I can post script for pupils animation:

function eyes_sides(){
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))-9
        },{duration:1500});
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))
        },{duration:1000});
}

function eyes_roll(){
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left'))-7,
        top:parseInt($('.eyes').css('top'))-18
      },{duration:1800});
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left')),
        top:parseInt($('.eyes').css('top'))
      },{duration:1300});
    }

function animate_eyes(){
      var animation = random_number(1,2);
      //alert(animation);
      switch(animation){
        case 1:
          eyes_roll();
          break;
        case 2: 
          eyes_sides();
          break;  
      }
      var delay = random_number(4000,12000);          
      window.animateEyes = setTimeout(function(){animate_eyes()},delay);
    }

The script is not perfect, but does what requires.

I was thinking what could cause the problem, and maybe it is somehow connected to that animation runs when the tab is not active? Maybe adding "onBlur" and "onFocus" to stop / start animation would help?

Thanks for advice!

I think you'll need that `onBlur()`. Check this answer: http://stackoverflow.com/questions/6112671/settimeout-speeds-up-with-multiple-tabs — Teemu, Apr 17 '12 at 07:42
Ok so I have tried the fixes from the other question, and some more with blur and focus, but none helped. I guess onblur and focus doesnt have much of an effect with iframe. any other ideas? — Tomas, Apr 17 '12 at 08:38
It does not deql with focus and blur. Try to create a div as iframe's backround. — Michael Sazonov, Apr 17 '12 at 08:56
Do you mean that `onblur()` did not work with `IFRAME`? You need to set it for the `IFRAME` element itself in that page which contains the iframe, not to the code inside iframe's document. — Teemu, Apr 17 '12 at 08:56

Teemu · Accepted Answer · 2012-04-17T09:24:01.023

0

This code is supposed to stop the animation. At least it triggres onblur on your IFRAME. You'll figure out easily, how to start the animation again.

I'm not familiar with jQuery, but you can "translate" the code.

window.onload=function (){
    var ifr=document.getElementById('your_iframe');
    (function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
    return; 
}

edited Apr 17 '12 at 09:24

answered Apr 17 '12 at 09:13

Teemu

22,918
7
53
106

Iframe and absolute positioned elements

1 Answers1