Even more DOMtab updates!
Following feature requests in the comments below via I updated DOMtab once again. You can now link to tabs via the URL and get previous and next links!
DOMtab is a JavaScript that turns a list pointing to different content sections (like an FAQ) into a tabbed interface. Users without JavaScript will still get all the functionality, except they will have to scroll the page. DOMtab automatically removes any “back to top” links when the tabbed interface can be achieved.
- The look and feel is completely styleable
- You can use as many tabbed menus in a page as you wish to use.
- Creation of a link that shows all the sections – for example to print out the page.
- Automatic highlighting of tabs via anchors in the url (this also allows to use forms in the tabs – just add the anchor name to the action) new
- Previous and next links for navigating through the tabs – in case you want to have a step by step approach new
February 28th, 2006 at 5:28 am
November 3rd, 2006 at 11:37 pm
February 20th, 2006 at 12:14 pm
Very impressive. Certainly how it degraces nicely when js is disabled. All content is then shown as a nice page, and the navigation tabs still work exactly as supposed. I can imagine this can be used very well in some cases. Thanks (again) for sharing this Chris.
February 22nd, 2006 at 2:49 pm
A dumb question but what needs to be changed if you want to create another set of navigations on the same page further down using the same code?
February 22nd, 2006 at 3:32 pm
ermmm…. Isn’t that exactly what is happening on the demo page ?
February 22nd, 2006 at 5:53 pm
Doh – sorry – I was looking at the navigation at the top of this page. yes the demo does it for me :)
February 23rd, 2006 at 2:17 am
Chris
Is it possible to separate the tabs from the div text so it can be placed elsewhere?
DazP
February 23rd, 2006 at 10:16 am
There is a tried and true development methodology called “trial and error”. Why don’t you just add content in between the sections and see what happens? I did that now on the demo page :-)
February 23rd, 2006 at 12:10 pm
Using the tried and true methodology ;) I cant get the content to appear if I put the div content in ‘absolute’ positioning. Should it work doing that?
Edit: No idea what you are trying to do, so I cannot help you there. Without a URL we might as well read tea leaves.
February 23rd, 2006 at 1:04 pm
I’ve sussed it. I was referring to the domtab.js incorrectly. Thanks Chris.
February 24th, 2006 at 6:29 am
I’m probably missing something very obvious, but what is the point of the back to top links in the demo page?
February 24th, 2006 at 6:39 am
Turn off JavaScript and you’ll see. The page would be a lot harder to use without them. DomTab removes them in the JS version.
February 24th, 2006 at 10:41 am
nicely done indeed and will be useful time-and-time again. P.S. you have one small error, an unclosed link tag (line 45), on your demo page that is stopping it from validating. thanks for sharing.
February 26th, 2006 at 5:54 pm
i don´t understand if i can use dowtab in my blog
February 27th, 2006 at 8:03 pm
Is there any way to make another tab than the first one “active” by default? I’d love to link to a certain tab from an external page by using “page.html#style”. I guess it’s some extra work for the initTabMenu function … Has anyone scripted this yet?
February 28th, 2006 at 12:46 pm
The DomTab is really an excellent script. The only problem I’m having with it is, if you place a submit button in one of the tabs and you submit the page, it shows the default tab and there doesn’t appear to be any way of setting it to show another tab with having to click on a link.
I guess this is really the same question as the post above but I thought I’d outline a practical situation where the functionality would be really useful!
February 28th, 2006 at 1:09 pm
Ok Ok, I will add the tab highlight via anchor functionality again. Give me some time, I need to finish the book chapter for my publisher first :-)
March 1st, 2006 at 12:12 pm
Looks great for a (fake) multi-steps form!
March 1st, 2006 at 2:49 pm
Aaron showcased a very similar tabbing function.
March 1st, 2006 at 2:58 pm
@Michael: Yeah the idea is not new, after all I had published a similar script 2 months before Aaron.
However, I just realised that I never really looked at this one, maybe because I didn’t really get hooked by the title “Let them eat cake”. A lot of tutorials get lost because writers or editors get too creative with the title. I’m sure there’d be a lot less email noise about Flash and web standards if Flash Satay would be called “embedding flash in a standard way”…
March 1st, 2006 at 5:42 pm
I agree about the poor, but cute titles. That probably won’t ever change.
While testing your script, I noticed that if you click on the title text (within the <h2>), it increases in size and shifts downwards. Pretty disconcerting.
A fix is to not enclose the title text with the anchor element:
<h2><a name="t1" id="t1"></a>Proof 1</h2>
Editing the markup this way doesn’t seem to disrupt the function, while removing the shifting. Empty elements aren’t invalid in HTML 4.01. (For XHTML, they’ll have to be closed.)
March 1st, 2006 at 11:50 pm
@Michael: The other option would be to simply change the CSS to not apply that to the headings. I’ve done that in this update.
March 3rd, 2006 at 6:04 pm
Great script! I tried playing around with this to get the tabs to display vertically (on the left side) but it caused a wild mess! Being new to this I am sure I am not accounting for something.
I’ll keep poking around at it and check back here if anyone’s got any ideas or hints to provide.
March 4th, 2006 at 6:27 am
Cool script! I created a similar one here: http://www.barelyfitz.com/projects/tabber/
It’s always fun to see different approaches and features!
March 8th, 2006 at 10:28 am
I was searching for a long time. No I have found!
Thanks a lot. I will try to implement it and if it’s working ( i think it will… ) I will donate ;)
Regards,
Markus
March 10th, 2006 at 9:51 pm
Hey! it’s nice, but have a bug. Look – #top
When in adress is id (#top) and i refresh the page div class .domtab have a display:none;.
edit Why would you link to top when JavaScript is available?
March 12th, 2006 at 2:37 pm
How can I avoid that DIV elements inside a content-DIV remain hidden?
Thanks.
March 15th, 2006 at 9:18 am
A small bug report …
On line 153 you assume that the first tab in the list is the first tab to be shown. That breaks if you add another link as the first in the list that hasn’t got a target on the page.
And you could add:
hrefHasId:function(href) {
return /#/.test(href);
},
getIdFromHref:function(href) {
return href.match(/#(\w.+)/)[1];
}
to the helper methods section since you use theses two quite a lot… ;)
March 15th, 2006 at 9:22 am
Oh and I’d like a way to reset the tabs when I’ve clicked the “show all content” link.
March 20th, 2006 at 8:40 am
Nice script. Since you already enabled the ability to link directly to a tab by appending the anchor, is there a way to set the hash in the URL when selecting a tab without the page refreshing? It would enable bookmarking of a certain state.
If I use windowlocation.hash=id in your showTab function, it obviously jumps to the anchor…
March 27th, 2006 at 5:24 pm
I am having difficulty changing the color of the previous/next links. I thought it would be as simple as adding
color:#000000;
to ul.prevnext (or the other two related css categories), but it’s having no affect. Can somebody tell me where i’m going wrong?
March 31st, 2006 at 6:10 pm
That’s only example. I use this script on my blog for menu. I can’t link for comment or whatever because then main div is hidden :/
April 3rd, 2006 at 4:36 pm
Great resource!
One question, how can I know which tab I’m currently in?
I have tried various method calls from domtab.js without much success
Edit I don’t know what you mean? And I removed the URL pointing to a site that has nothing to do with the topic at hand, please don’t use this as a quick incoming links generator.
April 3rd, 2006 at 5:13 pm
don’t worry about my last request.
I used the anchor onfocus() to get the current tab name so I could populate the hidden form element I needed, thanks!
I have the domtabs working beautifully loading iframes and redrawing dynamic images, will give you the url if ur interested..
April 3rd, 2006 at 5:16 pm
gosh, u r suspicious (I don’t blame you!) but I thought the uri was just a sort of contact point, sorry..
April 8th, 2006 at 4:08 pm
Do you know why it breaks in IE/Mac 5.2? I know it’s tragic…
April 14th, 2006 at 3:57 am
Hey Chris,
when in the url is an anchor to an ID (eg #comments) container div is hidden…
What’s happens?
It’s a shame!
April 22nd, 2006 at 12:11 am
Anyone for fix this bug?
Blah!
April 22nd, 2006 at 12:26 am
Lizhard you have a URL that shows that problem?
It seems a problem of your HTML not the script…
http://onlinetools.org/tools/domtabdata/#style works here.
April 22nd, 2006 at 10:33 pm
I was wondering what I need to do to set a cookie for tab persistence? I would like the last tab clicked to be displayed on returning to the page if possible.
Thanks!
April 26th, 2006 at 2:42 am
Thanks for reply Chris..
Try this please:
http://nuovo.sambenedettoggi.it/2006/01/13/norme-di-sicurezza-gli-albergatori-chiedono-una-proroga/
All works fine.. But if you add an anchor at the end of the URL, main div is set to visibility: hidden
Thanks for your support
Edit I see no problem:
http://nuovo.sambenedettoggi.it/2006/01/13/norme-di-sicurezza-gli-albergatori-chiedono-una-proroga/#tab02
Do you mean the browser scrolling down to the tab? If you want to stop that from happening you need to add a
domtab.cancelClick(e);
To the checkURL method.
April 26th, 2006 at 4:14 pm
Wow, Chris thanks for your very fast response…
Try with this:
http://nuovo.sambenedettoggi.it/2006/01/13/il-foglio-delle-balle-maccheroniche/#comments
All appear hidden… i don’t why
Thanks
April 28th, 2006 at 3:33 pm
Pretty nice. Doesn’t work in ie5 mac, however (a dead browser, I know, but its sort of a good indicator for me of how robust a script is). I have instead been using the tab tool from Dynamic Drive — not that it does not have its own problems :-)
I plan to use something like this on http://starchatter.blogspot.com
April 30th, 2006 at 6:42 am
Hi Chris,
I have the same issue as LiZharD on one site I am developing. Either trying to bookmark a particular domtab or say opening a domtab in a new tab on Firefox, all domtab divs are hidden. If I refresh that new tab, all of the content flashes for a second but then gets hidden. But then if I click on a domtab, everything shows up as it should.
I have tried doing all kinds of things the past few hours to get it to work but it does not. I am not sure if this makes a difference but the divs I am hiding have more than just paragraphs in them. They also have other divs and what not, so the pages are more complicated than your example page.
I can send you a url in private if you would like.
Thanks in advance, looking forward to your book.
Stephen
May 2nd, 2006 at 8:27 pm
Great script! I am thinking about trying to use this as a small product widget for a client that I am currently working with… is there an easy way to set up looping so that the initial behavior would load like a slide show… any mouseover event would stop the looping and return the tabbing functionality. Just a thought. I’ll see what I can come up with on my end, but wanted to throw this out there in case anyone has already come up with a solution to this effect. Thanks again!
May 3rd, 2006 at 3:44 am
Any ideas? Nothing here?
Hey Chris your script is buggy, please fix it…
May 4th, 2006 at 3:53 pm
I left an earlier post about trying to somehow set up the script to loop through the tabs in a slideshow fashion. Here’s where I currently am with the script:
http://www.rule13.com/bumtags/widget.html
I am trying to get this to loop through in a slideshow fashion when it initially loads… but retain the current behavior when a user interacts with any part of it. Does anybody know how to set this up (or if it’s even possible without a major rework of the script)?
Seems to me that it might be possible to tap into the next/previous behavior to accomplish this technique… but to be quite honest, I’m at a complete loss.
Thanks for your time/help.
May 10th, 2006 at 1:30 pm
hi, thanks for the script.
is there any possibility to skip to a certain tab?
i tried it this way : < a href = ” #service “> skip to service < / a >
but that’s not working for me. i have to reload the site to see the tab.
thx,
torsten
May 10th, 2006 at 2:11 pm
hi there,
great script!
is there any possibility to skip between the tabs?
i tried it with a link to the anchor but this works only on page-reload, not instantly.
please help.
thanks!
May 31st, 2006 at 2:26 pm
Hi, I love this script…
But i’m having some dificulty to come back to the same tab after a reload or a submit.
If i’m in tab2, for exemple, and do a submit, the page returned is to tab1.
I think i should use the
Could someone help me?
tks.
Alexandre (Brazil)
June 5th, 2006 at 5:00 pm
Hi!
May I say that it is wonderful script.
I have tried to use it in an atlas like situation where each tab contains many images.
however, untill all images are loaded the page is not functional.
Can you help to get the front page or first tab whether or not other tab contents have loaded.
Try to see the URI that I have provided to see the problem.
Thanks.
Premanshu Bhushan
June 6th, 2006 at 10:45 am
Mee asked “How can I avoid that DIV elements inside a content-DIV remain hidden?” I ran into this problem too. It’s this that causes the problem “document.write(‘div.domtab div{display:none;}<’)” but I didn’t dare take it out, so I added an inline style div.domtab div { display: block; } which has fixed the problem for me. Works in IE6, Opera 8 & FF1.5.
June 6th, 2006 at 10:46 am
I meant to ask in my last comment – how would I do rounded corners for the tabs? Christian Watson’s done them with DOMtab using Nifty Corners, but I don’t want more javascript. Thanks
June 22nd, 2006 at 7:27 pm
I’m having a hard time getting a particular tab to be open by adding #foo to the URL, and before I dig too deep into this, i thought i’d check… does this feature work when there’s multiple tab groups on a page? My guess is no…
June 26th, 2006 at 9:46 am
Hi, I’m using domtabs with asp.net, it works fine except one little bug. I generate 2 datagrids and put them in seperate divs for domtab. One of the grid display a ghost entry, after the table I see a cell value like row 5 or 6. It’s just below the div and it’s nt visible in the source view. I disable domtab and it’s fine but when I use domtab I get this strange thing, a ghost text which is not in the html code. This is an IE bug may be, Firefox doesn’t display this ghost text. Any ideas? Thanks.
July 13th, 2006 at 10:09 am
For some reason the onclick event handler doesn’t work when used on a tab eg:
<li><a href="#tab1" onclick="function()">Show Tab 1 and execute function</a></li>Does anyone know any ways around this?
July 19th, 2006 at 7:15 pm
I setup the Action=”" attribute of my forms to include the anchors – but this only works on Firefox. Is there a workaround?
August 9th, 2006 at 3:41 pm
We would like to use domtab on our osCommerce site. Is that okay?
Ben
August 15th, 2006 at 9:05 pm
This is nice! I’m wondering how it reacts from a SEO standpoint. It’s my understanding they have no problem reading all of the content, is that correct?
September 4th, 2006 at 5:12 pm
Chris,
I am trying to put domtabs above the entries on my theme in wordpress. For some reason the tabs won’t run. Just wondering if you had any ideas why this would be going on. I have the javascript installed correctly.
September 7th, 2006 at 9:52 am
All,
For those people looking for a way to auto-default to a tab. e.g based on php variable. Do the following;
Relate initTabMenu function with the following;
—————————————
——————————————–
In your html simply hardcode or autoset one of the domtabs class to active;
l:)
September 14th, 2006 at 2:29 am
I noticed that on your test page if you put a hash mark at the end of the URL: …/domtabdata/#
this prevents the second set of domtabs from showing. Any thoughts on how to fix?
September 27th, 2006 at 11:52 pm
I had the problem, and I think others had the problem, of div’s in the rest of the page disappearing because of the domtab when there is a # in the address of the page.
I don’t know why this happens, but I seem to have tracked it down to whatever goes on in the function checkURL.
As a temp fix, I changed the /#/.test(loc) and similar tests to /#t\d/.test(loc)
As far as I can tell this should be ok as long as the anchors used in your domtab boxes are in the form of tn where n is a single digit. (as is the case in the example)
So far this modification doesn’t brea the functionality of domtabs in ff… will test in opera, ie and safari/konqueror soon.
October 11th, 2006 at 2:41 pm
This is a fantastic little script and is just the thing I have been looking for to provide tabbed content for one of my clients…
You have stated that you wanted to be contacted before anyone uses the script for commercial purposes, so here I am :)
Could you please email me to let me know more?
Cheers and keep up the good work,
Andy.
PS – What will the book be about, JavaScript or something else?
October 12th, 2006 at 6:24 am
Loading a google map (linking the map scrips and putting a div on the page) in a hidden tab just gives a blank gray/tan box with no map in Firefox and Netscape on the pc.
If it’s loaded on the first page when the page initially loads, it all works.
This problem does not seem to affect IE6 and Opera. Everything works fine.
Any Ideas?
- Thomas
October 14th, 2006 at 12:59 am
I’m dealing with the identical issue that Thomas D. is. The Google Map doesn’t like to be in a div that’s initially set to display: none. There are a boatload of comments at the Google Map group about how to fix this by “doing a map.checkResize()” but alas, no clue as to how to actually implement it. This tab script is just a brilliant way to present information but the Google Map ruins the whole thing. sniffle sniffle
October 14th, 2006 at 3:22 pm
I’ll work on this one after the weekend. I think we simply need to load/reinitialize the map after the tab has shown the content.
More thoughts?
October 14th, 2006 at 5:04 pm
I temporarily removed the document.write in the head of the document (which hides the initial flash of content) and the Firefox problems persist, albeit intermittently but nonetheless, not good. (It becomes very sporadic/spotty that it’s impossible to figure out what’s going on.) The “map.checkResize()” solution appeared to be a little involved but was pretty much pegged as THE solution. I just wish I understood it. :-(
January 3rd, 2007 at 5:26 am
Cool script. I added support for remembering the current tab from page request to page request. Uses cookies. If anyone is interesting you can find it here:
ciole.net/misc/domtab.js
February 8th, 2007 at 11:07 pm
Awesome code Chris. It works great for me in CRE Loaded (a version of oscommerce)….but it doesn’t display correctly in IE7? If I add the code to hide the content on the initial load, it doesn’t display the first tab content. I have to click the tab to view the content…normally, not a bad thing, but none of the other tabs work.
If I omit the initial “hide” code then all the tabs are displayed at once.
This only happens in IE 7 and I can’t figure it out. I don’t know java all that well…but I think it might be my html.
Any thoughts?
February 23rd, 2007 at 11:56 am
Is it possible to “cascade” anchors?
I would like to have a link that does the following;
a) jumps to a given Tab
b) jumps to another anchor in that Tab
Maybe something like #page5,item3 ??
Thanks :-)
February 23rd, 2007 at 1:35 pm
I think there is a small bug…
I have setup 4 Tabs and I’m using the prev/next buttons.
When I click on Tab 4, the next button appears, and if clicked generates a js error.
Is it really a bug or am I missing something?
February 23rd, 2007 at 2:29 pm
Sorry for the post bombing :-)
Is it possible to have inner div’s?
I mean, having a DIV inside a TAB.
I can’t seem to get ir working, the inner DIV never shows it’s content :-(
February 28th, 2007 at 2:43 pm
One way around the divs inside a tab from being hidden is to do the following:
1) Each div that is a tab, give it a class, say “tab”.
2) In the sample script to prevent the flash of unstyled content, reference that class, like this:
document.write(‘<style type=”text/css”>’);
document.write(‘div.domtab div.tab{display:none;}>’);
document.write(‘/s’+'tyle<’);
March 2nd, 2007 at 2:10 pm
Anup,
Tried and DIV gets displayed.
However, the prevnext buttons still appear.
Can this be fixed?
March 11th, 2007 at 3:57 pm
I’m attempting to add a scrolling div to a tab. I should be able to do this if I understood better how to, or where the method you show for an inner div should be added.
Is this to be added to the script as a function? I assume I need to add a class to the CSS file for the scrolling DIV. Correct?
document.write(ââ¬Ëââ¬â¢);
document.write(ââ¬Ëdiv.domtab div.tab{display:none;}>ââ¬â¢);
document.write(ââ¬â¢/sââ¬â¢+ââ¬â¢tyle
Thank you
April 6th, 2007 at 4:58 pm
I believe I have too many DIV’s with ID and Class attributes in between the
Can someone please show me the correct syntax for switching tabs manually.
Is it something like:
domtab.showTab(…what’s the rest?
It’s urgent, please help…
Thanks,
Thomas
April 30th, 2007 at 4:33 pm
It strikes me that the whole problem people are having with with divs is down to the very broad selector that it uses for defining a tab body which selects nested divs as well as top-level ones. It’s effectively ‘div.domtabs div’ when it should really be ‘div.domtabs>div’ or ‘div.domtabs div.tab’. The example site neatly avoids the problem by doing without divs, which is not very practical. Unfortunately, DOMtabs uses an element name rather than a CSS selector to choose the tab bodies. That’s easy to deal with in Prototype, but we don’t have that luxury here. So, Chris, any chance of a minor retooling to free up this vital functionality?
May 8th, 2007 at 12:58 pm
Hi Chris. I’m really keen (it’s bordering on urgent, actually) on being able to create links inside my tab-sections linking to other tabs. Is this possible via a (nasty, I know) hard-coded, inline event handler? If so, could I get a quick code snippet as an example? I’d be even happy to shoot a few bucks through your donation link for your troubles. I’m also interested in the above commenters’ problem about getting a Google map to display in one of the tabs (eg. being able to trigger the map.checkResize() function when a tab is switched). I havent played around with this problem much yet, but any help would be appreciated. Love your work :)
May 28th, 2007 at 11:00 am
Hi, just a comment, i think there is a bug when i use only keyboard for navigation. When I come to a tab and activate it, the next focused link should be a link inside the tab or a link to go back the the tab element itself otherwise i had to go trougth the all document to look at the next tab.
The next and prev tab option is good for that but it’s the same problem when i activate the next or prev tab link, the next focus must go at the top of the current tab.
June 18th, 2007 at 6:48 pm
This is great! I would add some javascript to add/delete cookies for each tab, that way an end-user can remain on the tab when refreshing the page or coming back to it.
SilverOrange has an example at:
labs.silverorange.com/archives/2004/may/updatedsimpleJune 18th, 2007 at 9:57 pm
Oops, I meant to say… use cookies much like tabifier does which can be viewed at
http://www.barelyfitz.com/projects/tabber/June 19th, 2007 at 9:22 pm
Help, please.
I can get the script to add a cookie to the browser from within the “showTab:” area (setting a cookie with the content of “domtab=id” when clicked). But where would I read and test the cookie and how would I set the tab based on the id? I’ve tried using an “if” test in the “initTabMenu:” area to try and set the domtab.cssjs with that cookie value (i.e., the id) but it fails because the following lines are looking at the first element in the links array:
thismenu.currentLink=links0;
domtab.cssjs(‘add’,links0.parentNode,domtab.activeClass);
…any ideas on how I might be able to accomplish this task of retaining the state of the selected tab?
Thanks in advance.
June 19th, 2007 at 9:47 pm
Ah, this always happens to me, as soon as I post a question or statement for help, my brain kicks in to high-gear and finds the solution. Anyway, I posted it on my site at:
http://www.matthewmoore.info/domtabs/domtab.js
Most likely it’s not the cleanest way to do this, but it works.
Here is what I did:
I’ve added some functions to handle cookies (lines 9-37), some new var’s to store the cookie data (lines 147-179), some logic for setting the current tab (lines 172-186), and the code to set the cookies (lines 245-247).
Please let me know what you think.
June 25th, 2007 at 10:30 pm
All I was looking for was a simple code that would let me click on a word and then the content would change. Literally, I wanted to have one bar that had links in it and when you clicked on those links the content below would change except without having to load a completely new page, like with your program. Is their a way to modify the script to do that, as well with keeping the previous and next buttons. I couldn’t figure it out because I don’t really know javascript. Thanks!
June 27th, 2007 at 4:12 pm
Hi,
I keep getting an error when switching tabs, it only happens every now and then and I’ve only noticed it when using FF2. My Firebug plug-in gives me this error:
elm has no properties
changeTab(null, 0)
showTab(click clientX=0, clientY=0)
do{elm=elm.parentNode;}
The above is pointing to this in the js file:
changeTab:function(elm,state){
do{elm=elm.parentNode;}
while(elm.nodeName.toLowerCase()!=domtab.contentElements)
elm.style.display=state==0?'none':'block';
},
Any ideas, on what’s going on here?
Also, any chance I could get you to add cookies in to your next release (so that on a refresh the last tab selected is in focus), with a option to turn them on or off?
July 17th, 2007 at 4:52 pm
Hi,
I’ve been working with your domtabs for the past few weeks and it’s been fun as well as challenging (I’ve run into some problems). Today I was spending some time reading jquery.com’s cookbook section and they provided a link to a javascript validation tool called JSLint (jslint.com) — I passed in your Domtab code and it returned 35 problems. Now, I don’t know how valid this is but it’s worth looking into.
July 18th, 2007 at 7:56 pm
How can I avoid that DIV elements inside a content-DIV remain hidden?
Thanks…
July 18th, 2007 at 7:58 pm
Any ideas? Nothing here??
Hey Chris your script is buggy, please fix it.
July 31st, 2007 at 2:51 pm
I need a second level and use a tab in a tab
It doesn’t work !!
Why ( I see anything )
Thanks a lot
September 5th, 2007 at 10:01 am
Past one week i have been working in different tabs.Finally i am using DOMTAB.
I got the same bug when i try to use cookie’s
elm has no properties
changeTab(null, 0)
showTab(click clientX=0, clientY=0)
do{elm=elm.parentNode;}
I tried to solve above bug… but this is not efficient way.. anyhow it works for me..
In ‘initTabMenu’ function i did cookie validation like
for(i=0;i<links.length;i++){
var no = i+1;
var check = “t” + no;
if(check ==cookie){var ct = i;}
}
The initTabMenu function code is:
———————————————–
initTabMenu:function(menu){
var id;
// get values for cookies set
var cookie = readCookie(‘domtab’);
var cookielink = readCookie(‘domtablink’);
var lists=menu.getElementsByTagName(‘ul’);
for(var i=0;i<lists.length;i++){
if(domtab.cssjs(‘check’,lists[i],domtab.listClass)){
var thismenu=lists[i];
break;
}
}
if(!thismenu){return;}
thismenu.currentSection=”;
thismenu.currentLink=”;
var links=thismenu.getElementsByTagName(‘a’);
for(i=0;i<links.length;i++){
if(!/#/.test(links[i].getAttribute(‘href’).toString())){continue;}
id=links[i].href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
domtab.addEvent(links[i],’click’,domtab.showTab,false);
links[i].onclick=function(){return false;} // safari hack
domtab.changeTab(document.getElementById(id),0);
}
}
id=links0.href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
// if a cookie is set then change the tab selection to match
if(cookie){
domtab.changeTab(document.getElementById(cookie),1);
thismenu.currentSection=cookie;
// for(i=0;i<links.length;i++){
//
// if(links[i]==cookielink){var ct = i;}
// }
//chithu validation
for(i=0;i<links.length;i++){
var no = i+1;
var check = “t” + no;
if(check ==cookie){var ct = i;}
}
thismenu.currentLink=links[ct];
domtab.cssjs(‘add’,links[ct].parentNode,domtab.activeClass);
}else{
// alert(“no cookie”);
domtab.changeTab(document.getElementById(id),1);
thismenu.currentSection=id;
thismenu.currentLink=links0;
domtab.cssjs(‘add’,links0.parentNode,domtab.activeClass);
}
}
},
———————————————–
Now i am getting correct result.. anyother ways of fixing this problem are welcome..
September 17th, 2007 at 3:15 am
Hey this DomTabs thing works great.
I tried using the script that includes keeping state.
http://www.matthewmoore.info/domtabs/domtab.js
This didn’t work for multiple menu’s on a page. I hacked around the bug for my specific instance. but it might be worth finding a fix.
September 19th, 2007 at 6:27 pm
I have a major problem with this script I just can’t figure out. It works great in Mozilla and IE7 but in IE6 I get this issue where tab1 shows up fine but tab2 inserts a huge blank space between the tabs and the content. It almost looks like the content box is set to valign bottom instead of top. I can send you an example page to show you what is going if you like. I love this script and just need this final bug fixed. FYI, telling them to use IE7 is not an option.
October 8th, 2007 at 3:28 pm
This is nice! Iââ¬â¢m wondering how it reacts from a SEO standpoint. Itââ¬â¢s my understanding they have no problem reading all of the content, is that correct??
November 11th, 2007 at 6:50 am
I’m not sure what I am doing wrong, but for some reason it’s not working when I upload it to my server. Locally, it works great, changing tabs when I click on one. For some reason, I am noticing that the display:none in the section is causing it to not show up at all in both Firefox and IE7, but only the tabs. But locally on my computer, the script works great for both Firefox and IE7… does anyone have a clue as to what might be causing this?
November 21st, 2007 at 6:12 pm
I love domtabs, but I would like it to turn out when I hit print. without having to click on the link.
November 23rd, 2007 at 6:04 am
Having the same problem here. I had it working for 4 hours, then it stopped showing 2 of the 3 tabs. One is a search form, the others are php driven {shortcode} they worked fine, then…poof….!
they are there, just hidden…When I turn on script block, they appear. any idea on how to fix? nothing mentioned here seemed to do it…
November 23rd, 2007 at 6:24 am
small update….it’s not the java causing “blind” elements…it’s poorly written HTML…solved by a </ tag in one of my div lists…..So if your HTML is rotten like mine, then you will have elements “not showing” in subsequent (following) divisions…….
December 4th, 2007 at 9:37 pm
Hi,
Nice script but for some reason I am having a problem when linking to tabs from another page. When I click the link the whole ‘domtab’ div (the list, the content, everything) has disappeared on the page just leaving a big gap.
Do you know what I’m doing wrong? (XHTML is valid so it’s not that)
Thanks
December 5th, 2007 at 6:18 am
Nobody noticed your version number – 3.1415927 is Pi
December 5th, 2007 at 7:34 pm
Have just read some of the comments above and my problem is the same as LiZharD’s. No solution is listed in the comments so does anyone know how to sort it?
December 6th, 2007 at 7:54 pm
Solved it with trial and error!
The problem was that I wasn’t using H2 tags around the anchors on each tab.
December 20th, 2007 at 8:23 pm
Hi
The script isnât working in safari3 on mac. I added 3 other tabs and divs with content and when the page loads it shows both tab one and six tabs highlighted and both content divs for one and six. It works in firefox though and doesnât load both tabs, only tab one.
December 26th, 2007 at 6:16 pm
Hi Chris
I like the DOM Tabs, but what would really be cool is if you could have an htm page be called up in the text box.
Is this possible using the current struture. Not being a programmer, I have done a couple of trials – to no avail.
Iain
January 4th, 2008 at 1:19 am
Hey, I’m trying to put SimpleViewer within the tabs, but am having issues with the height of the tabs. I’m only ‘ok’ with CSS, but can’t really make heads or tails to which element to add or change the height attribute to correct the issue of the SV extending beyon the bottom of the Domtab.
thanks
Tony
http://carpetony.com/galleries/domtab.html
January 4th, 2008 at 1:47 am
I think I got it. Had to play around. Was brain dead from scanning 400 pictures from Antarctica. And between runs and PS macros was working on it. I ended up playing with the Viewers parameters for height and that seem to do the trick.
Thanks. . .
http://carpetony.com
January 18th, 2008 at 9:17 pm
I’ve got a pretty good install going, the only problem I seem to have is that when there is already a # in the URL besides the one that domtabs is using, it kills one of the other sidebars on my page.
http://www.thatedeguy.com/dev/?p=11#comment-3
That’s an example. There is supposed to be a div on the left side, but it disappears when the tabs pull up…
Any Ideas?
March 15th, 2008 at 4:02 am
I am trying to make a Javascript call when someone clicks on a tab. Any idea where I should put the call?
March 16th, 2008 at 5:39 am
Is there any solution to get divs to work inside the tab divs?
The script looks/works really cool, but if there’s no way to use divs inside the tab divs, it is useless to me and I’ve just wasted a day/night rebuilding my site around it. :-(
See also Marcus Bointon’s comment, April 30, 2007: “DOMtabs uses an element name rather than a CSS selector to choose the tab bodies.”
Why for heavens sake???!!! Is there no way to rewrite it?
March 28th, 2008 at 2:18 pm
Hello There:)
I think that can be useful a loading image until div open at second third .. sections..
Do u have any idea how can be this made?
April 1st, 2008 at 11:14 pm
Domtab is incorporated into the Wordpress Theme “Forte” and I keep getting an error that says “domtab.backtolinks is null or not an object.” I’m not getting any help from the theme author so I thought I’d turn here. Can someone here speculate as to where I might look to find the source of said error?
The blog in question is here: http://hometheatertutor.com
The error appears in IE7 on WinXP.
April 2nd, 2008 at 2:38 pm
How can I incorporate the Fx.Slide Vertical that mootools uses to display each tabbed element? see here http://demos.mootools.net/Fx.Slide. Or is that what’s mean when it’s stated that you can replace the block/none with the show/hide class?
thanks,
William
May 2nd, 2008 at 8:23 pm
you mentions about “hiding of the sections is done via JavaScript using display block and none. Do you may to send the code? Thanks V–
May 6th, 2008 at 12:05 pm
Great script… will be using it again and again…
Cheers!
May 27th, 2008 at 12:26 pm
Hi quick Q with regards to the script, here’s the problem I am using the DomTab script on one of my websites along with Google analytics which is a tagged based tracking system, and here’s the problem – Sometimes the tracking tag from Google takes ages to load so and somewhere in the JavaScript for the domtab it requires that all the images are d/l before it becomes active. Now I fully understand why it needs to do that check BUT - the images are available and the DomTab is only being held back from becoming active once the slow Google image is downloaded.
So what I want to know is there a way to override this check in the DomTab or another method I could use to evaluate if images that the DomTab needs are d/l then become active?
June 12th, 2008 at 4:17 am
I’m trying to add this to a php site and one of the tabs will contain the TinyMCE editor. It seems to work as far as functionality but the layout of the editor is spread out. So where the tools in the editor are usually a fex pixels aprt, they are now about 1/2 inch apart. Has anyone been able to do this? Any ideas on what the problem might be?
June 20th, 2008 at 11:36 pm
love the latest pi version =) cheers, mike
June 24th, 2008 at 2:44 pm
Is there a way to programmatically delete a tab?
July 9th, 2008 at 3:12 pm
Hi.
I’m trying to use the script but I need to work ROLLOVERING tabs not clicking, How can I change the event click to an onrollover?
Thanks in advance
August 6th, 2008 at 12:04 am
is it possible to put two domtab in a blog page. one as a widget and other in post body. if so then how. thnx
August 7th, 2008 at 6:19 pm
hello, great feature!
just one small big problem i’m having now: when I go to a anchor area withing a page, like this link
http://www.cinencuentro.com/2008/08/06/festival-de-lima-2008-homenaje-a-bunuel-en-el-cc-espana/#comment-96529
after the Tab (on the right side) finishes loading, all the post content hides! you can only see whats below, the comment area. I wonder why the Tab is causing this to happen, so I’d like to get some help to fix it.
thanks!
August 9th, 2008 at 11:23 pm
Hi everybody,
as Marcus Bointon noticed at April 30th, 2007 at 4:33 pm, the divs that are inside tabs divs are not visible. I’ve solved this issue.
Just add this into domtabs.css
div.domtabs div div{
display: block !important;
}
Simple but tooks me a lot of time :)
Have a nice day
August 9th, 2008 at 11:29 pm
… and one recommendation, replace div.domtabs div with div.domtabs div.tabsbody and add CSS selector tabsbody to parent divs of each tabs body
August 29th, 2008 at 11:07 pm
how could i prevent that the printID-Tab is removed automatically if pressed. I would like to have the possibility to see all the content (showall), but not only once (before reloading the page) so all tabs are acting equally.
September 4th, 2008 at 3:48 pm
I’m having a problem when I have a # in the URL. I have 3 content boxes using the tabs and whenever a # is in the URL the second and third box stop working and show all the content! Any ideas on how to fix this??????
September 4th, 2008 at 4:19 pm
Ok, I found the issue,
I opened up the error counsel thing in FireFox and it displayed:
loc=/#/.test(loc)?loc.match(/#(\w.+)/)1:”; is null
SO, I just deleted it.
Now everything works like it’s supposed to!
Thanks me!
October 6th, 2008 at 5:58 am
I try to add a different domtab in my blog. it’s not work.
example i want add in my sidebar tab1. tab2 and on my footer tab3 and tab4
i try create 2 different domtab.php but when insert into my index it show only one with all tab.
how to separated this ? any clue ?
October 6th, 2008 at 12:50 pm
[...] Tabbed navigation is done using domtab css & javascript by Christian Heilmann. Devils Workshop Logo is under-design. I am grateful to Johnson for still working on it even though [...]
October 17th, 2008 at 2:31 pm
Hi
I really like these tabs, trying to use them, but what i am trying to do is replace the tabs with images- as in my own tab thats made in PhotoShop png file! can some please help me on this!!
Many thanks
Adam
November 14th, 2008 at 6:29 am
Hello! I am thinking about using the Domtabs for a Community College “Campus Virtual Tour” I am working on. I want to thank you for the great script, is just what I needed, and so far it seems working very well! I am using it in conjunction with scriptaculous and prototype. I also want to make sure that you are happy with us using for that purpose, contact me and I will provide you a link to what we are doing!
December 11th, 2008 at 6:01 pm
Hi,
I’m working on a theme for my blog and I am trying to use DOMtab feature in my blog. My theme is a two column page, main body on the left and the sidebar on the right. The tabs are working properly in the sidebar the only problem is when I’m on home page and when I click on comment link at the bottom of each post, I get to a page with no main body section, the sidebar get shifted to the left section and the “sidebar” and “header” and “footer” is all you can see, there is no “main page” (post), when I look at the source code, I can see that the “main page” information (post) is there, it’s just not showing on the web site’s front-end, first I thought it’s a CSS issue but I checked all my markup and CSS but everything with HTML and CSS is fine, I even deleted the link to CSS in the header but the error was still there until I deleted the link to DOMtab js file and the error was gone. Looks like the DOMtab’s js file doesn’t like my theme or something. Do you guys have any idea why? Any help is much appreciated. The blog is not live yet, here are two screen shots,
Before click on comments look like this:
http://img228.imageshack.us/img228/3636/66609956lk0.jpg
After I click on comments, you get this:
http://img505.imageshack.us/img505/1809/10012578hx2.jpg
Please help :(
December 11th, 2008 at 10:32 pm
I think I figured out what the problem is but I don’t know what the fix is. My theme has two columns, left-col and right-col. The DOMtab is in the sidebar in the right-col and when I click on a comment link (in the left-col) I get to the comment page but the page is blank because my left column div has a display:none; style attached to it now. But how the hell this display:none; style get’s generated?
December 11th, 2008 at 10:34 pm
I forgot to mention that the comment link (http://localhost/blog/?p=54#comments) has a # in it.
December 12th, 2008 at 5:59 pm
Oh God, I think I fixed this, on line 55 I changed display: none; to display: block;
parentMenu.getElementsByTagName(domtab.contentElements)0.style.display=’block’;
The blog still works and so the DOMtab. Thanks for the great plugin, also please let me know if it is okay to use DOMtab in my blog, please contact me.
Thanks,
Faramarz
January 5th, 2009 at 7:59 pm
Hey! Thanks for such a nice little script, I have styled it out in a sort of carousel for use on my website. Can you possibly assist me with making it cycle through the tabs automatically after an alloted time (say 2 secs)? This would be hugely appreciated! :)
Thanks
Matt
P.s it is not implemented yet as I intend to roll it out in a new design
January 5th, 2009 at 10:20 pm
Hi, using domtabs with wordpress cause a problem. I have 4 tabs in the right sidebar in a default theme with WP 2.7.
The “domtab.js” file, adds “” to the style, so, when clicking in the comments link of a post it goes to the address + #respond or #comments, depending if it has or no comments.
After all loads, everything dissapears in the main content, leaving just the header and the sidebar.
Any idea how to fix this ?
Changing none to block like Faramarz did, didnt work for me.
Thanks.
January 17th, 2009 at 7:49 am
very interesting love the domtab
March 2nd, 2009 at 6:56 am
I am having the same problem as peter above.
domtab.js adds the class “display: none;” to the main content div for every URL that has “#respond” or “#comment” attached to it.
So there is a fatal conflict between DOMtab and a basic script function within the WordPress codex. I get the error whenever the following template tag is used in the loop:
comments_popup_link
Could you please suggest a way to fix this problem.
March 2nd, 2009 at 7:12 am
I’ve made the change recommended above (to line 55) … and it seems to be working now.
Faramarz:
I think I fixed this, on line 55 I changed display: none; to display: block;
Could the developer please add this to the download file?
March 5th, 2009 at 1:06 am
Great script Chris! Thanks a lot!!
For those who want to jump to a given Tab without reloading the page:
1. make the changes Paul suggested (comment #60):
initTabMenu:function(menu){
var id;
var active;
var lists=menu.getElementsByTagName(‘ul’);
for(var i=0;i<lists.length;i++){
if(domtab.cssjs(‘check’,lists[i],domtab.listClass)){
var thismenu=lists[i];
break;
}
}
if(!thismenu){return;}
thismenu.currentSection=”;
thismenu.currentLink=”;
var links=thismenu.getElementsByTagName(‘a’);
for(i=0;i<links.length;i++){
//see if any tab is already set to active..
if(domtab.cssjs(‘check’,links[i].parentNode,domtab.activeClass)){
active=i;
}
if(!/#/.test(links[i].getAttribute(‘href’).toString())){continue;}
id=links[i].href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
domtab.addEvent(links[i],’click’,domtab.showTab,false);
links[i].onclick=function(){return false;} // safari hack
domtab.changeTab(document.getElementById(id),0);
}
}
//do the do here.
active=active?active:0;
id=links[active].href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
domtab.changeTab(document.getElementById(id),1);
thismenu.currentSection=id;
thismenu.currentLink=links[active];
domtab.cssjs(‘add’,links[active].parentNode,domtab.activeClass);
}
},
2. on the html page insert this script:
function changeTab(oldTab, newTab){
document.getElementById(oldTab).className=’inactive’;
document.getElementById(newTab).className=’active’;
domtab.init();
scroll(0,0);
return false;
}
Note: the ‘inactive’ class doesn’t exists, I put it there just to reset the selected tab.
3. put ids for every from the “domtabs” class:
Test 1
Test 2
Test 3
Test 4
4. to jump, for example, from the first tab to the second tab:
Your text here
Hope this helps!
March 5th, 2009 at 1:18 am
Sorry, seems like some of the code was removed..
3. put ids for every LI from the âdomtabsâ class:
Test 1
Test 2
Test 3
Test 4
4. to jump, for example, from the first tab to the second tab:
Your text here
March 5th, 2009 at 1:23 am
Last try..
1. make the changes Paul suggested (comment #60):
initTabMenu:function(menu){
var id;
var active;
var lists=menu.getElementsByTagName(âulâ);
for(var i=0;i<lists.length;i++){
if(domtab.cssjs(âcheckâ,lists[i],domtab.listClass)){
var thismenu=lists[i];
break;
}
}
if(!thismenu){return;}
thismenu.currentSection=â;
thismenu.currentLink=â;
var links=thismenu.getElementsByTagName(âa');
for(i=0;i<links.length;i++){
//see if any tab is already set to active..
if(domtab.cssjs(âcheckâ,links[i].parentNode,domtab.activeClass)){
active=i;
}
if(!/#/.test(links[i].getAttribute(âhrefâ).toString())){continue;}
id=links[i].href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
domtab.addEvent(links[i],âclickâ,domtab.showTab,false);
links[i].onclick=function(){return false;} // safari hack
domtab.changeTab(document.getElementById(id),0);
}
}
//do the do here.
active=active?active:0;
id=links[active].href.match(/#(\w.+)/)1;
if(document.getElementById(id)){
domtab.changeTab(document.getElementById(id),1);
thismenu.currentSection=id;
thismenu.currentLink=links[active];
domtab.cssjs(âaddâ,links[active].parentNode,domtab.activeClass);
}
},
2. on the html page insert this script:
function changeTab(oldTab, newTab){
document.getElementById(oldTab).className=âinactiveâ;
document.getElementById(newTab).className=âactiveâ;
domtab.init();
scroll(0,0);
return false;
}
Note: the âinactiveâ class doesnât exists, I put it there just to reset the selected tab.
3. put ids for every LI from the “domtabs” class:
<a href="#t1" rel="nofollow">Test 1</a>
<a href="#t2" rel="nofollow">Test 2</a>
<a href="#t3" rel="nofollow">Test 3</a>
<a href="#t4" rel="nofollow">Test 4</a>
4. to jump, for example, from the first tab to the second tab:
<a href="#" rel="nofollow">Your text here</a>
April 23rd, 2009 at 11:00 pm
so we are using domtabs in a site we are working on and its working great.
Although, I just added the jquery rounded corners .js for doing rounded corners on the menu, and then domtabs quit working in IE, but works in all others. any ideas?
May 28th, 2009 at 4:00 pm
Is it possible to make it chage from tab to tab automatically in a certain time? I really need that function.
July 10th, 2009 at 6:15 am
I added two features to domtab
1. seamless navigation
2. automatic rotation
You might like to check it out at my blog
http://taranjs.blogspot.com/2009/07/domtab-with-seamless-navigation-and.html
Code might not be robust or stable but will surely be helpful for anybody who wants to achieve that functionality..
July 17th, 2009 at 3:01 pm
Hi there,
I have a simple question :
How to put a link from the texte in Tab1 to Tab4 for example ?
Tried this : Go the the page four but it doesn’t work.
Thanks a lot for your help.
Seb
September 3rd, 2009 at 1:28 pm
Great script, I use it frequently.
I have one question though, is it possible to hide all content on page load? Content will only show when clicked on tab.
Thank you for answer!
January 23rd, 2010 at 2:56 am
does anyone know if it’s ok to use DOMtab on websites you’re designing for clients. I am a graphic designer and i find this script extremely simple to use. i would like to implement it on a site i am designing for a client.
the terms of usage is not very clear, it says it’s free but no resell, but then it also says if want to use on commercial site, need to contact author. it’s not really free to use then if you can’t use it on commercial site. does anyone know what the deal is? i just wanna have permission to use it on a site i am designing for a client. i am not reselling it or anything.
i tried emailing the author, but he doesn’t seem to respond, i even tried twitter, he’s not responding to my replies either. what’s the deal?
January 24th, 2010 at 10:25 am
Howard, I did answer you on twitter. It is OK to use DOMTab in a project but you are not allowed to host DOMTab on a “JavaScripts for sale” web site or resell the script itself.
January 25th, 2010 at 12:55 am
thanks for answering my question Chris…. sorry i don’t usually use Twitter… so chances are you sent it and i never go it. Thanks for answering my question again, great app…. hope to see your name more often in the future. Cheers mate!