PDA

View Full Version : table borders inside ajax tabs



Chadi
09-20-2007, 06:34 PM
1) Script Title:
Ajax Tabs Content script

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

Every time I click a tab, it creates an inner table border. This happens every time I click a time, as you see in screenshots they build up. My coding is below and I'm using this in a vbulletin forum (forumhome template)

header

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css">
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
</script>
</head>


main (entire table, including my shoutbox)


<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
<tr>
<td class="alt2">
<!-- BEGIN CBOX - http://www.cbox.ws -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="cbox tagboard" width="100%">
<tr><td align="center">
<iframe frameborder="0" width="100%" height="175" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="1" marginwidth="1" scrolling="auto" name="cboxmain" id="cboxmain" style="border: 1px solid #E4E6F5"></iframe>
</td>
<td align="center" rowspan="2" width="255" style="padding-left: 10px">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td align="center" height="20" bgcolor="#FFFFFF">
<div class="smallfont">
<b>Members Currently in Live Chat:&nbsp;
<span style="background-color: #E4E6F5">&nbsp;<font size="4">$totalchatters</font>&nbsp;
</span></b></div></td>
</tr>
<tr>
<td align="center" height="20">&nbsp;</td>
</tr>
</table>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Social</a></li>
<li><a href="ajaxtabs/tab1.htm" rel="ajaxcontentarea">Tools</a></li>
<li><a href="ajaxtabs/tab2.htm" rel="ajaxcontentarea">Info</a></li>
<li><a href="ajaxtabs/tab3.htm" rel="ajaxcontentarea">Fun</a></li>
<li><a href="ajaxtabs/tab4.htm" rel="ajaxcontentarea">Site</a></li>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
<table style="width: 100%">
<tr>
<td class="style1" style="width: 126px">
<img alt="Live Chat!" src="images/chat.png" width="48" height="48"></td>
<td class="style1" style="width: 127px">
<img alt="Events" src="images/events.png" width="48" height="48"></td>
</tr>
<tr>
<td class="style1" style="width: 126px"><span lang="en-us">
<div class="smallfont">Chat</div></span></td>
<td class="style1" style="width: 127px"><span lang="en-us">
<div class="smallfont">Events</div></span></td>
</tr>
<tr>
<td class="style1" style="width: 126px">
<img alt="Members" src="images/photos.png" width="48" height="48"></td>
<td class="style1" style="width: 127px">
<img alt="Journal" src="images/journal.png" width="48" height="48"></td>
</tr>
<tr>
<td class="style1" style="width: 126px"><span lang="en-us">
<div class="smallfont">Photos</div></span></td>
<td class="style1" style="width: 127px"><span lang="en-us">
<div class="smallfont">Journals</div></span></td>
</tr>
</table>
</div>
</td></tr><tr>
<td align="center">
<if condition="in_array($bbuserinfo['usergroupid'], array(2,6,7,25))">
<iframe frameborder="0" width="100%" height="60" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=form&amp;nme=<?=urlencode($username)?>&amp;nmekey=<?=md5('1j3n8ei6mo4j2g40'.$username)?>&amp;wname=75&amp;wemail=68&amp;wmsg=250" marginheight="1" marginwidth="1" scrolling="no" allowtransparency="yes" name="cboxform" id="cboxform" style="border: 1px solid #E4E6F5"></iframe>
<else />
You must be logged in and registered to use this shoutbox
</if>
</td></tr>
</table>
</div>
<!-- END CBOX -->
</td>
</tr>
</tbody>



bottom


<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

</body>

Chadi
09-22-2007, 02:43 AM
Can I get a little assistance please? :)

Thanks ;)

ddadmin
09-22-2007, 06:10 AM
Do you have a URL to the problem page? It'd make it a lot easier, to be able to see the source of the entire page.

Chadi
09-22-2007, 11:39 AM
I had to take it off for now

ddadmin
09-23-2007, 06:55 AM
Can you attach the souce for the entire page then? Your code above begins at <tbody>.

Chadi
09-26-2007, 03:45 AM
Ok here it is in two parts since it exceeds 10k max post limit


$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]"
lang="$stylevar[languagecode]" xml:lang="$stylevar[languagecode]">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
$headinclude
<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>
</head>
<body>
$header
$navbar

<!-- peterska2 side column -->
<table border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">
<!-- / peterska2 side column -->

<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

<tr>
<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>

</tr>
</table>
<div class="cat_spacer"></div>
</if>
<!-- / guest welcome message -->

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">

<tr>
<td class="tcat">
<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline</td>
</tr>

<if condition="$show['loggedinusers']"></if>
<!-- logged-in users -->
<tbody>
<tr>
<td class="thead">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
Talk Jesus Shoutbox!</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
<tr>
<td class="alt2">
<!-- BEGIN CBOX - http://www.cbox.ws -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="cbox tagboard" width="100%">
<tr><td align="center">
<iframe frameborder="0" width="100%" height="175" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="1" marginwidth="1" scrolling="auto" name="cboxmain" id="cboxmain" style="border: 1px solid #E4E6F5"></iframe>
</td>
<td align="center" rowspan="2" width="255" style="padding-left: 10px">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td align="center" height="20" bgcolor="#FFFFFF">
<div class="smallfont">
<b>Members Currently in Live Chat:&nbsp;
<span style="background-color: #E4E6F5">&nbsp;<font size="4">$totalchatters</font>&nbsp;
</span></b></div></td>
</tr>
<tr>
<td align="center" height="20">&nbsp;</td>
</tr>
</table>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Social</a></li>
<li><a href="ajaxtabs/tab1.htm" rel="ajaxcontentarea">Tools</a></li>
<li><a href="ajaxtabs/tab2.htm" rel="ajaxcontentarea">Info</a></li>
<li><a href="ajaxtabs/tab3.htm" rel="ajaxcontentarea">Fun</a></li>
<li><a href="ajaxtabs/tab4.htm" rel="ajaxcontentarea">Site</a></li>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
<table style="width: 100%">
<tr>
<td class="style1" style="width: 126px">
<img alt="Live Chat!" src="images/chat.png" width="48" height="48"></td>
<td class="style1" style="width: 127px">
<img alt="Events" src="images/events.png" width="48" height="48"></td>
</tr>
<tr>
<td class="style1" style="width: 126px"><span lang="en-us">
<div class="smallfont">Chat</div></span></td>
<td class="style1" style="width: 127px"><span lang="en-us">
<div class="smallfont">Events</div></span></td>
</tr>
<tr>
<td class="style1" style="width: 126px">
<img alt="Members" src="images/photos.png" width="48" height="48"></td>
<td class="style1" style="width: 127px">
<img alt="Journal" src="images/journal.png" width="48" height="48"></td>
</tr>
<tr>
<td class="style1" style="width: 126px"><span lang="en-us">
<div class="smallfont">Photos</div></span></td>
<td class="style1" style="width: 127px"><span lang="en-us">
<div class="smallfont">Journals</div></span></td>
</tr>
</table>
</div>
</td></tr><tr>
<td align="center">
<if condition="in_array($bbuserinfo['usergroupid'], array(2,6,7,25))">
<iframe frameborder="0" width="100%" height="60" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=form&amp;nme=<?=urlencode($username)?>&amp;nmekey=<?=md5('1j3n8ei6mo4j2g40'.$username)?>&amp;wname=75&amp;wemail=68&amp;wmsg=250" marginheight="1" marginwidth="1" scrolling="no" allowtransparency="yes" name="cboxform" id="cboxform" style="border: 1px solid #E4E6F5"></iframe>
<else />
You must be logged in and registered to use this shoutbox
</if>
</td></tr>
</table>
</div>
<!-- END CBOX -->
</td>
</tr>
</tbody>
</table>
<div class="spacer"></div>
<br />

<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
</tr>
</thead>

<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
<tr>
<td class="alt2"><a href="online.php$session[sessionurl_q]" rel="nofollow"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
<div>$activeusers</div>
</div>
</td>
</tr>
</tbody>
<!-- end logged-in users -->
</if>

Chadi
09-26-2007, 03:46 AM
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
<tr>
<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div>
$vbphrase[threads]: $totalthreads,
$vbphrase[posts]: $totalposts,
$vbphrase[members]: $numbermembers<if condition="$show['activemembers']">,
<span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
</if>
</div>
<div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
</div>
</td>
</tr>
</tbody>
<if condition="$show['birthdays']">
<!-- today's birthdays -->
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
$vbphrase[todays_birthdays]
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
<tr>
<td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
</tr>
</tbody>
<!-- end today's birthdays -->
</if>
<if condition="$show['upcomingevents']">
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
<if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
<tr>
<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
</tr>
</tbody>
</if>

<tbody>
<tr>
<td class="tcat" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php?$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>

</table>
$forumhome_markread_script
<!-- end what's going on box -->

<!-- icons -->
<div class="spacer"></div>
<table class="icon_legend" align="center" border="0" cellpadding="6" cellspacing="0" width="100%">


<tbody>
<tr align="center">
<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_new_small.gif" alt="" border="0" /></td>
<td align="left" class="alt1">
<div class="smallfont">$vbphrase[forum_contains_new_posts]</div>


</td>
<td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_old_small.gif" alt="" border="0" /></td>
<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_contains_no_new_posts]</div></td>
<if condition="$vboptions['showlocks']"><td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_new_lock_small.gif" alt="" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock_small.gif" alt="" border="0" /></td>
<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_is_closed_for_posting]</div></td></if>
</tr>


</tbody>

</table>
<!-- /icons-->


<!-- time and login code -->
<div class="spacer"></div>
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<!-- Time -->
<td align="$stylevar[left]" valign="top"><div class="smallfont">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div></td>
<!-- /Time -->

<!-- member logout -->
<if condition="!$show['guest']">
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
</if>
<!-- /member logout -->
</tr>
</table>
<!-- /time and login code -->

<!-- peterska2 side column -->
</td>
<td width="10px"></td>
<td valign="top" width="160px">
<table class="tborder" border="0" cellspacing="$stylevar[cellspacing]" cellpadding="$stylevar[cellpadding]" width="100%" align="center">
$forumhome_sidecolumn_right
</table>
</td>
</tr>
</table>
<!-- / peterska2 side column -->

$footer
</body>
</html>

Chadi
09-27-2007, 04:55 PM
Someone please help out :)

ddadmin
09-28-2007, 07:43 AM
Ok, posting your entire page doesn't help either, since there are too many dynamically included elements that I can't see. :) I'm pretty sure the problem has to do with the width of your tables inside the external files though (ie: tabs1.htm, tabs2.htm etc). Have you tried playing around with those tables' formatting?