Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

javascript tabbed interface with css

Hi there,

I have been working on a javascript tabbed interface and followed a thread found <a href=" http://127.0.0.1:4664/cache?event_id=16349&schema_id=2&q=tabs&s=4155254305"> here on experts exchange</a> to get me most of the way. I have extended the script with css and I have things just about where I won't them. However, there is just one thing that I  am stuck on, I'd like to have the/any selected tab be the same color/style as the/any rollover tab.

Here's where I am so far: http://www.gooners.com/tableTabs.html -- yes, this is a quick demo and there are html flaws, but if viewed in firefox it's easy to see where I am going.

Here's the piece of css that creates the rollovers:

            ul.tabNav {width: 100%; height: 21px; margin: 0; padding: 0; list-style-type: none;}
            ul.tabNav li {float: left; height: 21px;}
                  ul.tabNav li a {display: block; width: 123px; height: 21px;}
                        ul.tabNav li a span {display: none;}
            
                  ul.tabNav li.spec a { background: #282E3A url(../img/specNav.gif) no-repeat;}
                  ul.tabNav li.view a { background: #282E3A url(../img/viewNav.gif) no-repeat;}
                  ul.tabNav li.director a { background: #282E3A url(../img/directorNav.gif) no-repeat;}
                  ul.tabNav li.misc a { background: #282E3A url(../img/miscNav.gif) no-repeat;}
                        
                        ul.tabNav li a.activeNav, ul.tabNav li a:hover {background-position: 0 -22px ! important;}


Any help would be appreciated even if requires tackling the issue from a different position.

Cheers,
paul.
0
gooner_paul
Asked:
gooner_paul
  • 7
  • 5
  • 5
2 Solutions
 
TimYatesCommented:
Can't you do similar to this:

                              <li class="spec"><a href="#" onClick="javascript: displayTable(1)" id="tab1" class="active"><span>Specifications</span></a></li>
                              <li class="view"><a href="#" onClick="javascript: displayTable(2)" id="tab2" class="active"><span>View Films</span></a></li>
                              <li class="director"><a href="#" onClick="javascript: displayTable(3)" id="tab3" class="active"><span>Director's Notes</span></a></li>
                              <li class="misc"><a href="#" onClick="javascript: displayTable(4)" id="tab4" class="active"><span>Miscellaneous</span></a></li>

Then, in your javascript:

function displayTable(ind)
{
     hideAll();
     obj = document.getElementById("table" + ind);
     obj.style.visibility="visible";
     for( i = 0 ; i < numberOfTables ; i++ )
     {
        obj = document.getElementById( "tab" + i ) ;
        if( i == ind )
        {
            obj.style.color = '#D4E7EB' ;
            obj.style.background = '#505765' ;
        }
        else
        {
            obj.style.color = '' ;
            obj.style.background = '' ;
        }
     }
}

maybe?

Not sure...
0
 
gooner_paulAuthor Commented:
Thanks Tim,

I think I see where you are going and it is the right approach; however, it didn't work as is which might be due to the obj.style.color/background part of the javascript -- I'm not sure though.

The tab images are one image which include the "On" and "Off" version using a negative height adjustment to display the "On" version. See http://gooners.com/viewNav.gif

Cheers,
paul.
0
 
gooner_paulAuthor Commented:
Oh, Tim,

is there a onMouseOut (after the onClick) event I could try using the class="active"?

:-P
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
TimYatesCommented:
onMouseExit should work...
0
 
gooner_paulAuthor Commented:
how do I combine the class and event?
0
 
TimYatesCommented:
You can use javascript to change the class...

Try:

    onmouseout="this.className = 'whatever'"

you may be able to add an "active" classname to the current class in my click code above...

The hard bit, is setting the class back to normal again... :-/

Hmmm..

Tim

0
 
gooner_paulAuthor Commented:
so Tim,

Are we looking at these as two possible solutions: solutions? Solution  (1.)  id="tab1" class="active" and the additional javascript and solution (2.) as the onMouseExit event, or are they combined?

If they are in fact different solutions I'm sorry that I derailed you from your first line of thought.

Perhaps you need more info from me to understand why the first version didn't work for me. I've put three versions here:

Version (1.) before the question was asked: http://www.gooners.com/tableTabs.html
Version (2.) after the question was asked following your first suggestion: http://www.gooners.com/v2_tableTabs.html
Version (3.) following your second suggestion: http://www.gooners.com/v3_tableTabs.html

Cheers in advance,
paul.
0
 
GrandSchtroumpfCommented:
Your layout does not support any change in text-size.
To solve that by following these 2 points:
You should not use absolute positioning for layout.
You should use the CSS "display: none" and "display: block" to hide/show the different tabs.

I'll post back soon for more details.
0
 
gooner_paulAuthor Commented:
I noticed, GrandSchtroumpf,  that you are listed as a CSS guru so I wouldn't want to dispute what you are stating. However, I am not sure what you are stating so let me see...

...are you saying change the absolute positioning for the table beneath where the tabs are located, or the position of the tab images themselves?

Part II, the "CSS "display: none" and "display: block" to hide/show the different tabs" how would theis work for the type of navigation in question?

Sorry, I'm a little confused, I'm just trying to adjust my position to get a better view, but I'm not sure what I'm looking at or for.

Cheers,
paul.
0
 
GrandSchtroumpfCommented:
<html>
<head>
<title></title>
<script>

var currentTable = null;
var currentLink = null;

function displayTable(ind) {

  if (currentTable != null) {
    currentTable.className = "HiddenTabDiv";
    currentLink.className  = "";
  }
  currentTable = document.getElementById("tab" + ind);
  currentLink  = document.getElementById("link" + ind);
  currentTable.className = "VisibleTabDiv";
  currentLink.className  = "Selected";

}

function tab_init() {
  var selected = 1;
  var search = document.location.search;
  if (search.length == 2) {
    search = search.substring(1,2);
    if (0 < search && search < 5) {
      selected = search;
    }
  }
  displayTable(selected);
}

</script>
<style type="text/css">

body {
  background: black;
  color: beige;
}

div.TabNav {
  margin-top: 2em;
  height: 1px;
}

div.TabNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div.TabNav ul li {
  float: left;
  padding: 0;
  width: 130px;
}

div.TabNav ul li a {
  display: block;
  width: 100%;
  color: lightblue;
  background-color: dimgray;
  border: 1px solid lightblue;
  text-align: center;
  text-decoration: none;
}

div.TabNav ul li a:hover,
div.TabNav ul li a.Selected {
  color: dimgray;
  background-color: lightblue;
}

div.HiddenTabDiv {
  display: none;
}

div.VisibleTabDiv {
  clear: left;
  display: block;
}

div.VisibleTabDiv Table {
  width: 540px;
  border: 1px solid red;
}

</style>
</head>
<body onload='tab_init();'>


  <div class="TabNav">
    <ul>
      <li class="spec"    ><a id="link1" href="#" onClick="displayTable(1)">Specifications</a></li>
      <li class="view"    ><a id="link2" href="#" onClick="displayTable(2)">View Films</a></li>
      <li class="director"><a id="link3" href="#" onClick="displayTable(3)">Director's Notes</a></li>
      <li class="misc"    ><a id="link4" href="#" onClick="displayTable(4)">Miscellaneous</a></li>
    </ul>
  </div>


  <!--Start Table #1 -->

  <div class="HiddenTabDiv" id="tab1">
    <table cellspacing="0">
      <tr><td>
        Table 1
      </td></tr>
    </table>
  </div>


  <!--Start Table #2 -->

  <div class="HiddenTabDiv" id="tab2">
    <table cellspacing="0">
      <tr><td>
        Table 2
      </td></tr>
    </table>
  </div>


  <!--Start Table #3 -->

  <div class="HiddenTabDiv" id="tab3">
    <table cellspacing="0">
      <tr><td>
        Table 3
      </td></tr>
    </table>
  </div>


  <!--Start Table #4 -->

  <div class="HiddenTabDiv" id="tab4">
    <table cellspacing="0">
      <tr><td>
        Table 4
      </td></tr>
    </table>
  </div>


</body>
</html>
0
 
GrandSchtroumpfCommented:
I posted the code in a separate post, it makes it a lot easier.
I did not include all the content of your tables, and i did not reporduce the exact style you used in your current page.  I did that so the code will be easier to read and understand.
I also added a little javascript function to be able to access a specific tab by using the url's search (e.g. "mypage.html?3" shows the tab 3 of your page)... just did that for fun, but it can be very usefull.

Using "display: none" just does not display the element at all (as if the html was not in the page), while using "visibility" just hides the element, but the element still takes some space.
If you use "visibility", then you are forced to use absolute positioning to stack your different divs on top of eachother.  But you don't have that problem if you use "display: none", so you can use the normal document flow wich is always better.
0
 
GrandSchtroumpfCommented:
Oh, i almost forgot... i also got rid of the javascript onmouseover/onmouseout and replaced it with a css ":hover".  That's much nicer code.
0
 
gooner_paulAuthor Commented:
Thanks for you thorough response.

Fantastic!!

I'm not an exclamation point kind of guy, and mutiple make me cringe, but in this case...
0
 
GrandSchtroumpfCommented:
Well... thanks for the exclamation points.
I'm always happy to contribute to making code simple and clean.
<:°)

...but i noticed a little problem with the page:
When you disable javascript, then you don't see any content...
The beter behaviour is to show all content when javascript is disabled.
So, in the html, all divs should have class="VisibleTabDiv"
And you should change the class to hidden in the tab_init() method:

function tab_init() {

  for (var tabidx=1; tabidx<5; tabidx++) {
    curr = document.getElementById("tab" + tabidx);
    curr.className = "HiddenTabDiv";
  }
  var selected = 1;
  var search = document.location.search;
  if (search.length == 2) {
    search = search.substring(1,2);
    if (0 < search && search < 5) {
      selected = search;
    }
  }
  displayTable(selected);

}
0
 
TimYatesCommented:
Oooh, I was close ;-)

Thank you for the split :-D

Good luck with it all!  It looks really nice :-)

Tim
0
 
gooner_paulAuthor Commented:
Thanks Tim. I only wish I could have given out more points :-(  , as you too were very thorough in your comments.

Cheers,
paul.
0
 
TimYatesCommented:
No worries :-)

Just glad you got a solution :-)

Good luck!

Tim
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now