Skip to main content
paul_james123
paul_james123
Inspiring
April 10, 2019
Answered

FLA in an <iframe> is not responsive (in an Ipod)

  • April 10, 2019
  • 2 replies
  • 962 views

Hi All,

I'm developing FLAs that will be embedded into responsive html pages inside <iframes>.


As I'm developing on my laptop, I just adjust the browser window's width to approximate the different screen sizes to see how it would look in a phone or ipad. On my laptop, when I shrink the browser window's width the FLA acts responsively (shrinks with it): When the browser is the width of a phone screem, the FLA shrinks to completely fit within the screen. This works in IE or Chrome browsers on my desktop.

However, when I look at that page in an Ipod touch (Safari) that iframe-embeded FLA does not shrink. It's only partly visible on the screen and blocks text below it, etc. (Obviously, shrinking the browser window on my laptop isn't a good method for testing responsiveness.)

Does anyone know how I can force the FLA to act responsively (shrink) in the Ipod? (I haven't tested on an iphone yet but possibly I'll have the same problem.)

Here is the page I'm working on: Master CV/ Portfolio Template Demo

Thanks much!

This topic has been closed for replies.
Correct answer kdmemory

Paul

this is what I see on my S7 phone:

Different to your description at first the yellow CAREER PREPARATION animation didn't show up. I had to page up and down a couple of times before it finally appeared.

Of course both animations show problems. The KEY SKILLS anim is too wide and the CAREER anim half covers the title VIDEO COVER LETTER, but is width-wise okay. CAREER is in an iFrame, KEY SKILLS is not. I think your mix of different responsive and javascript methods might be problematic. Bootstrap, Animate, Waypoint.js, Inview.js and an outdated jQuery (version 1.9.1 is too old by now).

For a start I would put both Animate exports (HTML and JS) in iFrames. And use the responsive Publish Settings:

And I would in the hostpage integrate a small javascript which calculates and sets proportionally width and height of the iFrame element (in pixels), according to either window.innerWidth (CAREER) or the class="AOS_parent" (KEY SKILLS).

Further I somehow gather that your tendency to fit too much on one page stands in your own way.

Klaus

2 replies

kdmemory
kdmemory
Inspiring
April 11, 2019

Hi Paul

I'm looking at it in Responsive Design Mode in Firefox Developer Edition (FxDE). It shrinks!

In desktop view without Responsive Design view the #animation_container is 644 pixels wide. Hence it's shrinking, it's responsive.

I tried to access it on my S7 smart phone but your monster url seems to be always wrong, no matter how hard I try to type it correctly.

But definately I can't see your problem.

Klaus

paul_james123
paul_james123Author
Inspiring
April 11, 2019

Klaus,

Thanks for looking at that. I don't have access to Responsive Design Mode in Firefox Developer Edition but I'll look into that soon.

Sorry for that long URL. Try this:

tinyurl.com/demoAnimate

I'm curious what you see in your device.

In Iphone (8?), the Career Preparation FLA (in the 'Background' section) did not shrink. Additionally, the first FLA on the page (red progress bars in the 'Key Skills and Professional Strengths' section) didn't load like all the other content... until I paged up and down a couple times. (That Skills Meter FLA is not within an iframe.)

kdmemory
kdmemoryCorrect answer
Inspiring
April 12, 2019

Paul

this is what I see on my S7 phone:

Different to your description at first the yellow CAREER PREPARATION animation didn't show up. I had to page up and down a couple of times before it finally appeared.

Of course both animations show problems. The KEY SKILLS anim is too wide and the CAREER anim half covers the title VIDEO COVER LETTER, but is width-wise okay. CAREER is in an iFrame, KEY SKILLS is not. I think your mix of different responsive and javascript methods might be problematic. Bootstrap, Animate, Waypoint.js, Inview.js and an outdated jQuery (version 1.9.1 is too old by now).

For a start I would put both Animate exports (HTML and JS) in iFrames. And use the responsive Publish Settings:

And I would in the hostpage integrate a small javascript which calculates and sets proportionally width and height of the iFrame element (in pixels), according to either window.innerWidth (CAREER) or the class="AOS_parent" (KEY SKILLS).

Further I somehow gather that your tendency to fit too much on one page stands in your own way.

Klaus

paul_james123
paul_james123Author
Inspiring
April 11, 2019

I just checked on an iphone: same problem. The FLA is not responsive (doesn't shrink).

Any help greatly appreciated

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices