npr / responsiveiframe Goto Github PK

Hey guys. Great project this!

Just one issue on my side, when I have several iframes on one page that all utilizes the script it all goes bananas and the browser hangs. My child script

 var frame = responsiveIframe();
 frame.allowResponsiveEmbedding();

Any ideas on why this can be? This is how I call everything:

$('#mobile').responsiveIframe();
$('#tablet').responsiveIframe();
$('#desktop').responsiveIframe();

This script performed well in my project with the exception of an apx 10 to 20 extra pixels that would always overflow vertically, resulting in a scroll bar with a very small scroll area, regardless of the size of the responsive frame's contents. To fix this, I had to change line 82 from

    elem.css('height', height + 'px');

to this

    elem.css('height', (height+20) + 'px');

We are working with a project where responsiveiframe.js is already implemented.

Our issue is that the parent page always scrolls to the top, upon the resized iframe within.

The parent page has a top banner of about 600 pixels height.

We need to scroll down this 600 pixels upon iframe resize, so that the iframe remains in view.

In other words, the resize function should not scroll to the top of the parent page. Instead, we are seeking for the parent page to scroll to the top of the iframe (as if there was an anchor tag, just before the Iframe tag).

Any advice is greatly appreciated.

Am using this responsive iframe jquery in our project and it is really good.

Am getting two issues, could you please help me out..

1. The line from parent page <script type="text/javascript"> $(document).ready(function() { $('iframe').responsiveIframe({ this: 'isnt', that: 'is' }); });</script> is giving error in IE - and the error is expected identifier, string or number. which is showing near to "this" word.
2. Could you please provide me an example of using HTML elements inside iframe and that should be responsive. In the example u provided in the child.html is only for the paragraph tag. the contents in the p tags works too good. But we would need help for making the controls inside the iframes in a responsive way.

I have set xdomain to the source of my iframe but now the line

checkMatch = matches.length;

is causing the following error

Uncaught TypeError: Cannot read property 'length' of undefined

which makes sense as matches has yet to be defined.

There are a lot of JSLint warnings. They need to be cleaned up.

Hey,

Is it possible to make script to calculate page height from some different element other than body -tag? Im trying to implement this on Sharepoint, and Sharepoint calculates its body height from
#s4-workspace. Endresult is: when i try to see the sharepoint page, on first load it calculates page height to something HUGE, and then when it has stopped, page height is normal, and everything is fine, so problem only on first load. Chrome, Opera do this on first load, then its ok.

Surprisingly, IE works well :)

http://npr.github.io/responsiveiframe/demo1

Resource interpreted as Script but transferred with MIME type text/plain: "https://raw.github.com/npr/responsiveiframe/master/dist/jquery.responsiveiframe.js". demo1:23
Refused to execute script from 'http://raw.github.com/npr/responsiveiframe/master/dist/jquery.responsiveiframe.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. demo1:1
Uncaught TypeError: Object [object Object] has no method 'responsiveIframe' demo1:37
Resource interpreted as Script but transferred with MIME type text/plain: "https://raw.github.com/npr/responsiveiframe/master/dist/jquery.responsiveiframe.js". iframe1.html:23
Refused to execute script from 'https://raw.github.com/npr/responsiveiframe/master/dist/jquery.responsiveiframe.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. iframe1.html:1
Uncaught ReferenceError: responsiveIframe is not defined iframe1.html:28 

Happens in latest Chrome. Is due to the file being served as plain text and chrome not wanting to execute it. See: http://geekdave.com/2013/06/19/linking-raw-github-files-from-jsfiddle/

You should host the js locally in gh-pages branch.

Look me up some receipts y'all make an offer hello.

https://about.google/products/

My iframes use forms. When the form is submitted or if the browser window is moved responsively the browser/parent window automatically jumps to the top of the parent page holding the iframe. Is there a way to stop this from happening?

Within the iframe form are accordion items, and when they are 'clicked' and expanded open the iframe resizes fine, but the parent window jumps to the top of the page, and I really need the user to stay in the same position on the page.

I have tried 'scrollToTop: false' in the JS but this does not seem to make any difference?

I would appreciate any help. Thanks in advance.

Due to rendering quirks on a page I'm working on, responsiveiframe is making the height of an iframe 0. It'd be helpful to have a minimum height configuration option.

I believe the check to see if the iframe embeds a file:/// url will always be false because of a typo on line 49 of jquery.responsiveiframe.js on HEAD.

Hi,

It seems to work great (good job!) on load and on window resize but I have some dynamic content and it doesn't update the height of the iframe.

Demo here:
http://www.auto365.fr/test/test.php

Is there a way to trigger the function manually when user clicks on some element (here "Etape 2")?
Thx!

I use a scroll event on my page. Everything is good but as soon as I add the script and I embed the page on the iframe nothing happens.

$(window).scroll(function () { console.log('scroll'); });

My iFrames all use forms. When the form is submitted or any validation occurs with errors, the browser scrolls to the top of the page. If the user hits the submit button and there were errors, the user won't be aware because they are now at the top of the website.

I have tried:
$("#myIframeID").responsiveIframe({ scrollToTop: false });

But then the browser scrolls to the footer (where the iFrame is) on page load in Chrome and IE9.

I would appreciate any help. Thanks in advance.

If you have an iframe in an document wicht itself is embedded in an iframe the script fails. The solution is to post the message to the parent window (and not to the top window):

  ResponsiveIframe.prototype.messageParent = function(scrollTop) {
    var h = document.body.offsetHeight;
    h = (scrollTop)? h+'s':h;
    if(parent.postMessage){
      parent.postMessage( h , '*');
    } else {
      window.location.hash = 'h'+h;
    }
  };

http://yoursupersweepstakesdata.com/b89346a1-678e-45cb-acc6-acfe0d9e3cb572421e9a11032da03d185b7e2f1e9a37

MoneyI want a Ford truck needs someone to help me go over the logistics of this straight from my emails quick draw McGraw [email protected]

Originally posted by @Stormy333 in https://github.com/Stormy333/Patrick-McGraw-/issues/6#issuecomment-1746456522

Hi,

I've setup a testcase with the responsiveiframe plugin in combination with isotope and it works fine. Except when I resize the window in a rather fast way, then it doesn't resize the iframe correctly, causing some items to 'fall off'. The console outputs the calculated height.

On load it always displays the correct height, fitting all elements correctly.

Parent:
http://avont.nl/schepnet/iframe_testcase/parent/

Child:
http://avont.nl/schepnet/iframe_testcase/child/

Is there a way to trigger the height on resize correctly?

I can't seem to find a specific size to ensure duplication, but at certain screen sizes, the aspect ratio is wrong, creating either scrollbars or a grey box on the right side of the iframe.

Screenshots:

Is it possible to load multiple iframes in the same page?

I tried adding several lines like this:
$('#myIframeID').responsiveIframe({ xdomain: ''});
$('#myIframeID1').responsiveIframe({ xdomain: ''});

But it didn't work. It sized them all to the height of the last iframed element.

Thanks!

I'm trying to integrate your plugin but experiencing some issues.

Part of my child page content is loaded in after the initial load using jQuery but the parent iFrame doesn't seem to be resizing to fit it. I'm seeing this in Chrome and Firefox but it is resizing to show all content when I check it on Mobile Safari.

Also when a user interacts with this content it can change in height (showing and hiding elements with jQuery). On doing this I'm seeing inconsistent behaviour:

• In Chrome/Firefox the parent iframe doesn't resize at all.
• In Mobile Safari when the height of the content increases so does the iframe height, but when the content height then decreases the iframe height doesn't decrease with it. It just stays at the bigger size.

Any thoughts?

Do you have any other examples of your plugin being used with more dynamic content?

using same code as what is displayed on the project page.

That all

I tried on iPhone 4, iPhone 5 [iOS > 7]. Is there a fix for mobile browsers?

I have a child page in which the user interacts and elements are shown/hidden and the size of the content changes. But in the parent page the iframe's size is not updated until I manually resize the browser. Isn't that supposed to happen when content in child changes size? Using Chrome. Child and parent are on different domains.

child code:

<script>
          var ri = responsiveIframe();
          ri.allowResponsiveEmbedding();
</script>

in parent (with jquery 2.0.0):

<script>
        ;(function($){
            $(function(){
                $('#theiframe').responsiveIframe({ xdomain: '*'});
            });
        })(jQuery);
    </script>

    <div id="iframecontainer" style="width: 100%;">
        <iframe id="theiframe" src="http://urlofchildpage" style="width: 100%; padding: 0px;margin: 0; border: none; display: block;height:0px; overflow: hidden;" ></iframe>
    </div>

' does not exist on a jQuery.tooltip'

I have multiple iframes on a page, all pointing to different "child" sources. They are all being given a height equal to the tallest "child." Is that the default behavior?

For example, I am linking to your iframe1.html demo as my third iframe on my page, and all of the iframes are being resized to that same height.

Shouldn't each item be resized individually according to its contents?