Improved Tabbed Content Block

ianus · December 28, 2006, 09:50:07 AM

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


<!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


<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


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


<?php

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

Code Select


$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


// 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.

Recent

User

Stats

Members

Stats

Users Online

Improved Tabbed Content Block

ianus