I have the following code that sizes the iframe perfectly on tablets,computers, etc. and iphones. It creates an iframe approximately half the size of the entire screen on a droid phone. It fits the entire screen upon a refresh. How could I approach to fix this so that the iframe fits the entire page on a droid phone on first load?
<html>
<head>
</head>
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="/index2.php" frameborder="0" style="overflow:hidden;height:100%;width:100%" >
</iframe>
</body>
</html>
You need to tell the browser to fill the whole page with the main document. Use this:
html, body {
width: 100%;
height: 100%;
}
Related
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
can someone give me an example how to view only a part of a website?
I would like to show a part of a website with iframe tag (using an id or class name or ?).
how can I do?
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
you couldn't control an external page.Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. even though there are some java script methods, but all are not really good. because scrolling occurs only when page is load.
the only one solution is You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.
see the example
html
<div id="frame-wrapper">
<iframe src="http://www.w3schools.com" id="my-iframe" scrolling="no"></iframe>
</div>
css
#frame-wrapper
{
width : 400px;
height : 220px;
overflow : hidden;
position : relative;
}
#my-iframe
{
position : absolute;
top : -100px;
left : -100px;
width : 400px;
height : 220px;
}
see the fiddle here
I have a blogger page where I call another site page on my page:
Now I want this page automatically scroll down and freeze. So, no more scrolling, like this.
IF you were loading this in an iframe, you can turn off scrolling within your iframe, that will answer 1 part of your question.
To load the content of the iframe at a specific position you can use CSS to position the loaded page within your iframe. Something like this should do the job.
<style type="text/css">
#outerdiv {
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe {
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
</head>
<body>
<div id='outerdiv'>
<iframe src="http://somesite.com/" id='inneriframe' scrolling=no></iframe>
</div>
I want my div to go fullscreen.
I have a structure similar to the following and my method works when my div is outside an iframe but I can't get rid of the iframe.
html
<html>
<body>
<iframe>
<div id="contentDiv">Content</div>
</iframe>
</body>
</html>
css
.Maximized{
position: absolute;
top: 0;
left: 0;
width:100% !important;
height:100% !important;
}
When a user fullscreens the browser my content div should go fullscreen as well.
In my fullscreen-on event I do the following
$('#contentDiv').addClass('Maximized');
However the div fills the iframe and not the main window.
Is it possible to make my div go full screen just by adding classes?
No, you'll need to make the iframe go full screen as well.
As far as the contents of the iframe are concerned the iframe is the window, so going full screen inside the iframe will only make it the size of the iframe. But if you resize the iframe to be full window, then its contents can be full as well, provided you have no border, padding or margins on your iframe.
Try this code:
<iframe width="100%" height="100%" >
<div id="contentDiv">Content</div>
</iframe>
An iframe needs a src. You can't directly access the CSS of your iframe through the parent window, but that shouldn't matter in your case. Your code should look more like:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
iframe{
height:100%; width:100%;
}
</style>
</head>
<body>
<iframe src='content.html'></iframe>
</body>
</html>
I'm building my personal page, which is a computer with an iframe inside of it's screen with a dummy javascript terminal. My problem is that I can't get the iframe to scroll down while I keep writing on the terminal.
I've tried adding scrolling="yes" to the iframe and it doesn't work. I tried using $(document).scrollTop($(document).height()); in the iframed page and setting the height of the iframed page to 2000px... none of this worked.
This is the code of the page:
<html>
<head>
<style type="text/css">
body{
background-image:url('http://api.ning.com/files/B4MPF1W8yyhcpqgtcWbw-UuRX4aul676AQ0rB63HYNkXgQR06pGjZVwjKcwMxGgc/apple2c.big.jpg');
background-repeat:no-repeat;
}
#iframe {
position:relative;
padding-top:35px;
padding-left:144px;
}
</style>
</head>
<body>
<div id="iframe">
<iframe src="http://static.saezmedia.com/terminal/terminal/examples/rpc-demo.html" width="458" height="341" scrolling="auto"></iframe></div>
</body>
</html>
Thank you very much for your help.
In you main page: http://static.saezmedia.com/terminal/terminal/examples/rpc-demo.html you have the following css code:
jquery.terminal.css:13:
overflow:hidden;
this makes the scroll bar non visible. If you remove this the page is scrollable and then you have to automatically scroll to the bottom.
If you open it in another window, you won't be able to scroll it either.
That looks like an issue with the site.
However, you may be able to scroll it explicitly by fixing the width/height of the iframe and setting overflow auto on the containing div.