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"e lement and collect all <div class="tabberta b "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_g roup1">...conte nt...</div>
<div class="tabbed_g roup1">...conte nt...</div>
<div class="tabbed_g roup1">...conte nt...</div>

and

<div class="tabbed_g roup2">...conte nt...</div>
<div class="tabbed_g roup2">...conte nt...</div>

Can this be done?

[Daniel Bleisteiner]

Re: Improved tabifier script available?

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.getEle mentsByTagName( "div");
for (var i=0; i<divs.length; i++) {
if (divs[i].className != null && divs[i].className.matc h(/tabber/)
&& !divs[i].className.matc h(/tabbertab/)) {
if (first == null) first = divs[i];
else {
var childs = divs[i].getElementsByT agName("div");
for (var k=0; k<childs.length ; k++) {
if (childs[k].className != null && childs[k].className.matc h(/
tabbertab/)) {
divs[i].parentNode.rem oveChild(divs[i]);
first.appendChi ld(childs[k]);
break;
}
}
}
}
}
}

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

<div class="tabber">
<div class="tabberta b">
any content
</div>
</div>

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

--
Daniel

[Daniel Bleisteiner]

Re: Improved tabifier script available?

The following works in IE too...

function reArrangeTabs() {
var first = null;
var divs = document.getEle mentsByTagName( "div");
for (var i=0; i<divs.length; i++) {
var div = divs[i];
if (div.className != null && div.className.m atch(/tabber/) && !
div.className.m atch(/tabbertab/)) {
if (first == null) first = div;
else {
var childs = div.getElements ByTagName("div" );
for (var k=0; k<childs.length ; k++) {
var child = childs[k];
if (child.classNam e != null && child.className .match(/
tabbertab/)) {
child.parentNod e.removeChild(c hild);
div.parentNode. removeChild(div );
first.appendChi ld(child);
break;
}
}
}
}
}
}