SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interactive Tab Menu doesnt work

    So im using this right now:

    Code:
           <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <HEAD>
            <TITLE></TITLE>
            <STYLE>
            #maincontent {
                width: 860px;
                position: relative;
                margin-bottom: 20px;
                margin-top: 40px;
                border-top-color: #CCC;
                border-right-color: #CCC;
                border-bottom-color: #CCC;
                border-left-color: #CCC;
                margin-right: auto;
                margin-left: auto;
            }
            #tabContents {
                vertical-align: top;
                padding-top: 5px;
                padding-right: 5px;
                padding-left: 5px;
                border-right-width: thin;
                border-bottom-width: thin;
                border-left-width: thin;
                border-right-style: solid;
                border-bottom-style: solid;
                border-left-style: solid;
                border-top-color: #336633;
                border-right-color: #336633;
                border-bottom-color: #336633;
                border-left-color: #336633;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 12px;
                font-weight: normal;
                color: #21A54F;
                padding-bottom: 10px;
            }
            #TabHidden {
                position: absolute;
                width: 834px;
                left: 57px;
                top: 277px;
                height: 260px;
                clear: both;
                visibility: hidden;
                overflow: hidden;
            }
            #redirect {
                width: 746px;
                margin-left: 56px;
                margin-bottom: 15px;
                font-family: Verdana, Geneva, sans-serif;
                font-style: italic;
                color: #276B3F;
                font-size: 10px;
                text-align: center;
            }
            #TabDivPic {
                height: auto;
                width: 175px;
                margin-right: 30px;
                float: left;
            }
            .conts	{
                visibility:hidden
            }
            .tab	{
                font-family:Verdana, Geneva, sans-serif;
                font-size:10pt;
                text-align:center;
                font-weight:normal;
                color: #FFF;
                background-color: #21A54F;
                border-right-style: solid;
                border-left-style: solid;
                border-right-width: thin;
                border-left-width: thin;
                border-right-color: #CCC;
                border-left-color: #CCC;
            }
            .selTab	{
                font-weight:bold;
                text-align:center;
                font-family: Verdana, Geneva, sans-serif;
                color: #FFFFFF;
                background-color: #276B3F;
                font-size: 12px;
            }
            #tabstyle #td {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 12px;
                color: #FFF;
            }
            #tabtable {
                width: 656px;
            }
            </STYLE>
            <SCRIPT language="javascript" type="text/javascript">
            
            //a public function that the container uses to pass in values for the labels
            function public_Labels(label1, label2, label3, label4, label5, label6, label7){
                
                t1.innerText = label1;
                t2.innerText = label2;
                t3.innerText = label3;
                t4.innerText = label4;
                t5.innerText = label5;
                t6.innerText = label6;
                t7.innerText = label7;
            }
            
            //a public function that the container uses to pass in values for the card containers
            function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
            
                t1Contents.innerHTML = contents1;
                t2Contents.innerHTML = contents2;
                t3Contents.innerHTML = contents3;
                t4Contents.innerHTML = contents4;
                t5Contents.innerHTML = contents5;
                t6Contents.innerHTML = contents6;
                t7Contents.innerHTML = contents7;
            
                init();
            }
            
            //sets the default display to tab 1
            function init(){
                tabContents.innerHTML = t1Contents.innerHTML;
            }	
            
            //this is the tab switching function
            var currentTab;
            var tabBase;
            var firstFlag = true;
            
            
            function changeTabs(event){
            
                if(firstFlag == true){
                    currentTab = t1;
                    tabBase = t1base;
                    firstFlag = false;
                }
            
                if(event.target.className == "tab"){
            
                    currentTab.className = "tab";
            
                    tabBase.style.backgroundColor = "white";
            
                    currentTab = event.target;
            
                    tabBaseID = currentTab.id + "base";
            
                    tabContentID = currentTab.id + "Contents";
            
                    tabBase = document.getElementById(tabBaseID);
            
                    tabContent = document.getElementById(tabContentID);
            
                    currentTab.className = "selTab";
                    
                    tabBase.style.backgroundColor = "";
            
                    tabContents.innerHTML = tabContent.innerHTML;
            
                }
            }
            
            </SCRIPT>
            </HEAD>
            <BODY>
            <div id="maincontent">
            <DIV STYLE="position:relative; top:0px; height:400; width:746px; left:56px; border:none thin gray" onClick="changeTabs(event)" onload="init()">
            <TABLE id="tabtable" CELLPADDING=0 CELLSPACING=0>
                <TR id="tabstyle">
                    <TD ID=t1 CLASS=selTab HEIGHT=25>TAB ONE</TD>
                    <TD ID=t2 CLASS=tab>TAB TWO</TD>
                    <TD ID=t3 CLASS=tab>TAB THREE</TD>
                    <TD ID=t4 CLASS=tab>TAB FOUR</TD>
                    <TD ID=t5 CLASS=tab>TAB FIVE</TD>
                    <TD ID=t6 CLASS=tab>TAB SIX</TD>
                    <TD ID=t7 CLASS=tab>TAB SEVEN</TD>
                </TR>
                <TR>
                    <TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
                    <TD ID=t2base STYLE="height:2; background-color:white"></TD>
                    <TD ID=t3base STYLE="height:2; background-color:white"></TD>
                    <TD ID=t4base STYLE="height:2; background-color:white"></TD>
                    <TD ID=t5base STYLE="height:2; background-color:white"></TD>
                    <TD ID=t6base STYLE="height:2; background-color:white"></TD>
                    <TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>	
                </TR>
            
            
                <TR>
                    <TD HEIGHT="*" COLSPAN=7 ID=tabContents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
            
            </TD>
            
                </TR>
            </TABLE>
            </DIV>
              <div id="TabHidden">
              <DIV CLASS=conts ID=t1Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t2Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t3Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t4Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t5Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t6Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            
              <DIV CLASS=conts ID=t7Contents>
                    content<br>
                    content<br>
                    content<br>
                    content<br>
              </DIV>
            </div>
            </DIV>
            </BODY>
            </HTML>
    The tab works perfectly fine for Chrome and IE. But doesnt work for Fire Fox. Need help
    sorry if its messy, first time using this forum
    Last edited by ralph.m; Apr 18, 2013 at 16:52. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi enomi. Welcome to the forums.

    That code actually works fine in Firefox for me (on Mac). Are you testing this on a PC?

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. i am on a pc right now

  4. #4
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its been solved. I updated firefox at the office and it works fine. Appreciate the reply and the welcome ralph. cheers

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    No probs. Glad it's sorted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •