PDA

View Full Version : Need iframe Help...


designer_80
08-07-2008, 12:32 PM
Firefox is fine but Internet Explorer is not showing the iframes. Is there a possible fix or solution? Scrolling iframes don't scroll and some with images don't show anything?

Below is some of the code:

> <script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
>
> <script type="text/javascript">
> /***********************************************
> * IFrame SSI script II- ? Dynamic Drive DHTML code library
> (http://www.dynamicdrive.com)
> * Visit DynamicDrive.com for hundreds of original DHTML scripts
> * This notice must stay intact for legal use
> ***********************************************/
>
> //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=["myframe"]
>
> //Should script hide iframe from browsers that don't support this script
(non
> IE5+/NS6+ browsers. Recommended):
> var iframehide="yes"
>
> var
>
getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Fire
fox"
> )).split("/")[1]
> var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 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++){
> if (document.getElementById)
> resizeIframe(iframeids)
> //reveal iframe for lower end browsers? (see var above):
> if ((document.all || document.getElementById) && iframehide=="no"){
> var tempobj=document.all? document.all[iframeids] :
> document.getElementById(iframeids)
> 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;
> else if (currentfr.Document && currentfr.Document.body.scrollHeight)
//ie5+
> syntax
> currentfr.height = currentfr.Document.body.scrollHeight;
> 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
>
> function MM_swapImage() { //v3.0
> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
> for(i=0;i<(a.length-2);i+=3)
> if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
> x.oSrc=x.src; x.src=a[i+2];}
> }
> function MM_swapImgRestore() { //v3.0
> var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
> x.src=x.oSrc;
> }
> </script>
> </head>
> <body>
>
> <td width="219" height="307" valign="top"><iframe
id="myframe"
> src="class_est_charleston_map_cin.html" scrolling="yes" marginwidth="0"
> marginheight="0" frameborder="0" vspace="0" hspace="0"
style="overflow:visible;
> width:100%; height:306px; display:none"></iframe>
> <td width="5" valign="top"><div align="right"><img
> src="images/doors_line.jpg" width="5" height="283" /> </div></td>
> <td width="38" valign="top"><img
src="../../images/spacer.gif"
> alt="" width="39" height="1" /></td>
> <td width="76" valign="top"><a
> href="javascript:loadintoIframe('myframe',
> 'class_est_charleston_map_coc.html')" target="_top"
>
onclick="MM_nbGroup('down','group1','swatchesmaplecountryoff','images/swatch
es_m
> aple_country_on.jpg',1)"
>
onmouseover="MM_nbGroup('over','swatchesmaplecountryoff','images/swatches_ma
ple_
> country_over.jpg','',1)" onmouseout="MM_nbGroup('out')"></a><a
>
====================
I could really use some help.
Thanks.
jscheuer1
08-08-2008, 03:50 AM
That looks like garbage, and it looks like a DD script. In any case it is not a HTML only question. I'm moving it to the DD scripts help section. Please provide a link to where you got this script.

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic code so we can check it out.
designer_80
08-08-2008, 11:41 AM
I got the script from Dynamic drive at http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Also sorry about posting pieces of the code... here is the url: http://www.myaya.ca/aya2demo/products/doorstyles/class_est_lexington_maple.html

I use alot of iframes... so I'm hoping to find a fix for IE ... if not what is a close alternative that is fast to modify.

Any help would be appreciated.
Thanks.
jscheuer1
08-08-2008, 01:24 PM
That's better, thanks. Right now, the example URL on your site is not responding. Please double check that it is the correct address. I will try later though, because it just looks like at the moment it is unavailable.
jscheuer1
08-08-2008, 01:40 PM
OK, it's working now. It looks to me that the iframe is showing up just fine, just that the page(s) loaded into it have nothing on them in IE. This appears to be due to sloppy coding (a typo really) on each of these pages, example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>lexington_maple_umber</title>
<style type="text/css">
<!--

@import url("../../ayasite.css");
body {
background-image: url(images/door_bg.jpg);
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;

}
</style>
</head>

<body class="text">
<table width="219" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td width="219" height="236" valign="top" background="images/door_lexington_umb_map.jpg"><p><br />
</p></td>
</tr>

<tr>
<td height="47" valign="top"><div align="center">
<p class="smalltext">* Also available in a <a href="../species/handfinishes.html" target="_parent" class="smalltext">Blackened</a><br />
version of this finish.</p>
</div></td>
</tr>
</table>
</body>

</html>


See the highlighted begin comment tag? It has no corresponding close comment tag. Either make one for it just before the closing </style> tag or get rid of it. I suspect that all of the pages have this same problem. FF is either error correcting this mistake or sees:


<!--DWLayoutTable-->

as the end of the comment block and is error correcting for the missing opening <table> tag.
designer_80
08-08-2008, 03:29 PM
It Works!
The pages are now loading in the iframes which is great, (thank you) but there are scroll bars in IE.

Are you getting scroll bars? Any way to get rid of them...

The Force is strong with you :)
jscheuer1
08-08-2008, 03:40 PM
You haven't updated the live demo. It may be that a small adjustment could be made in the script to adjust the height of the iframe in IE, that's if there is just a little bit of scrolling that needs to be done with that scrollbar. But it might be able to be fixed by making the overflow property of both the body and html elements on the pages loaded into the iframe be hidden:


html, body {
overflow:hidden;
}

Which would be easier if it works.

It also occurs to me that you may not really need this script. I mean aren't all of the pages that get loaded into the iframe about the same height? If so, you could set the style on each page as I mentioned, set the height of the iframe to what it needs to be, done.
designer_80
08-08-2008, 07:33 PM
I tried the overflow style but i don't think its working... could be me.
http://www.myaya.ca/aya2demo/products/doorstyles/class_est_charleston_alder.html
(( click the cinnamon finish ))

Also if you look at the following:
http://www.myaya.ca/aya2demo/products/specifications/specs.html

The spry collapsible panels are not spacing out correctly like it should as in FF.

Any ideas... :confused:
jscheuer1
08-08-2008, 11:47 PM
On the page you just mentioned:

http://www.myaya.ca/aya2demo/products/doorstyles/class_est_charleston_alder.html

IE reads the iframe as scrolling=yes. It should be scrolling=no. From your source code:


<iframe id="myframe" src="class_est_charleston_ald_hon.html" scrolling="Yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; height:306px; display:none"></iframe>

This is contrary to the instructions in Step 2 for this script:



<iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

I still think that with the proper attributes set for the iframe tag, and the proper styles set for the pages loaded into it, that you don't really need this script for what you have shown me that you are doing. Because, as I've already mentioned, the pages you are loading into the iframe are all about the same height.
designer_80
08-28-2008, 02:29 PM
So the site is live... and the iframes are working well... but for some reason the pages are not totally centered on some browsers. (IE..) Its fine in Firefox, I would appreciate any insight.
http://www/ayakitchens.com

Thanks