Hi Experts,
I'm new to JavaScript and web-based apps development, so I'll tell you right off
that I don't really know my way around it as of yet.
I'm trying to create a code library set with JavaScript (in DreamweaverMX)
to display "buttons" with which to select pages in a gallery. I'm trying to
"grey out" (and disable) the button for the current page when it is displayed.
(This isn't rocket science here, but it's something that I think SHOULD work
- and if I can't get something as simple as this to work, then I won't get
the more complex stuff to work either.)
When I try to open it with IE6, there are no buttons - nothing - it's like the
JavaScript is being ignored.
Can anyone clue me in as to what my problem is?
THANKS!
This is the code for index.htm:
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Button Function with JavaScript</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6 {font-family: Times New Roman, Times, serif;}
-->
</style>
<link href="StyleSheets/Table%20Cell%20Style%20Sheet.css" rel="stylesheet"
type="text/css">
<link href="StyleSheets/Primary%20Style%20Sheet.css" rel="stylesheet" type="text/css">
<link href="StyleSheets/Page%20Ref%20Style%20sheet.css" rel="stylesheet"
type="text/css">
<script language="JavaScript" type="text/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);
// THIS is where the page number is set for button reference.
if (typeof session.syspkg == "undefined")
{ var sysp = new object ();
sysp.top_page_ref = 1;
session.syspkg = sysp;
}
//-->
</script>
<style type="text/css">
<!--
a:link {color: #FFFFFF;}
a:visited {color: #CCCC00;}
a:active {color: #FF0000;}
-->
</style></head>
<body>
<h1 class="style2h1">Page Heading</h1>
<div id="PageTagLayer" style="position:absolute; left:680px; top:14px; width:291px;
height:70px; z-index:1">
<!--
************************************************** ************************************************** *
-->
<script language="JavaScript" type="text/JavaScript">
<!--
document.write
("<div id=\"PageCellLayer01\" style=\"position:absolute; left:8px; top:0px;
width:60px; height:17px; z-index:2\" ");
if (session.syspkg.top_page_ref != 1)
document.write ("class=\"PageRefCell02\"><a href=\"index.htm\">Page
1</a></div>");
else document.write ("class=\"PageRefCell02Off\">Page 1</div>");
document.write
("<div id=\"PageCellLayer02\" style=\"position:absolute; left:76px; top:0px;
width:60px; height:17px; z-index:2\" ");
if (session.syspkg.top_page_ref != 2)
document.write ("class=\"PageRefCell02\"><a href=\"Page02.htm\">Page
2</a></div>");
else document.write ("class=\"PageRefCell02Off\">Page 2</div>");
document.write
("<div id=\"PageCellLayer03\" style=\"position:absolute; left:76px; top:24px;
width:60px; height:17px; z-index:2\" ");
//-->
</script>
<!--
************************************************** ************************************************** *
-->
</div>
<table width="980" height="446" border="0" align="center" cellpadding="2"
cellspacing="2">
<tr>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
</tr>
<tr>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
</tr>
</table>
</body>
</html>
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
This is the code for Page02.htm:
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Button Function with JavaScript</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6 {font-family: Times New Roman, Times, serif;}
-->
</style>
<link href="StyleSheets/Table%20Cell%20Style%20Sheet.css" rel="stylesheet"
type="text/css">
<link href="StyleSheets/Primary%20Style%20Sheet.css" rel="stylesheet" type="text/css">
<link href="StyleSheets/Page%20Ref%20Style%20sheet.css" rel="stylesheet"
type="text/css">
<script language="JavaScript" type="text/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);
session.syspkg.top_page_ref = 2;
//-->
</script>
<style type="text/css">
<!--
a:link {color: #FFFFFF;}
a:visited {color: #CCCC00;}
a:active {color: #FF0000;}
-->
</style></head>
<body>
<h1 class="style2h1">Page Heading</h1>
<div id="PageTagLayer" style="position:absolute; left:680px; top:14px; width:291px;
height:70px; z-index:1">
<!--
************************************************** ************************************************** *
-->
<script language="JavaScript" type="text/JavaScript">
<!--
document.write
("<div id=\"PageCellLayer01\" style=\"position:absolute; left:8px; top:0px;
width:60px; height:17px; z-index:2\" ");
if (session.syspkg.top_page_ref != 1)
document.write ("class=\"PageRefCell02\"><a href=\"index.htm\">Page
1</a></div>");
else document.write ("class=\"PageRefCell02Off\">Page 1</div>");
document.write
("<div id=\"PageCellLayer02\" style=\"position:absolute; left:76px; top:0px;
width:60px; height:17px; z-index:2\" ");
if (session.syspkg.top_page_ref != 2)
document.write ("class=\"PageRefCell02\"><a href=\"Page02.htm\">Page
2</a></div>");
else document.write ("class=\"PageRefCell02Off\">Page 2</div>");
document.write
("<div id=\"PageCellLayer03\" style=\"position:absolute; left:76px; top:24px;
width:60px; height:17px; z-index:2\" ");
//-->
</script>
<!--
************************************************** ************************************************** *
-->
</div>
<table width="980" height="446" border="0" align="center" cellpadding="2"
cellspacing="2">
<tr>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
</tr>
<tr>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
<td width="238"><table width="208" height="244" border="0" align="center"
cellpadding="2" cellspacing="4">
<tr> <td width="144" height="200" class="CellTable01"> </td> </tr>
<tr> <td height="32" class="CellTable01">Title</td> </tr>
</table></td>
</tr>
</table>
</body>
</html>
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
This is the code for Page Ref Style sheet.css
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
..PageRefCell02 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: oblique;
line-height: 16px;
background-color: #660000;
color: #FFFFFF;
text-align: center;
text-indent: 1px;
margin: 0px;
padding: 0px;
width: auto;
border: thin groove #808030;
}
..PageRefCell02Off {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: oblique;
line-height: 16px;
background-color: #999999;
color: #FFFFFF;
text-align: center;
text-indent: 1px;
margin: 0px;
padding: 0px;
width: auto;
border: thin groove #808030;
background-image: url(../Images/hash02.jpg);
}
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
This is the code for Primary Style Sheet.css
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
body {}
h1 {
color: #000000;
height: auto;
width: auto;
border: thick groove #000000;
background-color: #FFFFFF;
padding-right: 1px;
padding-left: 1px;
margin-right: 222px;
margin-left: 222px;
top: auto;
letter-spacing: normal;
text-align: center;
word-spacing: normal;
padding-top: 1px;
padding-bottom: 1px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Times New Roman, Times, serif;
}
..style2h1 {
height: auto;
width: auto;
font-style: italic;
font-size: 44px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 100;
color: #000000;
line-height: 48px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
margin-top: 1px;
margin-right: 333px;
margin-bottom: 8px;
margin-left: 333px;
border: thick ridge #FFFFFF;
}
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
This is the code for Table Cell Style Sheet.css
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
..CellTable01 {
margin: 1px;
padding: 1px;
color: #660000;
font-size: 18px;
text-decoration: none;
font-style: oblique;
font-family: "Times New Roman", Times, serif;
font-weight: 600;
text-align: center;
border: medium ridge #660000;
background-color: #808030;
}
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =