Improved tabifier script available?

[Daniel Bleisteiner]

Hi there,

I've come across http://www.barelyfitz.com/projects/tabber/index.php
which allows easy Javascript creation of tabs. The only problem I
currently have is, that in my portlet environment it's nearly
impossible to remove all extra markup between the different tabs and
so the script doesn't work as needed.

My idea is to improve it so we don't need to outer <div
class="tabber"> element and collect all <div class="tabbertab "> and
group them automatically in a generated tab div using javascript. Then
we could use that script similar to lightbox ones by simply defining
what div's shall be grouped using tabs and the rest is done
automatically - no matter what markup lies between those tabbed divs.

We could also use some kind of selector like we know from lightbox
scripts as lightbox[g1]...

<div class="tabbed_group1">...content...</div>
<div class="tabbed_group1">...content...</div>
<div class="tabbed_group1">...content...</div>

and

<div class="tabbed_group2">...content...</div>
<div class="tabbed_group2">...content...</div>

Can this be done?

 

[Daniel Bleisteiner]

I'm now using a script that rearranges the DOM before tabbifier gets
hold of it. It still needs a little improvement for IE... but Firefox,
Chrome, Opera and Safari already work.

function reArrangeTabs() {
var first = null;
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs.className != null && divs.className.match(/tabber/)
&& !divs.className.match(/tabbertab/)) {
if (first == null) first = divs;
else {
var childs = divs.getElementsByTagName("div");
for (var k=0; k<childs.length; k++) {
if (childs[k].className != null && childs[k].className.match(/
tabbertab/)) {
divs.parentNode.removeChild(divs);
first.appendChild(childs[k]);
break;
}
}
}
}
}
}

This allows me to generate the following HTML for all tabs:

<div class="tabber">
<div class="tabbertab">
any content
</div>
</div>

The script removed all but the first occurance and re-adds the inner
elements to that first tabber div.

 

[Daniel Bleisteiner]

The following works in IE too...

function reArrangeTabs() {
var first = null;
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
var div = divs;
if (div.className != null && div.className.match(/tabber/) && !
div.className.match(/tabbertab/)) {
if (first == null) first = div;
else {
var childs = div.getElementsByTagName("div");
for (var k=0; k<childs.length; k++) {
var child = childs[k];
if (child.className != null && child.className.match(/
tabbertab/)) {
child.parentNode.removeChild(child);
div.parentNode.removeChild(div);
first.appendChild(child);
break;
}
}
}
}
}
}