Advanced Search

Results 1 to 9 of 9

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

  1. #1
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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>
    DD Admin

  3. #3
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Feb 2005
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ixodie View Post
    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...
    Last edited by Code Red; 08-18-2008 at 08:34 AM.

  6. #6
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Feb 2005
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

    Quote Originally Posted by Code Red
    Yes, open ajaxtabs.css and add this to the .indentmenu ul li a and .indentmenu ul li a.selected styles -

    width: xxpx;

  9. #9
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •