• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1351
  • Last Modified:

Javascript/CSS Tab

Hello,

I am looking for a nice Javascript/CSS Tab solution.  When the user selects a tab I would like it to have similiar functionality to that of BH Photo Video: http://www.bhphotovideo.com/c/product/498713-REG/Acer_ET_F16WP_B02_AL2416Wbsd_24_Widescreen_LCD.html  (see the Features, Specifications, and Items Included tabs).

Over the past several days I have look everywhere for solutions.  I like the simpliciy of Tabtastic: http://phrogz.net/JS/Tabtastic/index.html however I would prefer not to have all the Javascript libraries.  I like the way it handles bookmarks, but do not like what happens when longer scrollable text is present (notice what happens when you click the Notes tab, then back to the Overview tab).  

I am using the CSS Tabs Unraveled solution already for the navigation: http://unraveled.com/projects/html/css_tabs/  However, it does not have the Javascript functionality like Tabtastic.  If possible I would like to build off of CSS Tabs Unraveled, but I am a beginner as far as Javascript and make it accessible is important.  

The solution that I am looking for needs to be cross browser compatible and CSS based for styling.  My goal is to have something like BH Photo Video with the raised tab selected.  The only difference with mine is that it will have a fixed height.  Can someone please point me in the right direction.

Thanks!
0
Gsx_Eclipse
Asked:
Gsx_Eclipse
  • 8
  • 5
1 Solution
 
fuzzboxerCommented:
Perhaps you might like this from DezinerFolio:  http://www.dezinerfolio.com/category/javascript/page/2/

Specifically, the tabbed version:  http://www.dezinerfolio.com/wp-content/uploads/accordemo/05.html
0
 
Gsx_EclipseAuthor Commented:
fuzzboxer,

That is a pretty nifty solution, however, it is not quite what I am looking for.  Does anyone else have some addtional examples that might interest me?

Thanks!
0
 
fuzzboxerCommented:
Is it necessary for you to use Javascript?  What you want can be accomplished using only CSS.
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.

 
Gsx_EclipseAuthor Commented:
fuzzboxer,

I have found the example that I would like to use: http://www.barelyfitz.com/projects/tabber/ 

Can you possibly create an example that looks like my mock-up, using the JavaScript tabifier from the link: http://www.geocities.com/johnblz187/tabWidget.gif  The main issue I am having is with the raised tab.  

Thanks!
0
 
fuzzboxerCommented:
Sorry, I don't have the time right now to create an example for you, but if you create one and get it close to what you want, I will look at it later and try to help with the CSS.
0
 
Gsx_EclipseAuthor Commented:
fuzzboxer,

I have made significant progess, but could use your hand in refining a bit: http://www.geocities.com/johnblz187/example.html 

Here are the issues that I am having:
1. The line under the tabs is obviously too wide.  It should match up with the container below the tabs.
2. How can I make the link color of the non-selected tabs a different value than the one selected.  Right now they are all blue.
3. How can I make each of the tabs a fixed width?  I would like them to match perfectly with the container below them.

Many thanks!
0
 
Gsx_EclipseAuthor Commented:
I forgot to add my fourth item:
4. How can I make the tabs flush with one another?  As you can see, right now a 2 px border is created.
0
 
fuzzboxerCommented:
1) You need to set a width for the "tabberlive" div.  I used "width:445px;" and that seemed to do it.
2) To have the active tab link be blue and the rest, say black, you will need to add/edit a color declaration:
    ul.tabbernav li.tabberactive a {
         color:#336699;
         }
   ul.tabbernav li a:link {example.css (line 54)
         color:#000000;
         }
3) Since they are inline elements I do not believe that you can assign a width to spread them across the div.  You will need to change them to a block level element, but it might mess with your design.
4)  It is properly adding a border based on your CSS so that is how it is supposed to look.  You will need to set the border-left, border-right, etc, to control the look of that instead of combining them in one declaration of border-width.
0
 
Gsx_EclipseAuthor Commented:
fuzzboxer,

I almost have it.  These are the issue that I am still having:

1. For some reason in IE 6 & 7 the top of the raised tab is getting cut off.  This does not happen in any other browser or platform.
2. On the raised/selected tab my background image is present.  How can I remove from the hover and regular states?
3. Check out the fourth tab.  I discovered this on accident when I tried to type in Cats & Dogs.  For some reason the ampersand (&) is getting rendered as &  If Javascript is disabled it displays normally.  Any ideas on how to alter the Javascript code?

Thanks!
0
 
Gsx_EclipseAuthor Commented:
btw. the updated file is still here: http://www.geocities.com/johnblz187/example.html
0
 
Gsx_EclipseAuthor Commented:
I was able to find a solution to part of the issue I described in #3, however, when you hover over the tab the title is still incorrect.  Any ideas?
0
 
Gsx_EclipseAuthor Commented:
The solution was described here, for your reference: http://www.barelyfitz.com/blog/archives/category/tabber/
0
 
fuzzboxerCommented:
1) This is probably a padding issue.  Play with the padding on the ul element.
2)  Remove the background image from your a:hover declarations.
3)  You don't need to add encoded characters to the title attribute.  Just make it a regular ampersand.
0

Featured Post

Industry Leaders: 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!

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