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 (http://path-to-peace.com/forum/tabcontent.css)
tabcontent.js (http://path-to-peace.com/forum/tabcontent.js)
shadeactive.gif (http://path-to-peace.com/forum/shadeactive.gif)
shade.gif (http://path-to-peace.com/forum/shade.gif)
After you have done all that simply copy and paste the code below into a PHP side block:
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:
.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:
.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
</head>
add BEFORE it:
<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:
</body>
Add BEFORE it:
<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:
<script type="text/javascript">
initializetabcontent("maintab")
</script>
remove it then also you will find:
<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!
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!
*****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
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
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?
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? :-\
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.
@ zarprime
yup it will work on all themes
@ skiller
Can you post the code as is from your block?
Ill have a look :up:
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>';
Are you using the editor by any chance?
Because I see that somehow BB code has snuck into your code
<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:
<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:
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.... ??
oh im sorry i noticed a small error
change tabcontentstyle in the code to tabcontentstyle2
Also can you give a link so I can see whats happening?
Fixed! Thanks a lot Aku. yes, the bug was with the tabcontentstyle which i changed as you asked. This made the text move on to the next line, instead of poking out into the forums area.
one hint though: when using this code, need to select "Do not use title/frame" in the code block, and this makes the extended frame disappear, so instead the background of that multiple-TP block matches with that of the forum. anyway to make the background match that of the regular TP block Aku? (just a side guess, but grateful for the fix!)
ur welcome, glad u got it working. Ill also try and refine the code a bit more later on so that it picks up images from the theme being used.
Quote
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</li>
<li><a href="#" rel="tcontent2">Online</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>';
Is what I used and the Tabs dont work for some reason, what did I do wrong?
did you paste the code in a phpbox? - any other and it wont work.
yup paste in a PHP box and be sure to place all the files provided in the 1st post in your forum root
Forum root is the base of the installation of SMF where you find all the folders for SMF like:
Themes
Sources
etc etc
Awesome!! Can I do this with other things also, like shoutbox, themes??
yup u should be able to do it with all the Tiny Portal functions, here are:
TPortal_searchbox()
TPortal_themebox()
TPortal_shoutbox()
however getting multiple instances of the tabbed blocks working together is a bit tricky (explained in the install method 2)
Okay those worked but I wanted a block that I actually added, like a Teamspeak block, but dont know what the 'TP' name is ..
EDIT: Okay it actually works in FireFox, but in IE it dont.
It works fine in IE, Opera and FF for me on both my sites, the demo page and the live site.
Which code are you trying to make it work with?
You can add your own blocks any content type as long s it is formatted correctly, so depends from code to code but the basic thing is to get your block content between this:
<div id="tcontentX" class="tabcontent">
CONTENT CODE GOES HERE
</div>
Where X is the tab number
Since the original code uses a PHP function so I have used echo '';
but if it was plain html / script then no need for echo or for that matter even use of php.
I like this snippet, but there are a few quirks with it that I was hoping you could help with ...
1. It works fine on the main Forum, but when you drill down into a board the tabs disappear and the "User" and "Online" tabs become links and both show up below the links. I have tried this in all themes including default and it works the same.
2. Any idea how to remove that black line at the bottom of the active tab?
I am including a link to show you what I mean. I have enabled this block for guests so that you can look at it. Once you're in the main Forum, click on one of the boards to see what I'm talking about. If you want to try it with different themes I have enabled the theme selector for guests as well. The link is ...
http://talesofthehavenexpanse.com/SMF-1/index.php?action=forum (http://talesofthehavenexpanse.com/SMF-1/index.php?action=forum)
ZarPrime
EDIT: BTW, drilling down into a board seems to work correctly on your two sites. The block shows correctly there, but on mine it just don't work right. What am I doing wrong? :'(
Oh yes for that u will have to follow the method 2 and include the call to the script files in your index.template.php file itself.
As for the black border - check the CSS file, if i remember correctly there is a border setting for the tabs which you can turn on or off
Dang, looks very good Aku :up:
Quote from: Aku on December 24, 2006, 11:22:10 PM
Oh yes for that u will have to follow the method 2 and include the call to the script files in your index.template.php file itself.
OK, let me go back up and see if I can look at what to do on method 2. I'll get back to you if I can't solve the problem.
QuoteAs for the black border - check the CSS file, if i remember correctly there is a border setting for the tabs which you can turn on or off
OK, this is the easy part. Thanks for the help.
ZarPrime
Hi Aku
i've installed some nice "black" themes and the double-tabbed module is transparent background, so the text doesnt show up /ouch!
is there a way to set the background color, so that the black text doesnt match with the background and "disappears" - a proper integration into the theme system would be ideal though, as wouldnt have to change the background color code to display correctly with each default theme :)
Thanks in advance!
well for that this is just a trial and run (havent tried it myself)
but my guess is that the CSS declaration would need to be put in index.template.php file
find:
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';
and add under it:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/tabcontent.css" />';
After that you will have to modify the tabcontent.css file to change the active and inactive background images by changing
background-image: url(shadeactive.gif);
to
background-image: url(images/shadeactive.gif);
and also the other instance of the shade.gif in the css file.
and finally the shadetabs li colors for all the link instances would have to be taken out, and that way the script should use the default colors declared in the main theme's css
now comes the hard part is which would be finding suitable graphics to match each theme
finally when u have all the images ready
u will have to upload each set of images to their respective themes images folder
and a copy of the tabcontent.css file each to every themes folder
---------------------
anyways this is just guidelines as how to go about it
i will experiment with it in depth later to hopefully strike a resolve - especially in regards to the shade.gif and shadeactive.gif, so that the script uses an already present image in the theme (like titlebg.gif) instead of having to make new ones
Just so all you know.
I have experience on this because I learned it the hard way. Use method 1 if you do not have those kind of tabs anywhere on your page. User method 2 if you already have tabs anywhere on your page.
Also for the directions on the index.template.php file, you must do that on every theme you want to be able to use those tabs.
Thanks,
Brianjw
Using Option 1. Too cool! 8)
Aku,
These tabs are great!
The main one works fine and so does the User/Stats one (multi tabs)
but when I go off the homepage it stops working! ???
Why? any way to fix this?
if u use only side blocks then use method 1
if u use both side and center blocks use method 2
EITHER ways method 2 is the more superior one since it will allow thos emulti blocks to work on any page
I used method 2 ???
PS: Aku, your website says "403 Forbidden"
Quote from: brianjw on December 30, 2006, 01:25:37 AM
I used method 2 ???
PS: Aku, your website says "403 Forbidden"
oh no its all over for me :'( my site is gone
It is. Because others say it works :'(
when i go on another internet network it lets me go on your site though ???
Hi there love the tabs, now i ran into a little snag and as iÃ,´m no coder i got no clue whatÃ,´s up.
If you look here (http://angerd.net/) and check the shoutbox, for me i canÃ,´t see the shouts unless i press the 50 latest shouts link, itÃ,´s probably me being stupid.
If needed log on with test, test!
echo'
<ul id="maintab1" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent6">Search</a></li>
<li><a href="#" rel="tcontent7">Shout</a></li>
</ul>
<div class="tabcontentstyle5"><div id="tcontent6" class="tabcontent">';
TPortal_searchbox();
echo'</div><div id="tcontent7" class="tabcontent">';
TPortal_shoutbox();
echo'</div></div>'; ThatÃ,´s for the shoutbox side!
echo'
<ul id="maintab" 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>'; And the user side!
Now where am i being a dumbass? :)
Interesting phenomena. Just out of curiosity what happens if you make the shoutbox the default on that side instead of the search function?
ZarPrime
Heh, donÃ,´t think there is a default, looks like cookies remember which tab you where on last time.
No, I mean try changing ...
echo'
<ul id="maintab1" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent6">Search</a></li>
<li><a href="#" rel="tcontent7">Shout</a></li>
</ul>
<div class="tabcontentstyle5"><div id="tcontent6" class="tabcontent">';
TPortal_searchbox();
echo'</div><div id="tcontent7" class="tabcontent">';
TPortal_shoutbox();
echo'</div></div>';
to ...
echo'
<ul id="maintab1" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent6">Search</a></li>
<li><a href="#" rel="tcontent7">Shout</a></li>
</ul>
<div class="tabcontentstyle5"><div id="tcontent6" class="tabcontent">';
TPortal_shoutbox();
echo'</div><div id="tcontent7" class="tabcontent">';
TPortal_searchbox();
echo'</div></div>';
ZarPrime
I tried to do that but no change on the behaviour, will have to look at it again tomorrow heh
Thx for the suggestion tho... :)
cool. this is really cool stuff :D
ok guys ill have a look at this stuff soon - sorry but im being kept busy with a lotta things here and there - so my apologies for not respnding sooner
but hopefully today or tomorrow when I have some free time to sit and relax Ill have a look :up:
ok. take your time aku. :D
I tried "Option 1" and the code worked perfect. I want to use "Option 2" so I can install the tabbed blocks on the side and center blocks but it only shows the tabs with no contents (attached screenshot). I am using SMF1.1.1 w/ TP .97.
Below is my code:
In the phpbox
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>';
In index.template.php at the end of
</head>
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "', $context['session_id'], '");';
echo '
document.getElementById("upshrink_ic").src = smf_images_url + ' . '"/'. $settings['theme_main_color'] . '" + (mode ? "/expand.gif" : "/collapse.gif");
document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";
current_header_ic = mode;
}
// ]]></script>
<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>
<body>';
// TinyPortal start
if($context['TPortal']['fixed_width']!=0)
echo '<table align="center" width="'.$context['TPortal']['fixed_width'].'" cellpadding="0" cellspacing="0" border="0"><tr><td>';
// TinyPortal end
In index.template.php at the end of
</body>
echo '
<div id="ajax_in_progress" style="display: none;', $context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' : '', '">', $txt['ajax_in_progress'], '</div>
';
// TinyPortal
if($context['TPortal']['fixed_width']!=0)
echo '</td></tr></table>';
// end
echo '
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
</body></html>';
}
Added new line in tabcontent.css
.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontentstyle2{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 150px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 760px;
margin-bottom: 1em;
padding: 10px;
}
Receiving the following js error in IE.
Quote
Line: 56
Char: 1
Error: "null" is null or not an object
Code: 0
Well, if it's any consolation, at least your buttons look nice, very nice indeed. ;)
ZarPrime
This is the same problem i had too: (demo: Click here (http://brianjwilson.com/index.php?action=forum)) It is not there, but go to the homepage. It is there ???
Quote from: sfboarders on January 05, 2007, 04:47:56 AM
I tried "Option 1" and the code worked perfect. I want to use "Option 2" so I can install the tabbed blocks on the side and center blocks but it only shows the tabs with no contents (attached screenshot). I am using SMF1.1.1 w/ TP .97.
Below is my code:
In the phpbox
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>';
In index.template.php at the end of </head>
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "', $context['session_id'], '");';
echo '
document.getElementById("upshrink_ic").src = smf_images_url + ' . '"/'. $settings['theme_main_color'] . '" + (mode ? "/expand.gif" : "/collapse.gif");
document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";
current_header_ic = mode;
}
// ]]></script>
<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>
<body>';
// TinyPortal start
if($context['TPortal']['fixed_width']!=0)
echo '<table align="center" width="'.$context['TPortal']['fixed_width'].'" cellpadding="0" cellspacing="0" border="0"><tr><td>';
// TinyPortal end
In index.template.php at the end of </body>
echo '
<div id="ajax_in_progress" style="display: none;', $context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' : '', '">', $txt['ajax_in_progress'], '</div>
';
// TinyPortal
if($context['TPortal']['fixed_width']!=0)
echo '</td></tr></table>';
// end
echo '
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
</body></html>';
}
Added new line in tabcontent.css
.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontentstyle2{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 150px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 760px;
margin-bottom: 1em;
padding: 10px;
}
Receiving the following js error in IE.
Quote
Line: 56
Char: 1
Error: "null" is null or not an object
Code: 0
For some reason the code below before </body> is giving me a js error.
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
At least you were able to get the tabs to show some content. Also, how did you create that center block on your homepage with all those tabs? That's what I'd like to do on my site.
I'm not sure what is going on with that js code you have. It is working for me and it is the same ???
Make sure you followed all the instructions on the beginning of this thread (thats all i could tell you ???)
As for the center blocks can be found right here: (instructions start step by step :))
CLick HEre (http://www.tinyportal.net/index.php?topic=7915.msg65068#msg65068) ;)
Quote from: sfboarders on January 08, 2007, 01:46:46 AM
For some reason the code below before </body> is giving me a js error.
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
At least you were able to get the tabs to show some content. Also, how did you create that center block on your homepage with all those tabs? That's what I'd like to do on my site.
yup im getting the error too
but no worries ill ask down at dynamic drive about the error - seems there is an error in their code itself, and they should be able to sort it out asap :up:
As for the shoutbox - it seems it dosent wana work with the tabbed content. So i guess we have to give up on that one :(
Quote from: brianjw on January 08, 2007, 02:14:40 AM
I'm not sure what is going on with that js code you have. It is working for me and it is the same ???
Make sure you followed all the instructions on the beginning of this thread (thats all i could tell you ???)
As for the center blocks can be found right here: (instructions start step by step :))
CLick HEre (http://www.tinyportal.net/index.php?topic=7915.msg65068#msg65068) ;)
OK, I played around with the moofx and decided to scrap it. I would be better of sticking with one type of tab version. So I was able to get the tabs to work in the center block and beleive it or not I got the user and stats to show up on the homepage. But I am having the same problem as you. It shows no content when you go in the forum or any other page. I noticed that Aku's site shows it correctly.
yes for it to show up on all pages it is a MUST that you declare these 2 bits in the index.template.php file of the themes instead of in the blocks:
This part inside the <head> of the doc:
Quote
<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>
and this part just before the </body> ends
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
important to note here is that ("maintab", "maintab1") are initilization strings for the tabs to work and must be named the same as your tab blocks.
For example in my code I had declared for tab block 1
<ul id="maintab1" class="shadetabs">
and for tab block 2
<ul id="maintab2" class="shadetabs">
If u look at the codes u will see these are named in the actual tabbed content block as shown below:
echo'
<ul id="maintab1" class="shadetabs"> <<---this is where the name occurs
<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>';
Thanks Aku, that fixed it! :)
As for the shoutbox i think iÃ,´m going to try and make it autorefresh, as when i click the last 50 shouts they appear in the tab, wierd tho...
Nontheless great work man...
It still didn't work, I did all that ???
Aku, can I ask you for the code and what type of box you made for your "New Topics" block with the tabs? I'd like to create a box with "New Topics" and a Welcome message.
I asked him that question too. He said he would like to keep that exclusively for his website. But if you look in the Block code snippets index you will find the topic that says Yahoo Style Tabs
I was able to do something similar. Check out my site. :) Not sure what the functions are called for the Replies and Views. It's all good. Not much room on my site cause it's narrow.
http://www.sfboarders.com
Try doing a search on TP for thoes. ;)
the new topics co
Quote from: sfboarders on January 15, 2007, 01:05:51 AM
Aku, can I ask you for the code and what type of box you made for your "New Topics" block with the tabs? I'd like to create a box with "New Topics" and a Welcome message.
here is the general code for now...
echo'
<ul id="maintab4" class="shadetabs">
<li class="selected">
<a href="#" rel="tcontent10"><img src="http://path-to-peace.com/forum/menuicons/pencil.gif"> New Topics</a></li>
<li><a href="#" rel="tcontent14"><img src="http://path-to-peace.com/forum/menuicons/newspaper.gif"> World News</a></li>
<li><a href="#" rel="tcontent11"><img src="http://path-to-peace.com/forum/menuicons/mario.gif"> New Games</a></li>
<li><a href="#" rel="tcontent12"><img src="http://path-to-peace.com/forum/menuicons/camera.gif"> New Pictures</a></li>
<li><a href="#" rel="tcontent15"><img src="http://path-to-peace.com/forum/menuicons/floppydisk.gif"> New Downloads</a></li>
<li><a href="#" rel="tcontent13"><img src="http://path-to-peace.com/forum/menuicons/lightningbolt.gif"> New Links</a></li>
</ul>
<div class="tabcontentstyle4">
<div id="tcontent10" class="tabcontent"><br>';
// Latest Topics
global $context, $settings, $scripturl, $txt, $db_prefix, $ID_MEMBER, $user_info, $modSettings, $user_profile;
//////////////////////////////////////////// ---------- Unconditional Exclude
//
$exclude_boards = array(); // KEEP (to preserve variable declaration)
// $exclude_boards = array(5); // Exclude single board
$exclude_boards = array(13, 58, 86, 87); // Exclude multiple boards
$ex_board_clause = !empty($exclude_boards) ? ' AND b.ID_BOARD NOT IN (' . implode(', ', $exclude_boards) . ')' : '';
//
//
//////////////////////////////////////////// ---------- Use in TP PHP Article (no title or frame from theme)
// This will give most recent XX posted to topics -OR-
// most recent XX unreplied to topics -OR-
// topics posted to in last XX hours -OR-
// most recent XX topics on topic notify list
//
// Sorts by most recent reply (descending; most recent first) -OR-
// creation order (descending; most recent first)
//
// All in the detailed topic format
//
//
// Default
// index.php?page=##
// most recent posted to topics - will list
// number equal to $settings['number_recent_posts']
//
// index.php?page=##;count=50 or index.php?page=##;type=last;count=50
// 50 most recently posted to topics
//
// index.php?page=##;type=unreplied or index.php?page=##;type=unreplied;count=50
// Most recent unreplied to topics - will
// list number specified in 'count' or default to
// number equal to $settings['number_recent_posts']
//
// index.php?page=##;type=hours or index.php?page=##;type=hours;count=12
// Topics posted to in last number of hours
// specified in 'count' or default to 24.
//
// index.php?page=##;type=notify or index.php?page=##;type=notify;count=50
// Topics in topic notifcation list up to number
// specified in 'count' or a maximum of 100 topics.
//
// *** Admins Only ***
// index.php?page=##;type=notify;user=XXX or index.php?page=##;type=notify;user=XXX;count=50
// Topics in topic notifcation list of specified user up to number
// specified in 'count' or a maximum of 100 topics.
//
// Add argument order=create to sort by topic creation sequence (most recent first)
// rather than by last reply sequence
$do_query = 1;
//////////////////////////////////////////// ---------- Poor Man's Global Announcements Block (center block)
//
// $announce_topics = array(254, 568, 675, 678); // Topic ID's to be 'Announced'
//
// $heading = '<center>Announcements<center>';
// $where_clause = 't.ID_TOPIC IN (' . implode(', ', $announce_topics) . ')';
// $limit_clause = '';
// $order_clause = 't.ID_LAST_MSG DESC';
////////////////////////////////////////////
//////////////////////////////////////////// ---------- Boardindex Most Recent Topics Arguments
//
// Comment out the Info Center's Most Recent Posts Code and Insert this
// to show Most Recent Topics in full detail style instead
//
// $list_count = $settings['number_recent_posts'];
// $heading = 'Most Recently Posted To Topics';
// $where_clause = 't.ID_LAST_MSG >= ' . ($modSettings['maxMsgID'] - 50 * min($list_count, 5));
// $limit_clause = 'LIMIT ' . $list_count;
// $order_clause = 't.ID_LAST_MSG DESC';
////////////////////////////////////////////
//////////////////////////////////////////// ------ Remove down to next mark to use in block/boardindex ------
//
if (empty($settings['number_recent_posts']))
$number_recent_posts = 6;
else
$number_recent_posts = $settings['number_recent_posts'];
if( isset($_GET['type']) )
$list_type = $_GET['type'];
else
$list_type = 'last';
if( isset($_GET['count']) )
$list_count = $_GET['count'];
else
{
$list_count = $number_recent_posts;
if ($list_type == 'notify')
$list_count = 100;
elseif ($list_type == 'hours')
$list_count = 24;
}
if ($list_count <= 0)
{
$list_count = $number_recent_posts;
if ($list_type == 'hours')
$list_count = 24;
}
if ($list_count > 100)
$list_count = 100;
if( isset($_GET['order']) )
$list_order = $_GET['order'];
else
$list_order = 'lastpost';
if( $list_order == 'create' )
$order_clause = 't.ID_FIRST_MSG DESC';
else
$order_clause = 't.ID_LAST_MSG DESC';
if ($list_type == 'hours')
{
$list_from = strtotime($list_count.' hours ago');
$where_clause = 'ml.posterTime >= ' . $list_from;
$limit_clause = ' ';
$heading = 'Topics Posted To In Last '. $list_count . ' Hours';
}
elseif ($list_type == 'unreplied')
{
$where_clause = 't.numReplies = 0';
if ($list_count == 0)
{
$limit_clause = ' ';
$heading = 'Unreplied To Topics';
}
else
{
$limit_clause = 'LIMIT ' . $list_count;
$heading = $list_count . ' Most Recent Unreplied To Topics';
}
}
elseif ($list_type == 'notify')
{
if (isset($_GET['user']) && $user_info['is_admin'])
{
$announce_topics = array();
$request = db_query("SELECT ID_TOPIC FROM {$db_prefix}log_notify WHERE ID_MEMBER = {$_GET['user']} AND ID_BOARD = 0", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($request))
$watched_topics[] = $row['ID_TOPIC'];
mysql_free_result($request);
$heading = $list_count . ' Most Recent Topics Being Watched by User # '.$_GET['user'];
$where_clause = 't.ID_TOPIC IN (' . implode(', ', $watched_topics) . ')';
$limit_clause = 'LIMIT ' . $list_count;
if (empty($watched_topics))
$do_query = 0;
}
else
{
$announce_topics = array();
$request = db_query("SELECT ID_TOPIC FROM {$db_prefix}log_notify WHERE ID_MEMBER = {$ID_MEMBER} AND ID_BOARD = 0", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($request))
$watched_topics[] = $row['ID_TOPIC'];
mysql_free_result($request);
$heading = $list_count . ' Most Recent Topics Being Watched';
$where_clause = 't.ID_TOPIC IN (' . implode(', ', $watched_topics) . ')';
$limit_clause = 'LIMIT ' . $list_count;
if (empty($watched_topics))
$do_query = 0;
}
}
else
{
$where_clause = 't.ID_LAST_MSG >= ' . ($modSettings['maxMsgID'] - 90 * min($list_count, 5));
$limit_clause = 'LIMIT ' . $list_count;
$heading = $list_count . ' Most Recently Posted To Topics';
}
//
//////////////////////////////////////////// ------ Remove up to first mark to use in block/boardindex ------
$stable_icons = array('xx', 'thumbup', 'thumbdown', 'exclamation', 'question', 'lamp', 'smiley', 'angry', 'cheesy', 'grin', 'sad', 'wink', 'moved', 'recycled', 'wireless');
$icon_sources = array();
foreach ($stable_icons as $icon)
$icon_sources[$icon] = 'images_url';
$topics = array();
if ($do_query == 1)
{
$request = db_query("
SELECT
ms.subject AS firstSubject, ms.posterTime AS firstPosterTime, ms.ID_TOPIC, t.ID_BOARD, b.name AS bname,
t.numReplies, t.numViews, ms.ID_MEMBER AS ID_FIRST_MEMBER, ml.ID_MEMBER AS ID_LAST_MEMBER,
ml.posterTime AS lastPosterTime, IFNULL(mems.realName, ms.posterName) AS firstPosterName,
IFNULL(meml.realName, ml.posterName) AS lastPosterName, ml.subject AS lastSubject, b.memberGroups,
ml.icon AS lastIcon, ms.icon AS firstIcon, t.ID_POLL, t.isSticky, t.locked, ml.modifiedTime AS lastModifiedTime,
LEFT(ml.body, 384) AS lastBody, LEFT(ms.body, 384) AS firstBody,
ml.smileysEnabled AS lastSmileys, ms.smileysEnabled AS firstSmileys, t.ID_FIRST_MSG, t.ID_LAST_MSG,"
. ($user_info['is_guest'] ? '1 AS isRead, 0 AS new_from' : '
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, 0)) >= ml.ID_MSG_MODIFIED AS isRead,
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, -1)) + 1 AS new_from') . "
FROM ({$db_prefix}messages AS ms, {$db_prefix}messages AS ml, {$db_prefix}topics AS t, {$db_prefix}boards AS b)
LEFT JOIN {$db_prefix}members AS mems ON (mems.ID_MEMBER = ms.ID_MEMBER)
LEFT JOIN {$db_prefix}members AS meml ON (meml.ID_MEMBER = ml.ID_MEMBER)
LEFT JOIN {$db_prefix}log_topics AS lt ON (lt.ID_TOPIC = t.ID_TOPIC AND lt.ID_MEMBER = $ID_MEMBER)
LEFT JOIN {$db_prefix}log_mark_read AS lmr ON (lmr.ID_BOARD = t.ID_BOARD AND lmr.ID_MEMBER = $ID_MEMBER)
WHERE " . $where_clause . $ex_board_clause . "
AND t.ID_TOPIC = ms.ID_TOPIC
AND b.ID_BOARD = t.ID_BOARD
AND ms.ID_MSG = t.ID_FIRST_MSG
AND ml.ID_MSG = t.ID_LAST_MSG
AND " . $user_info['query_see_board'] . "
ORDER BY " . $order_clause . " " . $limit_clause, __FILE__, __LINE__);
$topic_ids = array();
while ($row = mysql_fetch_assoc($request))
{
if ($row['ID_POLL'] > 0 && $modSettings['pollMode'] == '0')
continue;
$topic_ids[] = $row['ID_TOPIC'];
// Clip the strings first because censoring is slow :/. (for some reason?)
$row['firstBody'] = strip_tags(strtr(parse_bbc($row['firstBody'], $row['firstSmileys'], $row['ID_FIRST_MSG']), array('<br />' => '
')));
if (strlen($row['firstBody']) > 128)
$row['firstBody'] = substr($row['firstBody'], 0, 128) . '...';
$row['lastBody'] = strip_tags(strtr(parse_bbc($row['lastBody'], $row['lastSmileys'], $row['ID_LAST_MSG']), array('<br />' => '
')));
if (strlen($row['lastBody']) > 128)
$row['lastBody'] = substr($row['lastBody'], 0, 128) . '...';
$row['lastSubject'] = $row['firstSubject'];
$row['lastBody'] = $row['firstBody'];
// Decide how many pages the topic should have.
$topic_length = $row['numReplies'] + 1;
if ($topic_length > $modSettings['defaultMaxMessages'])
{
$tmppages = array();
$tmpa = 1;
for ($tmpb = 0; $tmpb < $topic_length; $tmpb += $modSettings['defaultMaxMessages'])
{
$tmppages[] = '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.' . $tmpb . ';topicseen">' . $tmpa . '</a>';
$tmpa++;
}
// Show links to all the pages?
if (count($tmppages) <= 5)
$pages = 'Ã,« ' . implode(' ', $tmppages);
// Or skip a few?
else
$pages = 'Ã,« ' . $tmppages[0] . ' ' . $tmppages[1] . ' ... ' . $tmppages[count($tmppages) - 2] . ' ' . $tmppages[count($tmppages) - 1];
if (!empty($modSettings['enableAllMessages']) && $topic_length < $modSettings['enableAllMessages'])
$pages .= ' <a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0;all">' . $txt[190] . '</a>';
$pages .= ' Ã,»';
}
else
$pages = '';
// We need to check the topic icons exist... you can never be too sure!
if (empty($modSettings['messageIconChecks_disable']))
{
// First icon first... as you'd expect.
if (!isset($icon_sources[$row['firstIcon']]))
$icon_sources[$row['firstIcon']] = file_exists($settings['theme_dir'] . '/images/post/' . $row['firstIcon'] . '.gif') ? 'images_url' : 'default_images_url';
// Last icon... last... duh.
if (!isset($icon_sources[$row['lastIcon']]))
$icon_sources[$row['lastIcon']] = file_exists($settings['theme_dir'] . '/images/post/' . $row['lastIcon'] . '.gif') ? 'images_url' : 'default_images_url';
}
$dummy = array();
$dummy[] = $row['ID_FIRST_MEMBER'];
$dummy[] = $row['ID_LAST_MEMBER'];
loadMemberData($dummy);
$profile_first = &$user_profile[$row['ID_FIRST_MEMBER']];
$profile_last = &$user_profile[$row['ID_LAST_MEMBER']];
// And build the array.
$topics[$row['ID_TOPIC']] = array(
'id' => $row['ID_TOPIC'],
'first_post' => array(
'id' => $row['ID_FIRST_MSG'],
'member' => array(
'name' => $row['firstPosterName'],
'id' => $row['ID_FIRST_MEMBER'],
'href' => $scripturl . '?action=profile;u=' . $row['ID_FIRST_MEMBER'],
'link' => !empty($row['ID_FIRST_MEMBER']) ? '<a href="' . $scripturl . '?action=profile;u=' . $row['ID_FIRST_MEMBER'] . '" title="' . $txt[92] . ' ' . $row['firstPosterName'] . '">' . '<font color="' . $profile_first['member_group_color'] . '">' . $row['firstPosterName'] . '</font>' . '</a>' : $row['firstPosterName']
),
'time' => timeformat($row['firstPosterTime']),
'timestamp' => forum_time(true, $row['firstPosterTime']),
'subject' => $row['firstSubject'],
'preview' => $row['firstBody'],
'icon' => $row['firstIcon'],
'icon_url' => $settings[$icon_sources[$row['firstIcon']]] . '/post/' . $row['firstIcon'] . '.gif',
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0;topicseen',
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0;topicseen">' . $row['firstSubject'] . '</a>'
),
'last_post' => array(
'id' => $row['ID_LAST_MSG'],
'member' => array(
'name' => $row['lastPosterName'],
'id' => $row['ID_LAST_MEMBER'],
'href' => $scripturl . '?action=profile;u=' . $row['ID_LAST_MEMBER'],
'link' => !empty($row['ID_LAST_MEMBER']) ? '<a href="' . $scripturl . '?action=profile;u=' . $row['ID_LAST_MEMBER'] . '">' . '<font color="' . $profile_last['member_group_color'] . '">' . $row['lastPosterName'] . '</font>' . '</a>' : $row['lastPosterName']
),
'time' => timeformat($row['lastPosterTime']),
'timestamp' => forum_time(true, $row['lastPosterTime']),
'subject' => $row['lastSubject'],
'preview' => $row['lastBody'],
'icon' => $row['lastIcon'],
'icon_url' => $settings[$icon_sources[$row['lastIcon']]] . '/post/' . $row['lastIcon'] . '.gif',
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . ';topicseen#msg' . $row['ID_LAST_MSG'],
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . ';topicseen#msg' . $row['ID_LAST_MSG'] . '">' . $row['lastSubject'] . '</a>'
),
'new' => $row['isRead'],
'new_from' => $row['new_from'],
'new_href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.msg' . $row['new_from'] . ';topicseen#new',
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['new_from']) . ';topicseen' . ($row['numReplies'] == 0 ? '' : 'new'),
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['new_from']) . ';topicseen#msg' . $row['new_from'] . '">' . $row['firstSubject'] . '</a>',
'is_sticky' => !empty($modSettings['enableStickyTopics']) && !empty($row['isSticky']),
'is_locked' => !empty($row['locked']),
'is_poll' => $modSettings['pollMode'] == '1' && $row['ID_POLL'] > 0,
'is_hot' => $row['numReplies'] >= $modSettings['hotTopicPosts'],
'is_very_hot' => $row['numReplies'] >= $modSettings['hotTopicVeryPosts'],
'is_posted_in' => false,
'icon' => $row['firstIcon'],
'icon_url' => $settings[$icon_sources[$row['firstIcon']]] . '/post/' . $row['firstIcon'] . '.gif',
'subject' => $row['firstSubject'],
'pages' => $pages,
'replies' => $row['numReplies'],
'views' => $row['numViews'],
'board' => array(
'id' => $row['ID_BOARD'],
'name' => $row['bname'],
'href' => $scripturl . '?board=' . $row['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['bname'] . '</a>'
)
);
determineTopicClass($topics[$row['ID_TOPIC']]);
}
mysql_free_result($request);
if (!empty($modSettings['enableParticipation']) && !empty($topic_ids))
{
$result = db_query("
SELECT ID_TOPIC
FROM {$db_prefix}messages
WHERE ID_TOPIC IN (" . implode(', ', $topic_ids) . ")
AND ID_MEMBER = $ID_MEMBER", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($result))
{
if (empty($topics[$row['ID_TOPIC']]['is_posted_in']))
{
$topics[$row['ID_TOPIC']]['is_posted_in'] = true;
$topics[$row['ID_TOPIC']]['class'] = 'my_' . $topics[$row['ID_TOPIC']]['class'];
}
}
mysql_free_result($result);
}
}
if (!empty($topics))
{
echo '
<div class="tborder" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? 'style="width: 100%;margin:-4px;"' : 'style="margin:-4px;"', '>
<table border="0" width="100%" cellspacing="1" cellpadding="1" class="bordercolor">
<tr>';
echo '
<td class="titlebg" colspan="7">', $heading, '</td>';
echo '
</tr>';
echo '
<tr class="titlebg">
<td width="10%" colspan="2"> </td>
<td>', $txt[70], '
</td><td width="14%">', $txt[109], '
</td><td width="4%" align="center">', $txt[110], '
</td><td width="4%" align="center">', $txt[301], '
</td><td width="24%">', $txt[111], '
</td>
</tr>';
foreach ($topics as $topic)
{
// Do we want to seperate the sticky and lock status out?
if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'sticky') !== false)
$topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_sticky'));
if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'locked') !== false)
$topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_locked'));
echo '
<tr>
<td class="windowbg2" valign="middle" align="center" width="6%">
<img src="' . $settings['images_url'] . '/topic/' . $topic['class'] . '.gif" alt="" />
</td><td class="windowbg2" valign="middle" align="center" width="4%">
<img src="' . $topic['first_post']['icon_url'] . '" alt="" align="middle" />
</td><td class="windowbg' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '3' : '' , '" width="48%" valign="middle">' , $topic['is_locked'] && !empty($settings['seperate_sticky_lock']) ? '
<img src="' . $settings['images_url'] . '/icons/quick_lock.gif" align="right" alt="" style="margin: 0;" />' : '' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '
<img src="' . $settings['images_url'] . '/icons/show_sticky.gif" align="right" alt="" style="margin: 0;" />' : '', $topic['first_post']['link'];
if ($topic['new'] == 0)
{
echo '<a href="', $topic['new_href'], '"> <img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" /></a>';
}
echo '
<span class="smalltext">', $topic['pages'], '<br>', $txt['smf88'], ' ', $topic['board']['link'], '</span></td>
<td class="windowbg2" valign="middle" width="14%">
', $topic['first_post']['member']['link'], '</td>
<td class="windowbg" valign="middle" width="4%" align="center">
', $topic['replies'], '</td>
<td class="windowbg" valign="middle" width="4%" align="center">
', $topic['views'], '</td>
<td class="windowbg2" valign="middle" width="22%">
<a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" style="float: right;" /></a>
<span class="smalltext">
', $topic['last_post']['time'], '<br />
', $txt[525], ' ', $topic['last_post']['member']['link'], '
</span>
</td>
</tr>';
}
echo '</table></div>';
}
else
echo '<b><u>'.$heading.'<br><br>No Topics Match Search Criteria</u></b><br>';
echo'</div>
<div id="tcontent12" class="tabcontent">';
// Latest images in gallery
echo'<br><center><b>Latest Pictures in Gallery<br></center>';
global $scripturl,$db_prefix,$modSettings,$boardurl;
echo'<table cellspacing="0" cellpadding="5" border="0" align="center" width="90%"><tr>';
if(empty($modSettings['gallery_url']))
{
$modSettings['gallery_url'] = $boardurl . '/gallery/';
}
$request = db_query("SELECT thumbfilename,ID_PICTURE FROM {$db_prefix}gallery_pic GROUP BY thumbfilename ORDER BY date DESC LIMIT 5", __FILE__,__LINE__);
while ($row = mysql_fetch_assoc($request))
echo' <center><td align="center" colspan="3"><a href="', $scripturl, '?action=gallery;sa=view;id=',
$row['ID_PICTURE'], '"><img src="', $modSettings['gallery_url'] .
$row['thumbfilename'] ,'" /></a></center>';
echo'</td></tr>';
echo'</table></br>';
mysql_free_result($request);
if (!$user_info['is_guest']) {
echo '<center>
<br>
<a href="',$scripturl,'?action=gallery">Show Gallery</a> | <a href="',$scripturl,'?action=gallery;sa=add;cat=1">Add Picture</a>
</center>';
}
echo'</div>
<div id="tcontent13" class="tabcontent">';
ssi_links_recent();
echo'</div>
<div id="tcontent14" class="tabcontent">';
// In the news
echo'<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>';
echo' <div align="center">
<table border="1" width="100%" style="border-collapse: collapse" id="table1">
<tr>
<td width="100" valign="top" bgcolor="#FFFFFF">
<font face="Verdana">
<img border="0" src="http://path-to-peace.net/misc/extra.gif" width="100" height="111"></font><p align="center">
<font size="1" face="Verdana" color=black>Read, post and discuss the latest news from around the
world in our forums!</font></p>
<p align="center"><font size="1" face="Verdana" color=black>Get all the details by comparing views!</font></td>
<td><font face="Verdana">';
global $context, $scripturl;
$bullet = '<img src="'.$settings['images_url'].'/TPdivider.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$result=ssi_recentTopicsINC(5,array(58),'return');
foreach($result as $my){
echo "$bullet";
echo '<span class="largetext">'.$my['link'];
// is this topic new? (assume they are logged in)
if (!$my['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $my['topic'], '.from', $my['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '<hr>';
}
echo '</span>';
echo' </font><font size="1" face="Verdana">The News is updated
when members make new posts in the <a href="http://path-to-peace.com/forum/index.php?board=58.0">In the News Section</a> Please be sure
to <a href="http://path-to-peace.com/forum/index.php?topic=3566.0">read posting rules</a> for that board before posting!</font></td>
</tr>
</table>
</div>';
echo'
</td>
<td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="300" id="rssReader02" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="rssReader01.swf?config=config.xml&feedList=feedList.xml" />
<param name="quality" value="high" />
<embed src="rssReader01.swf?config=config.xml&feedList=feedList.xml" quality="high" width="200" height="300" name="rssReader02" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</table><br></div>
<div id="tcontent15" class="tabcontent">';
dl_recentitems('8','date','echo');
echo'</div>
<div id="tcontent11" class="tabcontent">';
//number of games to show
$no=20;
//number if icons accross
$icons_per_row = 10;
//----------------------------------------------------------------------------
$random_games_choice = 3;
$games_choice = 'games'.$random_games_choice;
$curr_position = 0;
$games_choice($no,$curr_position,$icons_per_row);
Function games3($no,$curr_position,$icons_per_row)
{
global $scripturl,$db_prefix,$modSettings;
//show the latest games
echo '<div align="center">
<table cellpadding="2" cellspacing="5">
<tr>';
$sql = "SELECT ID_GAME, gameName, thumbnail, gameDirectory
FROM {$db_prefix}arcade_games
ORDER BY ID_GAME DESC , gameName ASC LIMIT 0,{$no}";
$result = db_query($sql,__FILE__,__LINE__);
while($game = mysql_fetch_array($result))
{
$game_thumb = !$game['gameDirectory'] ? $modSettings['gamesUrl']."/".$game['thumbnail'] : $modSettings['gamesUrl'].$game['gameDirectory']."/".$game['thumbnail'];
if($curr_position == $icons_per_row)
{
echo '</tr><tr>';
$curr_position=0;
}
echo'
<td>
<a href="'.$scripturl.'?action=arcade;sa=play;game='.$game['ID_GAME'].'">
<img src="'.$game_thumb.'" border="0" alt="'.$game['gameName'].'" width="60" height="60" title="Play '.$game['gameName'].'"/></a>
</td>';
$curr_position++;
}
mysql_free_result($result);
echo '
</tr>
</table></div>';
}
echo'</div>
</div>
';
To make this work u have to have a lot of pre-requisites:
- Multi TP Blocks must be installed (from the code snippet index)
- SMF Links mod must be installed
- SMF Arcade must be installed
- SMF Gallery Lite / Pro must be installed
- You must be using the 'in the news block' code (from the block code snippets)
If you have all that already present then put all of the above in a PHP box.
Next is the most important part...
In the declaration for the initializition of the tabs in your index.template.php just before the </body> tag you MUST specify the name of this whole block of code which is
maintab4In case the name maintab4 dosent work, then try maintab3
Also keep in mind your tab declaration MUST be in sequence of how they appear on the page.
This is a small bug in the Dynamic drive script that foe some reason if they are not in sequence of 1st to last, the whole script stops functioning.
Mine is declared like this:
initializetabcontent("maintab12", "maintab", "maintab4")
where maintab12 is the side user/stats block
then is maintab which is the welcome block
finally is maintab14 which is the top recent stats block in the middle bottom
finally add tabcontentstyle4 to ur CSS
u can study my file to see what I did
http://path-to-peace.com/forum/tabcontent.css
Hope that helps
PS: change the address for the images to ur own page
Thank you for this snippet :) I'm trying to use this on my left side column for a "Main Menu" and "User Menu" I can't seem to figure out how to get the "User Menu" to only show up for registered members. I tried to stick an "if (!$user_info['is_guest']) { ...User Menu here...}" declaration before and after the div for the "User Menu" but I'm getting errors. Is there a way to do this?
Quote from: Aku on January 08, 2007, 08:24:47 AM
yes for it to show up on all pages it is a MUST that you declare these 2 bits in the index.template.php file of the themes instead of in the blocks:
This part inside the <head> of the doc:
Quote
<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>
and this part just before the </body> ends
<script type="text/javascript">
initializetabcontent("maintab", "maintab1")
</script>
important to note here is that ("maintab", "maintab1") are initilization strings for the tabs to work and must be named the same as your tab blocks.
For example in my code I had declared for tab block 1
<ul id="maintab1" class="shadetabs">
and for tab block 2
<ul id="maintab2" class="shadetabs">
If u look at the codes u will see these are named in the actual tabbed content block as shown below:
echo'
<ul id="maintab1" class="shadetabs"> <<---this is where the name occurs
<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>';
I dont understand where to put the code in my index.template.php
search for the tags mentioned
the 1st part goes just before the </head> tag
and then the second pardy goes just before the </body> tag
do a search in the file for those terms and ul find them
Quote from: jpark on January 21, 2007, 04:57:18 AM
Thank you for this snippet :) I'm trying to use this on my left side column for a "Main Menu" and "User Menu" I can't seem to figure out how to get the "User Menu" to only show up for registered members. I tried to stick an "if (!$user_info['is_guest']) { ...User Menu here...}" declaration before and after the div for the "User Menu" but I'm getting errors. Is there a way to do this?
sorry to ask again but i was wondering if anyone knows how to do this? i'd really appreciate it!
u will have to prepare 2 FULL codes for the tabs and set them up like so:
global $user_info;
if ($user_info['is_guest'])
echo'
the entire code for the tabs block all of them
';
else
echo'
a repeat of the above code but with the changes in place for the menu etc
';
hope that helps
wow.. yes, that helped a lot! Thanks so much! so the guest menu shows only one tab ("Main Menu") while the member menu shows two ("Main Menu" and "User Menu") and this works swimmingly with your code but there's one problem... The statsbox that I put in the member menu comes up (outside of the div) in the guest menu.. :-\ would you have any suggestions? This is the full code I was using:
global $user_info;
if ($user_info['is_guest'])
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">Main Menu</a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?page=15">Item 1</a><br />
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?page=18">Item 2</a><br />
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?cat=3">Item 3</a><br />
</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>';
else
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">Main Menu</a></li>
<li><a href="#" rel="tcontent2">User Menu</a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?page=15">Item 1</a><br />
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?page=18">Item 2</a><br />
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?cat=3">Item 3</a><br />
</div>
<div id="tcontent2" class="tabcontent">
<img src="/Themes/TP_pnpn11/images/TPdivider2.gif"> <a href="/index.php?page=17">Photo Gallery</a><br />
<center><b><a href="/index.php?action=stats">Stats</a></b></center>
';
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>';
I need help because the backgrounds aren't showing up correctly.
Here is my site where it shows it the incorrect way: http://www.brianjwilson.com/index.php
I have attached all the files I am using, these are located in the "tabs" directory in my forum root (I have modified urls inside code as well)
Mhpf...the .js file is not loaded:
"topic,49144.msg484676/tabcontent.js" :(
//Edit: I changed the code to this:
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/tabcontent.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/tabcontent.js">
and copied the files to the default theme...now it's working :D
nned help :( 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">Menu</a></li>
<li><a href="#" rel="tcontent2">User</a></li>
<li><a href="#" rel="tcontent3">Online</a></li>
</ul>
<div class="tabcontentstyle2">
<div id="tcontent1" class="tabcontent">';
TPortal_menubox();
echo'</div>
<div id="tcontent2" class="tabcontent">';
TPortal_userbox();
echo'</div>
<div id="tcontent3" 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>';
cant get menu box to work :(
It would help if you could tell us what is not working. Do you get an error? What happens? Please help us to help you by giving us as much info as possible....
hmm ok here's what happened...
I added <div id="tcontent1" class="tabcontent">';
TPortal_menubox();
echo'</div>
as the first tab and assigned the userbox to tcontent2 and the statusbox to 3...
but I can't get it to work :\ Im confused :(
my target is to also have the menu on a tab so that it wont consume much space..
can't anyone help me out here ??
its really weird .. on the shout page (when i have the main shout page open.) this block works fine .. but not on any other page :(
here is my code .. BTW i've got about 4 blocks using the multi block.. all the others are working fine .. its just this one
echo'
<ul id="maintab2" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent7">Shout</a></li>
<li><a href="#" rel="tcontent8">Calendar</a></li>
</ul>
<div class="tabcontentstyle2">
<div id="tcontent7" class="tabcontent">';
TPortal_shoutbox();
echo'</div>
<div id="tcontent8" class="tabcontent">
<center>';
global $scripturl, $modSettings, $sourcedir;
$now = mktime() + $modSettings['time_offset'] * 3600;
$today = date('j',$now);
$year = date("Y",$now);
$month = date("n",$now);
$days = array($today=>array(NULL,NULL,'<a class="smalltext" style="color: steelblue; font-weight: bold; border: solid 1px black; background-color: white; padding: 0px 2px 0px 2px;" href="'.$scripturl.'?action=calendar;sa=post;month='.$month.';year='.$year.';day='.$today.'" target="_self">'.$today.'</a>'));
$day_name_length = 2;
$month_href = $scripturl . '?action=calendar';
$first_day = 0;
$pn = array();
$first_of_month = gmmktime(0,0,0,$month,1,$year);
#remember that mktime will automatically correct if invalid dates are entered
# for instance, mktime(0,0,0,12,32,1997) will be the date for Jan 1, 1998
# this provides a built in "rounding" feature to generate_calendar()
$day_names = array(); #generate all the day names according to the current locale
for($n=0,$t=(3+$first_day)*86400; $n<7; $n++,$t+=86400) #January 4, 1970 was a Sunday
$day_names[$n] = ucfirst(gmstrftime('%A',$t)); #%A means full textual day name
list($month, $year, $month_name, $weekday) = explode(',',gmstrftime('%m,%Y,%B,%w',$first_of_month));
$weekday = ($weekday + 7 - $first_day) % 7; #adjust for $first_day
$title = htmlentities(ucfirst($month_name)).' '.$year; #note that some locales don't capitalize month and day names
#Begin calendar. Uses a real <caption>. See http://diveintomark.org/archives/2002/07/03
@list($p, $pl) = each($pn); @list($n, $nl) = each($pn); #previous and next links, if applicable
if($p) $p = '<span class="smalltext">'.($pl ? '<a href="'.htmlspecialchars($pl).'">'.$p.'</a>' : $p).'</span> ';
if($n) $n = ' <span class="smalltext">'.($nl ? '<a href="'.htmlspecialchars($nl).'">'.$n.'</a>' : $n).'</span>';
$calendar = '<table align="center" valign="top">'."\n".
'<caption >'.$p.($month_href ? '<a href="'.htmlspecialchars($month_href).'">'.$title.'</a>' : $title).$n."</caption>\n<tr>";
if($day_name_length){ #if the day names should be shown ($day_name_length > 0)
#if day_name_length is >3, the full name of the day will be printed
foreach($day_names as $d)
$calendar .= '<th class="smalltext" abbr="'.htmlentities($d).'">'.htmlentities($day_name_length < 4 ? substr($d,0,$day_name_length) : $d).'</th>';
$calendar .= "</tr>\n<tr style=\"text-align:right;\">";
}
if($weekday > 0) $calendar .= '<td class="smalltext" colspan="'.$weekday.'"> </td>'; #initial 'empty' days
for($day=1,$days_in_month=gmdate('t',$first_of_month); $day<=$days_in_month; $day++,$weekday++){
if($weekday == 7){
$weekday = 0; #start a new week
$calendar .= "</tr>\n<tr style=\"text-align:right;\">";
}
if(isset($days[$day]) and is_array($days[$day])){
@list($link, $classes, $content) = $days[$day];
if(is_null($content)) $content = $day;
$calendar .= '<td "'.($classes ? ' class="'.htmlspecialchars($classes).'">' : '>').
($link ? '<a href="'.htmlspecialchars($link).'">'.$content.'</a>' : $content).'</td>';
}
else
{
$calendar .= "<td class=\"smalltext\" style=\"padding-right:2px;\"><a";
if(((($weekday+$first_day) % 7)==0)||((($weekday+$first_day) % 7)==6))
{
$calendar .= ' style="color:#C00000;"';
}
$calendar .= " href=\"".$scripturl."?action=calendar;sa=post;month=".$month.";year=".$year.";day=".$day."\" target=\"_self\">$day</a></td>";
}
}
if($weekday != 7) $calendar .= '<td class="smalltext" colspan="'.(7-$weekday).'"> </td>'; #remaining "empty" days
echo $calendar.'</tr>';
#create notice for Holidays, Events & Birthdays.
if (ssi_todaysHolidays('')) {
echo '<tr><td><hr></td><td colspan="5" class="smalltext" align="center" style="color: #' . $modSettings['cal_holidaycolor'] . ';"><b>Upcomming Holidays</b></td><td><hr></td></tr><td colspan="7" class="smalltext">';
ssi_todaysHolidays();
echo '</td></tr>';
}
if (ssi_todaysEvents('')) {
echo '<tr><td><hr></td><td colspan="5" class="smalltext" align="center" style="color: #' . $modSettings['cal_eventcolor'] . ';"><b>Upcomming Events Today</b></td><td><hr></td></tr><td colspan="7" class="smalltext">';
ssi_todaysEvents();
echo '</td></tr>';
}
if (ssi_todaysBirthdays('')) {
echo '<tr><td><hr></td><td colspan="5" class="smalltext" align="center" style="color: #' . $modSettings['cal_bdaycolor'] . ';"><b>Upcomming Birthdays</b></td><td><hr></td></tr><td colspan="7" class="smalltext">';
ssi_todaysBirthdays();
echo '</td></tr>';
}echo '</table>
</center>';
echo'</div></div>';
I don't quite get what you're saying. So when you click on the "show last 50 shouts" ? the block doesn't show? Is it the top right block with the shoutbox?
when i click on show last xx shouts then the shoutbox block in this script gets populated .. yes its the top right block
the block shows up on all pages .. just no shouts in the block unless your action begins with ?action=tpmod;sa=shoutbox .. then and only then the block shows the shouts
I'm not sure if this is the same problem Bluesteel is having but -
I was looking into a multi tab block with just a user tab and for the shoutbox too. I got as far as just checking to see if this works as a shoutbox:
TPortal_shoutbox();
or
echo TPortal_shoutbox();
All this gives me is the text field to type in a shout but no way of seeing the previous shouts until I click on view previous 50 shouts or whatever and it shows them all across the page. What part am i missing? :-\
Thanks.
Forgive me for asking again but does anyone know what else i have to add so the multi tab block can have the function of a shoutbox too?
TPortal_shoutbox();
or
echo TPortal_shoutbox();
For a shout box block but that doesn't work but that's all i can find on the search.
i have the same problem as catchpen.
I have the shoutbox and stats for a multi block on the top-right. When i tried out the shoutbox, none of the shouts were displayed. No text, just a black background (i'm using a blk theme). You can only see the text field. However, if i click last 50 posts, i can see all the shouts. I used option 1, SMF 1.14, TP 0.9.8. and added TPortal_shoutbox(); to the code.
If you just have a shoutbox block on its own, it works fine.
If figured out if you have another TP shoutbox on the same page as the multi block, the shouts show. So for now I have a regular shoutbox on the bottom of my page so the tabbed block shoutbox on the top of the page looks normal. :-\
ah yes you're right that does work. I tried setting the shoutbox to be shown to admin only and have the multi tab for everyone else, but it didn't work XD;
Will someone PLEASE take a look at this and tell me what I did wrong.
My CSS:
/* At-Rules */
@media {
.tabcontent {
display:block!important;
}
}
/* set to left, center, or right to align the menu as desired */
.shadetabs {padding: 2px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: center;}
.shadetabs li {display: inline-table}
.shadetabs li a {background: white url('http://www.adviseoranswers.com/Themes/default/images/maintab_back.gif') repeat-x top left; border: 1px solid #778; color: white; margin-right: 1px; padding-bottom: 3px; padding-left: 1px; padding-right: 1px; padding-top: 3px; text-decoration: none}
.shadetabs li a:visited {color: #e70000;}
.shadetabs li a:hover {text-decoration: underline; color: red;}
.shadetabs li.selected {position: relative; top: 1px;}
/* selected main tab style */
.shadetabs li.selected a {background-image: url('http://www.adviseoranswers.com/Themes/default/images/maintab_active_back.gif'); border-bottom-color: #2d2b2b}
/* selected main tab style */
.shadetabs li.selected a:hover {text-decoration: none;}
/* style of tab content oontainer */
.tabcontentstyle {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 10px;}
/* style of tab content oontainer */
.tabcontentstyle2 {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 10px;}
/* style of tab content oontainer */
.tabcontentstyle4 {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 5px;}
.tabcontent {display:none;}
/* End of style section. Generated by AceHTML at 3/26/2008 8:33:54 PM */
/* At-Rules */
@media {
.tabcontent {
display:block!important;
}
}
/* set to left, center, or right to align the menu as desired */
.shadetabs {padding: 2px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: center;}
.shadetabs li {display: inline; table-layout: auto}
.shadetabs li a {background: white url('http://www.adviseoranswers.com/Themes/default/images/maintab_back.gif') repeat-x top left; border: 1px solid #778; color: white; margin-right: 1px; padding-bottom: 2px; padding-left: 1px; padding-right: 1px; padding-top: 2px; text-decoration: none}
.shadetabs li a:visited {color: #e70000;}
.shadetabs li a:hover {text-decoration: underline; color: red;}
.shadetabs li.selected {position: relative; top: 1px;}
/* selected main tab style */
.shadetabs li.selected a {background-image: url('http://www.adviseoranswers.com/Themes/default/images/maintab_active_back.gif'); border-bottom-color: #2d2b2b}
/* selected main tab style */
.shadetabs li.selected a:hover {text-decoration: none;}
/* style of tab content oontainer */
.tabcontentstyle {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 10px;}
/* style of tab content oontainer */
.tabcontentstyle2 {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 10px;}
/* style of tab content oontainer */
.tabcontentstyle4 {border: 1px solid blue; width: 170px; margin-bottom: 1em; padding: 5px;}
.tabcontent {display:none;}
and my PHP Block code:
global $scripturl, $context;
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">Profile</a></li>
<li><a href="#" rel="tcontent3">Online</a></li>
<li><a href="#" rel="tcontent4">Shout</a></li>
<li><a href="#" rel="tcontent5">Chess</a></li>
<li><a href="#" rel="tcontent6">Search</a></li>
</ul>
<div class="tabcontentstyle2">
<div id="tcontent1" class="tabcontent">';
TPortal_userbox();
echo'</div>
<div id="tcontent2" class="tabcontent">';
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 />
';
echo'</div>
<div id="tcontent3" class="tabcontent">';
TPortal_statsbox();
echo'</div>
<div id="tcontent4" class="tabcontent">';
TPortal_shoutbox();
echo'</div>
<div id="tcontent5" class="tabcontent">';
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 />
';
echo'</div>
<div id="tcontent6" class="tabcontent">';
TPortal_searchbox();
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>';
Everything works great in FF but IE shows all the div contents at once.......
Any ideas???
Stop using IE? XD Or hey, you could always use the IE comment-out trick to hide all the neat stuff it doesn't understand :o Since I indulged in making a reply, I figured I owed it to you to come up with something actually helpful, so. Google Is Your Friend
"
1. temporarily switch the content's display property to 'block' and back to 'none'.
2. temporarily switch the content's position property from 'relative' to 'absolute' and back, or vice versa.
3. temporarily switch the content's visibility property to 'hidden' and back. (But this only works if the content is positioned absolutely! The wonderful world of IE...)
"