can't get my iFrame to scroll - javascript

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.

Related

z-index of iframe child does not work as desired

I have a website with an iframe and the website has its own backdrop / overlay. My goal is to set z-index of a child element of iframe, so only this child element should be on top of the overlay. I have access to both website inside iframe and the top website.
I reproduced it in Plunkr, so my goal is to get the green box (modal) to the top.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<iframe src="iframe.html" width="100%" height="500px" ></iframe>
<div class="backdrop">
Backdrop
</div>
</body>
Do you have an idea if it's possible? How?
You can't do what you want.
What you have is this:
document
body
iframe
- see document(2)
div[class="backdrop"]
document(2)
body
div[class="modal box"]
The two documents don't overlap and cannot interact with each other in such way. You can move your element to the top z-index within the iframe, but you cannot make the element "break out" of the iframe in the way you wish to achieve. You have to set the iframe itself to the top.
An alternative approach for you might be to use an ajax request, and then append the new element to the body, and style that to appear on top.

Make iframe fit the entire page on a Droid phone

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%;
}

Run Skrollr In IFrame

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

scroll down page in center automatically and freeze

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>

How do I prevent an Iframe from re-loading when adding it to the document?

We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute;. Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with #Ryuu's answer, don't bother with iframes at all is the best option.

Categories