Gsx_Eclipse
asked on
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!
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!
ASKER
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!
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!
Is it necessary for you to use Javascript? What you want can be accomplished using only CSS.
ASKER
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!
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!
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.
ASKER
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!
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!
ASKER
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.
4. How can I make the tabs flush with one another? As you can see, right now a 2 px border is created.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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!
ASKER
btw. the updated file is still here: http://www.geocities.com/johnblz187/example.html
ASKER
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?
ASKER
The solution was described here, for your reference: http://www.barelyfitz.com/blog/archives/category/tabber/
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.
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.
Specifically, the tabbed version: http://www.dezinerfolio.com/wp-content/uploads/accordemo/05.html