-
how to make this tabbed page script work in netscape
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0064)http://www.inquiry.com/techtips/web_...n1299/tabs.htm
-->
<HTML><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<STYLE type=text/css>TD {
FONT: 8pt MS Sans Serif
}
</STYLE>
<SCRIPT id=clientEventHandlersJS language=javascript>
function window_onload()
{
// DEFINE WHICH TAB IS DISPLAYED FIRST
SetTabColors("Tab1")
}
</SCRIPT>
<!--<script>var _m1='<table width="100%" height="100%" border="0"><tr><td
align=center>'+_start+'</td></tr></table>';
var div1 = new NewDiv(window,"d1",_m1,10,10,500,50,10,true);
</script>-->
<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY bgColor=silver language=javascript onload="return window_onload()">
<CENTER>
<H1>DHTML Tabs</H1></CENTER><!-- The Tabs -->
<TABLE bgColor=silver border=0 cellPadding=0 cellSpacing=0
style="BACKGROUND: silver; HEIGHT: 30px; LEFT: 100px; OVERFLOW: hidden; POSITION:
absolute; TOP: 100px; WIDTH: 606px"
width="75%">
<TBODY>
<TR><!-- Space before Tab 1 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%"> </TD><!--
Beginning of Tab 1 -->
<TD align=middle id=Tab1 onclick=SetTabColors(Tab1) style="FONT-SIZE:
10pt"
width="20%">Logs </TD><!-- Space between Tab 1 and Tab 2 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%"> </TD><!--
Beginning of Tab 2 -->
<TD align=middle id= Tab2 onclick=SetTabColors(Tab2) style="FONT-SIZE:
10pt"
width="20%">Attachments</TD><!-- Remainder space after Tab 2 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%"> </TD><!--
Beginning of Tab 3 -->
<TD align=middle id=Tab3 onclick=SetTabColors(Tab3) style="FONT-SIZE:
10pt"
width="20%">Links </TD><!-- Remainder space after Tab 2 -->
<TD bgColor=silver id=RemainderSpace> </TD></TR>
<TR>
<TD align=middle bgColor=#006699 colSpan=8> </TD></TR></TBODY></TABLE><!--
The Panels...put all of the controls to be displayed here -->
<TABLE border=0 cellPadding=1 cellSpacing=1 width="75%">
<TBODY>
<TR>
<TD vAlign=top><!-- Panel for tab 1 --><SPAN id=PanelForTab1
style="BACKGROUND: #006699; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 360px; LEFT: 100px; LINE-HEIGHT: normal;
OVERFLOW: hidden; POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH:
606px">
<CENTER>
<H3>ISSUE LOG</H3></CENTER>
<CENTER>
<TABLE>
<TBODY>
</TBODY></TABLE></CENTER></SPAN><!-- Panel for tab 2 --><SPAN
id=PanelForTab2
style="BACKGROUND: #006699; HEIGHT: 360px; LEFT: 100px; OVERFLOW: hidden;
POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH: 606px">
<CENTER>
<H1>tab2</H1></CENTER><SPAN id=InnerPanelForTab2
style="BACKGROUND: white; FONT-SIZE: 14pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 160px; LEFT: 200px; LINE-HEIGHT: normal;
OVERFLOW: scroll; POSITION: absolute; TOP: 50px; WIDTH: 150px">You
can even nest one SPAN within another.
<P>In this case we have done so to provide a finer degree of control
over
placement and display.
<P>You can even add additional control into this box.
<P>Click here if you understand:
<P>
<CENTER><INPUT id=ClickMe language=javascript name=ClickMe onclick="alert('Cool!')"
type=button value=OK>
</CENTER>
<P> </SPAN></SPAN></P></TD></TR></TBODY></TABLE><!-- Panel for
tab 2 --><SPAN id=PanelForTab3
style="BACKGROUND: #006699; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 360px; LEFT: 100px; LINE-HEIGHT: normal;
OVERFLOW: hidden; POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH:
606px">
<CENTER>
<H1>tab1</H1></CENTER>
<BLOCKQUOTE>Panels are defined by SPAN tags. Add your own HTML to the
inside of the SPAN tags and it will be shown and hidden appropriately.
We have some sample HTML controls here. </BLOCKQUOTE>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>Please Send Me Updates</TD>
<TD><INPUT id=checkbox1 name=checkbox1 type=checkbox></TD></TR>
<TR>
<TD>Name</TD>
<TD><INPUT id=text1 name=text1></TD></TR>
<TR>
<TD>Email Address</TD>
<TD><INPUT id=text2 name=text2></TD></TR></TBODY></TABLE></CENTER></SPAN>
<SCRIPT>
function SetTabColors(TheSelectedTab)
{
var TabBorderStyle="outset"
var TabBorderColor="gray"
var TabBorderWidth=3
var UNSELECTED_COLOR = '#ffffee'
var SELECTED_COLOR = '#006699'
var ITab = Tab1.style
var PTab = Tab2.style
var TTab = Tab3.style
// RESET ALL TABS TO A DEFAULT STYLE
Tab1.bgColor=UNSELECTED_COLOR
Tab1.style.fontWeight=400
Tab1.style.color = "black"
Tab2.bgColor=UNSELECTED_COLOR
Tab2.style.fontWeight=400
Tab2.style.color = "black"
Tab3.bgColor=UNSELECTED_COLOR
Tab3.style.fontWeight=400
Tab3.style.color = "black"
// CHANGE THE SELECTED TAB
//TheSelectedTab.style.color = "white"
TheSelectedTab.bgColor = SELECTED_COLOR
TheSelectedTab.style.fontWeight=700
switch(TheSelectedTab)
{
case Tab1:
// SET MOUSE CURSOR LOOK
ITab.cursor="default"
PTab.cursor="hand"
TTab.cursor="hand"
// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="visible"
PanelForTab2.style.visibility="hidden"
PanelForTab3.style.visibility="hidden"
// SET TAB LOOK
ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=""
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=""
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=0
PTab.borderRightStyle=PTab.borderLeftStyle=PTab.borderTopStyle=TabBorderStyle
PTab.borderRightColor=PTab.borderLeftColor=PTab.borderTopColor=TabBorderColor
PTab.borderRightWidth=PTab.borderLeftWidth=PTab.borderTopWidth=TabBorderWidth
TTab.borderRightStyle=TTab.borderLeftStyle=TTab.borderTopStyle=TabBorderStyle
TTab.borderRightColor=TTab.borderLeftColor=TTab.borderTopColor=TabBorderColor
TTab.borderRightWidth=TTab.borderLeftWidth=TTab.borderTopWidth=TabBorderWidth
break;
case Tab2:
// SET MOUSE CURSOR LOOK
ITab.cursor="hand"
PTab.cursor="default"
TTab.cursor="hand"
// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="hidden"
PanelForTab2.style.visibility="visible"
PanelForTab3.style.visibility="hidden"
// SET TAB LOOK
PTab.borderRightStyle=PTab.borderLeftStyle=PTab.borderTopStyle=""
PTab.borderRightColor=PTab.borderLeftColor=PTab.borderTopColor=""
PTab.borderRightWidth=PTab.borderLeftWidth=PTab.borderTopWidth=0
ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=TabBorderStyle
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=TabBorderColor
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=TabBorderWidth
TTab.borderRightStyle=TTab.borderLeftStyle=TTab.borderTopStyle=TabBorderStyle
TTab.borderRightColor=TTab.borderLeftColor=TTab.borderTopColor=TabBorderColor
TTab.borderRightWidth=TTab.borderLeftWidth=TTab.borderTopWidth=TabBorderWidth
break;
case Tab3:
// SET MOUSE CURSOR LOOK
ITab.cursor="hand"
PTab.cursor="hand"
TTab.cursor="default"
// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="hidden"
PanelForTab2.style.visibility="hidden"
PanelForTab3.style.visibility="visible"
// SET TAB LOOK
TTab.borderRightStyle=PTab.borderLeftStyle=TTab.borderTopStyle=""
TTab.borderRightColor=PTab.borderLeftColor=TTab.borderTopColor=""
TTab.borderRightWidth=PTab.borderLeftWidth=TTab.borderTopWidth=0
ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=TabBorderStyle
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=TabBorderColor
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=TabBorderWidth
PTab.borderRightStyle=ITab.borderLeftStyle=PTab.borderTopStyle=TabBorderStyle
PTab.borderRightColor=ITab.borderLeftColor=PTab.borderTopColor=TabBorderColor
PTab.borderRightWidth=ITab.borderLeftWidth=PTab.borderTopWidth=TabBorderWidth
break;
}
}
</SCRIPT>
</BODY></HTML>
-
Re: how to make this tabbed page script work in netscape
"vamsikrishna" <vamsikrishnach@yahoo.com> wrote:
>
> saved from url=(0064)http://www.inquiry.com/techtips/web_...n1299/tabs.htm
This URL has many syntax errors as reported when passing it through WDG's
online validator at <http://www.htmlhelp.com/tools/validator/>.
And the NS Javascript Console returned:
JavaScript Error: http://www.inquiry.com/techtips/web_...1299/tabs.htm,
line 13:
Tab1 is not defined.
Logically, as the whole way of coding is IE only. I couldn't give you just
a few pointers on how to change it to work in NS, the whole page would need
a rewriting.
To give you just a few exemples:
- you can't have an "onclick" in a <TD> or in form elements
- TD ID cannot be retrieved
- FORM tags entirely missing.
- NS is very keen on valid syntax
For NS you'll have to use a totally different way, using DIV as layer container,
and it is yet to put in doubt if you'll be able to change certain style properties.
Sorry.
Frederiek
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
Forum Rules
|
Top DevX Stories
Easy Web Services with SQL Server 2005 HTTP Endpoints
JavaOne 2005: Java Platform Roadmap Focuses on Ease of Development, Sun Focuses on the "Free" in F.O.S.S.
Wed Yourself to UML with the Power of Associations
Microsoft to Add AJAX Capabilities to ASP.NET
IBM's Cloudscape Versus MySQL
|
Reply With Quote
Bookmarks