I have no idea if I made this more difficult then it needs to be? I cannot for the life of me get this working in IE. Firefox work flawlessly.
What I did was use tables to make a page that looks something like this
------HEADER--------
LEFT--MIDDLE--RIGHT
------FOOTER--------
I used javascript to make neat looking mouse over effect for the navigation bar, and then used php to load the content for the middle page. Basically is this even possible to do it this way with IE?
I think I included the relivent code, so if there is something you need to see let me know.
Toe
index.php
PHP Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<?php
include("start_page.php");
?>
<table border="0" width="100%" cellspacing="5" cellpadding="5" align="center">
<tr align="center" valign="top">
<td colspan="2">
<!-- Header -->
<?php include("header.php"); ?>
</td>
</tr>
<tr align="center" valign="top">
<td width="10%" align="left" valign="top">
<!-- menu -->
<?php include("left.php"); ?>
</td>
<td width="60%" align="left" valign="top">
<!-- Main Conent -->
<?php include("middle.php"); ?>
</td>
</tr>
<tr align="center" valign="top">
<td colspan="2" width="100%" align="center" valign="top">
<!-- Footer goes here. -->
<?php include("footer.php"); ?>
</td>
</tr>
</table>
<?php
include("end_page.php");
?>
left.php
PHP Code:
<table class="content" border="0" width="100%" align="center" valign="top">
<tr>
<td class="title">Main Menu</td>
</tr>
<tr>
<td>
<!-- HOME -->
<a class="menu" href="content.php?page=News" target="iframe"><strong><big>–</big></strong> Home</a><br />
<div>
<!-- DOCUMENTS -->
<a class="menu" href="#" onMouseOver="hideAll(); showLayer('documentMenu'); stopTime()" onMouseOut="startTime();">
¬ Documents<br /></a>
<div class="subMenu" id="documentMenu">
<?php
$results = DBSearchOrder( "documents", "name" );
while($row = @mysql_fetch_array($results)) {
?>
<a class="menu" href="content.php?page=document&fileName=<?php echo "$row[fileName]" ?>" target="iframe" onMouseOver="stopTime();" onMouseOut="startTime();"><?php echo "$row[name]" ?></a><br />
<?php
}
?>
</div>
</div>
<!-- LINKS -->
<a class="menu" href="content.php?page=Links" target="iframe"><strong><big>–</big></strong> Links</a><br />
<div>
<!-- About Us -->
<a class="menu" href="#" onMouseOver="hideAll(); showLayer('aboutUsMenu'); stopTime()" onMouseOut="startTime();">
¬ About Us
</a>
<div class="subMenu" id="aboutUsMenu">
<a class="menu" href="content.php?page=mission" target="iframe" onMouseOver="stopTime();" onMouseOut="startTime();">Mission Statement</a><br />
<a class="menu" href="content.php?page=Members" target="iframe" onMouseOver="stopTime();" onMouseOut="startTime();">Members</a><br />
</div>
</div>
</td>
</tr>
<tr>
<td class="title">Clear Trust</td>
</tr>
<tr>
<td>
<div>
<a class="menu" href="#" onMouseOver="hideAll(); showLayer('ctTestReportMenu'); stopTime()" onMouseOut="startTime();">¬ API Test Report Archive<br /></a>
<div class="subMenu" id="ctTestReportMenu">
<a class="menu" href="content.php?page=ctDevelopment" target="iframe" onMouseOver="stopTime();" onMouseOut="startTime();">Development</a><br />
<a class="menu" href="content.php?page=ctRelease" target="iframe" onMouseOver="stopTime();" onMouseOut="startTime();">Release</a><br />
</div>
</div>
<a class="menu" href="content.php?page=ctLinks" target="iframe"><strong><big>–</big></strong> Links</a><br />
<a class="menu" href="content.php?page=ctMachines" target="iframe"><strong><big>–</big></strong> Machines</a><br />
<a class="menu" href="content.php?page=ctRequest" target="iframe"><strong><big>–</big></strong> Request Build</a><br />
<a class="menu" href="content.php?page=ctSchedule" target="iframe"><strong><big>–</big></strong> Test Schedules</a><br />
<a class="menu" href="content.php?page=ctTinderbox" target="iframe"><strong><big>–</big></strong> Tinderbox</a><br />
</td>
</tr>
</table>
middle.php
PHP Code:
<table border="0" width="100%" align="center" valign="top">
<tr>
<td>
<iframe id="iframe" name="iframe" src="content.php" align=left frameborder=0 onload="resize_iframe('iframe')"></iframe>
</td>
</tr>
</table>
content.php
PHP Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<?php
include("start_page.php");
$page = $_GET['page'];
$fileName = "content/documents/" . $_GET['fileName'] . ".php";
switch($page) {
case "Links":
include("content/links.php");
break;
case "Members":
include("content/members.php");
break;
case "mission":
include("content/mission.php");
break;
case "document":
include($fileName);
break;
case "News":
default:
include("content/news.php");
break;
}
include("end_page.php");
?>
CSS
Code:
iframe {
z-index : 100;
width: 100%;
scrolling: no;
}
div { position: relative; }
div.subMenu {
background-color: #cccccc;
layer-background-color: #cccccc;
font-size: small;
border: 1px inset #000000;
width: 140px;
top: 0px; /* Need to include this inline example: style="top:140px" I need to figure out a better way.*/
left: 110px;
position: absolute;
z-index: 90;
visibility: hidden;
}
JavaScript
Code:
var activeSub=0;
var SubNum=0;
function reDo(){ window.location.reload() }
window.onresize = reDo;
//Define global variables
var timerID = null;
var timerOn = false;
var timecount = 500;
var what = null;
var newbrowser = true;
var check = false;
function init(){
// alert ("Running Init");
if (document.layers) {
// alert ("Running Netscape 4");
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
what ="ns4";
} else if(document.all){
// alert ("Running IE");
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what ="ie";
} else if(document.getElementById){
// alert ("Running Netscape 6");
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="moz";
} else{
//alert("Older than 4.0 browser.");
what="none";
newbrowser = false;
}
window.status='status bar text to go here';
check = true;
}
// Turns the layers on and off
function showLayer(layerName){
if(check){
if (what =="none"){
return;
} else if (what == "moz"){
document.getElementById(layerName).style.visibility="visible";
} else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
} else {
// alert ("Please wait for the page to finish loading.");
return;
}
}
function hideLayer(layerName){
if(check){
if (what =="none"){
return;
} else if (what == "moz"){
document.getElementById(layerName).style.visibility="hidden";
} else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
} else {
// alert ("Please wait for the page to finish loading.");
return;
}
}
function hideAll(){
hideLayer('documentMenu');
hideLayer('aboutUsMenu');
hideLayer('ctTestReportMenu');
}
function startTime() {
if (timerOn == false) {
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;
}
}
function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}
function onLoad(){
init();
}
Linear Mode
