Results 1 to 6 of 6

Thread: Ajax Tabs Content Script, help with tab spacing

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

    Default Ajax Tabs Content Script, help with tab spacing

    1) Script Title: Ajax Tabs Content Script

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

    3) Describe problem: I am using your code as below to show different content under different tabs rather loading external pages. I have very simple question which couldn't solve myself. How can I have tabs with no spacing in between?
    This is more common now where first row(TABS) stretch over complete length of second row(the content part) without any spacing.

    PHP Code:
    <ul id="flowertabs" class="shadetabs"
    <
    li><a href="#" rel="tcontent1" class="selected">Tab1</a></li>

    <
    li><a href="#" rel="tcontent2">Tab2</a></li>

    <
    li><a href="#" rel="tcontent3">Tab3</a></li>
    </
    ul>

    <
    div style="border: 1px solid gray; padding: 5px; margin-bottom: 1em;"
    <
    div id="tcontent1" class="tabcontent"
    ....
    some content1...
    </
    div>

    <
    div id="tcontent2" class="tabcontent">
    ....
    some content2...
    </
    div>

    <
    div id="tcontent3" class="tabcontent">
    ....
    some content3...
    </
    div>
    </
    div>

    <
    script type="text/javascript">
    var 
    myflowers=new ddtabcontent("flowertabs"//enter ID of Tab Container
    myflowers.setpersist(true//toogle persistence of the tabs' state
    myflowers.setselectedClassTarget("link"//"link" or "linkparent"
    myflowers.init()
    </script> 
    Thanks very much,
    Anoop

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Are you talking about the spacing between the tabs themselves, or the spacing between the tab interface and the content interface? In any event, this sounds like just a CSS issue- please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

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

    Default

    Yes, I am talking about the spacing between the tabs themselves. I tried to play with CSS file but doesn't help.

    How we can completely eliminate the spacing between tabs? It will be like(sort of) one table with two rows. First row will have TABS. Second row will carry the content to be displayed.

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

    Default

    I think, the static content TAB could even be acheived by this following code. CSS needs to be enhanced to give it brillinat look.

    Java Script-

    <script>
    function openTab(tab)
    {
    var OTab = document.getElementById(tab);
    if(OTab)
    {
    for(i=1;i<=10;i++)
    {
    var CTab = document.getElementById('tab-text-'+i);
    if(CTab) CTab.style.display='none';
    }

    OTab.style.display='block';
    }
    }
    </script>



    HTML BODY-

    Code:
    <ol id="toc">
            <div class="current" onclick="openTab('tab-text-1')"> <a href="#Page_1">Page 1</a> </div>
            <div onclick="openTab('tab-text-2')"> <a href="#Page_1">Page 2</a> </div>
            <div onclick="openTab('tab-text-3')"> <a href="#Page_1">Page 3</a> </div>
    </ol>
    
    <div class="content" id="tab-text-1"> Tab-Text1<br>Tab-Text1<br>Tab-Text1<br> </div>
    <div class="content" style="display:none" id="tab-text-2"> Tab-Text2<br>Tab-Text2<br>Tab-Text2<br></div>
    <div class="content" style="display:none" id="tab-text-3"> Tab-Text3<br>Tab-Text3<br>Tab-Text3<br></div>

    CSS Code-

    Code:
    ol#toc {
        height: 2em;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    ol#toc div {
        float: left;
        margin: 0;
    }
    
    ol#toc a {
        background: #bdf;
        color: #008;
        display: block;
        float: left;
        height: 2em;
        padding-left: 10px;
        text-decoration: none;
    }
    
    ol#toc a:hover {
        background-color: #3af;
        background-position: 0 -120px;
    }
    
    ol#toc a:hover span {
        background-position: 100% -120px;
    }
    
    ol#toc div.current a {
        background-color: #48f;
        background-position: 0 -60px;
        color: #fff;
        font-weight: bold;
    }
    
    ol#toc div.current span {
        background-position: 100% -60px;
    }
    
    ol#toc span {
        background: url(tab.png) 100% 0;
        display: block;
        line-height: 2em;
        padding-right: 10px;
    }
    
    div.content {
        border: #48f solid 3px;
        clear: left;
        padding: 1em;
    }

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    if you're talking about the tabs interface used in Demo #2 of the script, which is extracted for this CSS menu, you can remove the spacing between the tabs by finding the below line in the CSS:

    Code:
    margin: 0 1px 0 0; /*Margin between each menu item*/
    and changing the "1px" to 0.
    DD Admin

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

    Default

    Thanks for your effort. I am talking about first #1, shadetab css as below. There is no such setting present for that.

    Code:
    /* ######### CSS for Shade Tabs. Remove if not using ######### */
    
    .shadetabs{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }
    
    .shadetabs li{
    display: inline;
    margin: 0;
    }
    
    .shadetabs li a{
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(shadeactive.gif) top left repeat-x;
    }
    
    .shadetabs li a:visited{
    color: #2d2b2b;
    }
    
    .shadetabs li a:hover{
    text-decoration: underline;
    color: #2d2b2b;
    }
    
    .shadetabs li a.selected{ /*selected main tab style */
    position: relative;
    top: 1px;
    }
    
    .shadetabs li a.selected{ /*selected main tab style */
    background-image: url(shade.gif);
    border-bottom-color: white;
    }
    
    .shadetabs li a.selected:hover{ /*selected main tab style */
    text-decoration: none;
    }
    
    .tabcontent{
    display:none;
    }
    
    @media print {
    .tabcontent {
    display:block !important;
    }
    }

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
  •