how to make this tabbed page script work in netscape


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: how to make this tabbed page script work in netscape

  1. #1
    vamsikrishna Guest

    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%">&nbsp; </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%">&nbsp; </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%">&nbsp; </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>&nbsp; </TD></TR>
    <TR>
    <TD align=middle bgColor=#006699 colSpan=8>&nbsp; </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>&nbsp; </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>


  2. #2
    Frederiek Guest

    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
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center