Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Java Script Code Question

Status
Not open for further replies.
thencr

thencr

Technical User
Sep 2, 2004
4
CA
I am working on a project that requires creating a web application that has tabs. Like a filing cabinet. Each tab will have a report associated with it. I am new to java and I was told the following code would work. Can you tell me if this is correct?

<%

<SCRIPT LANGUAGE="JavaScript">

<%@ page contentType="text/html; charset=utf-8" %>

<%

<HTML>
<HEAD>
<TITLE>

</TITLE>
<STYLE>
..tabMarker {
color: black;
background-color: lightgrey;
border-top: 1px white solid; border-bottom: 2px white solid;
border-right: 1px black solid; border-left: 1px white solid;
padding-left: 2px; padding-right: 2px;
}
..tabContent {
position: absolute;
visibility: hidden;
width: 100%; height: 200px;
color: black;
background-color: lightgrey;
border-top: 0px white solid; border-bottom: 1px black solid;
border-right: 1px black solid; border-left: 2px white solid;
padding-left: 2px; padding-right: 2px;
}
</STYLE>
<SCRIPT>
function activateTab (tab) {
if (document.all || document.getElementById) {
tab.style.backgroundColor = 'lime';
tab.style.borderBottomWidth = '0px';
tab.style.borderTopWidth = '2px';
tab.style.borderLeftWidth = '2px';
//tab.style.borderLeftColor = 'white';
//tab.style.borderRightColor = 'white';
}
}
function deActivateTab (tab) {
if (document.all || document.getElementById) {
tab.style.backgroundColor = 'lightgrey';
tab.style.borderBottomWidth = '2px';
tab.style.borderTopWidth = '1px';
tab.style.borderLeftWidth = '1px';
//tab.style.borderLeftColor = 'black';
//tab.style.borderRightColor = 'black';
}
}
function hideTab (tab) {
deActivateTab(tab);
hideContent(tab.id + 'Content');
}
function showTab (tab) {
if (tab != curTab)
hideTab(curTab);
curTab = tab;
activateTab(curTab);
showContent(tab.id + 'Content');
}
function hideContent (id) {
var c;
if (document.all)
c = document.all[id];
else if (document.getElementById)
c = document.getElementById(id);
if (c) {
//c.style.backgroundColor = 'lightgrey';
c.style.visibility = 'hidden';
}
}
function showContent (id) {
var c;
if (document.all)
c = document.all[id];
else if (document.getElementById)
c = document.getElementById(id);
if (c) {
//c.style.backgroundColor = 'lime';
c.style.visibility = 'visible';
alert(c.id + ': ' + c.style.visibility)
}
}
function initTabs () {
if (document.all) {
window.curTab = document.all['tab1'];
showTab(curTab);
}
else if (document.getElementById) {
window.curTab = document.getElementById('tab1');
showTab(curTab);
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="lightgrey" ONLOAD="initTabs();">
<TABLE cellspacing="0" cellpadding="0" border="0">
<TR>
<TD>
<DIV ID="tab1" CLASS="tabMarker" ONCLICK="showTab(this);">
Executive Overview
</DIV>
<TD>
<DIV ID="tab2" CLASS="tabMarker" ONCLICK="showTab(this);">
Companies,Speeds,Services
</DIV>
</TD>
<DIV ID="tab3" CLASS="tabMarker" ONCLICK="showTab(this);">
Exception Reporting
</DIV>
</TD>
<DIV ID="tab4" CLASS="tabMarker" ONCLICK="showTab(this);">
Unit Cost by Volume and Expense
</DIV>
</TD>
<DIV ID="tab5" CLASS="tabMarker" ONCLICK="showTab(this);">
Company Data Digest by Speeds and Service Levels
</DIV>
</TD>
<DIV ID="tab6" CLASS="tabMarker" ONCLICK="showTab(this);">
Two Page Report
</DIV>
</TD>
</TR>
<TR>
<TD COLSPAN="6">
<DIV ID="tab1Content" CLASS="tabContent" STYLE="visibility: visible;">
Overview report place here
</DIV>
<DIV ID="tab2Content" CLASS="tabContent">
Companies report location here
</DIV>
<DIV ID="tab3Content" CLASS="tabContent">
exception report location here
</DIV>
<DIV ID="tab4Content" CLASS="tabContent">
Unit Cost by volume report location here
</DIV>
<DIV ID="tab5Content" CLASS="tabContent">
Company Data Digest report Levels location here
</DIV>
<DIV ID="tab6Content" CLASS="tabContent">
Page report location here
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
 
Sort by date Sort by votes
Can you tell me if this is correct?
Click to expand...

There any many things wrong with the code - here are a few to get you started:

- You're opening server-side blocks ("<%"), but never closing them. You don't appear to be using any server-side code, so you may as well remove them

- Class references in CSS start with one period (.), not two as you have (..)

- Unless you are trying to support archaic v4 browsers, ditch all the "if (document.all)" tests. 99% of browsers these days support getElementById, so just use it without the IE-specific tests

- Specify a type for your script and style sections

- Don't use tables unless you really have to. Consider styling an unordered list instead

- Choose a DOCTYPE that best suits your needs, and use it

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
492
MDGarcia
MDGarcia
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
277
rogerte
rogerte
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
709
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
307
lexer
lexer
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
130
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top