Need help with Tabbed Userbox

[AdviseorAnswers.com]

I have been attempting to figure out how to make a tabbed userbox.
Explanation of what I am trying to do.....

1- I want to change the present userbox block to a tabbed one or just add a new block to do it.
2- The block needs to be able to handle php on all tabs
3- I am looking have the user info as it now in the first tab
4- Add this as the second tab:

Code Select Expand


global $scripturl, $context;
// My profile control
echo '
<a href="', $scripturl ,'?action=profile">My Profile</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=customized">Customize My Profile</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=pictures;add">Add Profile Photo</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=pictures">My Pictures</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=buddies">Manage Friends</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=comments">My Comments</a><br />
<a href="', $scripturl ,'?action=pm;u=', $context['user']['id'] ,'">My Emails</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,';sa=pmprefs">My Ignore list</a><br />
<a href="', $scripturl ,'?action=profile;u=', $context['user']['id'] ,'sa=forumProfile>My Signature</a><br />
<a href="', $scripturl ,'?action=felblog;u=', $context['user']['id'] .';sa=view">My Blog</a><br />
';

and this as a third tab

Code Select Expand


// My Chess
echo '
<img src="/Themes/default/SMFChess/chessblock/main.png"/> <a href="', $scripturl ,'?action=chess">My Chess Stats</a><br />
<img src="/Themes/default/SMFChess/chessblock/challenge.png"/> <a href="', $scripturl ,'?action=chess;sa=challenge">Challenge</a><br />
<img src="/Themes/default/SMFChess/chessblock/current.png"/> <a href="', $scripturl ,'?action=chess;sa=current">Current Matches</a><br />
<img src="/Themes/default/SMFChess/chessblock/finished.png"/> <a href="', $scripturl ,'?action=chess;sa=finished">Finished Matches</a><br />
<img src="/Themes/default/SMFChess/chessblock/leaderboard.png"/> <a href="', $scripturl ,'?action=chess;sa=leaderboard">Leaderboard</a><br />
';


Actually have a couple more tabs I need added, but if someone could get me started I believe I can finish it. I have been working on this for a while and have not gotten anywhere with it.
I have the files for this one on my server but I can't get it right. All I get is a bunch of messed up codes.
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

There was a site that had SMF and TP codes on that I went to when I first started using this program, and it that had such a userbox but I have no idea what site it was

EDIT:
I am trying to use Demo #1- Basic implementation on the page listed above

[JPDeni]

What is the problem that you're having?

[AdviseorAnswers.com]

I'm trying to integrate the scripts for tabbed content into a side block to give my userbox more functions. The script I am using is the #1 demo shown here;
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
I have been using this post as a guide into making this script able to handle php
http://www.tinyportal.net/index.php?topic=13203.0
Also located this and tried the one listed on that post, but could not locate the required files.
http://www.tinyportal.net/index.php?topic=11451.0
So far I have come up with this

Code Select Expand


echo'
<head>
<link rel="stylesheet" type="text/css" href="/ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="/ajaxtabs/ajaxtabs.js">

/***********************************************
* Tab Content script- Ã,© 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>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">User</a></li>
<li><a href="#" rel="countrydivcontainer1">Stats</a></li>

</ul>

<div class="countrydivcontainer">

<div id="#default" class="tabcontent">';
TPortal_userbox();
echo'</div>

<div id="countrydivcontainer1" class="tabcontent">';
TPortal_statsbox();
echo'</div>

</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
';

It does call the needed information, but it shows it all at once. Take a look at my homepage, bottom right corner right side. It shows what I have so far.
http://www.adviseoranswers.com/index.php
This site has the correct outcome that I am looking for....
http://www.therisenguild.net/wow/index.php

Thanks for helping me with this

[JPDeni]

Sorry. Way over my head.

[AdviseorAnswers.com]

Thank you anyway JPDeni.

Ok I have made some headway with this if anyone else would like to take a look...

Code Select Expand


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

/***********************************************
* Tab Content script- Ã,© 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>

<ul id="countrytabs" class="shadetabs">
<li class="selected"><a href="#" rel="countrytabs1">User</a></li>
<li><a href="#" rel="countrytabs2">Stats</a></li>
</ul>

<div style="border:1px solid gray; width:125px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">';
TPortal_userbox();
echo'</div>

<div id="country2" class="tabcontent">';
TPortal_statsbox();
echo'</div>

</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
';


All the graphics are showing correctly and the information is too. But it all shows at once. Also holding the pointer over the tab, shows that they are linked to my /index.php page.


EDIT:
Figured it out