Tab Content script not working on certain pages

[jmglkg]

Hello,

I'm trying to implement the CSS and JS based Tab Content script, which I find nicely works on some pages. However, when I try to make it "live" on other pages, it looks vastly different.

I am obviously not an experienced programmer, but I have went through the coding of both pages, and for the life of me cannot figure out why there is a difference.

Here are the two pages, the first one is a simple test page that shows the menu working perfectly, the second has the same script coding (the tab menu is in the black bar on the left towards the bottom of the page) and does not work:

http://www.sentimentrader.com/subscriber/test_page.htm
http://www.sentimentrader.com/subscriber/signposts.htm

My guess is that there is a conflict with other coding on the second page, but I have tried everything I could think of with no success.

Any help is greatly appreciated.
Jason

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[ddadmin]

On your 2nd page, your main tabs' HTML should not be a table:

<table id="maintab" class="shadetabs" border="0" cellpadding="0" cellspacing="0" width="100&#37;">
<!--msthemelist--><tr><td valign="baseline" width="42"><img src="_themes/suit1/bullet1.gif" width="15" height="11" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial"><a href="#" rel="tcontent1">Read</a><!--mstheme--></font><!--msthemelist--></td></tr>
<!--msthemelist--><tr><td valign="baseline" width="42"><img src="_themes/suit1/bullet1.gif" width="15" height="11" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial"><a href="#" rel="tcontent2">Viewed</a><!--mstheme--></font><!--msthemelist--></td></tr>
<!--msthemelist--></table><!--mstheme--><font face="Arial">

Recall from the demo that it should be a list:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

You're free to include this list within a table, but that's different than making the table itself the Tab Menu interface, as you are trying to do it seems. Remember to remove the "id=maintab" declaration inside your TABLE tag.

[jmglkg]

Thank you for the reply, and my apologies for flouting board conventions. Here is the script to which I was referring:

http://www.dynamicdrive.com/dynamici...tabcontent.htm

I removed the table from the second page within which the tab interface was included, but that didn't seem to change anything.

The exact same coding works on the other page I included (test_page), so I'm thinking there must be some other code on the second page that is interfering with the Tab Content code somehow...

[ddadmin]

Hmm I don't see any changes being done to the page. To recap, I mean, firstly, remove this portion of your HTML:

<table id="maintab" class="shadetabs" border="0" cellpadding="0" cellspacing="0" width="100&#37;">
<!--msthemelist--><tr><td valign="baseline" width="42"><img src="../_themes/suit1/bullet1.gif" width="15" height="11" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial"><a href="#" rel="tcontent1">Read</a><!--mstheme--></font><!--msthemelist--></td></tr>

<!--msthemelist--><tr><td valign="baseline" width="42"><img src="../_themes/suit1/bullet1.gif" width="15" height="11" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial"><a href="#" rel="tcontent2">Viewed</a><!--mstheme--></font><!--msthemelist--></td></tr>
<!--msthemelist--></table><!--mstheme--><font face="Arial">

and replace it with something like:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

[jmglkg]

OK, I've done that, but it still doesn't work.

The odd thing is that when I pull up "view source" on the page, the script is enveloped in tags like <!--mstheme--> or <!--msthemelist-->. Is that what could be causing the problem? I'm using Microsoft Frontpage to generate the pages.

The even odder thing is that Frontpage does not insert those tags on the test_page that I used the same script in.

[ddadmin]

On the target page, I still see no changes being made. The unmodified table is still there. I believe <!--mstheme--> has something to do with MS Frontpage's theme feature that automatically inserts certain portions of the page. You need to try and disable that feature.

The easiest way to tell if you're successful in making the changes is to view the page's source to see if it's been physically changed. Right now it hasn't.