Vertical tabs

[John Garrido]

I am trying to change the tabs to vertical aligned on the right of the form. I remember seeing a piece of code to accomplish this, but can’t seem to find it in the discussions. Curious if you could provide some direction on where I might have seen it.

[Alexander Bautz]

I cannot remember having done this before, but I added a few lines of Custom CSS an some Custom JS.

Custom CSS:

li.tabBase{
    float:none!important;
}
#tabWrapper{
    float:right;
}
#part1{
    float:left;
}

Custom JS:

jQuery("#tabWrapper").insertAfter(jQuery("#part1"));

See if you can use it.

Alexander

[John Garrido]

Hi Alex. Worked perfectly. Thanks for the support.

[John Garrido]

I noticed when I try to attach a document using the button in the ribbon the ribbon the tabs don’t hide like the form. I am assuming it has to do with moving the tabs from horizontal to vertical. Thoughts on correcting?

[Alexander Bautz]

The code to show the tabs vertically moves the tabWrapper out of part1 and therefore it is not hidden when attaching a document. It’s not ideal, but you can use this snippet to sense when the part1 section is hidden and hide the tabWrapper as well:

var tabWrapperHidden = false;
setInterval(function(){
    if(document.getElementById("part1").style.display !== "none"){
        if(tabWrapperHidden){
            tabWrapperHidden = false;
            document.getElementById("tabWrapper").style.display = "block";
        }
    }else{
        if(!tabWrapperHidden){
            tabWrapperHidden = true;
            document.getElementById("tabWrapper").style.display = "none";
        }
    }
},250);

Alexander

[John Garrido]

Thanks Alex! That works well enough. Appreciated the quick reply.

[MikeS]

Alex,

This is a very nice solution for repositioning the tabs. I need to take it one step further and be able to choose which tabs (based on TabID I suppose) to position vertically. That will allow me to have a set of horizontal tabs for one audience and a set of vertical tabs for another audience (based on Permission Groups).

Thanks for your help as always. DFFS is truly an awesome tool.
Mike

[Alexander Bautz]

I don’t have any example ready (and the above vertical modification is not 100% – it is only a quick example).

I suggest you use code to build new tabs and replace the original one, then insert your extra tabs also using code. Just inspect the current tabs and replicate the ID, Class and attributes like this example.

Original tab:

<li id="dffs_tab_4" tabindex="4" class="tabBase tabUniqueID_Tab4" tabuniqueid="Tab4" onclick="spjs.dffs.do_toggleSelectedTab("4","TabClick")"><a title="" onclick="return false;" href="javascript:;" unselectable="on"><span class="tablabel" unselectable="on">Tab4</span></a></li>

Example button that mimics the tab and selects tab index 4 on click:

<input type="button" onclick="spjs.dffs.do_toggleSelectedTab('4','TabClick')" value="Tab4" />

Please note that this is just a quick example to give you an idea and the highlighting of the selected tab / button will not work.

Alexander

[MikeS]

I have tried several ways of implementing the above but to no avail. Do you have a little more time to flesh out where the code would go, etc? I can wait a few days. No rush.

I was hoping your CSS and JS from above (which work quite well) could be adapted to reference a specific tabID. Is that not possible or advisable?

Mike

[Alexander Bautz]

Hi,
Even though I showed an example of moving the tabs vertically I’m not sure it’s a good idea. To do it properly the page layout must be changed to a proper multi column layout and this will include moving the entire form and repositioning all items in the page – while struggling to override the built in SharePoint styles.

You can of course use JavaScript to hide or move individual tabs and insert them wherever you want, but making this work OK will be a challenge.

Alexander

[Author]

Posts