Start Building Professional
Web Apps Today

One tabbar for the left and top

Is it possible to have one tabbar that covers both the left and the top? I have a lot of tabs that I would like to be displayed on both sides. Also is it possible to adjust the size of the tabs on the left side? They look ok for 1 or 2 characters but how do you handle 12? I would like them to be 30px height by 100px width (actual width and height - not sideways).

Thanks,
Steve

You can't have the same tabbar with top and left tab areas in same time, but you can have few tabbar objects to simulate such behavior.
    http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/tabs_orientation/tab_all.html?un=1209730675000

>>I would like them to be 30px height by 100px width
You can define height of tabbar ( width for left orientated tabbar ) during object initialization
    var t=new dhtmlXTabBar("somebox","left","100px");
but the default tabbar images are not purposed for such long tabs, you will need to update ( resize ) them

I like the live demo on http://dhtmlx.com/docs/products/dhtmlxTabbar/

Can you give me some example code to do this?

thanks,
steve

The code at http://dhtmlx.com/docs/products/dhtmlxTabbar/ uses the same approach as mentioned sample.
There are two tabbar objects ( top and left ) , which have not real content area, but have custom code attached to onClick event, which hide|show necessary content area

The vertical text in demo actually is an image ( you can place any HTML content inside tab label )

Can you just post some sample code to create a workable left and top tab menu?

I tried to get the sample working and got close but it's not quite right. One problem is getting the top to deactivate  the left selected tab and visa versa (javascript error: too many recursions). Also it seems that the tabbar is trapping all events so nothing in the content area sees the mouse clicks when both the top and left side are active.

I grabbed the code on http://dhtmlx.com/docs/products/dhtmlxTabbar/ and almost got it working but what are these functions??

function ju(id){var txt="";return true;};function jr(){tabbar=new aj("left_tabbar","left");tabbar.setImagePath("codebase/imgs/");tabbar.mp("modern");tabbar.ha(false);tabbar.lS(function(kM){ju(kM,tabbar);return true;});tabbar.alr(false);tabbar.loadXML("xml/tabs_l.xml?v=1.2");bF=new aj("right_tabbar","right");bF.setImagePath("codebase/imgs/");bF.mp("modern");bF.ha(false);bF.lS(function(kM){ju(kM,bF);return true;});bF.alr(false);bF.loadXML("xml/tabs_r.xml?v=1.2");tabbar3=new aj("top_tabbar","top");tabbar3.setImagePath("codebase/imgs/");tabbar3.mp("modern");tabbar3.ha(false);tabbar3.lS(function(kM){ju(kM,tabbar3);return true;});tabbar3.alr(false);tabbar3.loadXML("xml/tabs_t.xml?v=1.2");tabbar4=new aj("bottom_tabbar","bottom");tabbar4.setImagePath("codebase/imgs/");tabbar4.mp("modern");tabbar4.ha(false);tabbar4.lS(function(kM){ju(kM,tabbar4);return true;});tabbar4.alr(false);tabbar4.loadXML("xml/tabs_b.xml?v=1.2");};var curActiveTabId="h1";var curDemoPart="left";function RI(btnObj){if(curDemoPart=="left"){var newDemoPart="right";document.getElementById("left_tabbar").style.display="none";document.getElementById("top_tabbar").style.display="none";document.getElementById("right_tabbar").style.display="";document.getElementById("bottom_tabbar").style.display="";}else{var newDemoPart="left";document.getElementById("left_tabbar").style.display="";document.getElementById("top_tabbar").style.display="";document.getElementById("right_tabbar").style.display="none";document.getElementById("bottom_tabbar").style.display="none";}btnObj.src="images/btn_switch_"+newDemoPart+".gif";document.getElementById("fake_area_"+curDemoPart).style.display="none";document.getElementById("fake_area_"+newDemoPart).style.display="";curDemoPart=newDemoPart;ju(curActiveTabId)};var activeBgId="bg_"+curDemoPart+"_"+curActiveTabId;function ju(kM,tabObj,demoPart){if(!demoPart)demoPart=curDemoPart;var newBgId="bg_"+demoPart+"_"+kM;document.getElementById(activeBgId).style.display="none";document.getElementById(newBgId).style.display="";curActiveTabId=kM;activeBgId=newBgId;if(tabObj==tabbar){tabbar3.kW();tabbar4.kW();bF.fP(kM,false)}if(tabObj==tabbar3){tabbar.kW();bF.kW();tabbar4.fP(kM,false)}if(tabObj==bF){tabbar4.kW();tabbar3.kW();tabbar.fP(kM,false)}if(tabObj==tabbar4){bF.kW();tabbar.kW();tabbar3.fP(kM,false)}return true;};dE(window,"load",jr);

If possible please show me the code for a framework that I can use that has both the top and left menu tabs. I can pay for this if you show me a working model.

Thank you