Greetings, I am Working with IE6. I am conditionally, dynamically creating an iframe and populating it with an external site. One site I'm loading is a cgi with form elements that are messing up the navigation. I'm using jkmegamenu.js for my navigation. As happens with IE6 the menu opens behind the dropdown select form controls. I am calling bgiframe but it's not working. I suspect it is related to the frames being destroyed and recreated with each option selected from navigation, but I'm not sure where to apply bgiframe so it's applied. I have it in two places shown below inside the goHere function. Since i'm unable to send a link for viewing I have posted the code. I should also note that the jkmegamenu did not work [in my implementation] until I removed the jQuery.noConflict(); from the jkmegamenu.js. I'm not sure if that's related to bgiframe not working as expected.
This is my first JS/jQuery/CSS development project - just for fun to learn jQuery. I'm hoping for a little guidance. Thank you. Mike ------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://internal.site.com/jquery/jquery-1[1].3.2.js";></script> <!--[if lt IE 7]><script type="text/javascript" src="../jquery/bgiframe_2.1.1/jquery.bgiframe.js"></script><![endif]--> <script type="text/javascript" src="../jquery/jkmegamenu.js"></script> <link type="text/css" media="screen" rel="stylesheet" href="../css/menu.css" /> <link type="text/css" media="screen" rel="stylesheet" href="../jquery/jkmegamenu.css" /> <script type="text/javascript"> jkmegamenu.definemenu("megaanchor0", "megamenu0", "click") jkmegamenu.definemenu("megaanchor1", "megamenu1", "click") </script> <script type="text/javascript"> function destroyAllIframes() { while ($("iframe").length > 0) { $("iframe").remove(); } } function goHere( app,sys ) { destroyAllIframes(); if (app == 'scheduling') { $(loading).replaceWith("<div id='loading' class='separator'><img src='./loading.gif'><p>LOADING Controls</p></div>"); var iframe = document.createElement('IFRAME'); $(iframe).attr({ id: 'frameName', frameBorder: 'none', width: '500', height: '500', scrolling: 'yes', src: "http://internal.site.com/submit_ctrl.cgi?system="; + sys }); document.body.appendChild(iframe); $('div table i a p ul li').bgiframe(); $(iframe).load(function() { $('div table i a p ul li').bgiframe(); $(loading).replaceWith("<div id='loading' class='separator'><p>Controls</p></div>"); }); } } </script> </head> <body> <table class='main'> <td align=top <a href="#" class="btn soft" id="megaanchor0"></a> <div id="megamenu0" class="megamenu"> <p class="menutitle">Quick Links (opens new browser)</p> <div class="column"> <h3>Company</h3> <ul> <li><a href="http://site.com/"; target="_blank">Home</a></li> <li><a href="https://hr.com"; target="_blank">HR</a></li> <li><a href="http://phone.com/"; target="_blank">Phone Book</a></li> </ul> </div> <div class="column"> <h3>Related</h3> <ul> <li><a href="http://www.google.com"; target="_blank">Google</a></li> <li><a href="http://www.google.com"; target="_blank">Google</a></li> <li><a href="http://www.google.com"; target="_blank">Google</a></li> <li><a href="http://www.google.com"; target="_blank">Google</a></li> </ul> </div> </div> <td align=top> <a href="#" class="btn blue" id="megaanchor1">SYS01</a> <div id="megamenu1" class="megamenu"> <p class="menutitle">Systems Control and Management</p> <div class="column"> <h3>Status</h3> <ul> <li><a href="console.jar">Console</a></li> <li><a href="javascript:goHere('status','bh01')">Current Week</a></li> <li><a href="javascript:goHere('prevstatus','bh01')">Last Week</a></li> <li><a href="javascript:void()">TWS View</a></li> <li><a href="#">Log Files</a></li> </ul> </div> <div class="column"> <h3>Controls</h3> <ul> <li><a href="javascript:goHere('scheduling','bh01')">Scheduling</a></li> <li><a href="javascript:goHere('parameters','bh01')">Parameters</a></li> <li><a href="javascript:goHere('tapedrives','bh01')">Servers</a></li> <li><a href="javascript:goHere('dbtbl','bh01')">Tables</a></li> <li><a href="javascript:goHere('hut','bh01')">HUT</a></li> </ul> </div> <div class="column"> <h3>Documentation</h3> <ul> <li><a href="javascript:goHere()">Process Overview</a></li> <li><a href="javascript:goHere()">Setting Up New Processes</a></li> <li><a href="javascript:goHere()">The Code</a></li> </ul> </div> <br style="clear: left" /> <div class="column"> <h3>Statistics</h3> <ul> <li><a href="javascript:goHere()">History</a></li> <li><a href="javascript:goHere()">Control Table</a></li> <li><a href="javascript:goHere()">Setting Up New Collection</a></li> <li><a href="javascript:goHere()">The Code</a></li> <li><a href="javascript:goHere()">Reference</a></li> </ul> </div> <div class="column"> <h3>Management</h3> <ul> <li><a href="javascript:goHere()">Canary</a></li> <li><a href="javascript:goHere()">Capacity</a></li> <li><a href="javascript:goHere()">Spool</a></li> <li><a href="javascript:goHere()">Access</a></li> </ul> </div> <div class="column"> <h3>Purge</h3> <ul> <li><a href="javascript:goHere()">Current Status</a></li> <li><a href="javascript:goHere()">Control</a></li> <li><a href="javascript:goHere()">Requesting New Process</a></li> </ul> </div> </div> </table> <div id="loading" class="separator"><p>Process Management</p></div> </body> </html>
