Multi-TP Blocks

akulion · December 17, 2006, 10:17:46 AM

Hi

Ok I didnt know what to call this one really so I just named it Multi-TP Blocks lol

but anyways the demo should demonstrate what it does

Demo 1: http://goofy-goobers.com/forum/index.php
A stand alone demo (look on the left where it says USER and ONLINE)

Demo 2: http://path-to-peace.com/forum/index.php
A demo showing that 2 blocks using multi tabs can co-exist with some edits (details later)

First off - before you do anything there are 2 sets of instructions for users.

1- Instructions for people who dont have any other Multi-Tab blocks on their page

2- Instructions for Users who are ALREADY using a multi-tab style content box on their page

So lets begin with 1

Instructions for installation for User 1

Download the listed files below and upload to your forum root: (right click to save as)

tabcontent.css
tabcontent.js
shadeactive.gif
shade.gif

After you have done all that simply copy and paste the code below into a PHP side block:

Code Select


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

<script type="text/javascript" src="tabcontent.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="maintab" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent1">User</a></li>
<li><a href="#" rel="tcontent2">Online</a></li>

</ul>

<div class="tabcontentstyle2">

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

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

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>';

====================================

Instructions for installation for User 2

Since you already have tabs installed on your page so you dont need to upload any files or redeclare the Dynamic Drive copyright notice.

But you do need to edit one file slightly.

Download from your server tabcontent.css and open it up and find this line:

Code Select


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 650px;
margin-bottom: 1em;
padding: 10px;
}

now just below that entire block of code (or above it) paste this code:

Code Select


.tabcontentstyle2{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 150px;
margin-bottom: 1em;
padding: 10px;
}

** Note here - this is the place where you specify the width of your block, so adjust it according to your page side panel width settings.

Find in your index.template.php

Code Select


</head>

add BEFORE it:

Code Select


<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.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>

Then in your index.template.php file find:

Code Select


</body>

Add BEFORE it:

Code Select


<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>

Now the important part!!!!
Open the existing tabs content block (the old one on your page) in EDIT mode and remove the instances of the above codes from it.

Meaning since you were already using this Tabs code, so in your tabs block you will find:

Code Select


<script type="text/javascript">
initializetabcontent("maintab")
</script>

remove it then also you will find:

Code Select


<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.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>

remove it as well!

Be sure to do these steps otherwise the CSS and JS files will get declared 2 times and in turn increasing the code of your page a lot and also the script will not work since the initialize command was given 2 times! So be sure to remove it from your existing tabs block!

AFTER you have done all that boring old work finally place this code in a side PHP block, activate and enjoy!

Code Select


echo'
<ul id="maintab1" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent8">User</a></li>
<li><a href="#" rel="tcontent9">Stats</a></li>
</ul>
<div class="tabcontentstyle2"><div id="tcontent8" class="tabcontent">';
TPortal_userbox();
echo'</div><div id="tcontent9" class="tabcontent">';
TPortal_statsbox();
echo'</div></div>';

THE END!

(phew)

You can change the background graphics for the tabs by replacing the 2 gif files provided. Width of the block is controlled in the section mentioned above.
Thats it!
Enjoy!

akulion · December 17, 2006, 10:41:32 AM

*****IMPORTANT NOTICE!!****
Please be patient I discovered a bug with the Method 2, so dont use that for now!
**************************

Method 1 will work just fine though

fixed

ZarPrime · December 17, 2006, 12:15:25 PM

Quote from: Aku on December 17, 2006, 10:17:46 AM
Hi

Ok I didnt know what to call this one really so I just named it Multi-TP Blocks lol

but anyways the demo should demonstrate what it does

Aku, you are brilliant. This is a nice piece of code. I like it very much and am going to try it soon.

BTW, this will work with any theme, correct?

Thanks,
ZarPrime

skiller · December 17, 2006, 12:51:02 PM

Hi Aku, very nice job - neat and looks very original.
Thanks for your efforts! much appreciated.

btw, i used method 1, as first time am installing the multiple-TP block, however, in both the "user" and "online" tabs, i get the date, like "December 18, 2006, 12:50:31 am" which shows up on one single line - which causes the text to break out of the block onto the forum. i noticed that on your demo forums, they display correctly, with the excess text moving onto the next line.
i use SMF 1.1+TP 0.9.7 and default theme.

any advice?

Crip · December 17, 2006, 01:13:26 PM

Aku..
I really want this Christmas scene)

Quote
The file for the big countdown is HERE (click to download), download, unzip and put in your forum root and simply call it using the include command.

But i can not understand how to get it working....Help? $:-\$

akulion · December 17, 2006, 02:31:03 PM

Found bug and fixed it! It was so silly that I kept banging my head against it until TOOT it occured to me - such a simple solution lol Fixed in 1st post for installation 2

Anyways for those who want to know - no the bug is not security related - it was simply that when in forum the side block with tabs would stop functioning since the tabs function was being initalized in the center block.

ah well without further wait and no more boring speeches lol here is the installation method for those who want Multiple instances of the Tabs script running on their pages.

akulion · December 17, 2006, 02:32:28 PM

@ zarprime
yup it will work on all themes

@ skiller
Can you post the code as is from your block?
Ill have a look :up:

skiller · December 17, 2006, 02:57:29 PM

Hi Aku, i copied and pasted the exact same code from your first post, install 1. anyways, here is the one from my block (same thing)

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

<script type="text/javascript" src="tabcontent.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="maintab" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent1">User</a></li>
<li><a href="#" rel="tcontent2">Online</a></li>

</ul>

<div class="tabcontentstyle">

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

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

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>';

akulion · December 17, 2006, 03:00:13 PM

Are you using the editor by any chance?

Because I see that somehow BB code has snuck into your code

Code Select


<a href="#" rel="tcontent1">User[/url]</li>
<li><a href="#" rel="tcontent2">Online[/url]</li>

and if you notice the code in 1st post it is:

Code Select


<a href="#" rel="tcontent1">User</a></li>
<li><a href="#" rel="tcontent2">Online</a></li>

So Try turning the editor off from TP settings area and then put the code in the PHP block again from the 1st post :up:

skiller · December 17, 2006, 03:07:45 PM

i tried again. turned off the editor and this time the code is exactly as here, in the phpbox. however, same prob. there is an extension for the double-TP block with the box that has an outline which moves on the right (my forum has only a left-side bar) and the outline of that extended box is clearly visible.... ??

Recent

User

Stats

Members

Stats

Users Online

Multi-TP Blocks

akulion

akulion

ZarPrime

skiller

Crip

akulion

akulion

skiller

akulion

skiller