|
JavaScript - Iframe Auto Resize, Expands But Does Not Contract In Ie/safari.
http://isensors.com.sg/isensors-GJ/
That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007. It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE. <script type="text/javascript"> //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height: //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none: var iframeids=["contentframe", "newsframe"] //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended): var iframehide="no" var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers function resizeCaller() { var dyniframe=new Array() for (i=0; i<=iframeids.length; i++){ var iframeid = iframeids[i]; if (document.getElementById) resizeIframe(iframeid) //reveal iframe for lower end browsers? (see var above): if ((document.all || document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid) tempobj.style.display="block" } } } function resizeIframe(frameid){ var currentfr=document.getElementById(frameid) if (currentfr && !window.opera){ currentfr.style.display="block" if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50; else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax currentfr.height = currentfr.Document.body.scrollHeight+50; if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false) else if (currentfr.attachEvent){ currentfr.detachEvent("onload", readjustIframe) // Bug fix line currentfr.attachEvent("onload", readjustIframe) } } } function readjustIframe(loadevt) { var crossevt=(window.event)? event : loadevt var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement if (iframeroot) resizeIframe(iframeroot.id); } function loadintoIframe(iframeid, url){ if (document.getElementById) document.getElementById(iframeid).src=url } if (window.addEventListener) window.addEventListener("load", resizeCaller, false) else if (window.attachEvent) window.attachEvent("onload", resizeCaller) else window.onload=resizeCaller </script> Could someone kindly help me find the problem? Thanks. Similar TutorialsHi there, I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window. The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height. (1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript. If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space. The code i have currently to set the iframe height is: Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
iframeEl.style.height = 100 + "%";
alert(document.height);
}
}
</script>
</head>
<body onload="setIframeHeight('ifrm');">
So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely. Is this possible? Any help or advice will be greatly appreciated! Thanks in advance I am having difficulties with Internet Explorer and cannot find a solution online. The code in question is at http://www.blainegregson.com/news.php. The iFrame resizes for Firefox, Chrome, and Safari but not for IE. Also, I don't know javascript and thus found this code online. Here is the sample code: Code: <Script type="text/javascript">
function setIframeHeight(iframeName) {
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto";
// need to add to height to be sure it will all show
var h = alertSize(iframeName);
iframeEl.style.height =h + "px";
}
}
function alertSize(frameId) {
var myHeight = 0;
frame = document.getElementById(frameId);
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0;
myHeight=frame.contentDocument.body.offsetHeight+FFextraHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
myHeight= innerDoc.body.scrollHeight + 10;
//myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
Hi! I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com At the top of the blog is an iframe window that directs to http://aro2220.com/blog On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog. It works great except that the height is not automatically resizing. Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this) Quote: var stringvariable = http://aro2220.com/blog/index.html; int stringlength = stringlength(stringvariable); int autosize = 200 + stringlength * 5; <iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe> Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do. 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, 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. K, I've worked to create an expandable banner that starts out big, then resizes to a smaller banner once the user clicks on it. However, I want it to auto resize on it's own after 5 or so seconds. It's done with JQuery, but I don't think there is an option in jQuery to auto resize (could be wrong). Someone mentioned it could be done with javascript. But can you mix the two? Thanks for your help. Code: <script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
$(".flip").hide(function(){
});
});
});
</script>
Hello, http://www.phoenixdigitalweb.com/Con...urecommercial/ The main image is actually 1087 pixels wide. I want all the photos to appear 1087 pixels wide, but there is some code that is resizing the images. Can someone please take a look for me? Let me know if any code is needed. Thanks!! i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
Hello, I have build a tree view forum, I have used the iframe tag to import it to my wordpress blog . I have a script that determine the size of the iframe on load: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
The problem with the script is that the forum(tree view forum) only shows topics. I have another script that displays the contents of any issue only while clicking (Void). In actual the contents of each issue is charging ahead - but the resize function of the Iframe script not see it. How do I fix it, that the size of the Iframe will change automatically? Thanks alot I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.
Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
try{
var oBody = ifrm.document.body;
var oFrame = document.all("ifrm");
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
//An error is raised if the IFrame domain != its container's domain
catch(e)
{
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
//-->
</SCRIPT>
<body onload="reSize()" onresize="reSize()">
<li>
<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
<span class="nav_title">Home</span>
<br/>
</a>
</li>
<iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0"
padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px"
allowTransparency="true" noresize>
</iframe>
I am building iframes from database entries. Is it possible to resize them with an onclick event?
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! I have an iframe on my page which begins at 300x250. Onclick from an outside control (button), I have it resizing to 720x405. What I need it to do on that same click is change position on the page as well as resize (top, left.) Any way I can do this? Here's my resize script and the accoutrements with it... <!---Begin head section here---> <head> <!---Begin Style Section Here---> <style> .fauxButton { background: buttonface; font: menu; border: 1px outset white; cursor: default; padding-left: 6; padding-right: 6; padding-top: 2; padding-bottom: 1; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; height: 20px; } </style> <!---End Style Section Here---> <script language="JavaScript"> function resizeIframe(iframeId, iframeHeight, iframeWidth) { if (iframeWidth>0) { document.getElementById(iframeId).style.width=iframeWidth; } if (iframeHeight>0) { document.getElementById(iframeId).style.height=iframeHeight; } } </script> </head> <!---End head section here---> <body> <iframe name=video_iframe id=video_iframe frameborder="0" src="player.asp" scrolling=no allowtransparency="true" style="position:absolute; width:300px; height:250px; top:361px; left:720px;align:top; align:left; border:0px solid #FF0000; background-color:#FFFFFF; padding:0px 0 0; z-index:3;"> </iframe> <a id="widenButton" class=fauxButton onclick="resizeIframe('video_iframe', 420, 720);document.getElementById('widenButton').style.display='none';document.getElementById('narrowButt on').style.display='inline';" style="display:inline;">Wide -></a> <a id="narrowButton" class=fauxButton onclick="resizeIframe('video_iframe', 250, 300);document.getElementById('narrowButton').style.display='none';document.getElementById('widenButt on').style.display='inline';" style="display:none;"><- Narrow</a> </body> Thanks in advance, Miz Parker Hi all, I have an iframe on my page and I added the following code to detect the iframe file height to avoid scrolling which is working fine. Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
var new_h = (h-148);
iframeEl.style.height = new_h + "px";
//alertSize();
}
}
function alertSize() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
<body onload="setIframeHeight('ifrm');">
<iframe name="ifrm" id="ifrm" src="http://thirdpartywebsite.com/search.htm" width="948" frameborder="no" scrolling="no" style="margin-top:45px; margin-left:10px; align="center">
</iframe>
There is a form in the iframe and it is coming from a third party web site which I have no access. My problem is when a client submits the search form in the iframe search results page is higher than the search main page and half of search results page is not shown. Is there a way to sense that the page in the iframe is changed and resize the iframe height accordingly? Thanks Ceyhun Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'. Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen he http://www.mikegermond.com/demo.html Here is the code that I use in 'demo.html' to launch the iFrame: Head Code: <script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script>
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script>
<script type="text/javascript">
function moveCloseLink(){
var cb=document.getElementById('sb-nav-close');
var tb=document.getElementById('sb-title');
if(tb) tb.appendChild(cb);
}
Shadowbox.init({
onOpen: moveCloseLink,
flvPlayer: '/shadowbox/player.swf',
language: 'en',
players: ["flv","iframe"],
flashParams: {allowfullscreen:'true'},
flashVars: {
skin: '/shadowbox/modieus.swf',
image: '/upload/demo-poster.jpg',
autostart: true
}
});
</script>
Body Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> What do I need to do in 'gallery/archive_iframe.html' if anything? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox. Consider me a JavaScript newbie! You're help is greatly appreciated!! Most of the Javascript I see has some sort of time limit on page reload and is not really what I am trying to accomplish: Code: <meta http-equiv="Refresh" content="10; URL=http://coffeeandtealtd.com/buynow.html" /> I am trying to make our buy page reload after clicking the Paypal "continue shopping" button in Paypal Website Standards. The pop up Paypal shopping cart window closes after clicking the button but our buy page doesn't reload. It doesn't reload in Safari although it seems to be fine in FF and IE. I am new to javascript coding and am not quite sure how to make the page reload in this specific instance only. Any sug's?? Sup everyone I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script he Code: <!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this??? I am fairly new to JS so please have patenience with me. What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them. The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags. This is a touch screen so I want control along the bottom of the screen. I have did this very crudely with css and html. But I would like to refine it a little more with javascript. I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page. Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe. Code: <html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
var frames = Array('cal11,html/', 10,
'cal22.html/', 10,
'cal33.html/', 10,
'cal55.html/', 10
'cal66.html/', 10,
'cal77.html/', 10,
'cal44.html/', 15,);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
<title>Calender</title>
</head>
<body>
<div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe>
</div>
<ul class="solidblockmenu">
<li><a href="calstart.html">Instructions</a></li>
<li><a href="cal11.html" target="frame">Month View</a></li>
<li><a href="cal22.html" target="frame">Week View</a></li>
<li><a href="cal33.html" target="frame">Agenda</a></li>
<li><a href="cal55.html" target="frame">Current Projets</a></li>
<li><a href="cal66.html" target="frame">Bidding Projects</a></li>
<li><a href="cal77.html" target="frame">Open Service Calls</a></li>
<li><a href="cal44.html" target="frame">General Information</a></li>
<li><a href="??????????" target="frame">Stop Scroll</a></li>
</ul>
</body>
</html>
|
|||||||