bdichiara
11-28-2006, 09:13 PM
I'm trying to float a transparent iframe on an HTML page and in IE7, I get this black box or repeating content. What is the proper way to accomplish this. I'm trying to include a remote HTML file (which has our site navigation) that sits on our server in an HTML file on someone else's server. (man it would be nice if we could just their content in an iframe...)
Here's my code:
<!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=iso-8859-1" />
<title>menu</title>
<style type="text/css">
<!--
#nav {
position:absolute;
z-index:10;
left: 0px;
top: 0px;
overflow:hidden;
background-color:transparent;
}
#content {
margin-top:30px;
}
-->
</style>
</head>
<body style="margin:0px;">
<iframe id="nav" allowtransparency="true" width="100%" height="500" frameborder="0" src="http://www.alatelco.org/dhtmlmenu.htm"></iframe>
<div id="content">
my content goes here.
</div>
</body>
</html>
link: http://alatelco.org/menu.html
mastergeek70
11-30-2006, 04:13 AM
That's a tough one, your menu doesn't like the IFRAME. However, the menu system you are pointing to only has a couple dependent javascript files: dhtmlmenu_scr.js and menu_dom.js. You could copy those files to your server (even automate the copy of you want) and then replace your dhtmlmenu.html with the following code:
dhtmlmenu.html
<html><head></head>
<body style="margin-top:3px; background-color:transparent; background-image:url('nav_background.jpg'); background-position:top; background-repeat:repeat-x;">
<script type="text/javascript" src="./dhtmlmenu_scr.js"></script>
<div id="divStayTopLeft" style="position:absolute">
<table id="m1mainSXMenu2" cellspacing="1" cellpadding="4" style=";width:778px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'m1mn1','m1tlm0',event)" onmouseout="chgBg(m1,'m1tlm0',0);coM(m1,'m1mn1')" id="m1tlm0" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm0a" class="m1CL0" href="javascript:void(0);" >Infodesk</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'m1mn2','m1tlm1',event)" onmouseout="chgBg(m1,'m1tlm1',0);coM(m1,'m1mn2')" id="m1tlm1" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm1a" class="m1CL0" href="javascript:void(0);" >Products & Services</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn3','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn3')" id="m1tlm2" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Rates</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'m1mn4','m1tlm3',event)" onmouseout="chgBg(m1,'m1tlm3',0);coM(m1,'m1mn4')" id="m1tlm3" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm3a" class="m1CL0" href="javascript:void(0);" >Applications</a></td>
<td onmouseover="chgBg(m1,'m1tlm4',3);exM(m1,'m1mn5','m1tlm4',event)" onmouseout="chgBg(m1,'m1tlm4',0);coM(m1,'m1mn5')" id="m1tlm4" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm4a" class="m1CL0" href="javascript:void(0);" >Calculators</a></td>
<td onmouseover="chgBg(m1,'m1tlm5',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm5',0,1)" id="m1tlm5" onmousedown="f58('m1tlm5a')" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm5a" class="m1CL0" href="https://www.telcoonline.org/cgi-bin/mcw000.cgi?MCWSTART" target="_blank">Telco Online</a></td>
<td onmouseover="chgBg(m1,'m1tlm6',3);exM(m1,'m1mn6','m1tlm6',event)" onmouseout="chgBg(m1,'m1tlm6',0);coM(m1,'m1mn6')" id="m1tlm6" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm6a" class="m1CL0" href="javascript:void(0);" >Newsletter</a></td>
<td onmouseover="chgBg(m1,'m1tlm7',3);exM(m1,'m1mn7','m1tlm7',event)" onmouseout="chgBg(m1,'m1tlm7',0);coM(m1,'m1mn7')" id="m1tlm7" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm7a" class="m1CL0" href="javascript:void(0);" >Links</a></td>
<td onmouseover="chgBg(m1,'m1tlm8',3);exM(m1,'m1mn8','m1tlm8',event)" onmouseout="chgBg(m1,'m1tlm8',0);coM(m1,'m1mn8')" id="m1tlm8" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm8a" class="m1CL0" href="javascript:void(0);" >Contact Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm9',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm9',0,1)" id="m1tlm9" onmousedown="f58('m1tlm9a')" style="background-color:#25719C;" class="m1mit" ><a id="m1tlm9a" class="m1CL0" href="https://www.alatelco.org/index.asp" >Home</a></td>
</tr>
</table>
</div>
<script type="text/javascript" src="float.js" ></script>
<!-- ********************************************************* -->
<!-- Some test linefeeds to show scrolling action -->
<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
<!-- ********************************************************* -->
</body>
</html>
float.js
function JSFX_FloatTopLeft()
{
var startX = 0, startY = 0;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.x = startX; el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/5;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 0);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopLeft();
==============================================================================================================
Disclaimer: The provider of this code offers no warranties or assurances of any kind. The code may or may not be 100% compliant with every single coding standard up to the current date, hour or minute. If you are a whiney, pretentious "code nazi" offended by the occasional use of deprecated tags, non-shorthand CSS, voluminous use of ASP.NET, or other preferences chosen by the provider, then bypass this post or leave the website completely - this is not for you.
==============================================================================================================
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.