PDA

View Full Version : Ajax Tabs - Any way to put the tabs on the LEFT of the content?



ixodie
08-16-2008, 01:59 AM
1) Script Title: Ajax Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.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
08-16-2008, 03:02 AM
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
08-16-2008, 03:51 AM
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
08-17-2008, 05:51 PM
Anyone have any idea how to make the widths of the tabs constistent if the text is of different lengths?

Code Red
08-18-2008, 08:28 AM
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 -

http://www.cactusnav.com/images/infotab_off.gif

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

ixodie
08-19-2008, 03:27 AM
I'm using shadetabs without static images. Anyone have a suggestion?

ixodie
08-26-2008, 11:21 PM
No one has a suggestion for making the tabs a consistent width without using images?

Code Red
08-27-2008, 02:42 AM
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
08-27-2008, 04:55 AM
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.