100% auto height on iframe - javascript

I have an iframe on my page, i am using this code:
<script>
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="link.php" frameborder="0" width="100%" height="100%" onload='javascript:autoResizeiFrame(this);'></iframe>
which automatically resizes the iframe to 100% height.
This works fine, however if the browser is re-sized, making the screen width smaller i can see the iframe borders and it does not automatically re-size the height of the iframe.
It's only re-sizing it on page load

Hi you should use the resize event:
I have updated the solution:
If I understand correctly you wont the content of the iframe to not scroll and allays display in full .... than this will work... (i hope...)
<script type="text/javascript">
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load",function(){
var obj=document.getElementById("myIframe");
obj.contentWindow.addEventListener("resize",function(){autoResizeiFrame(obj);},false);
autoResizeiFrame(obj);
},false);
</script>
<iframe id="myIframe" src="index.php" frameborder="3" width="100%" height="100%" style="border:2px solid red;"></iframe>
Let me know.

You have to implement the onresize event on your page. See this link. W3School
window.addEventListener("resize", autoResizeiFrame(document.getElementById("myframe")));

Related

Button inside iframe click functionality changes height of that parent iframe(cross domain)

on click change in height to 500px;
<iframe src="test.html" frameborder="0" scrolling="no" id="myIframe" class="chat-box width-350" style="height:300px;"></iframe>
iframe height is set to 300px
test.html
button
when clicking on "clickhere" will change in height of iframe.
JQuery:
$('.clickhere').click(function() {
$('#myIframe').css("height","500px");
}
Try this
for test.html
button
<script type="text/javascript">
var parentIframe = window.parent.document.getElementById('myIframe');
var clickButton = document.getElementsByClassName('clickhere')[0];
clickButton.addEventListener("click", function(){
parentIframe.style.height = '500px';
console.log(parentIframe);
});
</script>

Can you make it so when the user clicks anywhere inside of an iframe it redirects them to the source url?

So I would like to know if its possible to redirect and open a users tab to the source url's page that the iframe tag is using when they click anywhere inside of the iframe. So instead of them being able to browse the iframe I would like it to automatically open the new tab with the src's url in it.
Here is the code I am working with currently.
<!-- CSS -->
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
body {
color: purple;
background-color: #663300 }
</style>
<script>
function virtualSubmit(form){
var text = form.searchtext.value;
var targets = document.getElementsByTagName('iframe'),
items = targets.length;
for(var i = 0; i<items; i++){
var target = targets[i],
url = target.getAttribute('data-url');
target.src = url + text;
}
return false;
}
</script>
<body>
<!--The Search bar as well-->
<form onsubmit="return virtualSubmit(this)";>
<input name="searchtext" type="text" />
<input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>
<iframe src="http://www.google.com/custom"
data-url="http://www.google.com/custom?q="
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
<iframe src="http://en.wikipedia.org/wiki"
data-url="http://en.wikipedia.org/wiki/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
<iframe src="http://m.dictionary.com/definition"
data-url="http://m.dictionary.com/definition/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
Assuming the iframe is a separate domain, you cannot modify the iframe directly. The browser will prevent it because of same-origin protections.
But, depending upon your exact layout, you can sometimes put a transparent div over the top of the iframe (using absolute positioning and z-index), set up event handlers for that div and intercept any click events that the user intended for the iframe and if your desire is to redirect the browser page to somewhere else, you can do that upon one of those clicks.
$(document).ready(function() {
$("iframe").each(function() {
var iframe = $(this);
var pos = iframe.position();
var div = document.createElement("div");
var s = div.style;
s.position = "absolute";
s.left = pos.left + "px";
s.top = pos.top + "px";
s.height = iframe.height() + "px";
s.width = iframe.width() + "px";
iframe.parent().append(div);
$(div).data("src", iframe.attr("src")).click(function() {
window.location = $(this).data("src");
});
});
});
Working demo: http://jsfiddle.net/jfriend00/EB2kh/
I removed the dynamically sizing from the iframes because that complicates the problem for the purposes of showing you the concept, but if you really wanted it to work with that, you could move/resize the divs anytime the iframes were moved/resized.

Make iframe automatically adjust height

I am unable to adjust auto height according to the page content.
Code -
<iframe width="100%" id="myFrame" src="http://www.learnphp.in" scrolling="no">
</iframe>
I prefer Make iframe automatically adjust height according to the contents without using scrollbar? but this code doesn't work. Please suggest me how to get complete data without using scroll?
Try this
<script>
function autoResize(myiframe){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(myiframe).height= (newheight) + "px";
document.getElementById(myiframe).width= (newwidth) + "px";
}
</script>
<body>
<div align="center" style="padding-left:50px">
<iframe id="myiframe" src="helpdesk/index.php" width="800"></iframe>
</div>
</body>

iframe not resizing to content height

I have been trying to get this to work for a while but to no avail. ive tried various scripts but im clearly doing something wrong :(
I have a menu on the left of the page, which contain (same server) href links of which their target is an iframe on the right of the page.
it sends the page to the iframe fine, but the iframe height does not change.
Can someone please assist me :(
here is my code:
html
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(viewcontent);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
.... menu link
<div class="menuOut" onMouseOver="this.className='menuIn'" onMouseOut="this.className='menuOut'">
- Forum Adverts </div>
.... iframe html
<div id=maincontain>
<iframe id="viewcontent" frameborder="0">
</iframe>
</div>
CSS
#maincontain {
width: 85%;
float: none;
margin-left: 12%;
}
#viewcontent {
width: 100%;
padding-top: 15px;
float: none;
}
The iframe just stays about 300px height unless I specify a bigger height manually.
the pages being loaded in, all have 800px+ heights.
Thanks.
The iframes' height is not influenced by the content. That's how iframes work.
If you need to shrink or grow them, you need to do that manually. Read more here:
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/
Have you tried JQuery?
You could use:
$("#viewcontent").height($("#viewcontent").contents().find("html").height());
And just call that on whatever event you want the iframe to resize on. I've got it working on keyup for one of my own projects. Here's the jsFiddle.
Please try the below script:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="test.html" width="100%" height="200px" id="my_frame" marginheight="0" frameborder="0" onLoad="autoResize('my_frame');"></iframe>
you Should have the source file with in your domain.this is already discussed
Click here
for Cross Domain iframe Resizing please
Click here

how to make video size increases when site is visited. HTML java script possibly JQuery? Video animation

I would like to have a video pop up in the same window when I visit a site. By doing this I want to increase the height of the video from 0 to the specific height and then move the video slightly up from where its from. Is there a java script function or JQuery function that can allow this. Code would be great with comments but I am ok If there is a site that gives a walkthrough of how to do it. Thank you
Code I have now:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
var t;
var x;
window.onload=function()
{
x = 0;
while(x < 300)
{
t = setTimeout("nothing();",30000);
x = x + 10;
}
}
function nothing()
{
var b = x + 'px';
document.getElementById("mainvideo").height = b;
};
</script>
</head>
<body>
<div id="header">
<h2>Software Engineering</h2>
<h2>Team Songs</h2>
</div>
<div style="text-align:center;">
<iframe id="mainvideo" width="560" height="315" src="http://www.youtube.com/embed/2SZGW-6AF3A" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
I suggest you use the jQuery .animate() method : http://api.jquery.com/animate/ or the slideDown method http://api.jquery.com/slideDown/
For your specific case I think you should first make sure that the element containing the video is going to resize without destroying your page's layout. Then use
$("#container_div_id").slideDown(1000, function(){
$("#container_div_id").css("position","relative");
$("#container_div_id").css("bottom", "10px");
})
If you want it to slide up, then it would be more complicated as you would have to have the div fixed to the bottom or something and maybe changing its position property to relative might move it more than you wanted.

Categories

Resources