Improved Tabbed Content Block

[ianus]

Greetings!

I like AkuÃ,´s solution for the Tabbed Content Block.
So, this based on it and I recommend, to read his thread first.
Download the necessary script from here

Also, I like to have a Menu for board and childboard(s) ââ,¬â€œ remember?

So, I try to merge both ideas, and here is my solution.
I try this @localhost, so you have to change the paths, erm yes, I think you know that.

First:
Put the ajaxtabs-folder into your forum-route
Webspace/www/forum/ajaxtabs

Then, to keep folders clean, create an Navigation-folder in the forum-route.
Put the demo.htm and the external (s).htm into this folder.
Webspace/www/forum/navigaton/demo&exampel(s).htm


Second:
In the TP-Admin:
Create a PHP ââ,¬â€œ block and make it a center block.

In this, call the demo.htm.
Include ('path/to/folder/navigation/demo.htm');

You can activate it and see the parts of the Tabbed Contend Block already.


Third:
Now, we have to edit the demo.htm a little bit.

We donÃ,´t need the html, so delete

Code Select Expand


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Ajax Tabs Content script</title>

[ââ,¬Â¦ and ââ,¬Â¦]

</head>

<body>

<p><b>Documentation:</b> <a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/</a></p>
<br />

[ââ,¬Â¦andââ,¬Â¦]

</body>

</html>


Now, we need to correct the path

Code Select Expand


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

chance to:

<link rel="stylesheet" type="text/css" href="http://localhost/www/forum/ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="http://localhost/www/forum/ajaxtabs/ajaxtabs.js">
Webspace/www/forum/ajaxtabs

Or whatever you need.



After the

Code Select Expand


/***********************************************
* Ajax Tabs 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>

We have to enter

Code Select Expand


<?php


Then we build some arrays with $arrayname = ('and', 'board', 'number(s)');

Code Select Expand


$one = array('13','4','1','25');
$two = array('7','8');


Now we call, what we want to see in this arrays. I only switch the active tab in this example.

Code Select Expand


// Change the tab - contend for a specific board
if (isset($context['current_board']) && in_array($context['current_board'], $one))
echo'
<ul id="maintab" class="shadetabs">
<li><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li class="selected"><a href="http://localhost/www/forum/navigation/external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="http://localhost/www/forum/navigation/external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="http://localhost/www/forum/navigation/external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="http://localhost/www/forum/navigation/external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>
';

elseif (isset($context['current_board']) && in_array($context['current_board'], $two))
echo'
<ul id="maintab" class="shadetabs">
<li><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="http://localhost/www/forum/navigation/external.htm" rel="ajaxcontentarea">Bird</a></li>
<li class="selected"><a href="http://localhost/www/forum/navigation/external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="http://localhost/www/forum/navigation/external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="http://localhost/www/forum/navigation/external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>
';

//To show the tabs at the frontpage and every board which is not mentioned in the arrays
else
echo'
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="http://localhost/www/forum/navigation/external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="http://localhost/www/forum/navigation/external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="http://localhost/www/forum/navigation/external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="http://localhost/www/forum/navigation/external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>';
?>



Notice:
To keep the folders clean, I add an own Navigation folder and everything is running at my localhost. Also I canÃ,´t figure out how to use relative links for the whole ajaxtab thing.
So you have to change
http:// localhost / www / forum / navigation / external2.htm
with your own path.
Maybe somebody like to explain, why
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
is working in ââ,¬Å"boardviewââ,¬Â but not in ââ,¬Å"threadviewââ,¬Â.
Maybe somebody can figure out how to include $boardurl.



This solution is not easy to manage. You have two write the contend of the ââ,¬Å"external 123.htmââ,¬Â and edit the demo.htm. But nevertheless, I have a unique navigation on top of every board, and can show the interesting contend at the very top.

Well, it suits my needs. I have explained this in the Menu for board and childboard(s) thread. I would prefer the different menus, but this looks better.

I canââ,¬â,,¢t give an demo-link. Iââ,¬â,,¢m running SMF1.0.6 at the moment, because the Table From CSV isnââ,¬â,,¢t available for 1.1.x yet.
I donââ,¬â,,¢t want to install the TP until I can upgrade, because itââ,¬â,,¢s a lot of work to merge my theme and TP.


Thanks to Aku for his interesting idea and to TP readers and writers.