5
I've two frames in a page. On the left Frame i've buttons , if we click on button the particular pages will be loaded in the middle Frame.
This code works perfectly in Firefox but not in IE ...
Please help me to resolve this issue..
[html]
<html>
<head>
<!-- Infrastructure code for the tree -->
<title>leftframe</title>
<style type="text/css">
.initialalgn{font-weight:bold;background-color:#315594;font-family:Arial,Helvetica,Verdana;font-size:7.90pt;color: #ffffff;width:160;text-align:left}
body{
font: 10pt Verdana,sans-serif;
color: navy;
}
.trigger{
cursor: auto;
cursor: auto;
}
.branch{
display: none;
margin-left: 12px;
}
img
{
border-style: none;
}
</style>
<script language="JavaScript">
var status = 'NORMAL';
function callSetSize(incOrDec) {
// Check if the user wants to increase the width of the Frameset
if(incOrDec == "INCREASE") {
if(status == "NORMAL") {
setSize("320");
status = "MAXIMUM";
// Hide the increase button
inc.style.visibility = "hidden";
}
else if (status == "DECREASED") {
setSize("170");
status = "NORMAL";
// Show the decrease button
dec.style.visibility = "visible";
}
else {
alert("Thats all you can maximise!!!");
}
}
// Check if the user wants to decrease the width of the Frameset
if(incOrDec == "DECREASE") {
if(status == "NORMAL") {
setSize("57");
status = "DECREASED";
// Hide the decrease button
dec.style.visibility = "hidden";
}
else if (status == "MAXIMUM") {
setSize("170");
status = "NORMAL";
// Show the increase button
inc.style.visibility = "visible";
}
else {
alert("Thats all you can minimize!!!");
}
}
}
function setSize(colValue) {
parent.document.body.cols = colValue + ",*";
for(var i = 0; i < parent.parent.Topframe.document.images.length; i++) {
if(parent.parent.Topframe.document.images[i].name == "blank_shim") {
parent.parent.Topframe.document.images[i].width = colValue;
}
}
}
function changeCol(e){
for(i=1;i<6;i++)
{
document.getElementById('button'+i).style.backgrou ndColor="#e2e2d0";
document.getElementById('button'+i).style.color="# ee4628"
}
var el=window.event? event.srcElement: e.target
if (el.tagName=="INPUT"&&el.type=="button"){
el.style.backgroundColor="#ff6000";
el.style.color="#ffffff"
}
}
</script>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<link href="../css/TemplateStyle.css" rel="stylesheet" type="text/css" >
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" class="leftPanel" >
<tr>
<table width = "100%" cellpadding="0" cellspacing="0" >
<tr>
<td align = "right" width="96%" rowspan="2"> </td>
<td align = "right" width="2%" rowspan="2"> </td>
<td align = "right" width="2%"> <a href="#" onClick="callSetSize('DECREASE');" name = "dec" id = "dec" >
<img src="../images/resize1.gif" width="12" height="12" border="0" alt="Expanded Configuration Window"></a>
</td>
</tr>
<tr>
<td align = "right" width="2%" valign="top"><a href="#" onClick="callSetSize('INCREASE');" name = "inc" id = "inc" >
<img src="../images/resize2.gif" width="12" height="12" border="0" alt="Expanded Navigation Window"></a></td>
</tr>
</table>
</tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="LeftPanelnav">
<tr>
<td valign="top">
</td>
</tr>
</table>
<!-- Execution of the code that actually builds the specific tree -->
<table align="left" width = "100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<div class="trigger" onClick="showBranch('branch1');swapFolder('folder1 ')">
<table border=0 cellpadding=0 cellspacing=0>
<td align="left" class=smaller height=25>
<input type="button" id="button1" value="Manage page" class="initialalgn" >
</td>
</table>
</div>
<span class="branch" id="branch1">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="td" height=20>
<a href="clientgrid.html" target="MiddleFrame" ><input type="button" id="button2" value="Client Grid" class="initialalgn"></a></td>
</tr>
<tr>
<td class="td" height=20>
<a href="devicegrid.html" target="MiddleFrame"><input type="button" id="button3" value="Device Grid(Zone Definition)" class="initialalgn" ></a>
</td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td>
<div class="trigger" onClick="showBranch('branch2');swapFolder('folder2 ')">
<table border=0 cellpadding=0 cellspacing=0>
<td class="smaller" height=25>
<input type="button" id="button4" value="Manage Environment" class="initialalgn" >
</td>
</table>
</div>
<span class="branch" id="branch2">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="td" height="20">
<a href="class.html" target="MiddleFrame"><input type="button" id="button5" value="Class" class="initialalgn" ></a>
</td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</td>
</tr>
<script>
function swapFolder(img)
{
objImg = document.getElementById(img);
}
function showBranch(branch)
{
var objBranch = document.getElementById(branch).style;
if(objBranch.display=="block")
{
objBranch.display="none";
}
else
{
document.getElementById('branch1').style.display=" none";
document.getElementById('branch2').style.display=" none";
objBranch.display="block";
}
}
</script>
</body>
</html>[/html]
