Without this part it does not work period, with it it's okay on IE but not firefox
// Declare a new instance of the TAB class
var Example = new TAB(tabsampleD);
var Example = new TAB(tabsampleE);
var Example = new TAB(tabsampleF);
// Set IDs needed to create tab structure.
Example.name = "example";
Example.tabSpacerID = "example_spacer";
Example.tabOptionsID = "example_options";
Example.tabRootID = "example_tabs";
Odd, I tried it without that with no success yesterday, but it works now... must've been a typo in something but thanks anyways! One more question though... how would i go about making the pink outline here go all the way around... there's a gray section at the middle top from tab #2 to tab #5...
Something's goofy with the line breaks. You'll need to do some source code formatting. My Text editor uses Unix line breaks, and pasting that code into your text editor might not work if it uses Windows line breaks. Which text editor are you using? I highly recommend HTML Kit.
The reason it's not working on the server is because all the HTML source code is on one line. There are inline javascript comments, like "// my comment", and when that happens, any javascript on that line is commented out. That's why it's not working.
Interesting, the file in the editor isn't like that. I'm using 1st page 2006...but i use to use the 2000 version without problem so maybe I'll try that, if not I'll check out the html kit one.
These tabs are so wonderful. Thank you for sharing this code. I have a question. I want to have one set of tabs on a page set to one width (and didn't have a problem doing that) and another set of tabs on another page with a different width (and didn't have any problem doing that). My problem is that I would like to have the css for both sets of tabs on one css file, but I can't seem to figure out how to do this. I tried adding a 2 to the end of all the divs, etc. but that just seems to be making a mess. Any ideas?
Can you post the HTML and CSS you're using? It's usually just a simple matter of using different CSS selectors. Let's say I've got two tab boxes on one page. The DIV tags with the class="tabWrapper" in them both have Ids. One Id is "nav" and the other Id is "options". I could use the following CSS to set the widths for each tab box:
Code:
#nav .tabbedNavOn li {
width: 100px;
}
#options .tabbedNavOn li {
width: 200px;
}
Now the tab box whose Id is "nav" will have tabs 100 pixels wide, and the tab box whose Id is "options" will have tabs that are 200 pixels wide.
If this doesn't help out, please post your HTML and CSS.
Thanks so much for responding. I tried that, but I am still not having any luck. Here is my html & css for the smaller tabbed box, and the larger tabbed box:
<code>
<div class="tabWrapper" id="example">
<ul class="tabbedNavOff" id="example_tabs">
....etc.
</ul></code>
<code>
/*
* This File: TAB_styles.css
* Contains all CSS declarations to visually format AccessibleTabs. Contains
* CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
* imported via the @import method.
*
* Version - AccessibleTabs: 1.0
* By Greg Burghardt
* greg_burghardt@yahoo.com
*/
/* The UL element containing the tabs when JavaScript is enabled. */
.tabbedNavOn {
list-style-type: none;
margin: 0;
padding: 0;
}
/*************** Common styles for both .tabOff and .tabOn *****************/
.tabbedNavOn a {
display: block;
}
.tabbedNavOn a span span {
padding: .33em .75em;
}
/*************** End common styles for .tabOff and .tabOn ******************/
/* This class is a tab when it is not active. */
.tabOff {
cursor: pointer;
cursor: hand;
display: block;
}
/* Non active Tab text color when in the visited and non visited states. */
.tabOff:link,
.tabOff:visited {
color: #ccccccc;
}
/* Non active tab background color & graphic when in the visited or non
* visited states. */
.tabOff:link span,
.tabOff:visited span {
background: #eeeeee url no-repeat scroll 0 0;
}
/* Non active tab's right background graphic when the tab is in a visited or
* non visited state. */
.tabOff:link span span,
.tabOff:visited span span {
background: ##eeeeee transparent url no-repeat scroll 100% 0;
}
/* Non active tab's text color in the active, focus, an hover states. */
.tabOff:active,
.tabOff:focus,
.tabOff:hover {
color: #660000;
}
/* Non active tab's background color and left background graphic when in the
* active, focus and hover states. */
.tabOff:active span,
.tabOff:focus span,
.tabOff:hover span {
background: #000000 url no-repeat scroll 0 -500px;
}
/* Non active tab's background graphic when in the active, focus and hover
* states. */
.tabOff:active span span,
.tabOff:focus span span,
.tabOff:hover span span {
background: transparent urlno-repeat scroll 100% -500px;
}
/* This class is a tab that is switched "on" */
.tabOn {
cursor: default;
display: block;
}
/* Active tab text color when in the visited and non visited states. */
.tabOn:link,
.tabOn:visited,
.tabOn:active,
.tabOn:hover {
color:#660000;
font-weight:bolder;
background-color:#eeeeee;
}
/* Active tab background color & graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span,
.tabOn:visited span,
.tabOn:active span,
.tabOn:hover span {
background: #eeeeee url no-repeat scroll 0 -1000px;
}
/* Active tab's right background graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span span,
.tabOn:visited span span,
.tabOn:active span span,
.tabOn:hover span span {
background: transparent url no-repeat scroll 100% -1000px;
}
/* The active tab when it has the system focus. */
.tabOn:focus {
color: #660000;
background color: #eeeeee;
}
/* The active tab's BG color & graphic when it has the system focus. */
.tabOn:focus span {
background: #660000(images/Tab_Left.gif) no-repeat scroll 0 -500px;
}
/* The active Tab's right BG graphic when it has the system focus. */
.tabOn:focus span span {
background: transparent url(images/Tab_Right.gif) no-repeat scroll 100% -500px;
}
.tabbedNavOn li {
float: left;
margin-right: 1px;
}
/* Tab boxes when JavaScript is disabled. */
.tabBox {
font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
font-size: 1.25em;
}
.tabBox .tabBoxNav {
display: none;
}
/* Hide the tab boxes when they are turned off. */
.tabBoxOff {
display: none;
}
/* The tab box is switched "on" */
.tabBoxOn {
height: 210px;
background-color: #eeeeee;
margin-top: -1px;
zoom: 1;
}
/* Padding and borders around the tab content. */
.tabBoxOn .tabBoxGutter {
border: 1px solid #eeeeee;
padding: 0 12px;
}
/* The tab's bottom text links for Next and Previous */
.tabBoxOn .tabBoxNav {
background-color: #eeeeee;
display: block;
margin: 0;
padding: .33em 5px 0 5px;
}
/* The tab's bottom text links when the link is visited and non visited. */
.tabBoxOn .tabBoxNav a:link,
.tabBoxOn .tabBoxNav a:visited {
color: #000000;
text-decoration: none;
}
/* The tab's bottom text links when the link is active, hovered on, or has
* the system focus. */
.tabBoxOn .tabBoxNav a:active,
.tabBoxOn .tabBoxNav a:hover,
.tabBoxOn .tabBoxNav a:focus {
color: #660000;
text-decoration: underline;
}
/* Gap below the tab's bottom links, and the bottom of the tab box. */
.tabBoxOn .tabBoxNav .tabSpacer {
height: .33em;
}
/* Spacer DIV under the tabs when JavaScript is disabled. */
.tabSpacerOff {
display: none;
}
/* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
* fixes an IE-Win bug that sizes the height too high in certain cases. */
.tabSpacerOn {
background-color: #eeeeee;
clear: both;
font-size: 1px;
height: 1px;
overflow: hidden;
width: 450px; /* Width required by Safari and IE5-Mac */
}
/* The DIV tag that encapsulates one entire tab structure. */
.tabWrapper {
position: relative;
width:450px;
margin-left:-20px;
z-index: 1;
}
</code>
And this is the css I am linking to for my larger box. It is exactly the same, except I have adjusted the width. I would just really like to combine them both onto one css file.
<code>
/* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
* fixes an IE-Win bug that sizes the height too high in certain cases. */
.tabSpacerOn {
background-color: #eeeeee;
clear: both;
font-size: 1px;
height: 1px;
overflow: hidden;
width: 900px; /* Width required by Safari and IE5-Mac */
}
/* The DIV tag that encapsulates one entire tab structure. */
.tabWrapper {
position: relative;
width: 900px;
z-index: 1;
}</code>
Each tabWrapper must have a unique Id. All Ids in your HTML document must be unique. You can't have two HTML tags with the same Id.
Give each tabWrapper it's own Id. There are several other Ids in tags inside each tabWrapper that also must be unique. The tabWrapper is used as a prefix to the other Ids inside each tabWrapper.
It'd be easiest if you posted the full HTML and CSS. Every bit, from the opening HTML tag to the closing HTML tag, and also every bit of CSS. To make it easier to read, can you put your HTML in BB Code tags:
{html}
Your HTML code
{/html}
{code}
Your CSS code
{/code}
To get the BB Code tags above to work when writing your post, replace "}" with "]" and replace "{" with "[" when writing the BB Code tags.
Now any place in that tab box you see id="example_ needs to be changed to id="libraryTabs_. The Ids of the other things in the tab box is dependant on the Id of the main tabWrapper.
Then add this to tab_styles.css:
Code:
#libraryTabs .tabbedNavOn li {
width: 100px; /* Or whatever width you want */
}
Thank you so much for all of the help. It is greatly appreciated. When I make that change, it is making each <li></li> at the top 400px in width so they are now on top of each other, instead of side by side. I made all the html changes, and I made the change in my css. I think I am missing something.....
{css}
/*---end sub guide info}------- */
/*this is for the tab box on the home page */
/*
* This File: TAB_styles.css
* Contains all CSS declarations to visually format AccessibleTabs. Contains
* CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
* imported via the @import method.
*
* Version - AccessibleTabs: 1.0
* By Greg Burghardt
* greg_burghardt@yahoo.com
*/
/* The UL element containing the tabs when JavaScript is enabled. */
.tabbedNavOn a span span {
padding: .33em .75em;
}
/*************** End common styles for .tabOff and .tabOn ******************/
/* This class is a tab when it is not active. */
.tabOff {
cursor: pointer;
cursor: hand;
display: block;
}
/* Non active Tab text color when in the visited and non visited states. */
.tabOff:link,
.tabOff:visited {
color: #ccccccc;
}
/* Non active tab background color & graphic when in the visited or non
* visited states. */
.tabOff:link span,
.tabOff:visited span {
background: #eeeeee url no-repeat scroll 0 0;
}
/* Non active tab's right background graphic when the tab is in a visited or
* non visited state. */
.tabOff:link span span,
.tabOff:visited span span {
background: ##eeeeee transparent url no-repeat scroll 100% 0;
}
/* Non active tab's text color in the active, focus, an hover states. */
.tabOff:active,
.tabOff:focus,
.tabOff:hover {
color: #660000;
}
/* Non active tab's background color and left background graphic when in the
* active, focus and hover states. */
.tabOff:active span,
.tabOff:focus span,
.tabOff:hover span {
background: #000000 url no-repeat scroll 0 -500px;
}
/* Non active tab's background graphic when in the active, focus and hover
* states. */
.tabOff:active span span,
.tabOff:focus span span,
.tabOff:hover span span {
background: transparent urlno-repeat scroll 100% -500px;
}
/* This class is a tab that is switched "on" */
.tabOn {
cursor: default;
display: block;
}
/* Active tab text color when in the visited and non visited states. */
.tabOn:link,
.tabOn:visited,
.tabOn:active,
.tabOn:hover {
color:#660000;
font-weight:bolder;
background-color:#eeeeee;
}
/* Active tab background color & graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span,
.tabOn:visited span,
.tabOn:active span,
.tabOn:hover span {
background: #eeeeee url no-repeat scroll 0 -1000px;
}
/* Active tab's right background graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span span,
.tabOn:visited span span,
.tabOn:active span span,
.tabOn:hover span span {
background: transparent url no-repeat scroll 100% -1000px;
}
/* The active tab when it has the system focus. */
.tabOn:focus {
color: #660000;
background color: #eeeeee;
}
/* The active tab's BG color & graphic when it has the system focus. */
.tabOn:focus span {
background: #660000(images/Tab_Left.gif) no-repeat scroll 0 -500px;
}
/* The active Tab's right BG graphic when it has the system focus. */
.tabOn:focus span span {
background: transparent url(images/Tab_Right.gif) no-repeat scroll 100% -500px;
}
/* Tab boxes when JavaScript is disabled. */
.tabBox {
font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
font-size: 1.25em;
}
.tabBox .tabBoxNav {
display: none;
}
/* Hide the tab boxes when they are turned off. */
.tabBoxOff {
display: none;
}
/* The tab box is switched "on" */
.tabBoxOn {
height: 210px;
background-color: #eeeeee;
margin-top: -1px;
zoom: 1;
}
/* Padding and borders around the tab content. */
.tabBoxOn .tabBoxGutter {
border: 1px solid #eeeeee;
padding: 0 12px;
}
/* The tab's bottom text links for Next and Previous */
.tabBoxOn .tabBoxNav {
background-color: #eeeeee;
display: block;
margin: 0;
padding: .33em 5px 0 5px;
}
/* The tab's bottom text links when the link is visited and non visited. */
.tabBoxOn .tabBoxNav a:link,
.tabBoxOn .tabBoxNav a:visited {
color: #000000;
text-decoration: none;
}
/* The tab's bottom text links when the link is active, hovered on, or has
* the system focus. */
.tabBoxOn .tabBoxNav a:active,
.tabBoxOn .tabBoxNav a:hover,
.tabBoxOn .tabBoxNav a:focus {
color: #660000;
text-decoration: underline;
}
/* Gap below the tab's bottom links, and the bottom of the tab box. */
.tabBoxOn .tabBoxNav .tabSpacer {
height: .33em;
}
/* Spacer DIV under the tabs when JavaScript is disabled. */
.tabSpacerOff {
display: none;
}
/* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
* fixes an IE-Win bug that sizes the height too high in certain cases. */
.tabSpacerOn {
background-color: #eeeeee;
clear: both;
font-size: 1px;
height: 1px;
overflow: hidden;
width: 400px; /* Width required by Safari and IE5-Mac */
}
/* The DIV tag that encapsulates one entire tab structure. */
.tabWrapper {
position: relative;
width:400px;
margin-left:10px;
z-index: 1;
}
Help!
Reply With Quote
... the url is 
Bookmarks