New to AJAX Tab Content.

[hktvb2001]

1) Script Title:
Ajax Tabs Content script

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

3) Describe problem:
I am new to this AJAX Tabs Content, but I know that is the one that I need on my web site. But, on my web site, I am using link on image, and these are in a TABLE, so how can I use the AJAX on image?

Here is my code on my page:

<TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> <a class="toggleopacity" href="index.html">
<img border="0" src="images/1m1.gif" width="108" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-1.html">
<img border="0" src="images/1m2.gif" width="96" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-2.html">
<img border="0" src="images/1m3.gif" width="84" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-3.html">
<img border="0" src="images/1m4.gif" width="99" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-4.html">
<img border="0" src="images/1m5.gif" width="111" height="49"></a></TD>
<TD>
<img border="0" src="images/1m6.gif" width="100" height="49"></TD>
</TR>
</TABLE>

How can I insert the AJAX into this?

[hktvb2001]

anyone can help?

[codeexploiter]

If you want to use the AJAX Tab content script in your page you might have to change the existing structure of your page. You can replace your existing page structure with one that gives you the AJAX Tab content script.

You can make the modification like the following :

<ul id="maintab" class="shadetabs">
     <li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
     <li><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></li>
     <li><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></li>
     <li><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></li>
     <li><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></li>
     <li><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></li>
     <li><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></li>
</ul>

The above code can directly replace your table based code (Note that you have to use your own details like page name, image names, etc in the above code.

In 'ajaxtabs.css' file you can find a CSS class - contentstyle where you can find a 'width' property that determines the width of each tab, you can adjust it according to your requirement.

Hope this helps.

[davebarnes]

This thread http://www.dynamicdrive.com/forums/s...ad.php?t=25108 may also give some ideas.

You don't have to give up on using table cells (<td>) as your tab container.

[hktvb2001]

OK, I got the first move. But I encount a problem. Here is an example of the structure of my page.
-----------
[MENU]
[DEFAULT CONTENT]
[BOTTOM]
-----------
When I press on the link in the [MENU], the tab load in the [DEFAULT CONTENT], which is great. But the problem is when I click on another tab, it doesnt not replace with the [DEFAULT CONTENT], but it pull the [DEFAULT CONTENT] down, and add the tab content.

That's mean, when I click on a tab, the new page struture is like this:
-----------
[MENU]
[NEW CONTENT]
[DEFAULT CONTENT]
[BOTTOM]
-----------

When I click on another tab, it will replace the [NEW CONTENT], but the [DEFAULT CONTENT] is always here...

Why is that?

------ Another question.. Does it work with Mozilla FireFox? I have Mozilla FireFox 2.0.0.6, and when I load the page in IE, it works. But in FF, it doesn't work....

[hktvb2001]

OMG!!! Im a genius.. I have fix the code myself.. The problem here is the #default in the code. I think that when we use the TAB in image, we have to use the <span> code. So, the default won't work. What I did is I change the whole code to this: ( I remove the #default, and add another page..)

<ul id="maintab" class="shadetabs">
     <span class="selected"><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></span>
     <span><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></span>
     <span><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></span>
     <span><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></span>
     <span><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></span>
     <span><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></span>
</ul>

In this case, I have changed all "li" to "span" in the ajaxtabs.js

----------------------- All the above are correct now! ----------------

Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

[hktvb2001]

Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

[hktvb2001]

Please, can someone help me. I have only that problem, and my site could be up soon. When I was having this prob, I have thought of using the Iframe SSI Script 2 (http://www.dynamicdrive.com/dynamici...framessi2.htm). That way, I will have to make my code for IE, and FF. Also, these both script doesn't work on Opera..

What can I do now?? Is there any way to make the AJAX script works on both 3 browser???

[ddadmin]

Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

FF certainly does support the <span> tag. One thing I noticed that is off with your code is the part in red:

<ul id="maintab" class="shadetabs">
     <span class="selected"><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></span>
     <span><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></span>
     <span><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></span>
     <span><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></span>
     <span><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></span>
     <span><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></span>
</ul>

With the removal of the LI tags, UL is no longer valid, so you should change that to, say, DIV. Then, inside ajaxtabs.js, do a search and replace, replacing all instances of "li" with "span" instead. This should do it.

[hktvb2001]

Then, inside ajaxtabs.js, do a search and replace, replacing all instances of "li" with "span" instead. This should do it.

I did change the "li" to "span" already.

With the removal of the LI tags, UL is no longer valid, so you should change that to, say, DIV.

When I remove the UL and change to DIV, it doesn't work anymore on any browser. If I reput the UL, it works only with IE, but not with FF, and Opera.
I have tried to change to SPAN, but it doesnt work too..

Please help. Thanks!