fg-menu selection not displaying in iFrame
Hi,
I downloaded and installed the fg-menu plugins. After setting up my
navigation and my iframe, my iframe as a target seems to be ignored.
I would try this using <div></div> intead of iframes but that seem a
bit more complicated.
Using IE6
Not sure what else I can provide to help. Here's the entire
index.html. I have used other navigation in this way without problems
so I'm hoping it simple.
<!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" />
<!-- required scripts -->
<script type="text/javascript" src="../jquery/fg-menu/
jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery/fg-menu/
fg.menu.js"></script>
<script type="text/javascript" src="../jquery/bgiframe_2.1.1/
jquery.bgiframe.js"></script>
<!-- required styles -->
<link type="text/css" href="../jquery/fg-menu/fg.menu.css"
media="screen" rel="stylesheet" />
<link type="text/css" href="../jquery/fg-menu/theme/ui.all.css"
media="screen" rel="stylesheet" />
<!-- styles for this example page only -->
<style type="text/css">
body { font-size:62.5%; }
#menuLog { font-size:1.4em; margin:10px 20px 20px; }
.hidden { position:absolute; top:0; left:-9999px; width:1px;
height:1px; overflow:hidden; }
.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em
1em; text-decoration:none !important; cursor:pointer; position:
relative; text-align: center; zoom: 1; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-
top: -8px; left: 50%; margin-left: -8px; }
a.fg-button { float:left; }
button.fg-button { width:auto; overflow:visible; } /* removes
extra button width in IE */
.fg-button-icon-left { padding-left: 2.1em; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-left .ui-icon { right: auto; left: .2em;
margin-left: 0; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em;
margin-left: 0; }
.fg-button-icon-solo { display:block; width:8px; text-indent:
-9999px; }
.fg-button.ui-state-loading .ui-icon { background: url(../
jquery/fg-menu/spinner_bar.gif) no-repeat 0 0; }
</style>
<!-- style exceptions for IE 6 -->
<!--[if IE]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->
<script type="text/javascript">
$(function(){
// BUTTON
$('.fg-button').hover(
function(){ $(this).removeClass('ui-state-
default').addClass('ui-state-focus'); },
function(){ $(this).removeClass('ui-state-
focus').addClass('ui-state-default'); }
);
// MENU
$('#flyout').menu({ content: $('#flyout').next().html
(), flyOut: true });
});
</script>
</head>
<body>
<table border=0 width=100% cellspcing=0>
<td align=left colspan=2><img src=dba.jpg border=0>
<tr><td align=left colspan=2>
<a tabindex="0" href="#archive" class="fg-button fg-button-icon-right
ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-
icon ui-icon-triangle-1-s"></span>ARCHIVES</a>
<div id="archive" class="hidden">
<ul>
<li><a href="http://my.site/dba2/release_locks.cgi"
target="IFL">Locks</a></li>
<li><a href="javascript:void(0)">Status</a></li>
<ul>
<li><a href="http://my.site/dba2/status.cgi"
target="IFL">Current Week</a></li>
<li><a href="http://my.site/dba2/status.cgi?weeksago=1"
target="IFL">Last Week</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">Scheduling Controls</a>
<ul>
<li><a href="https://my.site/dba2/submit_ctrl.cgi"
target="IFL">BH01</a></li>
<li><a href="javascript:void(0);">JA11</a></li>
<li><a href="javascript:void(0);">JA10</a></li>
</ul>
</li>
<li><a href="https://my.site/dba2/server_ctrl.cgi"
target="IFL">Server Controls</a></li>
<li><a href="https://www.e-access.att.com/edsapps/dba/
parameter_ctrl.cgi" target="IFL">Parameters</a></li>
</ul>
</div>
<center>
<table border=0 width=60% cellspcing=0>
<td align=left>
</table>
<IFRAME NAME=IFL width=100% height=550 border=yes
frameborder=yes scrolling=yes></IFRAME>
</table>
</body>
</html>