|
JavaScript - Resizing Iframe To Fit Content
Good Day Everyone,
I need some help resizing an iframe to fit it's content. Basically, I have 10 spreadsheet pages saved as htm files. I am creating a page that enables me to view each of these htm files. I need the iframe to be resized for each htm file. This is my code: Code: <html>
<head>
<script language="javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
function autoResize(id)
{
var winW = 0, winH = 0 ;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth - 235;
winH = document.getElementById('page').contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height=(winH) + "px"; document.getElementById(id).width=(winW) + "px";
}
//-->
</script>
<style type="text/css">
.yssOver{background-color:#ffffff;}
.yssOut{ background-color:#E6EFFF;}
#content {
position:absolute;
left:210px;
top:40px;
}
html {
overflow:off;
}
img {
display:block;
vertical-align:text-top;}
h1{
color: #000000;
font-family:"Arial",Times,sans-serif;
font-weight:bold;
font-size:12px;
margin-bottom:0px;
}
#document{
position:absolute;
top:0px;
left:0px;
}
#menu{
margin: 0 0 0 0;
padding-left:0px;
border: 0 -10 0 0;
}
img.arrow {
margin: 4 0 0 0;
}
table.menu td { border: 1px solid; border-color:#7D91D0; }
table.div td { border: 0px solid; border-color:#7D91D0; }
a:link {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px; text-decoration: none;}
a:active {color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px;}
a:visited {color: #000000; font-family:"Arial",Times,sans-serif; text-decoration: none; font-size:12px;}
a:hover {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;}
</style>
</head>
<body onLoad = "window.frames['page'].location = 'home.png'" >
<table id=document border=0 cellpadding=0 cellspacing=0>
<tr><td>
<img src=halifax_logo.png></img>
</td><td width=100%>
<img src=headerback.png width=100% height=80></img>
</td></tr>
<tr><td>
<table width=95% class=menu border=1 id=menu border=0 cellpadding=0 cellspacing=5 background=menuback.png>
<tr><td>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="cofunds designations.htm" target="page"> Cofunds Designations</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="Commission Codes Most Used.htm" target="page" " height=516 width=974 onmousedown="if(document.getElementById('div2').style.display == 'none'){ document.getElementById('div2').style.display = 'block'; }else{ document.getElementById('div2').style.display = 'none'; }"> Commission Codes</a>
<div id="div2" style="display: none;">
<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
<tr><td>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="Commission Codes Most Used.htm" target="page">Most Used</a>
</td></tr>
<tr><td valign=top>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="Commission Codes.htm" target="page">All</a>
</td></tr>
</table>
</div>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="corporate accounts1.htm" target="page"> Corporate Accounts</a>
<div id="div3" style="display: none;">
<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
<tr><td>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="research.png" target="page">Research Centre</a>
</td></tr>
<tr><td valign=top>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="reports.png" target="page">Company Reports</a>
</td></tr>
</table>
</div>
<tr><td class=menutd background=tdback.png>
<a href="dealers.htm" target="page"> Dealers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="halifax funds.htm" target="page"> Halifax Fund Managers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="other fund managers.htm" target="page"> Other Fund Managers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="international codes.htm" target="page"> International Codes</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="market makers1.htm" target="page"> Market Makers</a>
</td></tr>
<tr><td height=750>
</table>
</td><td>
<div id=content>
<IFRAME name=page src="cofunds designations halifax.htm" onLoad="autoResize('page');" frameborder=0 overflow=no marginwidth=0 marginheight=0></iframe>
</div>
</td></tr>
</table>
</body>
</html>
This seems to work but it has a few issues, It does not resize properly for every link, only some of them. Can somebody please have a look & tell me where I am going wrong, or provide me with some better code, mine is a bit shoddy! Thanks Harry Similar TutorialsHi folks! Very, very new to Javascript and I'm having a problem. What I'm trying to do is create a page that uses an iframe to show the fullsized image, while using thumbnails at the bottom. I need the iframe to resize depending on the size of the image since some are landscape and others are portrait oriented. I found a script online that did it for the height of the picture so I tried to modify it to do both the width and the height and haven't had much luck. Here's the code, and I apologize in advance for my noob coding. Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halloween 2009</title>
<script language="JavaScript">
<!--
function calcWidth()
{
//find the width of the internal page
var the_width=
document.getElementById('preview').contentWindow.
document.body.scrollWidth;
//change the width of the iframe
document.getElementById('preview').width=
the_width;
}
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('preview').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('preview').height=
the_height;
}
//-->
</script>
<style type="text/css">
body {background: url(background/bg3.gif); text-align:center}
img {height: 5em; width:5em; display: inline; border: none}
</style>
</head>
<body>
<div style="height: 448px">
<iframe src="Halloween '09 021.jpg" name="preview" id="preview" onLoad="calcWidth();calcHeight();" marginheight="0" marginwidth="0" scrolling="no">
An iframe capable browser is required to view this web site.
</iframe>
</div>
<div id="thumbnails" style="padding-top: 1.5em; width: 40em; text-align: center">
<a href="Ariana.JPG" target="preview"><img src="Ariana.JPG" alt="" /></a>
<a href="Halloween '09 002.jpg" target="preview"><img src="Halloween '09 002.jpg" alt="" /></a>
<a href="Ayesha.jpg" target="preview"><img src="Ayesha.jpg" alt="" /></a>
ETC...
</div>
</body>
</html>
I have a master page that has an IFRAME, which we use for resizing. Locally, when we are using our web application within our network, the resizing works perfectly for both Firefox and IE. However, when I access the web application from outside the network the resizing doesn't always work. Most of the time, the offsetheight for the div(container is the name) is not correct, thus I don't see all the results that I need to see in the IFRAME Here is the resizing code below. function resizeTheFrame() { var iframe = document.getElementById('innerFrame'); var containerHeight = document.getElementById('container').offsetHeight; var DefaultPageHeight = 400; if (containerHeight > DefaultPageHeight) { var heightdiff = 100; } else { var heightdiff = DefaultPageHeight - containerHeight; } containerHeight = containerHeight + heightdiff; var counter = parent.top.window.location.href.lastIndexOf("/"); var urlStr = parent.top.window.location.href.substring(0, counter + 1); iframe.src = urlStr + "resizer.htm?height=" + containerHeight; } What wrong in this code? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(function (){
function manda(){
var text = $('#frame').contents().find('p[class=no_boder]').html();
$('div').html(text);
}
});
</script>
i've already tried using this -> $('#frame').contents().html(); How can i get the content? Hi all, I have: Code: var moreinfo ="";
moreinfo+= "here some content";
$("#divMoreInfo").html(moreinfo);
And this inserts "here some content" in a div called divMoreInfo. Now divMoreInfo is placed inside an iframe while the rest of the programming has to be in the parent page... How do I insert moreinfo's contents in the iframe's div?? Thanks a lot In my page, I have a main iframe where I want all the content of my links to be loaded. I want the iframe's height to resize according to the content. All the linked pages are in the same domain. I have tried some scripts I found, but nothing has the result I want. The HTML code is: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="nav"> <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a> <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> <a href="contact.html" target="frame">Contact</a> </div> <iframe id="frame"></iframe> <div id="footer"></div> </div> </body> </html> The CSS code is: Code: div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
font-weight: bolder;
font-variant: normal;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
#frame {
position: absolute;
top: 200px;
bottom: 40px;
width: 800px;
border: none;
left: 120px;
height: auto;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
I don't know how to make scripts on my own, so I would appreciate any help. Thank you! Hi all, I want to write i frame content to PDF file.Can any one help me how to do it hi all, I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking Hi world I have this code in my page PHP Code: <iframe name="ff1" src="http://playerplus.co.nu/ipp.php" ></iframe> how i copy the result in this iframe to text or to some variable but from iframe not direct from the URL "http://playerplus.co.nu/ipp.php" Ok, I paid to have a website built, yet the developer used iFrames to accomplish the task. Basically, load a parent page, and then in an iframe, lod content chosen from a menu. Is there a way to create a menu at the homepage level, that will allow a menu listing the various parent pages, and under each parent page, have a drop down that will point directly at an iframe content? Like this? Page1 Page2 Page3 Page1ContentA Page1ContentB Page1ContentC And when you click Page1ContentC, it will load Page1.htm and in the iframe load Page1ContentC? If i am not clear, please let me know. Any help appreciated. Jeff It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
frame.contentWindow.location.replace(newUrl);
}
Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets. Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets. My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason. Is there any solution that comes to mind for anyone out there? You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found: Get The Bookmarklet on this page Again, it works great if you don't start the script from a sites home page. Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Ok, told you I'd be asking lots of questions ... Code: <div id="resizetest" style="width:200px;height:200px;border:2px solid blue">
<div style="background:#000033">
<a href="#" style="float:right;background:#ffffff" onclick='document.getElementById("resizetest").height="50";'>_</a>
</div>
This is a resize test
</div>
Why doesn't this resize? I've looked at examples, and I don't see what's wrong. |
|||||||