Results 1 to 7 of 7

Thread: Problem with tab content script while changing from "link" to "linkparent"

  1. #1
    Join Date
    Jan 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with tab content script while changing from "link" to "linkparent"

    1) Script Title: Tab Content Script (v 2.0)

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

    3) Describe problem:

    Hello!

    I have installed and are trying to learn about the tab content script but I have a problem that I can't understand how to solve.

    It's about which tab that should be default where the problem is.
    I have changed from "link" to "linkparent" and the tab where I put class="selected" becomes default when I renew the page. So far so good.
    But when I switch between tabs it doesn't happen anything with the tabs, only the content changes.

    What have I done wrong?
    It's a standard installation and the same problem in both IE and FF.

    Many thanks in advance!

    Edit:
    I can tell that I use "tabcontent.js", "tabcontent.css" and the image files and than the following code:
    (The place where I change from "link" to "linkparent" is in the javascript included at the end of the following code. Maybe that's wrong place to change and it should be in "tabcontent.js" instead?)

    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="tabcontent.css" />

    <script type="text/javascript" src="tabcontent.js">

    /***********************************************
    * Tab Content script v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>

    </head>
    <body>

    <h3>Demo #1- Basic implementation</h3>

    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>

    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

    <div id="country1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    </div>

    <div id="country2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    </div>

    <div id="country3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>

    <div id="country4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>

    </div>

    <script type="text/javascript">

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

    </script>

    <p><b><a href="javascript: countries.expandit(3)">Click here to select last tab</a></b></p>

    <hr />

    </body>
    </html>
    Last edited by barbapappa; 01-30-2008 at 09:03 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,889
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    Hmm in the code you posted above, you've actually specified "link" as the target, not "linkparent" as you had described. Which is it? Please post a link to the page on your site that contains the problematic script so we can check it out.

  3. #3
    Join Date
    Jan 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Hmm in the code you posted above, you've actually specified "link" as the target, not "linkparent" as you had described. Which is it? Please post a link to the page on your site that contains the problematic script so we can check it out.

    I've missed to change from "link" to "linkparent" in the uploaded code to this forum.

    The tabcontent.js and tabcontent.css is unchanged.
    The only thing I changed is from "link" to "linkparent".

    Edit: I installed the same script but AJAX-version and got the same problem there...

    Edit2: I look a bit closer now and saw that the content in the tabs were'nt going back to default either.
    Last edited by barbapappa; 02-03-2008 at 06:47 AM.

  4. #4
    Join Date
    Jan 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    When I change this row above the link/linkparent from "true" to "false" it at least change back the content to default:

    countries.setpersist(false)
    But the tab is still not changing.

  5. #5
    Join Date
    Aug 2004
    Posts
    9,889
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    Looking at your page, I think you may be misunderstanding the proper use of the "linkparent" setting. In your HTML for the tabs, you didn't move class="selected" from the A to the LI element instead, which would be necessary:

    Code:
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    What are you trying to accomplish by invoking the "linkparent" setting? As described in the documentation, it should only be used when:

    By default, if you wish a tab to be automatically selected when the page loads, you add a class="selected" attribute inside that tab link ("A"). However, sometimes your CSS for the tabs may be structured in a way that would make things a lot easier for you if you can add class="selected" to the parent of the tab link, and still have the "default selected" feature work. An example would be tab links that are each wrapped around a DIV, and styling to the selected tab in your CSS is on the DIV element, not the link
    If you're just using the default tab theme that came with the script, there's no need to use "linkparent".

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

    Thumbs up

    Ok, I think I got the solution after reading your last post again and again (I'm not so god at this).
    I got everything back to "standard" and then only change from "true" to "false" and yes it works!

    Thanks for helping!

  7. #7
    Join Date
    Jan 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I have one more wondering about this script.

    Is it possible to use pictures instead of text and got the pics to change for hover and current?

    Something like this is what I think about on for example a tab with name info:

    normal: info.gif
    hover: info_hover.gif
    current: info_current.gif

    Even if I put .css-id/classes for the tabs "t2" and "t3", it's the "t1" who decide witch pics that are going to be used. If I cant get t2 and t3 to work it will be hard to use different pics on the different tabs.

    The reason for this is that I'm going to use this code on a page to describe products were it's not possible to use <?php include ?> or SSI .shtml. The only thing I can use is HTML and that's the reason why I won't to use pics instead of text so I can change all the pages in one moment...

    Here is the code I have in mind to use (it works okay if I use text inside <a> to describe the tabs):


    <div id="tab">
    <div class="t1"><a href="#" rel="c1"></a></div>
    <div class="t2"><a href="#" rel="c2"></a></div>
    <div class="t3"><a href="#" rel="c3"></a></div>
    </div>

    <div id="c1">Tab content 1 here</div>

    <div id="c2">Tab content 2 here</div>

    <div id="c3">Tab content 3 here</div>

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
  •