DHTML Tabs Modification

[DClayton]

DHTML Tabs
(http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm)

I am a complete beginner when it comes to Javascript and would like to implement a modification to the DHTML Tabs script. Baiscally, i would like to use 3 images for each tab. I have managed to get something working which looks as follows:

http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/Example.jpg

Ignore the gaps in the images, i can fix that quite easily. The code to produce this is as follows:

<ul id="AttributeTabs" class="shadetabs">
<li id="DescriptionStart" class="SelectedStart"></li>
<li><a href="#" rel="Description" class="selected">Description</a></li>
<li id="DescriptionEnd" class="SelectedEnd"></li>
<li id="New FeaturesStart" class="NonSelectedStart"></li>
<li><a href="#" rel="New Features">New Features</a></li>
<li id="New FeaturesStart" class="NonSelectedEnd"></li>
<li id="FeaturesStart" class="NonSelectedStart"></li>
<li><a href="#" rel="Features">Features</a></li>
<li id="FeaturesEnd" class="NonSelectedEnd"></li>
<li id="VariantStart" class="NonSelectedStart"></li>
<li><a href="#" rel="Variant">Variant</a></li>
<li id="VariantEnd" class="NonSelectedEnd"></li>
</ul>

What i have done is use three list item tags for each tab. Each tab has a start image, a middle section and an end image. The problem i have is that when a different tab is selected, the start and end images do not change. For example:

http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/Example2.jpg

I can put into words what i want to do in the javascript but i have no idea where to implement it or the syntax to use.

1. Loop through the <ul> element and retrieve the names of the rel attributes of the <a> tags into an array.
2. For each rel attribute found, look for the <li> element with the id tag[ReturnedRelAttribute] + "Start" and change its class attribute from "SelectedStart" to "NonSelectedStart" or vice versa.
3. Same as step 2 but looking for the <li> element with the id tag [ReturnedRelAttribute] + "End" and change its class attribute from "SelectedEnd" to "NonSelectedEnd" or vice versa.

I think that would then achieve the effect that i am hoping for. The files used for this so far are as follows:

http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/default.htm
http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/tabcontent.css
http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/tabcontent.js

All of the image files used are also in that directory so if you need them you can get to them using:

"http://www.dcwebspace.pwp.blueyonder.co.uk/JSProblem/" + filename.

I hope this is enough information and i would be greatful if someone could post the Javascript i need to do this.

Thanks in advance

DClayton

[ddadmin]

Lets take a step back. Are you sure your current HTML markup is the only way to produce those tabs with the certain look? Right now you're using two empty LI elements to achieve this effect, which for one is semantically invalid:


<ul id="AttributeTabs" class="shadetabs">
<li id="DescriptionStart" class="SelectedStart"></li>
<li><a href="#" rel="Description" class="selected">Description</a></li>
<li id="DescriptionEnd" class="SelectedEnd"></li>
<li id="New FeaturesStart" class="NonSelectedStart"></li>
<li><a href="#" rel="New Features">New Features</a></li>
<li id="New FeaturesStart" class="NonSelectedEnd"></li>
<li id="FeaturesStart" class="NonSelectedStart"></li>
<li><a href="#" rel="Features">Features</a></li>
<li id="FeaturesEnd" class="NonSelectedEnd"></li>
<li id="VariantStart" class="NonSelectedStart"></li>
<li><a href="#" rel="Variant">Variant</a></li>
<li id="VariantEnd" class="NonSelectedEnd"></li>
</ul>

The more important issue of course is that it complicates getting the script to correctly apply the "selected" effect to the selected tab. I could take a stab, but in the long run, you'd be a lot better off if you can somehow create the look you want within the single <LI> element in which the tab is contained in. That way, applying the selected effect is as simple as modifying the ".selected" class within the CSS file.

[DClayton]

Hi ddadmin,

Thanks for the reply. Also, thank you for the great script. I forgot to mention this in the original post.

I have tried a number of approaches to this including putting <img> tags into each <li> tag. Either way, with the current design, i will still have to change attributes to select the different image. There could be x number of tabs as i am using the tabs to display product information. If someone enters a new type of attribute against a product in our master database, i have to then create a new image.

The problem i have with the design is that it is used elsewhere on the site, though in the other places each tab is a different page so i don't need DHTML. My other thought was to create a single image for each tab with the name in the image. However, i am going to be building the DHTML dynamically :) What happens is our database returns XML data to an ASCX control on the web page. I then use an XSLT to transform that XML into DHTML to be displayed on the page. When the XSLT transformation occurs, i will build each <li> tag dynamically using the attribute name (from the XML) as the ID tag. This is why for the "Description" tab i have used "DescriptionStart" and "DescriptionEnd" as the IDs for the start and end image.

I hope that makes a little more sense and that i have explained the problem enough for you to understand. I am open to suggestions on better ways to achieve what i am trying to do but the main thing is that the tabs have to look the same as on the rest of the site and be dynamically created.

Thanks

DClayton

[ddadmin]

Hmmm ok this is turning out to be a lot more complex than I had thought. Basically having to account for the opening and closing dummy LI tags means some key logic within the script need to be modified. Unless this is absolutely essential, I'll have to put this in the back burner for now.

[DClayton]

Hi ddadmin,

Thanks for the reply. I have managed to solve the problem now. All that was required was a small modification to the JScript function "expandtab". Here is the full function with my additions:

expandtab:function(tabref){
//Added DClayton
var SelectedTab=tabref.getAttribute("rel") //Store the selected tab
this.A_Tags=document.getElementById(this.tabinterfaceid).getElementsByTagName("a") //Array to store rel values of <a> tags
this.LI_Tags=document.getElementById(this.tabinterfaceid).getElementsByTagName("li") //Get all <li> tags within container
//Change the selected tabs appearence
for (var x=0; x<this.A_Tags.length; x++) //Iterate through the a tags
{
for (var y=0; y<this.LI_Tags.length; y++) //Iterate through the li tags to find the current rel tags start position. Change the class
{
if (this.LI_Tags[y].getAttribute("id")==SelectedTab+"Start") //Check to see if this is the start part of the selected tab
{
document.getElementById(SelectedTab+"Start").className="SelectedStart"
}
else if (this.LI_Tags[y].getAttribute("id")==SelectedTab+"End") //Check to see if this is the end part of the selected tab
{
document.getElementById(SelectedTab+"End").className="SelectedEnd"
}
}
}
//Change the non selected tabs apperences
for (var z=0; z<this.LI_Tags.length; z++)
{
if (this.LI_Tags[z].getAttribute("id")!="" && this.LI_Tags[z].getAttribute("id")!=SelectedTab+"Start" && this.LI_Tags[z].getAttribute("id")!=SelectedTab+"End")
{
var currentID = document.getElementById(this.LI_Tags[z].getAttribute("id"))
if (currentID.className=="SelectedStart")
{
currentID.className="NonSelectedStart"
}
else if (currentID.className=="SelectedEnd")
{
currentID.className="NonSelectedEnd"
}
}
}
//End Addition
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
{
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
}

}

I have updated the files on the links in my original post so that you can see the finished version. It works in IE7 and Firefox and there is a small issue with the first image in IE6.

Thanks again for the great script and your posts. I appreciate it. Please feel free to use the code if required.

DClayton