CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Floating Transparent Iframe for IE & Firefox

  1. 11-28-2006, 09:13 PM #1
    bdichiara
    bdichiara is offline Junior Coders
    Join Date
    Oct 2006
    Location
    AL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Floating Transparent Iframe for IE & Firefox

    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:
    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
    Last edited by bdichiara; 11-28-2006 at 09:14 PM. Reason: Added Example URL
    Reply With Quote Reply With Quote
  2. 11-30-2006, 04:13 AM #2
    mastergeek70
    mastergeek70 is offline Junior Coders
    Join Date
    Nov 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Floating menu

    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
    Code:
    <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
    Code:
    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.
    ==============================================================================================================
    Last edited by mastergeek70; 11-30-2006 at 05:02 AM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules