|
JavaScript - Iframe Resizing Issues
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; } 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>
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 Hi, 1- I have 2 index files (parent) which contain an iframe each. The purpose of the index file is to provide a static template, a frame, for a title bar, navigation and footer. One index file is in French, the other in English (index-e, and index-f) in two disctinct folders. 2- I created several html files (in connection with the menu topics in the navigation bar) to be loaded and targeted at the iframe within the index file. I need to be able to switch the iframe content from topic to topic (which is easy) AND from french to English for the same topic, at the push of a button. The issue I have is this: if I put that button on the navigation bar, it will only switch language at navigation bar level (i.e the index file). If I put that button within each html file fed to the iframe, content will switch language but the navigation bar in the index will not follow. In other words, if I switch topic within the same language, it works fine, but if I switch language for a specific topic, I cannot get the index file to switch language too. Do you understand? I am looking for a way to let the browser know that a topic is now in a french, for instance, and the iframe content must be loaded in the french index file rather than the english one. It seems I will need some programming to achieve the result I want and I am a beginner javascript programmer. Before I get the know-how to approach such case instinctively and effectively, it will take a while. Any simpler workaround or javascript code I could insert in the index files and/or the html files fed to the iframe? Please do not suggest php, or ssi as they are not viable options with the server I use. At least not for now... Regards, The Apprentice 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. 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? 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. Hi, Ive written some code to try and resize a page dependant on the content oof an iframe. Code is as follows: Code: window.onload=sizeAdj();
function sizeAdj() {
var elFrame = document.getElementById('theFrame');
var elTable = document.getElementById('tableGrab');
var elDivMain = document.getElementById('main');
var elDivWrapper = document.getElementById('wrapper');
var the_height = elFrame.contentWindow.document.body;
elFrame.height = the_height;
elTable.height = the_height + 90;
elDivMain.height = the_height + 90;
elDivWrapper.height = the_height + 465;
}
I originally thought that I would just be able to resize the iframe and the other elements would follow suit but as you can see Ive tried to resize the other encasing elements also. The code resizes partially in chrome but only to a certain point and not to the full height of the doc content. Help greatly appreciated - full source content attached. Rugby Glass.zip Thanks Sol I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know: Code: var obj=document.getElementsByTagName("img");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "avatar") {
if(getElementWidth(obj[i]) > 150) {
obj[i].style.width = 150;
}
}
}
Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px I know it's pretty simple but it's hurting my head! :P Thanks in advance -Alux Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header. Heres the code Code: <script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
im = document.getElementsByTagName('img')[i];
if (im.width > 600)
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title = 'Click Here To See Image Full Size ';
}
}
}
}
</script>
But I want it to ignore 2 images..and not resize them. head1.jpg head2.jpg Any help would be gratefully recieved !! Cheers !! Hi, Am making a user registration page and i want it to be smaller then my other pages and it should open in a new window, something like a popup window. How can i do this? Thanks Hello i would need a 1x1 pixel image for my flagcounter,ive been trying for months [IMG*]http://2.s07.flagcounter.com/count/DymW/bg=ffffff/txt=ffffff/border=ffffff/columns=1/maxflags=1/viewers=3/labels=0/[/IMG*] (the stars for the image not to appear) helllp
can any one say me how to resize a div by mouse dragging in javascript........ ..first of all is it possible or not?? and if so , what should i do...... Page with iframe: http://www.siteworksweb.com/bbear2/pretest.html Hi - I have an iframed page which displays the contents of a form. I would like to be able to vary the height of this page depending the form contents (# of rental units returned) returned. Is there a way to resize this page (the 'child' iframe) dynamically according to the size of the form content? I don't have much control over the form data, which lives on a separate domain. Also, is there a way to resize the home page http://www.siteworksweb.com/bbear2/pretest.html back to it's original size when a user clicks the 'back' button in a browser after the form contents are displayed? I would appreciate any input to either of these questions. Thanks in advance for your time, Lisa Hi everyone, I run a streaming site and am looking to have the option on a chat room next to the stream. Not everyone likes having the chat facility so I'd like to make it optional. As the page loads I'd like the content to look like the diagram below with the stream (iframe1) taking up 95% of the page and the other 5% being taken up by an image which will say "open chat". The chat (iframe2) would have a width of 0%. Then when the "open chat" image is clicked I'd like the chat (iframe2) to become 35% and the stream (iframe1) to become 60%. If someone could make a nice sliding effect when the image is clicked that'd be even better. Here's a diagram to show what it'd look like with the resized iframes. If anyone can help me out and get this working to a good standard there will be a small paypal gift on offer . Cheers, Ben hi, deleted old thread, since that didn't answer problem. posting code because of all the dynamic variables would be confusing. so, if anyone can help, here's some link instructions: 1) go to http://www.vehicle411.com 2) in the "vehicle classifieds" panel just click "search" which will bring up 68 vehicles. 3) click on link for any vehicle, which will display vehicle information in a popup window. up to this point everything is fine. BUT when you click the popup's "connect" button to link to a dealership the new window is undersized (actually, if it replaced the original vehicle411 window that would be fine). have tried a lot of different combinations, including the <a href="javascript:photowindow('dealerurl')"> suggested in the other post gives weird result showing javascript:photowindow('dealerurl') in the address window instead of the actual url--meaning it doesn't call the photowindow function. P.S. if you look at the source--all the server values are passed correctly and don't interfere with the code. right now, I've got a simple <a href="dealerurl"> instead of the JS method. Also, have hard coded values to make sure dynamic stuff was working-- and they work. what's really annoying is that I've used just about the same JS code to create that vehicle popups. P.P.S. went back and changed code to using <a href="#" etc. which doesn't work either. but have a direct url for anyone reading this (when clicking on "connect" button it's just creating a copy of itself!!! http://www.vehicle411.com/_system/di...9765108&cid=1# |
|||||||