OBIEE Multie line tabs part 2

 

Remember this one:

http://obiee101.blogspot.com/2010/05/obiee-multi-line-tabs.html

Or how to change this:

into :

but how about this:

First follow the steps from the first article. Next change the code to:

[code]

<script type="text/javascript">
var allHTMLTags = new Array();
onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);

        }

        return results;
    }
}
}
function insertAfter( referenceNode, newNode )
{ referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function addNewLI( obj )
{
    x = document.getElementsByClassName('TabTable')[0];
    var newTable = document.createElement('table');
    var newLI = document.createElement('tbody');
    newLI.id='TabsTableRow2'; 
    var td1 = document.createElement("td");
    var row = document.createElement("tr");
    td1.className = 'TabSep';
    td1.innerHTML ='&nbsp;';
    td1.id='tr2';
    td1.style.width ='40px';
    row.appendChild(td1);   
    newLI.className = 'TabTable';
    newLI.appendChild(row);   
    newTable.cellSpacing = '0px';
    newTable.cellPadding = '0px';
    newTable.appendChild(newLI);
    insertAfter( x, newTable );
}

  function addSep(id){

    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    addNewLI( tbody );
  }

function insCell(str,orgclassName,TabCount)
  {
    var oTable = document.getElementById('TabsTableRow2');
    var lastRow = oTable.rows.length;
    lastRow = lastRow -1
    var mytable=document.getElementById('TabsTableRow2')
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.innerHTML=str;
    if (orgclassName == 'TabDimCell') {
    newcell.className = 'TabDimCell2';
    }
    if (orgclassName == 'TabHiCell') {
    newcell.className = 'TabHiCell2';
    }
    newcell.style.width = '100px';
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.className = 'TabSep TabDimSep';
    newcell.innerHTML ='&nbsp;';

  }

  function insLastCell(str,orgclassName,TabCount)
  {
    var oTable = document.getElementById('TabsTableRow2');
    var lastRow = oTable.rows.length;
    lastRow = lastRow -1
    var mytable=document.getElementById('TabsTableRow2')
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row   
    newcell.innerHTML ='&nbsp;';
    var mytable2=document.getElementById('TabsTableRow2')
    newcell.style.textAlign = 'right';    
    var x = screen.width ;
    x = x - (((TabCount - 4) * 100)+ 130);
    x = x+'px';
    newcell.style.width = x;

  }
    var tds = document.getElementsByTagName('td');
    var TabCount = 0;
    var lTAB = new Array();
    for (var td = 0; td < tds.length; td++) {
        if (tds[td].className != 'TabDimCell' && tds[td].className != 'TabHiCell' ) {
            continue;
        }
        if (TabCount == 4) {   
        addSep('TabsTable');
        }
        tds[td].style.width = '100px'       
        if (TabCount >= 4) {   
        var str = tds[td].innerHTML;
        var orgclassName = tds[td].className;
        insCell(str,orgclassName, TabCount);
        tds[td].style.display = "NONE";
        tds[td+1].style.display = "NONE";
        }

        TabCount = TabCount + 1;
    }
     insLastCell(str,orgclassName,TabCount);

</script>

[/code]

Till Next Time\