I was trying to set a dynamic height to an iframe but it always fail; I'm looking for an iframe alternative that retrieves contents from webpage and display it in the holder page with dynamic height. Any suggestions?
Add this to your <head> section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
search for responsive Iframe on google. There are a lot of tutorials and examples out there.
height:100%; will be an important keyword
Related
I have used iframe for view multiple image with in the frame and I want to hide the Horizontal Scroll Bar. I Have used following code snippet.
<div class="framepart">
<iframe src="http://docs.google.com/gview?url=http://www.puthuvannam.com/vendors/sample/documents/<?php echo $res['name'];?>&embedded=true" style="width:600px; height:500px;overflow-y:hidden;" scrolling="no" style="overflow:hidden" frameborder="0">
</iframe>
</div>
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.
However the <iframe> scrolling attribute is not supported in HTML5, even though most browsers understand it.
See this article to learn more on scrolling.
I think I found the problem.
I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).
By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).
I know this is a general question, but I can't get a true answer on Stackoverflow or searching google. How do I make a page with a fixed header for logo and links and an iFrame of a given URL. The closest I've come across is this iFrame with Fixed Header. What I really want to achieve is this example on CodeCanyon. The first link gives a decent answer, but the page has two scroll bars. Thanks in advance!
EDIT: I want to make the iFrame stretch to the height of the page :)
The examples you linked are using jquery to dynamically adjust the height.
//function to adjust height of iframe
var calcHeight = function () {
var headerDimensions = $('#header-bar').outerHeight(true);
$('#preview-frame').height($(window).height() - headerDimensions);
}
$(document).ready(function () {
calcHeight();
});
$(window).resize(function () {
calcHeight();
}).load(function () {
calcHeight();
});
This is the code i used to dynamically adjust the height.
you can see it here in jsfiddle http://jsfiddle.net/QQKc4/11/
You would have your HTML something like this...
<html>
<head>
</head>
<body>
<div style="height:[[some value you want in px]]"; width:100%;>
The logo and links come here
</div>
<iframe src="[[the url to load]]" style="width:100%;"></iframe>
</body>
</html>
Note - The inline styles can be moved to a stylesheet, and for the iframe, you'll need to calculate the window height minus the header div height with javascript/jQuery and apply the height to the iframe
You could do
<html>
<head>
</head>
<body>
<div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;">
The logo and links come here
</div>
<div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1">
<iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe>
</div>
</body>
</html>
how can I adjust the width and height for all iframe that has only youtube link
<iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/xbGv2T456dfg3">
because I have some the uses iframe also but I only need to adjust all iframe that has a youtube link.
css
iframe {width:560px;height:316px;}
need help on this
Use an attribute selector:
iframe[src^=http://www.youtube.com] {
width:560px;
height:316px;
}
If the link might be https, or some other variations, you can use the more liberal *= selector:
iframe[src*=.youtu] {
width:560px;
height:316px;
}
I'm trying to display an image within an iFrame on my page. The problem I face is that in Firefox, the image seems to be zoomed out automatically. I need to click on it to get the actual size. I know there is a manual fix for this by doing the following:
Enter about:config in Firefox address bar.
Look for browser.enable_automatic_image_resizing
Change the value to false
I was wondering though if there was something I could write on my script that would automatically take care of it?
You can use a div to get the same result as an iframe but without the resizing:
<html>
<head>
<title>foo</title>
</head>
<body>
<div style='overflow: scroll; width: 300px; height: 300px;'><img src="image.png" /></div>
</body>
</html>
If you set the image as a background image it should stop FF from scaling it.
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.