Problem with tab content script while changing from "link" to "linkparent" [Archive]

View Full Version : Problem with tab content script while changing from "link" to "linkparent"

barbapappa

01-30-2008, 05:49 PM

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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>

ddadmin

01-30-2008, 10:48 PM

barbapappa

01-31-2008, 06:31 AM

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.

barbapappa

02-01-2008, 09:30 AM

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.

ddadmin

02-01-2008, 03:20 PM

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:

<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 (http://www.dynamicdrive.com/dynamicindex17/tabcontent_suppliment.htm), 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".

barbapappa

02-01-2008, 05:51 PM

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!

barbapappa

02-03-2008, 09:32 PM

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>