SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry DHTML Tab-Based Menu

    I'm working on a page with a tab based menu. The menu has root tabs, and it also has sub tabs. The problem I'm currently encountering is how to determine whether or not a "root tab" is already selected and if so deselecting it. It works fine if I'm switching between two root tabs, but once I try switching between a sub tab and a root tab, it messes up. Here is the code I have so far, sorry if it's a little sloppy, but I'm still in the development process:

    //this is the tab switching function
    var currentTab, prevTab, tabname, lastRootTab, firstFlag = true;

    function changeTabs(){

    if(window.event.srcElement.className == "tab"){


    prevTab = currentTab;
    currentTab = window.event.srcElement;

    if(!isSubTab(prevTab)){
    lastRootTab = currentTab;
    }
    if(isSelected(lastRootTab) && !isSubTab(currentTab) && isSubTab(prevTab))
    DeselectTab(lastRootTab);
    tabBaseID = currentTab.id + "base";
    DeselectTab(prevTab);
    SelectTab(currentTab);
    tabname = "tab";
    if(isSubTab(currentTab)){
    tabname = "sub" + tabname;
    }
    ContentsTab = document.getElementById(tabname + "Contents");
    ContentsTab.innerHTML = document.getElementById(currentTab.id + "Contents").innerHTML;
    }
    }

    function DeselectTab(tab){
    tab.className = "tab";
    }

    function SelectTab(tab){
    tab.className = "selTab";
    }

    function isSelected(tab){
    if(tab.className == "selTab") return true;
    return false;
    }

    function isSubTab(tab){
    if(tab.id.substr(0,3)=="sub") return true;
    return false;
    }

    function init(firstTab){
    firstTab.className = "selTab";
    tabContents.innerHTML = document.getElementById(firstTab.id + "Contents").innerHTML;
    currentTab = firstTab;
    }

    This is called from the onload event of the body tag. It checks the calling object, and if it is of the tab class then it runs the rest of the script, causing the tabs to change. Can anyone see what I'm doing wrong?

    My other question is, how are parameters passed into functions? Is it by address or just a copy of the value? If it is by value, then is there a way to pass by reference in JavaScript?

    Thank you,
    Joe Fiorini
    -Joe

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm SURE i can help you on this, but i just can't digest that and visualise it that easily.
    Do you have a url we can see please?

    Thanks


    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I got it working! Damn, I'm good. Hehe. I'll post a sample of what I did if you want to see the code. Check it out at Tab based menu with sub-tabs. Thanks for offering help, though!

    Later all,
    Joe
    -Joe

  4. #4
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid that doesn't work at all in Mozilla (or NS 6+ at a guess).

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's okay. I'm doing this for work, and our plant only uses IE 5.0+. Hopefully it'll work on IE 5.0. I'm going to test that as soon as I find someone who runs it. I do know that it doesn't work in 4.0, but fortuntely, the only computer that uses 4.0 is the old, miserable excuse for a server that the site is on.
    It's kind of nice not having to worry about designing for total compatibility!

    Later,
    Joe
    -Joe


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
  •