Resize external website content to fit iFrame width - javascript

I have a webpage with 2 iFrames in it. Both of them are with fixed width and height. I am loading external websites inside them. How can I resize those external websites width to fit with the iFrame (like mobile browsers does by changing viewport)?

What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
E.g.
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

Tip for 1 website resizing the height. But you can change to 2 websites.
Here is my code to resize an iframe with an external website. You need insert a code into the parent (with iframe code) page and in the external website as well, so, this won't work with you don't have access to edit the external website.
local (iframe) page: just insert a code snippet
remote (external) page: you need a "body onload" and a "div" that holds all contents. And body needs to be styled to "margin:0"
Local:
<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>
<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>
You need this "frm" prefix to avoid problems with other embeded codes like Twitter or Facebook plugins. If you have a plain page, you can remove the "if" and the "frm" prefix on both pages (script and onload).
Remote:
You need jQuery to accomplish about "real" page height. I cannot realize how to do with pure JavaScript since you'll have problem when resize the height down (higher to lower height) using body.scrollHeight or related. For some reason, it will return always the biggest height (pre-redimensioned).
<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>
So, parent page (iframe) has a 1px default height. The script inserts a "wait for message/event" from the iframe. When a message (post message) is received and the first 3 chars are "frm" (to avoid the mentioned problem), will get the number from 4th position and set the iframe height (style), including 'px' unit.
The external site (loaded in the iframe) will "send a message" to the parent (opener) with the "frm" and the height of the main div (in this case id "master"). The "*" in postmessage means "any source".
Hope this helps. Sorry for my english.

Related

Can't fix the width of popup element (colorbox jquery override)

I have the following code on my site that's supposed to show a popup window
<span class="fbridge-signup-form" data-widget-id="21378"></span>
<script type="text/javascript">
(function() {
var secure = ("https:" == document.location.protocol);
var fb_js_host = (secure ? "https://www.fanbridge.com" : "http://widget-platform.fanbridge.com");
window._FBRIDGE_WIDGETS_HOST = fb_js_host; var p, s, id = 'fbridge-widgetjssdk-v1';
p = document.createElement('script'); p.id = id; p.type = 'text/javascript'; p.async = true;
p.src = (secure ? "https://ssl.fbridgecdn.net" : "http://static.fbridgecdn.net") + '/js/fb/widget/v1/platform.js?_=' + ((new Date()).getTime());
s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(p, s);
})();
</script>
It works fine, but the problem is that there's some setting with lightboxes on my Drupal site that makes this window of a smaller width and height than the actual content inside.
I tried getting the element with getElementByClassName or writing the width and heightparameters into the style property of fbridge-signup-form but it didn't work out.
Do you know what I could do to force it to be a certain width and height? Say 480px by 400px?
You can check the actual page on http://waytorussia.net/Moscow/Intro.html (it has a cookie set to show only once).
UPDATE: maybe it's possible to use another kind of popup so this one is not overridden by my other settings?
According to the HTML source, the element you should resize is (id) cboxContent.
But the black frame around it doesn't seem "ready" (from an HTML/Css point of view) to be resized.
See the screenshot here:
I resized it 400x400.
EDIT -
By resizing all the appropriate elements, you can manage to get what you want. Here's an example done manually:
Just inspect the element (right-click > Inspect) with a modern browser, and look at the divs that you need to resize on load (with JavaScript).
i opened your page in Firefox with the developer tools to see how things work width and height wise and the results are interesting.
Basically the frame of the lightbox is made up of numerous divs all seem to be hard coded to a specific width and height. When you hover over the inner content using the inspector tool you can see that the inner content is actually the correct width and height but the container ( your collection of divs is not )
Try expanding the height and width of the container divs using css maybe??
I wouldnt have used this as answer but unfortunately i cant provide screenshots using just the comments section to my knowledge.
To see the image at full screen open it in a new tab.
For a good alternative try colorbox its a great JQuery modal plugin that can be used for just about anything.
Demos are here. Have a look at inline HTML example it seems to be similar to what you need.
Thanks to #Vincent G and #KyleT for their help I found that I had to edit the CSS styles for colorbox module.
#cboxLoadedContent iframe{display:block; min-width: 480px; min-height: 400px; border:0;}
and
#colorbox{min-width: 480px !important; min-height: 400px !important; }
in the colorbox.css file which was part of my Drupal installation.
After that the widget was loading fine.

Resize iframe height according to resizable content

I have an iframe and I want to re-size the height according to the content which may resize if user makes certain actions.
I don't want a scroll bar so it appears as a normal page
Use a div instead of an iFrame. Try posting some sample code so we can help you more. Generally, you cannot resize an iframe based on its content.
scrollHeight is the major property to retrieve the height of the IFRAME's content like this:
contentWindow.document.body.scrollHeight
After the IFRAME is loaded, you can then change the height by doing the following:
<script type="text/javascript">
function resizeIframe() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
var cont = iFrameID.contentWindow.document.body || frame.contentDocument.body
// here you can make the height
iFrameID.height = cont.scrollHeight + "px";
}
}
</script>
On the IFRAME load event, you can call this function:
But sure..iframe should not be loaded from other website

Unable to scale pdfobject element down to fit in a given frame

I have some problems with including an PDF on an JSF site. I'm using pdfobject (http://pdfobject.com/) but it does not work out the way I want. I can't adjust my settings for my desired outcome, where there is a unscrollable, scaled document (so that it fits the frame) shown in a frame with width = 595px & height = 842px. I tried until now:
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function() {
var myPDF = new PDFObject({
url : "ls_v7.pdf",
width: "595px",
height: "842px",
pdfOpenParams : {
page: 1,
view : 'FitB'
}
}).embed("pdf");
};
</script>
[...]
<div id="pdf">
It appears you don't have Adobe Reader or PDF support in this web
browser. Click here to download the PDF
</div>
or also
<object data="ls_v7.pdf#page=1&view=fitH"
type="application/pdf" width="595" height="842"> </object>
I think I tried most of the cases mentioned in this document, but where not able to come up with the right solution. (The oucome is always a frame with scroll-bars & the PDF gets always shown in full size)
Some background information:
I first included an PDF with iFrame on a JSF page, what went very well. But the Problem is, that on IE8 (some of the client machines) does not show them. So I went to this approach, if you would suggest to try another framework/etc. I would be also very greatful.
it's best to use CSS to specify exact size of the wrapper element.
PDFObject expands the PDF to 100% width/height of the parent container, so wrap your PDF in a div then size the div using CSS.
See this example: http://pdfobject.com/examples/simplest-styled.html

iframe dynamic height resizing

Hi I currently have 2 pages (index.html and iframe_contents.html). Both are on the same domain.
I am currently trying to get the iframe to dynamically resize based on the contents size.
I was using this to assist me http://benalman.com/code/projects/jquery-resize/examples/resize/ and it works if the iframe_contents body tag gets larger or smaller on Firefox and IE 7/8/9 but for webkit it only can grow and can never shrink
I've narrowed it down to the body tag in iframe_contents.html not shrinking when content height changes but only in the iframe. When iframe_contents.html is not in a iframe if I shrink / enlarge elements the bodies overall height changes.
Is this a webkit specific issue?
After reading lots of answers here they all had the same issue with not resizing smaller when needed. I think most people are just doing a one-off resizing after the frame loads, so maybe don't care. I need to resize again anytime the window size changes. So for me, if they made the window narrow the iframe would get very tall, then when they make the window larger it should get shorter again. This wasn't happening on some browsers because the scrollHeight, clientHeight, jquery height() and any other height I could find with DOM inspectors (FireBug/Chrome Dev Tools) did not report the body or html height as being shorter after the iframe was made wider. Like the body had min-height 100% set or something.
For me the solution was to make the iframe 0 height, then check the scrollHeight, then set to that value. To avoid the scrollbar on my page jumping around, I set the height of the parent (that contains the iframe) to the iframe height to keep the total page size fixed while doing this.
I wish I had a cleaner sample, but here is the code I have:
$(element).parent().height($(element).height());
$(element).height(0);
$(element).height($(element).contents().height());
$(element).parent().height("");
element is my iframe.
The iframe has width: 100% style set and is inside a div with default styles (block).
Code is jquery, and sets the div height to the iframe height, then sets iframe to 0 height, then sets iframe to the contents height. If I remove the line that sets the iframe to 0 height, the iframe will get larger when needed, but never smaller.
This may not help you much but here is a function we have in what would be your iframe_contents.html page. It will attempt to resize the iframe in which it is loaded in a sort of self-resizing, cross-browserish, pure-JavaScript kind of way:
function makeMeFit() {
if (top.location == document.location) return; // if we're not in an iframe then don't do anything
if (!window.opera && !document.mimeType && document.all && document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
} else if (document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
}
}
You could put calls to it in a resize() event or following an event that changes the height of your page. The feature-testing in that method should separate out WebKit browsers and pick the correct height property.

How can I reduce the size of an iframe without having the content cut?

I have a page that loads another page(url) onto it. The problem is that the iframe page does not fit well in the outer page. How can I reduce the size of the iframe page having the content of the iframe page intact? I do not wish to have scroll bars.
Unfortunately you can't really scale an iframe so that its contents change their size. To the browser, the iframe is a window onto another rendering context which has its own layout according to its own CSS. You are at the mercy of how the content inside the iframe is laid out.
If the iframe URL is from a different site and you can't modify it, then you can't really do anything.
If you can modify the page that's displayed within the iframe, well I'd assume you wouldn't be asking.
See the answer here ( How can I scale the content of an iframe? ). I'm using it and it works on FF, Chrome a little flakey.
You could try expanding the width/height of the iframe and checking the clientWidth vs iframe width. If they're equal, there's no scrollbar, otherwise there is.
Use a midpoint approach for efficiency. In sudo-code:
dx = iframe.width;
while (dx > 1) {
previous = iframe.width
if( iframe.width - iframe.clientWidth > 0 ) {
iframe.width += dx*2;
} else {
iframe.width -= dx/2;
}
dx = Math.abs(previous-iframe.width)
}

Categories