Ajax Tabs - Any way to put the tabs on the LEFT of the content?

[ixodie]

1) Script Title: Ajax Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uppliment3.htm

3) Describe problem:

I was wondering if anyone knows how to put the tabs on the left or right of the content window. The text can run horizontal, sort of like a little flag running off the left of the content window.

I have so many tabs in one instance that I would like to put them on the left side as they don't fit on the top or bottom.

Thanks!

[ddadmin]

You're free to put the tabs anywhere on the page, as they are separate from the content DIV that houses the requested content. Just make sure the initialization code is called last, following both of the above, on your page. Something like:

<div id="leftcolumn">

<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

</div>


<div id="rightcolumn">

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>

</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

[ixodie]

Thanks!

Is there a way to make the widths of the <li>'s consistent? I tried to set it in the css file but for some reason it is not working.

[ixodie]

Anyone have any idea how to make the widths of the tabs constistent if the text is of different lengths?

[Code Red]

Anyone have any idea how to make the widths of the tabs constistent if the text is of different lengths?

Yes, open ajaxtabs.css and add this to the .indentmenu ul li a and .indentmenu ul li a.selected styles -

width: xxpx;

You'll also need to move the background: black url(indentbg.gif) center center repeat-x; from the .indentmenu ul style to the .indentmenu ul li a one. Change repeat-x to no-repeat if you're using a single discrete tab graphic like I am -



It works great. The only caveat is that the tab names need to be kept short...

[ixodie]

I'm using shadetabs without static images. Anyone have a suggestion?

[ixodie]

No one has a suggestion for making the tabs a consistent width without using images?

[Code Red]

Well, yes - just do the first part and ignore the second bit -

Yes, open ajaxtabs.css and add this to the .indentmenu ul li a and .indentmenu ul li a.selected styles -

width: xxpx;

[ixodie]

Doesn't work. No matter where I add that does the tab itself change width.

If I set the width in .shadetabs (indentmenu) it adds a space between the tab and the content window.