This tutorial shows how to create a Web page containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked — perfect if your page needs to hold a large amount of content. It’s also great for things such as multi-step (“wizard”-style) Web forms.
Click the link below to see a tabbed page in action:
The JavaScript and markup are coded in such a way that the page degrades gracefully in browsers that don’t support JavaScript.
In this tutorial you learn how this tabbed page is put together. You can then use the code and ideas to build your own tabbed Web pages. Let’s get started!
Creating the HTML for the tabbed page
The HTML for the tabs and content is very simple. You store each tab’s content within a div
element with a class of tabContent
and a unique id
for reference. Here’s the first of the 3 tab content div
s in the example:
<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
The tabs themselves are simply links within an unordered list:
<ul id="tabs">
<li><a href="#about">About JavaScript tabs</a></li>
<li><a href="#advantages">Advantages of tabs</a></li>
<li><a href="#usage">Using tabs</a></li>
</ul>
Give the ul
an id
of "tabs"
so that the JavaScript code can locate it. Each link within the list links to its corresponding content div
by referencing the id
of the div
("about"
, "advantages"
, or "usage"
). Since these are standard HTML links, they work fine even without JavaScript.
Creating the CSS
Some CSS is needed in order to make the tabs look like tabs (and make them nice to look at):
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
These CSS rules work as follows:
body
- This sets a nice font and font size for the page.
ul#tabs
- Styles the tabs list, turning off bullet points.
ul#tabs li
- The
display: inline;
property makes the tabs appear across the page. ul#tabs li a
- Styles the links within the list. Each link is given a border around every side except the bottom, so that the active tab blends nicely with its content
div
below. ul#tabs li a:hover
- Highlights a tab when hovered over with the mouse.
ul#tabs li a.selected
- Styles a selected tab by giving it a lighter background and bold text, and making it bigger. Notice that the bottom padding is increased to 0.38em to make sure that the tab blends with the content
div
. div.tabContent
- Sets a style for the tab content areas so that they match the tab design.
div.tabContent.hide
- Used to hide unselected tabs.
Creating the JavaScript code
Finally, of course, you need JavaScript to make the tabs work. Here’s what the JavaScript needs to do:
- Attach a
showTab()
onclick
event handler to each of the tab links. - Hide all content
div
s except the first, so that only the leftmost tab’s content is visible when the page loads. - When a tab is clicked,
showTab()
displays the current tab content, and hides all other tab contentdiv
s. It also highlights the clicked tab and dims the other tabs.
The JavaScript kicks off by creating two arrays to hold the tab link elements and the content div
s:
var tabLinks = new Array();
var contentDivs = new Array();
Four functions control the tabs:
init()
sets up the tabs.showTab()
displays a clicked tab’s content and highlights the tab.getFirstChildWithTagName()
is a helper function that retrieves the first child of a given element that has a given tag name.getHash()
is another short helper function that takes a URL and returns the part of the URL that appears after the hash (#) symbol.
Here’s how these functions work.
The init()
function
The first, and most complex, function is init()
. It’s called when the page loads, thanks to the body
element’s onload
event:
<body onload="init()">
Here’s the function itself:
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
This function does 3 things:
- It loops through all the
li
elements in thetabs
unordered list. For eachli
element, it calls thegetFirstChildWithTagName()
helper function to retrieve thea
link element inside. Then it calls thegetHash()
helper function to extract the part of the link’s URL after the hash; this is the ID of the corresponding contentdiv
. The link element is then stored by ID in thetabLinks
array, and the contentdiv
is stored by ID in thecontentDivs
array. - It assigns an
onclick
event handler function calledshowTab()
to each tab link, and highlights the first tab by setting its CSS class to'selected'
. - It hides all content
div
s except the first by setting eachdiv
‘s CSS class to'tabContent hide'
.
So that init()
runs when the page loads, make sure you register it as the body
element’s onload
event handler:
<body onload="init()">
The showTab()
function
showTab()
is called whenever a tab link is clicked. It highlights the selected tab and shows the associated content div
. It also dims all other tabs and hides all other content div
s:
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
The function extracts the selected ID from the clicked link’s href
attribute and stores it in selectedId
. It then loops through all the IDs. For the selected ID it highlights the corresponding tab and shows the content div
; for all other IDs it dims the tab and hides the content div
. It does all this by setting CSS classes on the tab links and content div
s.
Finally the function returns false
to prevent the browser from following the clicked link and adding the link to the browser history.
The getFirstChildWithTagName()
function
This helper function returns the first child of a specified element that matches a specified tag name. init()
calls this function to retrieve the a
(link) element inside each list item in the tabs
list.
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
The function loops through the child nodes of element
until it finds a node that matches tagName
. It then returns the node.
The getHash()
function
The getHash()
helper function returns the portion of a URL after any hash symbol. Used by init()
and showTab()
to extract the content div
ID referenced in a tab link.
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
Putting it together
That’s all there is to creating JavaScript-enabled tabs! Take another look at the demo again, and view the page source to see how the HTML, CSS and JavaScript code appear in the page:
- The CSS and JavaScript go inside the page’s
head
element. (You can move these into separate.css
and.js
files and link to them, if you prefer.) - The page’s
body
element contains theonload
event handler to trigger theinit()
function. - The
tabs
ul
element contains the tab links. - Each tab’s content is stored in a
div
with a class oftabContent
and a uniqueid
(referenced in the corresponding tab link).
Feel free to use this code in your own Web pages. Happy tabbing!
shochberg says
Thanks for the terrific script. Very helpful!
For some reason, I can’t make the border disappear under the active tab. Seems like the border from the content part of the tab is there no matter what I do to the tab itself. Here’s my css – any obvious stupid things I’m doing (or at least obvious to someone other than me??)
matt says
Hi shochberg, and welcome!
It’s all down to using very precise padding and positioning on the tabs so that the active tab obscures the border of the content div, so it’s easy to mess up the CSS. The best bet is to go back to the original CSS, then modify the colours etc as required to meet your needs.
Try this CSS – I think it’ll give you the look you need:
Hope that helps!
Matt
shochberg says
Thanks. I’ll try it. This is really a fun script to learn some of this stuff with.
S
shochberg says
BTW, I stumbled onto the hint under Slow Tab Load while looking for a way to have 2 onload commands on the same page. This hint makes a HUGE difference in the look of the page when it loads that you might consider adding it into the original article. It always really looks sloppy when a page comes up and then everything jumps around for a while, and that hint not only allowed me to keep my existing onload script in place, it makes the menu look as planned immediately.
Again, thanks.
S
matt says
Yes, I keep meaning to add that hint (http://www.elated.com/forums/topic/3316/) to the article – it’s on my to-do list. 🙂
Anyway, glad you like the script. If you have any other questions on it feel free to ask.
Cheers,
Matt
mashdot says
Matt
Many thanks for the script.
I have one question though, is there a way to call the tab from a URL?
ie. domain.com/page.html#about
Would open the “about” tab?
I thought the anchor links would automatically open the tab when called but they don’t.
chrishirst says
Use
document.location.hash to get the document fragment name from the URL, then use that to open the tab.
mashdot says
Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript, which I need to sort out.
I see
would this have to be modified?
My JS knowledge is zero and it has only been recently that I have found the need for it on a particular project, mainly IE css hacks. I have stuck with only CSS till now.
If someone can help me out with this function I’ll buy them a beer.
For interest sake here is a screenshot of my tabs. Can send the CSS and tab images if anyone wants them. But the site will be up soon with commented code.
http://toshine.net/tabscreenshot.png
chrishirst says
“Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript”
Then why make it difficult??
document.location.hash WILL return #about from the example URI, with no need for any “indexOf” methods, or any other string slicing/manipulation.
matt says
Bit of a misunderstanding here. That function is in the original script, and is used to extract the hash value from a link that has been clicked in the page (document.location.hash can’t be used in that context, since it only extracts the hash from the main document URL).
@mashdot – try adding this at the end of init():
Then modify the first 2 lines of showTab() as follows:
That should work I think…
[Edited by matt on 16-Sep-09 10:40]
mashdot says
Matt, thanks for your time.
Unfortunately it does not appear to have worked, unless I have made the amendments to script incorrectly.
http://toshine.net/tabscode.html
matt says
@mashdot: The code works for me. What’s the URL of your tabs page?
mashdot says
Matt,
http://toshine.net/tabs/index.html
Using original CSS and new amended script. Not quite sure where I have gone wrong with the amendments?
e.g. http://toshine.net/tabs/#dolor does not work.
matt says
http://toshine.net/tabs/#dolor works on my browser (Firefox 3.5.3 Mac).
Works on Safari too.
Note that you have to visit the URL via a link, or copy/paste the URL into a new tab. If you just add the #dolor onto the existing page URL and press Return then the browser doesn’t bother to reload the page. (If you then manually reload the page then it should work too.) You need to do the page (re)load in order to trigger the JS.
mashdot says
Yup, you are right. Sorry I should have checked that.
Also works in Conkeror (http://www.conkeror.org) which many JavaScript affectionados may be interested in. I am an Emacs fan and use it for the keybindings.
Many thanks for your help with this, I will be adding Elated.com to my “kudos” links.
matt says
Happy to help – and thanks for the offer of a link. 🙂
Conkeror looks interesting, I’m checking it out now!
Cheers,
Matt
shellebelle says
This is a great tab solution!
However, I’m working on a web page that requires multiple sets of tabbed navigation on it and am having some difficulty. Essentially, I have a product page and I’d like to organize each product’s About, Data, and More Info into tabs. Only the first product’s tabs are working, all the others degrade.
I suspect that changing the CSS IDs to classes is part of the solution, but I’m woefully helpless at knowing where I would need to modify the JS to call on classes. Can someone point me at what to look for in the code?
Thanks 🙂
shochberg says
Take a look at my site at savepostage.com and see if that looks like what you are trying to accomplish. Maybe my code will help, which I’d be glad to send you. But what specific problems are you having?
S
chrishirst says
And take a look at my code on http://www.modtalk.co.uk/article/c-and-s-design/dhtml-tabs/
(To copy the code use the “Click to switch code view” link)
demo is at -> http://www.modtalk.co.uk/_site/code/javascript/show-hide/
jdagraf says
Hi.
I used the script and works perfectly on firefox but when I open the page on IE 7 it doesn’t show the content of any tab unless I click on the tab menu. How can I fix it???
matt says
Hi Kahl,
Welcome to Elated!
Hmm, that’s strange. The example at http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html works OK for me in IE7.
Can you please post the URL of your tabs page, and I’ll take a look?
Cheers,
Matt
jdagraf says
http://localhost/si22/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13
Thank you for the help
matt says
Hi Kahl,
That address is on your PC (which of course I can’t view!). You’ll need to upload the page to the web somewhere so I can see it.
Or, you can “view source” in your browser, then copy & paste the code into your reply to this topic.
Cheers,
Matt
jdagraf says
Ups I had both open and copy-pasted the wrong one
http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13
That’s the one
matt says
Hey Kahl,
I can’t see any tabs on that page. Did you mean to post a different page?
Cheers,
Matt
jdagraf says
No, that’s the address.
http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13
There goes again.
matt says
Hey Kahl,
Ah, I couldn’t see the correct page because the forum sofware was inserting that ‘;’ after the ‘&’ in your URL. (I keep meaning to fix that bug!)
Anyway, the reason your first tab isn’t displaying in your page is complex, and is to do with you using mootools. Basically mootools seems to be inserting various methods into the tab content div objects. All other browsers insert these at the end of the array, but IE7 for some reason inserts these at the beginning. This means that your “caracteristicas” div is no longer the first div in the list, which breaks the init() function.
The workaround is to explicitly test for your “caracteristicas” div, rather than relying on it being the first array element. Change:
to:
BTW I recommend resaving your ‘equipos.png’ image as a jpeg. Currently it’s 352KB. If you use jpeg you should be able to get it down to around 50KB.
Cheers,
Matt
jdagraf says
Done.
Now works perfectly.
Your right about the image, I used it as the designer gave it to me without checking that.
Thanks a lot for the script, your help and pointers.
matt says
Great stuff Kahl. If you need any more help, please feel free to ask.
Cheers,
Matt
desibird says
It took me 5 days to figure out the best/light/simple/perfect tabbed version.. and there you go!! I landed at the best place.
Firstly, thanks alot ELATED, for your help in tabbed JS menu system.
I was looking at the code and revolving in circles… on how to not ( have the default tab / content ) display until unless clicked on the tab.
+
Can it be possible to add (scrollTo() method) to the tabs simultaneously?? as, they have “#” anchor, it’d be a great help!!
cheers
venkat
desibird says
I’ve managed to hide the default content now..!! the code to be tweaked in is:
bolded part is been tweaked..!!
Now, only task left is, when clicked on tabs, a simultaneous scroll to the tabContent part!! Cuz, my links are exactly at the middle of the page!! (big header… I know!!!)
wish me luck and lend me a snippet of code if someone can!!
Cheers…
Venkat
matt says
Hi Venkat, and welcome!
With the scrollTo() thing, it’s a bit hard to see what you mean without actually seeing your page. Surely your tab content should be directly below the tabs? Can you upload your page and post the URL?
Anyway, you can use window.scrollTo() to scroll the browser window to a specific (x,y) point in the page:
https://developer.mozilla.org/En/DOM/Window.scrollTo
You can use code like this to get the top-left position of a particular element object:
(See http://www.elated.com/forums/topic/4748/ for usage)
Failing that, you could use the jQuery ScrollTo plugin to scroll to a specific element: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Hope that helps! Let us know if you need any more info.
Cheers,
Matt
desibird says
Heyy Matt, thanks for getting back! Am sorry for a vague doubt without an interpretation/example!
Links below!!
http://www.ead09.org.uk/tabs.htm
In this above url/link, i’ve created a header and tabs… am looking forward to add scrollTo effect to those tabs.
when clicked on the tabs, am even trying to achieve a scroll down effect… revealing the tabContent divs + mentioning the viewers that content is in the bottom!!
a good live example: http://www.madebysofa.com
Thats what am trying to achieve… i mean, the scrolldown effect (succeeded in hiding the content though)!!
cheers
Venkat
matt says
Hi Venkat,
I understand what you want to do now!
Here’s a complete example based on your original page:
It uses jQuery and the ScrollTo plugin to scroll to the tab content container whenever a tab is clicked on.
You can download jquery.scrollTo-1.4.2-min.js from:
http://code.google.com/p/flesler-plugins/downloads/list
As you can see, it’s only a few extra lines of JS and a small change to the markup. 🙂
Does that help?
Cheers,
Matt
desibird says
Matt…!! Thanks alot!! that worked like a charm!
your help made me stuck up with elated.com!!!
keep watching for back-links from sites designed by me.. + will contribute my knowledge to people in this forums!!
Am good at web hosting, networking, web development (php, cms’s- joomla, wordpress) and alot of css!!
Thanks for your help again and lets keep in touch!!
🙂
Venkat
matt says
Hi Venkat,
Great stuff – I’m glad it solved your problem. jQuery makes things like that really easy to do.
We’d really appreciate back-links, as well as help on the forums – thanks! 🙂 I know next to nothing about CMSs like Joomla. Your contributions would be really useful.
Cheers!
Matt
desibird says
matt.. I’d be very happy to grab the chance in solving some doubts to the extent of my knowledge.. Will start contributions within forms too!!
Nice time..
venkat
desibird says
hi matt, hope things are well. is it possible to add ajax function to one of the tabs?? I mean, for “usage” tab, i’d like to give some ajax property, so that i can pull blog contents into this div!! my blog at the moment is residing in the subfolder (blog/)..
If its possible.. please help!
Cheers
PS:, the code for my index.html file can be found in the above(latest) comment by matt..
[Edited by desibird on 09-Dec-09 11:32]
matt says
Hi desibird,
It sounds like an iframe might do the trick:
Does that work?
Matt
desibird says
<iframe> tags are not a good help matt!!
i’ve also posted a new topic: http://www.elated.com/forums/topic/4832/ which pulls newest wordpress post and places in the necessary div!!
but am looking to drag whole blog into two divs..
where, content div with the content and the side-bar div with paginated archives!!
managed to pull them onto the div’s too. but, when clicked, they jump into wordpress site rather staying in the same page!!
matt says
@desibird: iframes are an easy way to display another page within a page. However I didn’t know you were using WordPress and ran your site using PHP! It’s certainly more elegant to include the content server-side, as you have done.
Sounds like you may need to use str_replace() or preg_replace() on your link URLs to repoint them to the correct URLs.
Cheers,
Matt
desibird says
matt,
I managed to pull the stuff from wordpress and place it in an external html file + the possibility of reading posts in the same page has also been done.
I’ll create a new post within the elated forums and write a neat description centered post.
I’ll leave all the files related to achieve this website: http://www.c4di.org.uk.
Its an single page website (with two websites embedded in a single page).
All i’ve achieved is through this topic: javascript tabs.
Coming to wordpress: i’ve managed to change the permalinks(urls) to the present site.
Problem: when clicked on any of the archive posts topics, the site is hiding all divs again and to view the related post content, we need to click again on tubelog. is there a way to stop this behaviour??
Test link is follows: http://www.c4di.org.uk/test.php
matt says
@desibird: Love that shark image on the homepage 🙂
http://www.c4di.org.uk/test.php gives a 404 error for me…
Matt
desibird says
@matt: I think, you’re still watching old website.
It might take a day or two!
desibird says
@matt: Please do watch http://www.c4di.org.uk
and within the blog(tubelog), when clicked on archives, its going to home page. until unless we click on tube-log, the archived post is not viewed!
help appreciated.
Its just: c4di.org.uk
Cheers
matt says
@desibird: That is expected behaviour. Your’re clicking a link to a new page, so that new page is opening in your browser.
If you want to keep the linked content in the same page then you’ll need to use an iframe, or pull the linked content into the tab content div using Ajax.
I think you’ve also broken your WordPress index.php file since it seems to be loading your site homepage, rather than the blog post. I’d recommend moving your WordPress blog to a subfolder (e.g. http://www.c4di.org.uk/blog/index.php) or a subdomain (e.g. http://blog.c4di.org.uk/index.php).
Cheers,
Matt
desibird says
Thats the main reason why, i’ve requested for an ajax property to one of the tabs!
I’m searching for adding ajax property to tubelog (so that, there would not be a problem to re-load the homepage!!)
iframe is not a great help in this matter!
desibird says
@matt: if thats a good idea, should I be lokking at jquery tabbed version? or add an ajax property to fetch external html
matt says
@desibird: Pulling the latest blog posts into a tab on the homepage is one thing, but it sounds like you want your whole blog to be inside that tubelog tab, is that right? I wouldn’t recommend doing this.
The tabs script is designed to be used within a single page to display various sections of content without having a long page. It’s not designed to display whole sites or blogs that would ordinarily be on separate pages.
Apart from the effort involved in converting a whole WordPress front-end to work with Ajax, you’ll come up with issues such as accessibility, problems with search engine crawlers, content that can’t be bookmarked, a site that’s inaccessible to non-JavaScript browsers, and breaking the browser Back button, amongst others. The same kind of issues that Flash-only sites have.
Not wishing to put you off because your site looks really nice with the tabs, but I’m just making sure you’re aware of what you’d be getting into. 🙂
Cheers,
Matt
mashdot says
Morning,
I discovered yesterday that I have a problem with the inclusion of this script on pages which do not have tabs. As you can imagine it is easier to include the script in the header rather then per page, and I do not really want to change this.
The issue is caused by a ‘null’ value on pages which do not have the HTML element.
Is there a way to exit the script if “tabListItems” returns ‘null’ ?
Many thanks
matt says
Welcome back mashdot!
This might work:
Haven’t tested it though.
Cheers,
Matt
Duncan101 says
Great article, I’m using it now for a number of projects.
One thing was I was wondering was, can you randomise the tab that is visible?
For instance, have tab 3 visible when the user visits the page, then maybe tab 2 being visible when another user visits the page?
Many thanks
matt says
@Duncan101: Welcome to Elated. 🙂
This modification to the init() function will display a random tab each time the page loads (change the “3” to your actual number of tabs):
Hope that helps!
Matt
mashdot says
Matt,
Yours didn’t work out, but after playing around…
This now works, which allows me to include the script on pages which may not have the element, and does not through any errors.
Also this was brilliant help!… “Console2” https://addons.mozilla.org/en-US/firefox/addon/1815
Thanks again.
matt says
@mashdot: Glad you got it working!
Yeah, Console2 is nice for JS debugging, as is Firebug: http://getfirebug.com/
Cheers,
Matt
Duncan101 says
Excellent, that was ideal!
Many thanks!
matt says
@Duncan101: You’re welcome. 🙂
Matt
horses says
using your instructions for tabbed web pages – my skills are pretty limited to copy & pasting code into the appropriate places and adding content…have done all I know how to get this working…all that seems to be left is that the content is not staying “hidden” with the underlying tabs. Any help you can give me GREATLY appreciated.
http://www.invasiveplants.ab.ca/AIPISurveyResults.htm
matt says
Hi horses, welcome to Elated. 🙂
A large part of the problem is your invalid markup. JavaScript works much better with correct markup:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.invasiveplants.ab.ca%2FAIPISurveyResults.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
Specifically, this stray, unclosed font tag inside your “tabs” ul is probably causing problems:
I would also remove the spans around your tab links, as I suspect this is confusing the JavaScript (which expects to see a link as the first thing inside the li tag).
Hope that helps! Let us know if that fixes the problem for you.
Cheers,
Matt
horses says
thanks for your help – didn’t think of the validator – but it’s still not hiding unselected tab content. I tried removing the spans (assuming I removed them from the location you meant) but nothing worked then.
matt says
Hi again horses!
As I say, there are lots of errors in your markup, any one of which could be preventing the JavaScript from working. I’m guessing that you’ve edited the page using some sort of Microsoft editor (Word? FrontPage?), which has introduced a large number of errors and unnecessary markup (such as the deprecated ‘font’ tags) in the page.
In fact the markup is so broken that I don’t think the browser can even recognize the <body> element, which means it can’t run the onload event. You could hack around this by adding the following line just before the closing </body> tag at the end of the page:
Additionally you should tidy up your ‘tabs’ list, which contains extraneous elements and invalid markup:
For example:
If you do these things then there’s a reasonable chance that the JavaScript will run and pick up the tab links. However you’ll really need to go through the page and fix all those errors in the markup, otherwise you’re likely to encounter more problems further down the line. 🙂
[Edited by matt on 19-Mar-10 02:02]
djake1234 says
Hi
Firstly…loving the script, so easy so lightweight! Thanks.
Could I request for some help though….
1)How could I link to a tab from within another ‘tabContent’, just within a parargraph link.
2)Is it possible to style the first tab differently to the others…i.e. every other tab to be ‘selected’ is fine but could the first tab when ever highlighted have a class of ‘1st-selected’ so i can apply a different background….tried to do it myself, when page loaded it was fine, when click to another tab and back to the 1st just gave class of ‘selected’
Thanks muchly
djake1234
matt says
Hi djake1234,
Thanks for the compliment. 🙂
1) You’ll need to modify the showTab() function to accept an optional link object, as follows:
Then you can create a link to a tab within regular content like this:
2) Use the CSS :first-child pseudo-class to select the first element in a row of elements:
http://www.w3schools.com/css/pr_pseudo_first-child.asp
Hope that helps!
Matt
djake1234 says
Hello again…..
Thanks for the help…..much appreciated.
is it possible to have a choosen tab open on page load…..I can’t use querystring (CMS), so I suppose it have to be e.g. “#1”
Also, how about fading tab transition? :- )
thanks again, this really is the best script out there!
matt says
Hi djake1234,
Thanks for the compliment. 🙂
I covered opening a particular tab on page load earlier in the topic:
http://www.elated.com/forums/topic/4717/#post18005
Transitions are best done using a library such as jQuery – see http://api.jquery.com/category/effects/
Cheers,
Matt
baerej says
Hi. I am having some difficulty when my page loads. I have the javascript and style sheets in a linked file, but maybe you can tell what’s going on by seeing the page in action. For some reason when the page loads, all of the div content panels show up and then hide. How do I make this stop?
Thanks,
Elise
http://164.109.50.192/index_tabstest.html
matt says
Hi Elise,
Try this solution here: http://www.elated.com/forums/topic/3316/
Does that help?
elfpixel says
Hello!
I just managed to modify your great tab script to fit my project. This really is a wonderfully easy to understand tutorial. You saved me a lot of time and I still learned so much. 😀
Well, I still got some difficulty with implementing some important features.
my example: http://lukas_eibensteiner.public1.linz.at/tabs_example.html
1. I want to create the basic template for a user interface panel on my website using tabs. As I will be putting more than one set of tabs on each page there will be errors because of the variables. Is there any workaround for this problem?
2. Maybe it would be possible to mark some tabs as “disabled” (like tab 4 in my example) until a button is clicked or something like this.
Thanks again for this awesome tutorial!
elfpixel
[Edited by elfpixel on 21-Apr-10 14:49]
matt says
Hey elfpixel:
1. Looks like you’ve already solved this by passing a div ID to the init() function, yes?
2. Maybe use something like:
?
Nice looking tabs btw 🙂
elfpixel says
Hi matt!
Thanks for your help, but I’m afraid that’s still not all.
1. If I put 2 sets of my modified tabs onto one page none of them is working correctly. Maybe it’s because of the arrays. I tried to solve it but I’m probably not yet skilled enough.
2. Of course this will change the appearence of the tab link, but it would still be clickable. So unless there is a CSS rule for disableing links, it won’t work that way.
Thanks for the compliment! 😀
matt says
@elfpixel:
1. It’s quite a big job – you need to rewrite most of the JavaScript to store multiple sets of tabs in multiple arrays. Doable, but fiddly. Here’s a working example based on my original script:
2. You could use the JavaScript DOM functions to remove the ‘a’ element from around the text when it’s disabled (and add the link back in afterwards): http://www.elated.com/articles/changing-page-elements-with-the-dom/
Hope that helps!
elfpixel says
Wow, thank you so much for the great support, your patience and all the time and effort you put into this! 🙂
1. It’s working perfectly! In my opinion this is even more useful than the original code. You should definitley consider adding this to the tutorial’s page.
There’s just one more problem. Linking to a tab within another tab’s content does not seem to work anymore.
It must have got to do with the new showTab() function. I tried fixing it myself but failed again.
2. Thanks for the link, writing the script myself won’t be too hard for me now.
octane says
This is a great script Matt, it’s really light and works great, by far the best I’ve come across. I like the modification to make the first tab random too.
I have run into a problem though when using it in IE6 & IE7 in conjunction with my lightbox javascript. It just prevents the automatic loading of the first tab and it hides them all.
You can see this at http://2010s.pipeten.co.uk/temp.html
It works perfectly in all browsers apart from IE6 & IE7 however If I take out the link to my /prototype.js file it works in IE6 & IE7 perfectly.
I have tried some of your different workarounds above but none seemed to fix this issue. Do you have any idea what might be causing the conflict between the two .js files? I’d really appreciate it if you could take a quick look for me.
matt says
@elfpixel: There’s an error in that code I posted. Remove this line and it should work:
matt says
@octane: Absolutely no idea I’m afraid. I don’t know Prototype that well. IE6 isn’t throwing errors so I’m guessing that somehow the tabs JS is failing to show the relevant tab. (It’s obviously successfully hiding the other one.)
Things to perhaps try:
1) Change the order of your JS includes? This might stop Prototype breaking the tabs JS:
2) Rather than calling init() in the body onload, try placing this just before the closing </body> tag instead:
Does that help?
octane says
Thanks for the reply Matt, I’ve tried both of those and it didn’t help unfortunately. Thanks for taking a look though, it is appreciated.
djake1234 says
Hi again
I am struggling a little to get this working the way I would like it to. Please help…I know you already have, I really appreciate it!
I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3). I have scoured the list of questions and made all the changes, but can’t get tab onload to work with link from other tab, one breaks the other.
Also, is there any reason why this would break the script another javascript function I want to use (http://css-tricks.com/moving-boxes/). Makes the boxes stack, not float left and appear inline.
Thanks again
djake1234 says
Oh, and just to add to the previous post….I am using a CMS, so i can’t use the querystring (i.e. /?tab=tab1) but I can use #tab1 in the URL
thanks
matt says
@djake1234:
“I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3).”
The code I gave you earlier should do this:
http://www.elated.com/forums/topic/4717/#post18939
http://www.elated.com/forums/topic/4717/#post18005
djake1234 says
@Matt
Sorry to keep going on about this…
I can’t seem to get it working. I can get the ‘open a tab from a same page’ function working, but not load a dprcific tab on page load working. When I try to implement your reccomended code, both don’t work……and I really need them both together if possible.
Could you combine the javascript just so I know its being done right.
Just to re-iterate, could they both to work together?
Again I’m sorry to rabbiting on about it, just getting desperate, launch is next week.
Thanks
matt says
@djake1234: I think we’ll need to see your page to help further. Can you post the URL?
djake1234 says
Thanks again for getting back to me.
I’m afraid i can’t show you. Its in development and therefore currently has no url.
As well as that, the new brand launch is hush hush, I couldn’t show you if I wanted…not that you would do anything
Sorry
matt says
By the way, browsers are starting to get to the point where you can now do tabs with just CSS – no JavaScript required. Yay! 🙂
Here’s a good tut on this:
http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/
Carla says
Matt,
Would you happen to have input on creating “Rounded Tabs” using your amazing example?
matt says
Hi Carla,
The easiest way to create tabs with rounded corners is to use the CSS3 border-radius property. I covered this in our newsletter ( http://www.elated.com/newsletter/ ) a while back – here’s what I wrote:
—–
1. Creating rounded corners with border-radius
Rounded borders around page elements have long been popular amongst web designers, but traditionally they’re a pain to create. First you have to create the effect in Photoshop, then you have to slice up multiple background images for each element.
CSS3 promises to end all this hassle with the lovely border-radius property. This lets you create a border with rounded corners, and specify the radius of the corner curves. For example:
At the time of writing, only Opera 10.5 supports border-radius as-is. Mozilla and WebKit browsers have their own versions (-moz-border-radius and -webkit-border-radius). So to get it to work in Opera, Firefox, Safari and Chrome you need to write:
Incidentally, you can also specify a radius for each corner individually, although sadly the syntax is completely different for each browser engine. (Can’t these people agree on anything!) Here’s how to set a rounded border just for the top right corner of an element:
…
4. Getting it all working in IE
So now we come to the elephant in the room: Internet Explorer! How can we use these lovely CSS3 effects in this dear old browser? First of all, the good news is that IE9 will _probably_ support all these properties natively. For older versions, though, we’ll need to resort to a bit of JavaScript cunning. Fortunately there’s a great script out there that does all the hard work for us:
http://fetchak.com/ie-css3/
To use it, download the script and save it in the same folder as your Web page, then add the following property to the same selector(s) that use the CSS3 properties:
For example, here’s how to create fully cross-browser rounded corners that work in Firefox, Safari, Chrome, Opera, and IE 6, 7 and 8:
Have fun!
bgood says
I have this working with one slight qwirk.
I can set a link within another page to go to a page that has tabs and have a specified tab open when the user arrives. That’s cool! If I link to the tabbed page without a specific tab in the href code the page loads perefectly and I see the top of my page.
However when I specify a tab within the link (example: /folder/tabbed_page_name.aspx#tabID ) the page loads but is positioned down the page depending on which tab I specify – so the user does not see the top of the page. They are already scrolled down a bit. Is there a simple way to address this so that the page loads properly (not scolled down) but with the specified tab open?
Thanks!
bgood says
OK – In case anyone else has been haveing the same issues as me – I found a workable solution.
My pages are built using aspx masters. I placed a topofpage anchor tag at the top inside the master like this:
I have the init placed after my last div:
I simply modified this last piece of code to include window.location.hash = “topofpage” like this:
Now when the user clicks on a link that specifies a tab on the page, they arrive at the page with the proper tab opened and they are positioned at the top of the page.
matt says
@bgood: Thanks for posting your solution – glad you got it working. 🙂
abyteman says
Thanks for a great tutorial. My problem is with internet explorer. When I run the script in ie, I have to click the information bar for it to run. Firefox works fine. Any help would be appreciated!
sixer says
First, great tutorial. It really helped a lot and it was just what I was looking for. My problem though is that this seems to be for a whole web page and I want to insert tabbed content on to an existing web page and the Javascript won’t work that way. Any suggestions on how to modify the javascript to allow this to work with only the content of the page and not the whole page itself? Any help or additional tutorials you could suggest would be greatly appreciated.
matt says
@abyteman: Can you be more specific (including any IE error messages)?
@sixer: You can use the code fine within an existing page. What problem are you having exactly?
sixer says
Here is what I did. I created a page in Notepad – using the example as a guide. When I save the page as an HTML file so I can see how it is working, normally it looks ok. I sometimes get an Active X error but I think that is due to my security. Anyhow, I am trying to implement this into an existing html page (WordPress template) and it will display all the information vertically and not in a horizontal tabbed format. I was told that the JavaScript was pertaining to an entire web page and that I needed to focus on just the content. I could send you my code but honestly it is no different than the example – besides the content within the tabs.
matt says
@sixer: “it will display all the information vertically and not in a horizontal tabbed format.” – Sounds like a problem with the CSS, not the JavaScript.
armstra says
Hi Matt,
I have zero knowledge of js so I was hoping you might provide me the exact js code required to open a tab from an external link.
I have an email newsletter and when a particular story is selected I want the user to be taken to the browser where the tab with that story is opened and ready to read.
I require the code to use for teh link in the newsletter and any code changes required for the tabbed page itself.
Hope this makes sense.
Cheers, love your work.
Alan
armstra says
Sorry Matt,
I’m aware that you have answered this question in a previous post but to be honest I didn’t understand the answer. I really do require something I can copy and paste and need to be told exactly where to place the code on the pages.
Thanks again,
Alan
bgood says
armstra – take a look at my 2 posts above from June 15 and June 17. I think they will answer your question on how to specify a tab within a link.
[Edited by bgood on 16-Jul-10 14:58]
armstra says
Thanks bgood.
I had read your post but like I said above, I have no working knowledge of javascript and so it doesn’t make a lot of sense when I read it.
Would it be possible to send me a stripped down working example (one html page with a link opening a specified tab on a different html page) so I can simply duplicate the parts that I require.
Cheers.
armstra says
Hi,
Is there anyone who can help me with a working example of using an external link to open a specific tab.
I need to link from a newsletter in Outlook Express to the tabbed webpage showing the relevant story.
I’m a graphic designer not a programmer so would really appreciate a little help getting this to work ASAP.
Thanks guys,
armstra says
Hello again,
Just to add further to my posts above about seeking help with an external link.
This is an example of a tab which I would like to be opened upon arrival at the tabbed page
<li><a href=”#three”>Housing Direct</a></li>
This is the link I’ve been using to open the tab from an external link
index.htm#three
It does navigate to the correct story but then IE asks if I want to allow the content to open and when I select yes the page is refreshed and tab one is opened instead of tab three.
Can anyone help me to get this to work
Cheers
[Edited by armstra on 18-Jul-10 22:23]
philcey says
Hi, I made the modifications to the javascript to allow me to be able to link to tabs with #tabname at the end of an url.
I don’t know what I did wrong but when i go to the #tab url it selects the tab defined but doesn’t display tab content or unhighlight the default first tab.
philcey says
please forget last, it was me missplacing the code u told me to add.
armstra says
Giving that no one has assisted me with my question about external links opening a tab I have quit using this approach and instead joined a forum where the moderators care enough to actually respond.
Great tabs, pity about the lack of feedback.
[Edited by armstra on 21-Jul-10 07:53]
harshida says
Hi all,
I am new on this website as well new in web development. I learn css and html and quite fluent both of them but also learning java script and jquery . But I am not good in programming pls suggest me nice JavaScript book where I can find real programming I am so confuse and frustrate at the moment. I can do lower level programming but don’t have Idea about real programming pls suggest me some books or site name where I can learn deep knowledge of both of them.
Thanks
harshida
matt says
@harshida: Welcome to Elated!
A good solid JavaScript book that I highly recommend is “JavaScript: The Definitive Guide”:
http://www.amazon.co.uk/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/
Some good tutorial sites:
http://www.elated.com/articles/cat/javascript/ (our own tutorials)
http://www.w3schools.com/js/default.asp
http://articles.sitepoint.com/category/javascript
Hope that helps. 🙂 If you have specific questions please feel free to post them here:
http://www.elated.com/forums/authoring-and-programming/
fong says
I tried the same code displayed in IE source page. the tabs will show up, but all the tabs contents are shown at the same time, even for those tabs are NOT selected.
problem with the CSS? I am running that in Ruby on Rails.
strange, ummm…..
matt says
@fong: What do you mean by “IE source page”?
If you’re having trouble getting it to work in Internet Explorer then turn on script debugging and see what JavaScript errors you’re getting.
fong says
matt, thanks for the quick reply. I opened the demo link in IE, and then clicked on the “view source” to copy the code to my RoR framework to try it out.
most of the code is in the same file, except I put the css code in stylesheet directory, then include in the page.
any help is appreciated.
matt says
@fong: Can you post the URL of the page with the problem, so we can take a look?
motoringss says
Hi, matt
I really like your code but I got a problem right now.
I separate your code to 3 files. (.css .js .htm)
And I added another 3 tabs and 3 tab contents.
I use firebug to find out the problem and I found out the last two tabs “return” & ” support” is not hiding automatically.
Please help me to take a look.
Please see the code below:
matt says
@motoringss: The problem is that your “Returns” link references an ID of ‘returns’:
…but your corresponding tabContent div has an ID of ‘return’, not ‘returns’:
motoringss says
Thank you so much, matt
And sorry for my careless mistake…
thanks again for you help.
motoringss says
Hi Matt, I tried to use the code for ebay auction. And ebay gave me a message below:
Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.
Do you have any idea I can still use the code?
matt says
@motoringss: It’s probably because you’re trying to include an external .js file:
I don’t think ebay allows that.
Instead, paste the contents of activetabs.js into your listing page (inside <script> … </script> tags of course).
motoringss says
Thank you so much.
I tried to paste the JS contents inside the main page and it works.
But I just want to know why the external .js file wont work?
Just curious…..
matt says
@motoringss: Because ebay doesn’t allow external JS includes in listing pages (presumably for security reasons).
motoringss says
Matt,
Thank you so much, you are professional!!!!
matt says
@motoringss: Happy to help! 🙂
eman says
Hello Matt,
I am trying to use the javascript tab in my website I am working on. I setup four tabs and it shows fine in Safari but in IE8 all of the tabs text is displayed and will not be centered like Safari. In IE7 I am having the same problem and it shifts too much to the right. When I first created the tabs not within my website everything looked fine, but when I inserted the code into my website these problems in IE8 and IE7 occurred. Maybe it has be arranged differently for IE but I’m not sure.
Please let me know what I can do to resolve this as I don’t know what else to do. Here is the code.
Thanks for your help.
[Edited by matt on 18-Aug-10 04:11]
matt says
@eman: For one thing you have 2 body elements in the page which will cause all sorts of problems. I can’t even get the tabs working in Firefox.
Best bet: If you can upload the page and post the URL then it will be easier for us to see the problem, and debug it.
Cheers,
Matt
eman says
Hello Matt,
The URLs are below. Just to reiterate the javascript tabs content displays ok only showing one at a time in Safari 4 but in IE8 you can see all of the tab content. Also in IE7 the complete tab frame shifts to the right. It also displays all of the content like IE8. Another thing I noticed about Safari and perhaps the other ones to is that when I click on a tab the footer shifts up. Is there a way I can get the footer to stay at the bottom?
Also how can I remove the horizontal scroll at the bottom which can be annoying to vistors?
I included the css code for reference.
If you can correct the code and resend that would great. I truly thank you for your help with this matter and have a great day.
http://www.jenkinscreativedesigns.com/pricingnw.html
http://www.jenkinscreativedesigns.com/csscode.html
matt says
Hi eman,
Thanks for posting the page. It’s amazing it works in Safari at all (which you’re right, it does) since you have 2 body elements in there (you’re only allowed 1 in an HTML page), which will confuse any but the most robust browser!
It doesn’t work in Firefox or Opera (and presumably not IE).
I’m guessing that it’s not even getting to fire the init() function since you’ve included that in the second <body> tag. So your JavaScript won’t work at all.
Here’s a full list of the things that need cleaning up:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jenkinscreativedesigns.com%2Fpricingnw.html&charset=%28detect+automatically%29&doctype=Inline&group=0
I would start, though, by removing that duplicate body element. Then at least all browsers will be able to parse the page without choking, and hopefully start running the JavaScript.
Cheers,
Matt
eman says
Thanks Matt.
picknikker says
Hi and many thanks for this.
Is there a chance of making this work without having Access to the <body>-tag. I’m working on a new look for my online-shop. Unfortunatelly I can’t edit the body-tag because its an e-pages product. http://www.best-weekend.de/epages/62371225.preview/de_DE/?ObjectPath=/Shops/62371225/Products/2001
As you can see, its not working very well.
matt says
@picknikker: Just put this at the end of the page, before the </body> tag:
picknikker says
Thanks Matt, unfortanutally it’s still not working properly. Do I have to put the code right before the </body>-tag? Because I cant’t do this either. Do You have another Idea? Thanks a lot.
picknikker says
Me again. I just don’t get it. Now I’ve made an extra site outside of the preset shop-design. http://www.team-rpx.de/tabs.html …
Although I just copied the <head>-part from your sample-page (which is working great in my FF3.6, by the way) it doesnt work. Please help. Thank You
matt says
@picknikker: It doesn’t work because your first tab link does not match the ID of the first tabContent div:
kurzpotrait != kurzportrait 🙂
picknikker says
Hi Matt and thanks again. How could I not see this? Now it’s working pretty well. Greetings to Australia from Cologne!
dave_gordon says
Hi Matt,
I would be gratful if you could take a look at http://www.ffynnongron.com/leisure.php
I am trying to load a gpsvisualer (or rather google map) as this cannot be done using IFRAME.
The problem is it first loads the first tab (Area) text and map but for some reason a few seconds later the second tab map (Environment) is then overwritten.
Any ideas would be much apprechiated.
Regards
Dave
matt says
@picknikker: You’re welcome. 🙂
@dave_gordon: Hmm, I can see how that would cause all sorts of problems with the tabs code, since is uses things like document.writeln() to inject more markup into the page. Do the tabs work OK if you strip that JavaScript out?
Looking at it more closely, the Area and Environment tabs basically seem to work, although the content is a bit messed up. The other tabs seem to have no content in – is that because you haven’t added any yet?
(This is on Firefox 4.0 Mac.)
Matt
dave_gordon says
Hi Matt, and many thanks for your prompt reply.
Yes the tabs themselves seem to work okay, but I think for the environment one I’m missing a DIV somewhere.
I’m trying to find a tool that will assist with the above in indenting the tags but HTMLTidy seems to want to go too far and coment out what it thinks is the addituional tags.
I initially thought this could be the problem with the loading the second map in the first tag, but then ignored due to the fact the first tabs text was still displayed.
In terms of the other pages, I did not want to insert more code until I fixed the problem with the first two tags.
Regards
Dave
dave_gordon says
Hi Matt,
I’ve now manually checked the DIV tags and everything is okay.
The previous problem of loading the second tab map into the first tab display is only occuring in FF 3.5.11, and in IE7 the map does not show in the tab.
Is this down to what you suggested previously about document.writeln() within document.writeln()’s, and if so do you know of anyway around this?
Regards
Dave
dave_gordon says
Sorry me again. If I understand the processing correctly I think it may work if you only load the the first tab onload, and after each tab is selected run my onunload=”GUnload(); and then load the individual tab once again.
The only problem is I don;t know how to code this.
Many thanks
Dave
matt says
@dave_gordon: Just call GUnload() within the JavaScript tabs code as required, eg:
(or whatever it is you need to do)
dave_gordon says
Many thanks Matt, but unfortunately this does not seem to make any difference.
Assuming the script loads everything first, is there anyway to only load the first tab, any then only load the others individually after the tab is selected?
Many thanks
Regards
Dave
matt says
@dave_gordon: What do you mean by “load”?
leo_gatmaytan says
Hi,
I have 2 pages and I inserted the code of each page in the <div></div>
it works. the problem is both pages(now in tabs) have dynamic dropdowns. Now that I inserted both pages in tabs, the dynamic dropdowns doesn’t work on IE but if I use FF it works fine.
Any help on how to make it run on both browsers?
matt says
@leo_gatmaytan: Please post your question in a new topic, and include a link to the page with the problem.
http://www.elated.com/forums/authoring-and-programming/topic/new/
dave_gordon says
Hi Matts, and sorry for not making myself clear.
I thought the utility builds ALL the tabs (identified by DIV names) and simply controls what is actually displayed by using the ‘div.tabContent.hide { display: none; }’
Becuase of the way GPSvisualser loads this causes problems, so, if I have understood correctly, rather than build all the tabs, which i presume happens in the function init(), can I only build the first tab, and only upon selecting another run my GUnload(); and then build the tab selected.
Does this make any sense?
Many thanks
Dave
matt says
@dave_gordon: Well it’s not really “building” anything. The tabs are already created in the markup. All the JavaScript does is assign different classes to the tabContent divs to show and hide the tabs. That’s it.
Since I don’t know anything about GPSvisualser I can’t explain why it isn’t working. Those writeln()’s sound nasty though. At a guess, GPSvisualser might be overwriting the tabContent divs when it runs. If you bring up the Error Console in Firefox you can see the following errors:
Another thing I’ve noticed is that you’ve created 7 tabs, but only 2 corresponding tabContent divs. You need to create a tabContent div for every single tab, otherwise the init() function will break.
dave_gordon says
Hi Matt,
Just to let you know everything within the maps is now working. I ended up just using IFAME within the DIV and everything worked.
The previous tab utility I used must have done something peculiar when building the IFRAME string because when I tried to reference objects within the frame did not work. Anyway the maps seem to be working perfectly now (see http://www.ffynnongron.com/leisure.php)
One other small thing. I’m using my own style (.menu2) and for some reason the tabs are not highlighting when selected. Initially i thought it was becuase I used ‘active’ instead of ‘selected’ but even when changed and then even used your names (ul#tabs) in my external .css it does not work.
Could you give me a pointed as to what is wrong?
Many thanks for all you help and do you have a paypal account that I can donate something?
Kind regards
Dave
matt says
@dave_gordon: Your selected tab’s ‘a’ element has an ‘active’ class, but you haven’t styled that anywhere.
You need to select and style the ‘a’ elements, eg:
dave_gordon says
Thanks Matt and thank you vary very very much for all you help and assitance.
Kind regards
Dave
matt says
No problem Dave – hope it helped 🙂
Matt
CCJared says
Hi Matt,
I’m having a problem with this. I’ve got one set of the tabs set up on the link below, but the second set doesn’t work. How can I get two or more sets of tabs working on a page?
http://www.beta.theridefactor.com/guides/tripsdrill/
devonei says
Funny CCJared i was just on here searching for the exact same thing! I hope Matt responds soon! 🙂
matt says
@CCJared and @devonei: See:
http://www.elated.com/forums/topic/4717/#post19137
CCJared says
Hi Matt, thanks for your help. That worked great, but now I’ve got another issue. The 4th tab on the second set isn’t working.
http://www.beta.theridefactor.com/guides/tripsdrill/
Any ideas?
matt says
@CCJared: You haven’t closed your previous tabContent div:
stsnider says
My tabs do not work. The tabs look ok, so I feel the CSS code is fine. But when I click on any tab but the first one, nothing happens. The error in IE says:
Message: ‘contentDivs[…]’ is null or not an object
Line: 51
Char: 11
Code: 0
URI: file:///M:/HTM/NDEP/ADMIN/GIS/Scripts/js_functions.js
Line 51 in file js_functions.js is:
contentDivs[id].className = ‘tabContent hide’;
Thanks for any help!
matt says
@stsnider: IE is a horrible browser for debugging JavaScript! Try Firefox and use Tools > Error Console.
If you can upload your page and post the URL then we can take a look at the problem. Chances are you’ve mistyped or misspelled one of your content div names.
stsnider says
I tried Firefox error console. It says “contentDivs[id] is null”. I cannot upload these files to the division’s website until they are functioning, so I copied the files to my google docs. The file structure should be:
index.html
Scripts/js_functions.js
Templates/gis_resources.css
Thanks for your help.
javascript
https://docs.google.com/leaf?id=0BwRWFnLD3lXrMzRkZDc0NjUtMzdkNi00NzVkLTlhODQtOTdlZjJiNmY1ZDMz&hl=en
CSS
https://docs.google.com/leaf?id=0BwRWFnLD3lXrYjBlM2I2MGUtMTY5NS00ZDE2LTlmYTktZGMzNTJmNzQ0OTc2&hl=en
HTML
https://docs.google.com/leaf?id=0BwRWFnLD3lXrZTNhYmExNjUtNjcyYS00Y2ZjLTg5NTgtMjFlNDNhYTVkZmI2&hl=en
matt says
@stsnider: Those links don’t work for me.
I can’t do much unless I can see the actual page with the problem. Why not just upload it to a hidden folder on your site?
Might be best to start a new thread too:
http://www.elated.com/forums/authoring-and-programming/topic/new/
anupam27oct says
Hey Matt,
In my webpage I have multiple tabbed contents but the problem is that only one of it works while the other doesn’t. I changed the id of the 2nd tab content and named it tabs2 and in the javascript page I added the following under Grab the tab links and content divs from the page
var tabListItems = document.getElementById(‘tabs2’).childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems.nodeName == “LI” ) {
var tabLink = getFirstChildWithTagName( tabListItems, ‘A’ );
var id = getHash( tabLink.getAttribute(‘href’) );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
I didn’t deleted any thing. It worked and both the tab content were working but the problem was that one could view the text of only one tab content at one time and the other meanwhile, disappeared. When clicked on link of another tab content, the content of the first one disappeared. Do you have any solution for webpages having two or more tab contents. My knowledge of Javascript is zero.
Please help its really important. I know you want to close this forum but if you please help me I will be thankful to you. Plz. Plz.
masaniparesh says
Hi Matt,
I much appreciate your help throughout here to various users.
My scenario is somewhat different. I have sever html pages in particular folder. I want to write a JAVA Script or whatever that can give me a output as tabbed web page. Each tab is corresponds to my html file. so basically JAVA script should iterate through the folders for html files and generate tab for each html files dynamically.
I have not done much JAVA script so some help on this would be much appreciated.
Thanks.
matt says
@anupam27oct: I already covered multiple tab sets here:
http://www.elated.com/forums/topic/4717/#post19137
@masaniparesh: Please start a new topic:
http://www.elated.com/forums/authoring-and-programming/topic/new/
bgood says
Matt – I’ve been using these tabs for a while now and I have to tell you – the code is great!
Here’s what I’m tring to do: NESTED TABS
For example:
Say I have a page that has 3 tabs (1, 2,and3).
Tabs 1 and 3 have simple content.
However, for Tab 2, I want to display the content in 3 Tabs within it (nested). Let’s say they would be 2A, 2B, and 2C.
I can write the tabs (2A, 2B, and 2C) within the content for Tab 2 and they show up when I am on the page and have selected Tab 2. However, the tab’d content itself is just listed in order down the page – not inside the clickable tabs.
Is there a simple way to accomplish this?
Thanks!
bgood
matt says
@bgood: Hmm, that’s an interesting one! I suspect if you took the multiple tab sets code at http://www.elated.com/forums/topic/4717/#post19137 and simply put the ‘tabs2’ ul inside your “Tab 2” then it might “just work”. In theory…
bgood says
Matt – That works! Thanks.
bgood
bgood says
Matt –
OK I used your suggestion (new .css and .js files) and I can now nest tabs within other tabs.
However, I no longer can send a user to the page and include a refference to the tab ID in the link so that the appropriate tab is open when the user arrives.
EXAMPLE:
My page with the tab’d content has the following at the bottom:
<script type=”text/javascript”>
init(‘tabs1’);
window.location.hash = “topofpage”
</script>
This page has only one set of tabs (tabs1).
All tabs (single set or nested) have unique IDs.
If the page had nested tabs it would have the following at the bottom:
<script type=”text/javascript”>
init(‘tabs1’);
init(‘tabs2’);
window.location.hash = “topofpage”
</script>
The “topofpage” used to work to bring the browser window back to the top with the proper tab opened.
If I want the 2nd tab out of 3 to be open I write the link as follows:
<a href=”path/to/webpage/webpage_name.aspx#2″>Link Text</a>
My tabs are declared as:
<ul class=”tabs” id=”tabs1″>
<li><a href=”#1″>One</a></li>
<li><a href=”#2″>Two</a></li>
<li><a href=”#3″>Three</a></li>
</ul>
And the tab’d content is declared as:
<div class=”tabContent” id=”2″>
<h2>Two</h2>
<div>
SOME CONTENT
</div>
</div>
So – when I was using the original code, that didn’t allow nested tabs, my links with specified tab ID’s worked. Now they don’t.
Any advice will be greatrly appreciated.
Thanks!
bgood
[Edited by bgood on 03-Nov-10 13:33]
matt says
@bgood: This is getting a bit offtopic. If you can post a new topic about this, and include the URL of your tabs page, then I can take a look:
http://www.elated.com/forums/authoring-and-programming/topic/new/
Cheers,
Matt
Sprab says
Hello Matt
I have been using your fantastic script on my site for nearly a year and it’s been working perfectly… until today. I have not made ANY changes to my site, nor are there any error messages, but the script has suddenly stopped functioning (tabs not being hidden) in all browsers.
There are several external javascripts on the page (from Google) and I have tried disabling these (in case of a conflict) but this doesn’t have any effect. I am completely at a loss as I know very little about javascript. If you have any time, could you take a look and see if you spot anything?
http://www.yourkrabi.com/amorn-mansion/
Thank you so much, I know you must be very busy…. but any advice would be great!
Seema
matt says
Hi Seema
I think there’s some problem with the body load event not firing (not sure why). Try removing the onload from the <body> tag, so it’s just:
Then just call init() manually after your tabs in the HTML:
Sprab says
Hi Matt
Thanks so much, that worked perfectly for your script – now just have to figure out why the change has stopped another function on the page (calcHeight) from working… ah, the trials and tribulations of cut and paste website building 🙂 I need to learn Javascript properly one day!
Thanks again for the support.
S
cfsamet says
Love this script! Many thanks.
I’ve been working on getting this implemented this morning, and it works wonderfully in IE and Firefox, but doesn’t work in Google Chrome (I get really strange behavior).
I assume I typo’d something, since your demo works just fine in Chrome.
I thought I would post here and ask if you’ve had any trouble with browser compatibility with this?
cfsamet says
Disregard my last comment there…
Turns out when creating my ul list, I missed the closing anchor tags. IE and Firefox corrected this on their own, Chrome held my feet to the fire (as it should).
I’ve corrected it now, code works in all browsers…
AND I just wanted to say MANY THANKS for this script… it’s a GREAT help!
Charlie
Sprab says
Just a quick FYI in case anyone finds this useful: I discovered the reason why the fab tab script suddenly stopped working was a conflict with our OpenX tags (still unexplained as no code had been changed on the page).
I disabled OpenX (and actually switched to DFP because of other issues with this ad server) and the script now works again, with the onload in the body tag as before. Hooray!
matt says
@cfsamet & @Sprab: No problem – I’m glad you both got your tabs working 🙂
Stanley says
Hmm… I posted a question here:
http://www.elated.com/forums/topic/5083/
Not sure whether I should have added it as a comment right here. Basically I want to know if it’s possible to shift the focus to the first form field in whichever tabContent div is selected?
sahran says
Hi
I followed this great script and adapted it for my need for a facebook page with 7 tabs, the only problem I have after spending numerous hours working on the code and content is that I cannot use the body tag in a facebook applications such as in: <body class=”ul-tabs” onLoad=”init()”> which I am using with this script (I am using clearfix tab) . Is there another way to use this script with changes to the above mentioned function?
I tried several changes however the content of all 7 tabs will show up on one page rather than 7 different pages.
The error I am recieving from facebook “Application Temporarily UnavailableParse errors:FBML Error (line 123): illegal tag “body” under “fb:tab-position”
here the test link i have working ok on my server, thou when I switch to facebook-app it causes the body tag error:
http://www.kansascityproperties.com/www/facebook/app.asp
Any answer/help is much appreciated, I hate to see what I worked on go to waste, thou I am far from finished with polising it up. thx
[Edited by sahran on 12-Dec-10 11:41]
matt says
@sahran: Since your question is related to Facebook and not specifically about the article itself, please post it in a new topic:
http://www.elated.com/forums/authoring-and-programming/topic/new/
Thanks,
Matt
trucjensen says
Hi Matt.
Thanks for this tutorial. It’s an excellent way to teach someone like me some javascript 🙂 – and when it gives some weird behaviour, it’s even better (for the learning part, that is).
My problem is that on my web-site, it’s only the first tab (nyheder) that shows content in IE and Chrome. The other tab (menu) is just blank. In FF both tabs work as expected.
Do You have any suggestions?
The site is http://www.kratholmskolen.dk
(Funny part is that I made a test-site and here it works as intended. The testsite is http://www.kratholm-uv.dk)
trucjensen says
Sorry for the inconvenience. I solved the problem. It was a question a missing “>” in a “<br />”-tag. That took me a while to find 🙂
matt says
@trucjensen: No problem – glad you got it working 🙂
pswa61 says
I give this article a D+, failing grade, i.e. decent effort but you did not complete it nor did you comprehensively test it before you published it.
This does NOT work with block level elements in the div’s.
Also, you obviously did not check this in multiple browsers, the tabs div does not display inline or with any formatting at all for that matter, just 2 ugly blue text links stacked in IE.
Try putting tables in the divs (a legitimate need for more intricate formatting in the div), doesn’t work.
remove div’s & try putting the attributes directly in the table tag, doesn’t work.
I appreciate you *trying* to help, but the internet is so full of half-baked solutions it is becoming more a source of mediocrity than anything else, it seems.
Get back to the drawing board and try again, and this time Take the Time to Test *before* you post.
matt says
@pswa61: It works fine with block-level elements – the example even includes block-level elements.
Tables work fine too. Tested in IE7/8/9.
Sounds like there’s some problem with your code or setup to me.
Stanley says
Hmmm… sounds like the poster two above might not have been totally human. Oh well…
Matt, as the rest of us know this is a GREAT script – and I thought you might like to see how I got JavaScript Tabs to work in conjunction with another great script I found – imageMenu, which is a mootools sliding “concertina” menu.
(note that the jstabs script applies to the row of images underneath the top navigation bar – I’ve used it as a kind of presentation)
You can hover over the images to expand each image or you can click on one of the images to hold it open and jump to the relevant tabContent.
You can have endless hours of fun with it here:
http://www.collents.eu/begin.php
The site’s still under development really but that part of it seems to work quite nicely.
[Edited by Stanley on 19-Mar-11 01:26]
pswa61 says
Ah, I stand humbly corrected, please excuse the after a long, frustrating day dourness.
My issue remains somewhat mysterious. Stripping everything to bare essentials in the code I got static html to work properly in a flash. The problem was dynamic output from a script I wrote that populated the primary tab. Being by nature very lazy I enclose tag attribute values in single quotes, when I changed the php to output html w/ double quotes it worked like a charm. When I changed it back to single quotes it worked like a charm, but the initial php outputting html attributes w/ single quoted values made it take a dump. I have no idea why.
So before thoroughly evaluating the issue I came here and took a dump.
Sorry, folks, it ain’t pretty, but it happens.
matt says
@Stanley: Wow, that’s a great use of the tabs script! Love it 🙂
@pswa61: No problem – good on you for coming back and apologizing, so many people would never bother! 🙂 Hope you manage to solve the PHP problem – feel free to ask for help in our Authoring & Programming forum if you need it:
http://www.elated.com/forums/authoring-and-programming/topic/new/
Cheers,
Matt
midtoad says
Matt, I have a question about updating content in tabs when they are clicked on. An example may help:
In my first tab, I have a form that, when submitted, causes a Javascript function to be executed and results displayed in a table in that tab. So far, so good. Now, the challenge is that I want one of those calculations to be used to change a result in another tab. When I go to that other tab, the result is not updated.
Any suggestions as to how I could achieve this?
thanks
Stewart
Stanley says
@midtoad
Sorry for jumping in ahead of Matt here, who may have a better idea, but to try and help you along a bit what I would do is temporarily disable the jtabs script (so all the tabContent divs are shown one after the other down the page) and proceed from there.
When you can get it to work on that single static page then it should work when you re-enable the JavaScript Tabs script.
midtoad says
@Stanley, are you really in Tbilisi?
Your comment actually is quite helpful, as it’s led me to recall that the tabs are really just divs on a single page. So there should be no magic in making content in one tab appear in another.
Before your comment arrived, I had developed a work-around. I put an Update button in each tab, and wired it to a function that pushed out new data to an <input> in that tab. But now, thanks to your comment, I realise that all I likely have to do is, in the first tab where I make the calculations happen with an Apply button, simply add lines to my javascript function to also update the input fields in all of the other tabs.
For the benefit of those looking to apply this type of concept, the details are the following:
Where I want the new data to appear, I place an <input> tag:
<p>Given your configuration, you have <input type=”text” id=”sp_skids” size=”4″ maxlength=”6″ value=”” readonly> skid patches. </p>
Note the id, since that’s the key to publishing new data into the input field.
The button that causes the tab to update is this:
<input type=”button” name=”submit” value=”Update” onclick=”getSkidPatches(‘sp_skids’);”/>
Note that the id of the input field is passed as a parameter in the javascript function call.
And lastly, here is the function that fetches the new data and publishes it:
function getSkidPatches(spu) {
document.getElementById(spu).value = window.skidPatches;
}
Note that the parameter name in the function doesn’t have to match the name in the call. Just make sure that you don’t place quotes around the name (i.e. ‘spu’) or it won’t work!
The variable skidPatches actually gets updated in my first tab thanks to an Apply button calling a function that makes a number of calculations, but that’s outside the scope of this comment.
cheers
S
midtoad says
Following up on my earlier comment, I made the change I suggested I made in the first paragraph that I thought might be needed, and now all my tabs update their calculated data.
@Stanley, the take-away message would be: it’s always worthwhile for us to comment on problems others post, because even if we are off the mark, the simple fact of having to understand and reflect on a suggestion sometimes causes us to think about our problem differently and thus find the solution ourselves.
thanks again!
S
Stanley says
Glad to help and, yes, I live in Tbilisi.
jschatesjscript says
this is a neat looking script and im sure it will fit my needs.. however it currently does not. I am using coldfusion (the part where everyone usually runs away and doesnt want to help), but im just using simple form submission and some of the forms are just html forms. basically I need to submit the form and have it jump to another tab, not including all of the tabs, that is.. jump to a tab based on div id for a search or form submission result and not show the other tabs. I am having a lot of trouble with tab control, and not showing other ones (it shows them all). Yes I can click between them all seperately and everything works just fine, but I want to hit submit on a search form on tab one, have it submit to tab 2, and have everything else not show. I have some if statements that elimate this, but not all of it. Also, before you clear the search results, which there is a button for, I want to be able to just click between all the tabs at will, not showing the other ones, and have the result still be there. I know it is just something funky in the javascript itself preventing this and showing all the pages when i submit the form, because i accomplished this same thing on a crappy looking, buggy tab template called tabtastic before. any ideas anyone? dont be scared off by the coldfusion, most of them are just standard html forms that submit, not even coldfusion. its the javascript itself at some level preventing this.
Stanley says
@jschatesjscript – Does the question posted on the 8th September (scroll up) help you – and the subsequent posts?
Also my own question here might help you further develop/debug what you’re doing:
http://www.elated.com/forums/topic/5083/
jschatesjscript says
@Stanley. Well that stuff helped me to actually click on the tabs and have seperate content per div show, before I wasnt even that far, so we are good there, the first page also loads with just the content of the first div.
However, the form submission is still the problem. Any help would be much appreciated.
I could throw all/most of my code up here. I have if statements to help some of the form and div flow, and this worked before on a much uglier tab program, which was not this one. I know its a javascript problem of some kind, and Im not proficient enough with it to figure out where.
Stanley says
I’m no expert in javascript either, but I presume the action on your form points to the full page address followed by the #divname, e.g mytabbedpage.html#divtwo, so the page actually reloads and processes the search value?
Stanley says
I just did a very quick test to try out what I was thinking above.
I put a dummy search form on my page like so:
At the top of the page I added my form handling script (in my case just to capture the keyword value and assign it to a variable) then within my searchresult div I echoed the variable.
When I entered a search term and clicked submit it displayed the just the searchresult tabContent div with the keyword.
Is that what you were looking to do (except with more complex form processing)?
jschatesjscript says
Yes.
And what script did you modify?
midtoad says
@jshatesjscript:
Replying to your first post – if your tabs display properly initially, but when you click on Submit all of the tabs display as one big page, then your problem is in your javascript. I have found that any errors at all in my javascript cause the tabs to no longer display as tabs, but instead show as a single long web page.
S
Stanley says
It’s been a long time since I put this script together and never really used it in a real situation (apart from the aforementioned test form) but see the link on this page for the javascript I used to link to individual tabs…
http://www.collents.eu/cem/tatep/index.php/jtabs/
I give no guarantee that it’ll work for you, but you can try it.
Good luck.
jschatesjscript says
@stanley 02-Apr-11 12:30.
It thorws me errors: ‘contentDivs[…]’ is null or not an object. like 5 or so of them, different lines.
Also, the item is posting to the other tab, just not jumping over there physically, like i wanted.
aka, i have a search and result tab. the search tab when posted should jump to the result tab, this does not happen. if i click on the result tab, which is the second tab and it says, you need to do a seach first, the form there, WILL work and go back to the first tab, but it need it to work the other way too where the search tab which is first, jumps to result.
jschatesjscript says
I think I have to put the class name of some of these in to get it to work, but the problem i see is i put the class name of the div tags in all of them, and it wont let me click between tabs though. totally stuck here.
Stanley says
As I said it’s a long time since I worked on that so my memory of what it does is a little rusty. As far as I can tell the page structure is the same as in a regular JavaScript tabs page: “tabContent” set as the class on each tabContent div, and an ID which is the same as is shown in your tab menu list.
I’m not quite sure what you mean by jumping over to the other tab – unless you mean simply displaying that tab’s div instead of the one you were currently on, but that doesn’t reload the page to process your form data – the normal operation of the JavaScript Tabs page is that it loads up once and then you click on the tabs to display/hide the relevant tab content.
What I think you want is to retain that instant action but include your search result – but how would you do that? You need to post the form to the same page and have it open up your search result tab.
jschatesjscript says
I think I may abandon this script. Too much javascript to worry about, and for my liking.
Yes @stanley last comment. I do post to the same page and have it open in the result tab, but it does not show. The id thing you mentioned makes sense, I may still try that. The result WILL show if I manually click on the result tab. I had this same whole site in another tab system and it worked good except for some design flaws, one of which I actually solved today, and that is one of the reasons I might abandon this script.
The other reason is, it does not solve one of my original problems, and is therefore not worth it. The other original problem was that (and this is on the old template I used, not this one, but the problem persists on this template), I do a search, it posts to the result tab, and if there are too many results, it just drops to the content, eliminating the tabs at the top and the desired effect.— IS there a javascript thing to eliminate THIS, and a short one if that.
Stanley says
Ok, well as I said at the start I’m no expert in JavaScript – I just hack things around until they work (or give up too).
All I can say is that if you’re posting to the same page and your result tab is opening – but there are no results – then I’d suspect something else in your page is going wrong: it sounds like the javascript is doing its job and the problem may lie elsewhere in your form handling & results display code.
Sorry I couldn’t help you resolve it.
[Edited by Stanley on 04-Apr-11 16:26]
jschatesjscript says
@Stanley –No the results are showing, you didnt fully read my last one or maybe I wasnt clear. The tab isnt changing as it should to the results tab. The javascript is wrong. Nothing is wrong with the form at all. I am using my older template to try to solve this.
However, I have found on this one and the other that, the biggest problem I have is that (and even on this template), if the results tab has TOO many results the page then scrolls downward and shifts out of focus of the tabs which can then be scrolled back up to. I need it to function to jump to divs as clicked or submitted from a a form. But I need it to always start at the top tabs too, even if there are lots of search results. Any ideas on this?
Stanley says
With regards to your page scrolling down to the end when you display a lot of results I think we’re getting a little off-topic here, but maybe this will help:
http://articles.sitepoint.com/article/preserve-page-scroll-position
jschatesjscript says
Yeah.. that didnt do anything at all. I give up.
panos_pap says
I used the code above and it was really very useful to me. But I have a question for you.
Let ‘s assume that I have the 3 tabs created and in the contentDiv of the second tab I want to put a link to another page.
The page that I want to jump to, should have the same interface (the three tabs) but I want from this page to focus on the second tab, not the first which is the default. Is that possible?
..sorry for my english..
panos_pap says
When I say ‘focus on the second tab’ I mean that the contentDiv of this tab has to be visible and the other contentDivs have to be hidden.
jschatesjscript says
@panos_pap. Are you talking to me? I need yes, a form submit that jumps to another tab, or even the ability to have hyperlinks. But when I am on another tab, it shifts focus, the others arent hidden, just showing. Anyone out there that can help would be greatly appreciated.
midtoad says
To learn how to jump to another tab after performing some calculation, just re-read the original article and look at the javascript that sets up the tabs in the first place. The showTab function reacts to a click on the tab’s title bar, extracts the URL of that tab, strips off the # target, and jumps to the corresponding div, using CSS to hide the other divs. In reality, everything is all on one page, just not all visible at one time thanks to CSS. (If you screw up the javascript, then you see all the tabs at once, one below the other).
In the first tab (“#about”), add the following example form with two buttons. One fetches inputs and displays results (and stores the result for display on another tab), while the other button simply jumps to another tab (where the results are displayed).
Here’s the form:
The key thing is that we need a new javascript function that is similar to the showTab function, but instead of fetching and parsing the URL of the object that was clicked on, it is handed as a parameter the URL to use. Here is the new showTab2 function:
Lastly, we need some place in the other tab to put the results:
I tested this and it works for me.
SBrentnall says
Love this article–helped me solve something that’s been bugging me for days.
i’ve run into one snag: how to I create two different sets of tabs on the same page? I’m just learning javascript so I’d appreciate being pointed in the right direction.
Thanks!
matt says
@SBrentnall: Thanks – glad you liked it! I already posted a solution for multiple sets of tabs earlier in the thread:
http://www.elated.com/forums/topic/4717/#post19137
Cheers,
Matt
SBrentnall says
Got it–thanks so much, Matt.
Jason92s says
Great article! One question, and I apologize if it’s already been addressed and I overlooked it, but is there a way to have a specific tab open up via a URL that exists on a different page? For example, could I type in a URL that opens the second tab in the example (The Advantage of Tabs) instead of the first tab? Probably not possible, but just curious. I tried going to: http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html#advantages but it just opens the first tab. Thank you.
matt says
@Jason92s: Yes – see here:
http://www.elated.com/forums/topic/4717/#post18005
Cheers!
Matt
ortizdupri says
So, running into two issues – first of all, here’s the page I’m implementing tabs on:
http://www.kyleconrad.com/freelance/expovision/storefront/hotel-single-tab.html
Issue 1 – can’t get the tabs to overlap the border on the tabcontent divs, so the border never goes away. I know it’s a matter of positioning, but no matter what I do, I can’t seem to make it so that the selected tab appears to have a simple white background in conjunction with the tab display as opposed to separated by a border. Here’s the CSS used on the tabs (as you can see if you view source on that page as well):
Issue 2 – the bigger one. As you can see when you click on the tabs, it loads the content of the desired tab, but none of the actual styling within. I’ve been messing with this for over an hour now and cannot figure out where the error is that’s causing the tab content to not load according to the CSS rules in place – upon initially loading, the first tab appears to follow all of the specifications, but then when clicking over to the next tab, it all goes to shit – specifically the border, the P tags, and the list on the second tab. For some reason, the img places in the third tag works fine according to the CSS class it is assigned, but none of the other rules in place take effect.
Issue 3 – minor, but still confusing – I can’t scroll down on the smaller tabs (such as the first and third ones)? The scrollbar appears on the right, but when I go to scroll, it won’t let me and makes it stay at the top.
Anyone able to help on any of these issues? Thanks in advance.
matt says
@ortizdupri:
Issue 1 – Your tabs look fine to me in all the browsers I’ve tested (FF4 Win/Mac, Safari Mac, Opera Mac, IE9 Win). What browser(s) are you testing with?
Issue 2 – I’m not sure what styling you mean, but the content looks OK to me. If I switch from tab 1 to, say, tab 2 then back to tab 1, then tab 1’s content looks exactly the same as it did when the page loaded.
Issue 3 – The browser scrollbar? Works fine for me in all browsers I’ve tested.
ortizdupri says
@ Matt –
Thanks, yeah I actually went back through and cleaned some stuff up and kind of did workarounds for the issues.
1 – It was initially a problem in Chrome and FF4, but I just used a different method to render the line – a background border in a DIV behind the tabs, and that seemed to work.
2 – my “tabcontent” class wasn’t seeming to affect the content of the tabs when they got pulled up, so I went back through and affected the individual elements – i.e. the p tag and what not – with classes. That seemed to fix my issue that I was having. Definitely not as easy and more of a workaround, but whatever works.
3 – I figured out that it was an issue with Javascript elsewhere on the page, something having to do with a DIV that’s supposed to “stick” to its position. Once I took out that element, the scrolling works fine.
Took some jimmying with the coding and all that, but it seems to all be working now!
matt says
@ortizdupri: Ah, I see. Glad it all works OK now 🙂
Jason92s says
Matt, I’m sorry, I must be missing something here. I made the two changes per this post:
http://www.elated.com/forums/topic/4717/#post18005
My URL to my tab page is:
http://www.csm.ca.gov/csmint/tabs/
If I click on the “test link” link under the “Claims Info” tab it should go to the Documents tab but nothing is happening. I know it’s something simple I’m missing, just can’t figure out what.
Thank you.
matt says
@Jason92s: You didn’t add the 1st code snippet at the end of init(). You added it outside of init().
Also it looks like you’re trying to link to one tab from within another tab. To do this, you’ll need to add click event handlers to your links, as I outlined in this reply:
http://www.elated.com/forums/topic/4717/#post18939
Cheers,
Matt
Jason92s says
Thank you Matt, works great! Really like this script!
matt says
@Jason92s: Great stuff – glad you got it working 🙂
RoryTheRoman says
Hi Matt,
I skimmed the above questions and didn’t see this addressed, if it was, I apologize.
I’m relatively new to javascript and css, but on my site, I have a lot of tabs, so it ends up running into the next line, but starts about halfway down the first row of tabs, making them unreadable. Is there anyway I could either completely separate these rows, or create a scrolling system (something like how firefox deals with tabbed browsing when you have many tabs open)?
Thanks
matt says
@RoryTheRoman: If I understand your question, then you could wrap the whole thing in a div and set overflow: scroll on the div. The user could then scroll left and right to view all the tabs.
It might be better, though, to try to group your tabs into separate pages of tabs so it’s less overwhelming for the user.
Cheers,
Matt
RoryTheRoman says
After trying out the scrolling, and reading through some of your previous responses, I decided it would look better to use nested tabs that you described above. It worked perfectly.
Thanks
matt says
@RoryTheRoman: Sounds like a good plan! Glad you got it working.
Ian says
Thanks for the script.
However I have come across one issue. Not sure if there is a solution.
If I have a Google map in one of the tabs, then only a fraction of the tab is loaded (top left). The JS for the map is initialized in the head after the init for the tabs. If I do it the other way round it makes no difference.
If I put the google map on the first tab all is fine and the tabs are all okay. However I would rather not have it on the first tab.
Is there any solution to this, where another JS is used within the tabs.
Thanks.
matt says
Hi Ian,
Hmm, not sure. You could try putting the call to init() at the end of your markup, before the </body> tag, instead of as an onload handler in the <body> tag?
Ian says
Thanks. But it didn’t work – can’t believe I am the only person with this issue, so will hunt around the net.
Keep up the good work 🙂
PEJK1953 says
I was looking for an ‘easy intro’ to make a set of tabs in an HTML page and this is perfect. I am not looking for rocket science, but this would have taken me days to put together. Thanks a million for a great starter pack. 🙂
matt says
@Ian: It may be that the Google JavaScript is simply incompatible with the JavaScript to create the tabs. Or you may need to call a function in the Google JS to kick it off once the tab is loaded or displayed.
Also check your JavaScript console for errors.
@PEJK1953: You’re welcome – thanks for your comment 🙂
Ian says
Re jumping straight to a tab.
http://www.elated.com/forums/topic/4717/#post18005
I cannot get this to work & wanted to make sure I have the code in the correct place.
The 7 lines should look like (I assume)
Stanley says
@Ian
Did you add onclick to the link you use to jump to a particular tab? I ran into that issue a few weeks ago – take a look at the following page and see the source of the link which is shown on the third tab where it says “Jump to GBP”.
http://www.collents.eu/ge-economy.php
That link is like so:
mrsa says
Dear Elated, I’m working on my websitemakerscript and want to sell it through the internet and would like to use this *tab*-script as mentioned above, but need to know if I may do so, i.e. what about license etc?
Hope to hear from you,
best regards,
mrsa
Asa says
It is cool!
matt says
@mrsa: Fine by me! If you use the code then a credit/link to http://www.elated.com would be appreciated.
@Asa: Thanks 🙂
dsol828 says
Great script!
Question, I have searched but had trouble finding a solution.
What is the easiest way to have the page load on the second tab.
I want to keep my tab order (1,2,3) but load with that second (middle) tab visible.
I’ve seen people changing the JS to allow for url’s with the tab name, but that doesn’t quite seem like the best solution for me.
Thanks in advance for your help!
matt says
dsol828: To display a different tab by default when the page loads, you should be able to change just these 2 lines of code:
Just change the 0 (zero) to the index of the tab you’d like to display (0=first tab, 1=second tab etc).
dsol828 says
@matt
That did the trick! Thanks for the help!
kcran says
I’m having problems jumping to a tab from another html page. The links at at the bottom right side of the index page. I’ve tried to modify the script as shown in earlier posts but it’s not working for me. Please take a look and let me know how to fix. Thanks!
http://rancudo.com/testing/
matt says
@dsol828: You’re welcome 🙂
@kcran: If you just make the 2 modifications shown in http://www.elated.com/forums/topic/4717/#post18005 then it should work.
kcran says
Matt,
I had made the modification from post18005 already. The result is that it goes to the tab but does not load the related div content for that tab but just leaves an empty page.
Here’s the header code from the page for you to examine…
matt says
@kcran: No idea then. That mod works for me. You might have other JS in the page that is conflicting. Try running init() at the end of your page within a script tag, instead of as the body load handler. That sometimes works. You can also use console.log() to log debug messages to the browser console, so you can see which parts of the code are (or aren’t) running.
mfouwaaz says
Thank you very much Matt — this is Just what I was looking for and it works beautifully!
Do you know of a way to remove the hash from the URL? I have to work on that part now. Just trying to tweak the js and hoping that someone else has done it already.
matt says
@mfouwaaz: What URL? The URLs inside the links to the tabs? Why would you want to remove the hashes?
MediumAdPro says
Good script. Thank you for sharing it!
I believe I had it working fine at a point, but I made the page into a Microsoft Dynamic Web Template, and tested it again.
Now I’m getting a result where after choosing a tab, the page scrolls down. In Chrome and Safari it scrolls down to cover the header, on iPhone Safari and IE it scrolls down to the selected tab content…
Any ideas?
The page in question is below
http://traversecityinformation.com/xPHP/TraverseCityInformation/A%20Listing/index_copy(2).html
Thanks for your consideration.
MediumAdPro says
NEVER MIND…
Although 5 out of 6 tabs had tab content on the page, I made the sixth a link to an outside page.
Lesson, don’t take a line and link to another page.
Thanks again!
Alexio says
Love the code for tabs.
Have one question. How do you set the width of the tabs? I have tried to edit the tabcontent class and the only option I have is auto and inherit.
The data on the tab does not fill the whole tab and need to make the tab narrow and not fill the whole screen.
Stanley says
@Alexio
Just another javascript tabs fan passing through here… but I’ll try and help.
You just need to edit the css, but it sounds like something’s going wrong if you say your tabs are filling up the whole screen. Do your tabs look anything like the demo version here?
http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html
If you look at the source code for that page you’ll see the 4th line in the css starting ul#tabs li a {
Just change it to read:
You’ll see the ul#tabs li a.selected line already has different padding set for the selected tab. You’ll just need to play about with these to suit your own preference.
Just a thought but are you trying to edit the css directly in your page file, or through your web browser’s element inspector?
If it’s any help you can do what I do when I want to quickly experiment with changing stuff like this – if you have the Opera browser installed and then right click to view the page source you can make any changes you like in the HTML then click on the “Apply Changes” button at the top of the source viewer then go back to the tab with the page on to see what your changes did. If you refresh the page it’ll just go back to whatever the original settings.
If you can’t sort it out can you post a link to your page?
Hope this helps.
Alexio says
I think I should clarify a little better.
It is not the tab headings however it is the div.tabContent class that I want to modify. I need the tab content frame to be narrower. I have tried to adjust the right margin to make it more narrow and seems to work. However I think there should be a setting to set the width of the content page. It seem s to deafult to 100% width.
Stanley says
Try adding width to the tabContent class, like this (which works on Matt’s demo page):
Alexio says
That seems to work however I am concerned with users having different size windows like they do in our work environment. Smaller windows will reduce the width of the frame and appear to change the layout of the content on the tab. Is there a way to hard code a set width and not a percentage of the visable window width? I am using the tabs on an electronic eform and other content of the form does not fill the width of the screen and is set at a fixed width. I need the tab content frame to match.
Stanley says
Yes, you can just set it to a fixed pixel size instead, e.g.
Alexio says
Worked like a charm.
Thanks alot!
Stanley says
You’re welcome 🙂
Stanley says
Hey Matt, this was the gift which just keeps on giving.
Here’s a shameless plug for my latest effort, javascript tabs full of multi-lingual goodness!
http://cels.collents.eu/
The link at the bottom of the page demonstrates how to open up another tab (in this case the contact tab).
In case you or anyone is interested the site uses a JSON language switcher which works pretty well – no ugly urls and the site appears by default in whichever language the visitor has set as the preferred language in their browser.
I’ve also got it to hide a tab for English readers and show it for everyone else, something I’ll be expanding the use of with this particular site.
TimothyV says
Great work – Thank you!
Sorry but maybe I missed it. I would like to use this for ASP.Net and am trying to figure out if I can switch to another tab from code in the code behind page?
Can anyone please help?
Thank you in advance.
chrishirst says
You can’t.
javascript is client-side and ASP.NET is server-side which runs and is completed before javascript even starts to load.
Stanley says
You can’t? I know next to nothing about ASP.NET but I was bit surprised at that so I went looking. It says here that you can add javascript to your ASP.NET code.
http://ondotnet.com/pub/a/dotnet/2003/09/15/aspnet.html
Is it not possible with a bit of jiggery-pokery, or am I missing something?
(edit) “which runs and is completed before javascript even starts to load” may be what I’m missing!
[Edited by Stanley on 06-Sep-12 17:03]
chrishirst says
Yes you can deliver javascript to the browser, in exactly the same way you can deliver HTML, CSS, Flash, Images, etc. etc.
In ASP.NET the “code behind” runs on the server before the resulting HTML is sent to the user agent.
ASP.NET cannot “switch tabs” without the user agent making another request to the server for the content to be displayed.
pepper116 says
Hi Matt,
A big thank you for creating this script and posting so many helpful responses to questions. I’ve utilized the code on a website that is currently under development successfully but only noticed a small problem today when I put more content in one of the tabs.
The content (just text) runs to a goodish number of lines meaning you have to scroll down the page. I’ve placed a ‘Go to the next tab’ link at the bottom of this text as per your instructions.
This works just fine but unfortunately does not scroll the page up. Because there is less content on in the second tab users have to manually scroll up the page to view it. Not a massive deal i’m sure you will agree (!) but none-the-less not ideal.
I’ve spent a good few hours hunting around this forum and other websites experimenting but have yet to resolve it.
As this is the final tweak to what otherwise is a superb addition to my website I was hoping you would be able to suggest a solution.
Any help gratefully received!!
Thanks in advance.
Alex
matt says
@pepper116: You can use the scrollTo() method to scroll the viewport up to the top of your tabs after switching tabs:
http://www.w3schools.com/jsref/met_win_scrollto.asp
JP says
Hi Matt,
I tried using your JavaScript tabbed content as a crutch to provide translations for article descriptions since the webshop I decided to use does not come with multilingual support. The problem now is that as soon as when I start using the script for a second product, the script does not work anymore but only works for the first product.
To solve this problem I dug all the way through this thread and stumbled over how you explained to use the script with several different tabbed areas on one page. I tried that solution (although it is like a hamster trying to build a spaceship with me – I am not programmer) but did not get it to work. It would also be good if the solution could work as independently as possible and would not need explicit variables to be declared and the likes.
When I looked around further, I also came across using CSS to solve my problem, but that seemed to work even less. Now I am pretty lost how I can actually solve this problem so that I can just add articles and such without having to keep track of what number of variable I call or something. Is using JavaScript even still the proper solution? The only thing I know is that I am pretty lost with this 🙂
Would you have a sixth grade solution for me how I can solve this? You can find the page I am working on under http://comficare.jimdo.com/deutsch/shop/
It would be really great if you could help me sort this out.
Thank you,
JP
Stanley says
JP,
I’m not sure if this will help but here’s a working example of a page with a 2nd set of tabs – you will see them if you click on the “Services” tab (i.e. the 2nd tab – it may display in another language when you land there, depending on your browser’s language preference setting).
http://cels.collents.eu
This example includes translation as well, by the way, and might give you an idea how to structure and translate your own site a little differently.
You can grab the jstab source file by looking at the page source code.
The translation system used is pretty much as is described here:
http://www.mind-it.info/2010/02/22/a-simple-approach-to-localization-in-php/?replytocom=23
Good luck!
JP says
Hello Stanley,
Thank you very much for your quick feedback. I tried using that solution but somehow I could not get that to work either. The tabs were never styled as tabs but only as list items.
I think that is related to the page being hosted by Jimdo and them disabling a lot of script functionalities. I saw a solution by another Jimdo page that works based on jQuery. However, no matter how hard I tried, I could not get it to work.
Here is a link to the page with the working tabs hosted on Jimdo:
http://www.pictoo.be/wall-art/play/lego-vintage-1/#cc-m-product-5526255517
So if you could give me advice on how to implement that, I would be really grateful.
Thank you,
JP
chynawhyte says
This is a great post and I love this tabs example!
Is there a way to make the tabs scrollable? I have quite a few tabs and I’d like the user to be able to scroll to the right or left to get the tabe they are looking for.
matt says
@JP: Looks like that page uses jQuery UI’s tabs, if that helps? http://jqueryui.com/tabs/
@chynawhyte: You could try wrapping the tabs in a parent div using overflow: scroll, or perhaps in an iframe?
radenweb says
hey mate thank for that grate help but i have an issue, for some reason, it’s not switching from tab to tab. I’ve copy the code exactly and it’s not working aim i missing some thing
here the java script
here the html
I’m kinda new to all this stuff i done a short 3 month course on everything and self thought my most of the thing I know.
so too some of you out there out of this may sound like a stupid question but please help me.
NathanS says
Hi,
I’m making a page with quite a few tabs and they go over the page width. How do you handle this elegantly? Here’s my code–(some of the <div>s are empty cause this is a proof of concept for now but they will be filled in eventually).
Thanks a ton in advance!
salmanmdz says
I dont now how to move to the next tab
coz i have too many lines i my page so I want to use link or button to go to the next page…
I tried this But It does not work…
<p><a onclick=”return showTab(this)” href=”#tab2″>Go to the next tab</a></p>
If any one know the answer please reply
chrishirst says
showTab(this) is simply going to show the same tab as you are clicking on, because the key word ‘this’ is a reference to itself.
salmanmdz says
Thanks 4 your reply chrishirst…..
But I want the exact answer How to get it…..
pls someone give me the answer…
[Edited by salmanmdz on 05-Jan-14 20:32]
chrishirst says
And the remuneration for this contracted work will be??
[Edited by chrishirst on 20-Mar-14 09:39]
lydias says
Hi Matt–
thanks so much for this script—I looked into a lot of ways of adding tabs and this is was the most flexible. I was able to get them to look exactly as I wanted.
My only problem is getting the page to load with a specific tab open. I’ve updated the script with the mods you mentioned to @mashdot, but it still doesn’t work.
If I paste http://www.ghs.com/events/eelive_2014.html#kiosk
the page still loads with the first tab (#stage)!
I saw in another post that someone else had trouble with this and you suggested other JS running on the page could be conflicting. We have analytics and tracking JS that’s included in the footer–could this be the source of the problem?
nirajknir says
Can we assign the keyboard shortcuts for that TAB 🙂
Need yours Help on that
-Regard
Niraj
chrishirst says
http://www.w3schools.com/tags/att_global_accesskey.asp
nirajknir says
Its Highliting the TAB but it is not able to open the TAB
chrishirst says
Use the onFocus event (http://www.w3schools.com/jsref/event_onfocus.asp) to activate the tab then.
mitz85 says
Hi,
I managed to implement this tabs template successfully on my test website.
However, when trying to implement this on my actual site, the three tabs show at once and don’t seem to hide regardless of clicking on another tab.
Please see link below to understand what I mean…
http://www.on-protein.com.au/index.php/categories/protein-powder-supplements.html#usage
What baffles me is that I’ve used the EXACT same coding in both websites, which are both hosted at the sample place and with the same coding even in the <head>. I’m using magento 1.7 and don’t know what could be wrong.
Any help is appreciated. I’m trained in html but quite new to javascript and css.
Also, if anyone knows, why does the #usage keep appearing at the end of the URL?
chrishirst says
In that source code I don’t see anywhere that initialises the script, OTHER than a <body> tag that is in the WRONG PLACE
And is going to do nothing at all.
Lars Rasmussen says
Hi
I have come across some code which uses this way of making tabs. I works fine, but i have been assigned to make som ajustments on it. When there is nothing to show on a tab then the tab should be non visible.
I have made the showTab() return another class if it is to be non visible. It works fine, but when the user then set something so that the tab should be shown, then it doesnt, though it gets the right css style. I have to reload the whole page to make it work. Is there anyway to make this work so that you can control whether the tab should be shown dynamically
thanks in advance
Lars
chrishirst says
Javascript has no way of determining if a particular element has or does not have ‘content’.
mfouwaaz says
Hi Lars
You do have a mechanism for the user to set something for the tab to be shown, even though the tab is invisible at that point, right?
I am thinking of AJAX and using the XMLHttpRequest object to refresh showTab() at that point. If that works then your tab should become visible. There seems to be a little bit of work to it but I think it should work.
Pardon me, I have not tested this but am just shooting my head off. I don’t even have a system here. Obviously you know better on the subject but it maybe worth a try.
Good Luck!
alastairbrian says
Very helpful tutorial. I have learned many new things from here about CSS and JavaScript. Thanks author.
bkrish says
This is an awesome script and very helpful to me. I have a question though. How do I enable keyboard navigation to the tab ? i.e, hitting tab will move focus between tabs. I tried using accesskey attribute in href element. But it didnot show the focus on link.
Can someone help me out please?
Alexio says
Used this several times, Great code.
Now have new twist on this. how would I be able to make a second tab password protected? Meaning need password to be able to view content on tab.
chrishirst says
What would be the point??
Anything ‘password protected’ with javascript would require the password to be in the page source code, or require a round trip to the server.
Either that or the whole set up would require recoding using AJAX.
zeek69 says
This code is great, the only problem I have is that when the page is displayed, it is only displaying 2 inches of the pages in the tabs with a scroll bar. I can’t see anything in any of the scripting that specifies a page height.
Zeek
chrishirst says
Change the tab height value in the style sheet.
zeek69 says
Chris,
There was no height definition in my CSS. I saw that shochberg had height in his CSS at 60, so I added that to my CSS at 600, but it still is only a couple of inches. Here is the line I added it on.
div.tabContent { border: none; padding: 0.5em; color: #007777; background-color: #f6f6ce; height:600; }
[Edited by zeek69 on 18-Nov-15 07:50]
chrishirst says
600 what?
To be applied correctly, a height value, along with all other dimensional properties require a valid dimension identifier, (%, px, em, pt etc). A value without that means the browser has to ‘guess’ what you mean.
What they then usually revert to, is the ‘height’ that would nominally be applied to inline level elements, ie; the height of the element content box, the padding and margins are then added to giver the overall ‘box height’, and as you are “including” an iframe with an external page, the ‘content height’ is therefore only made up from the iframe top and bottom margins, padding and border values, because the external document has no width or height that the CSS rendering engine can use.
remaley says
This was very helpful, thanks! I’m sort of new to this, could somebody help me apply transitions between tabs when it shows content? Thanks.
chrishirst says
The purpose of the tutorial is for you to learn how to modify it to suit what you want.
http://forum.jquery.com/topic/how-to-animate-content-between-tabs
Don’t forget to come back and add your solution to this thread.
camdaw says
I seem to be having an issue with the script. I am new to web design and I can’t identify the issue. I have copied the CSS portions as provided and have expanded the HTML portions so that I have six tabs. As soon as I go past six something happens so that the content for each tab is displayed on all of the tabs. Any suggestions?
chrishirst says
” Any suggestions?”
None whatsoever.
Before anyone can offer the remotest possibility of useful ‘suggestions’ we need to SEE the problem!
camdaw says
Lesson learned. I found out what was wrong with my last question. I have several more questions.
First, when I resize my browser the ul elements get out of whack and no longer line up with the tabcontent elements. As you can see I have used vw to make the text size relative to the viewport, but I am not sure how or if can use it for margins and padding.
Second, I would like to make it so my tabs line up with the edges of the tabcontent elements. Meaning, if I have six tabs, I would like the left edge of the first tab to line up with the left edge of its associated tabcontent, and for the right edge of the last tab to line up with right edge of its associated tabcontent (all while making sure the interior tabs are all equally spaced).
Thanks!
chrishirst says
Give us a clue and we will try to help.
camdaw says
What exactly are you looking for by way of clue?
chrishirst says
As I said in the previous post … … We need to actually see the problem.
Just the CSS rules are of no use to recreate your problem.
EVERYTHING is required, the CSS, The HTML it is applied to and any images used as structural or decorative elements.
As I keep saying to many people who post THEIR problems with Elated tutorials, we need to see YOUR code preferably as a URL so we can view and test ‘in situ’
nnkuba says
Matt, thanks for the tabbed page tutorial.
I would like to go a little further. Suppose I have a form even on the same page, and when I submit, I would like to return to the same tab. How could that be archived?
chrishirst says
See my reply following mashdot’s question dated 08-Sep-09 17:35
tmkramer says
for camdaw:
Your fixes to the font size helped me a LOT! I am not a coder, just google and play around till it works.
So I am only having one issue now that I’m hoping someone can hjelp me with, and remember, I really have no clue what I’m doing so you may need to give em more details than you think you need to.
So, my text is shrinking and expanding beautifully based on the page size. LOVE IT! BUT, I have images embedded as well that ARE NOT changing size.
How do I fix them? This is how they are currently in my code, so the top part is the label for the image it is shrinking and expanding based on page size, but the image (with link to a document) that I had centered below it using the is not changing:
 3rd QTR FY16 DeCA
<br />
   <a href=”#” onClick=”MyWindow=window.open(‘https://www.milsuite.mil/book/docs/DOC-306188’); return false;”><img src=”https://www.milsuite.mil/book/resources/statics/1737745/DeCA3rdQtrFY16DashboardThumbnail.jpg?a=1472744998785″></a>
THANKS!
[Edited by tmkramer on 15-Sep-16 11:30]
chrishirst says
first of all … Do NOT ‘centre’ things using non-breaking spaces, as it is just ‘guesswork’ use the appropriate properties.
And for images:
http://www.w3schools.com/css/css_rwd_images.asp
tmkramer says
Is there an alternative to divs in the tabbed content?
I’d like to add something like this:
<div id=”follow” style=”float: right; width: 48%; margin-top: 40px; padding: 0 0 4px 11px; border-left: 1px solid #ccc;”>
to divide sections of the page and then float left and right.
When you add this to the content it creates a divide and moves everything below to the next tab. I’m attempting this on the last tab of my page, but it still breaks away from the content.
chrishirst says
“it creates a divide” Yep that’s why they are called ‘div’, shorthand for ‘division’ (or ‘divider’)
You can use whatever element you prefer or need.
But first, … Learn the difference between block level and inline level elements, how to use the ‘display’ property and floating/clearing elements.
https://www.w3.org/TR/CSS2/visuren.html
Plus how to use positioning to overlay/overlap elements, in the same X-Y space.
[Edited by chrishirst on 26-Sep-16 06:01]
emoreau says
Somebody has an example of multiple section with tabs on the same page? I just cannot seem to get it!
ie:
some text
tab1 tab2 tab3
other text
tab4 tab5
yet other text
ianhaney says
Hi
I am using the script in a website I am building and am just wondering how do I put a link to the tabbed content in my nav menu in my includes/header.php so when a user clicks on a link in the nav menu, it opens the tab content on the php page I have the tabs and it’s content on, the url is https://www.broadwaymediadesigns.co.uk/sites/kmsurveys/home-condition-surveys.php
The links are in the dropdown of the main heading Surveys
Thank you in advance
chrishirst says
” it opens the tab content on the php page I have the tabs and it’s content on, the url is ”
READ the whole thread … There at least three posts explaining this.
ianhaney says
See post at http://www.elated.com/forums/topic/6299/
[Edited by chrishirst on 02-May-17 12:22]
anhr says
I took the ideas from this article and wrote my own code. Please see my cross-browser JavaScript code: https://github.com/anhr/Tabs.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: http://anhr.ucoz.net/Tabs/
Ruan says
Nice article, thanks for sharing! I have build one tabs component, check it out: https://jsuites.net/v3/javascript-tabs
Aad Vlag says
Nice article, thanks for sharing!
Is it possible to start with another tab then Tab1?
I’am asking this because when I reload the page it must return to the the same tab again…
Is that possible?
Many thanks