Is it possible to adjust the height of the iframe scroll according to the size of the screen (browser)? It would be like simply replacing the default browser scroll with the iframe scroll. Here is what I mean by this:
I currently have my browser scroll disabled:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
I have my iframe:
<iframe width="100%" src="http://www.yahoo.com" scrolling="yes" frameborder="0" height="100%">
</iframe>
With width set to 100% the iframe scroll bar is pushed to the far right somewhat replacing the default browser scroll bar and my iframe is now the center piece of the website, (yahoo is an example). I can always adjust the height of the iframe to fit my specific browser size however is there a way I set the iframe scroll according to the browser height automatically? Make it responsive to the browser height just like it is to the width?
If you're using jQuery, you could do $(window).height() and then set the iframe height to it.
Drop this into the bottom of your HTML file, just above the closing </body> tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
;(function($){
$(document).ready(function(){
$('iframe').height( $(window).height() );
$(window).resize(function(){
$('iframe').height( $(this).height() );
});
});
})(jQuery);
</script>
Related
I have an iframe that I would like to align perfectly within the container on my website. Right now, there is still a border when I inspect the container containing the iframe element:
The iframe is embedded as following:
<style>
iframe {
width: 100%;
min-height: 500px;
}
</style>
<iframe id="myIframe" frameborder="0" height="100%" width="100%"src="path_to_my_file"></iframe>
I would also like for the height of the iframe to automatically be adjusted to the height of the container. That would mean that it would need to be adjusted every time the window size changes, so I would probably need a javascript method. Is there an efficient way to achieve that?
I have to work on a project and I am facing a problem of not removing the scroll from the iframe. actually, I am trying to pass several pages in a single iframe. So the iframe height is not set according to the content.
I tried a lot of javascript code but none of them works.
<iframe src = "" scrolling = "no"></iframe>
<style>
iframe{
overflow: hidden;
}
</style>
Try this, it should disable the scrolling in iframes
I have iframe with vertical scrollbar. I need to remove it and have this scollbar at the the page. So, when I need to scroll the content of the iframe, I can use the page scrollbar.
I did hide the the vertical scrollbar from the iframe but now, I don't have it at all.
I use:
iframe::-webkit-scrollbar {
display: none;
}
And this works only with google chrome but it doesn't work with firefox and Internet Explorer. I tried all the following:
iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}
But they didn't work.
So, I need your help to hide the scrollbar from iframe with all browsers.
And have the ability to scroll the iframe's content from the scrollbar of the page.
Thank you
Depending on the version of IE, sometimes using iframe {overflow: hidden;} will hide the scrollbar. But putting scrolling="no" in your iframe usually works on all browsers.
You can add JavaScript to the page within the IFRAME to, on load and on resize, set the height of the IFRAME within the parent. The page will need to exist within the same domain as the parent, although you may be able to overcome this with browser security settings.
Within the page (example uses jQuery):
if (window != window.parent)
$(function() {
var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
$(window.parent).resize(resize);
resize();
});
You will need to give the iframe a name on the parent page:
<iframe name="anything" ...></iframe>
This seems to work just fine:
Html 5/CSS
.ifm {
width: 1200px;
height:800px;
overflow-y: hidden;
}
<iframe src="https://bing.com"
class="ifm"
scrolling="no"
seamless="seamless">
</iframe>
Based on this post.
I want to generate an iframe whose height will extend to the bottom of the browser window. If the user changes the height of the browser, then the iframe's height should change dynamically as well. However, I'd like for the iframe to have a minimum height past which it would not shrink any further. How would I do this?
I'm doing something very similar.
1) Get a hold of the window resize event (I am using jQuery)
$(window).resize(function(){});
2) Pop in what you want your actions to be. For me I was setting a height explicitly on the body of the document so my CSS of height:100% on an inner container would take hold. You could do anything within the function:
$(window).resize(function(){
$('body').height($(document).height());
});
My markup :
<html>
<body>
<div class="full-height">Hello World</div>
</body>
</html>
My CSS :
body {position:relative;}
.full-height {height:100%;}
It would help to see what you're working with, but this will hopefully point you in the right direction.
iframe {
height:100%;
min-height:300px;
}
have you tried putting the iframe inside a wrapper div
<div id="iframediv" style="min-height:500; overflow:scroll">
<iframe src="http://google.com"> </iframe>
</div>
It's worth a shot.
I have an iframe problem. firstly I search the keyword iframe height in https://stackoverflow.com/search?tab=relevance&q=iframe%20height but I did not find someone I need.
How to make an iframe wicth height with 100% and no scroll. Scroll-y in body.
<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>
And if I search something via http://www.google.com in the iframe, after turn to the google search result page. the iframe will calculate the new height and still with iframe height 100%, the scroll bar in the body part. (I wish some help could work perfect not only in ie and firefox, but also in safari and chrome ). Thanks a lot.
This should do what you're looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
iframe {
width: 960px;
height: 100%;
overflow: hidden;
border: none;
}
</style>
</head>
<body>
<iframe src="http://google.com" scrolling="no"></iframe>
</body>
</html>
The keys here are to:
Make the BODY and HTML elements 100% of the browser window so when you make the iFrame 100%, it has something to be 100% of.
Set the BODY and HTML elements to overflow:hidden so that no scrollbars are shown
Make sure there is no padding
Hope that helps
Use my JQuery Plugin :
$.fn.resizeiframe=function(){
$(this).load(function() {
$(this).height( $(this).contents().find("body").height() );
});
$(this).click(function() {
$(this).height( $(this).contents().find("body").height() );
});
}
then , use it as following :
$('iframe').resizeiframe();
Don' forget to adjust attributes of iframe as following :
<iframe
src="islem.html"
frameborder="0"
width="100%"
marginheight="0"
marginwidth="0"
scrolling="no"
></iframe>
I was searching for the same effect and I found a way. If you look with 'examine element' in Chrome (or firebug) in the metrics section, then select the <html>. You should see if the html area is smaller than the whole document. If you set the html at height: 300%, it should work. Here are the important features:
html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}
***watch for any max-height you might have coded, it would screw the effect up.
In my case, I had to split the frame height with another element in my container, so it could fully strech without scrollbars appearing. So I had to calculate the % of height remaining in my container, using firebug.
------- Another way, easier:
Try not specifying any height for BOTH your html documents,
html, body {}
then only code this:
#some-div {height:100%;}
#iframe {height:300%;}
note: the div should be your main section.
This should relatively work. the iframe does exactly calcultes 300% of the visible window height. If you html content from the 2nd document (in the iframe) is smaller in height than 3 times your browser height, it work. If you don't need to add content frequently to that document this is a permanent solution and you could just find your own % needed according to your content height.