AJAX Tabbed Content Module

[bobster65]

NOTE: Version 2.0 is now available here: http://www.vbadvanced.com/forum/showthread.php?t=23764 This version is still available as an option, but version 2.0 is a much better system. These are 2 totally different systems. 2.0 is NOT an upgrade, its a seperate release.

Hello KW, Raman, Wolf and countless others that have asked about Tabbed Modules and vBadvance,

I've received many posts & PMs about how I've implemented tabs within vBadvance, so instead of replying to each one seperately, I went ahead and wrote up this "how to". I hope that its easy to follow along and meets your needs. If you are reading this and wondering what a tabbed module is, check out the attached screen shots.

This is what I've done so far to implement Tabs functionality within vBadvance for my websites....

Note: This Module is based of off the Ajax Project - Tabbed Page Interface over at crackajax (http://www.crackajax.net/tabs.php)

Module Type: TEMPLATE w/Alternative Module Wrapper Template
Templates: adv_portal_Tab_Block, adv_portal_alt_module_wrapper (optional)
Files: ahahLib.js, TabAJAX.css, tabcontent.php

Download the ahahLib.js file from crackajax.net (http://www.crackajax.net/ahahLib.js)

Step 1. Upload the ahahLib.js file. No modifications to this file are needed. The location I chose was the clientscript folder that comes default with your vBulletin installation .. path example /www/forums/clientscript . It doesn't HAVE to go there, I just chose to put it there since its a common place for js files..

Step 2. Create, Name and Upload CSS file. The location I chose was the vbulletin_css folder that comes default with your vBulletin installation. path example /www/forums/clientscript/vbulletin_css . Again, it doesn't HAVE to go there, I just chose to put it there since its a common place for css files. You can name the css file anything you like.. I named mine TabAJAX.css .

Note: Modifications to this file can be made once you get the initial sample system up and running.

CSS file - Sample Name: TabAJAX.css

pre {text-indent: 30px} 

#tabmenu { 
color: #000; 
border-bottom: 1px solid black; 
margin: 12px 0px 0px 0px; 
padding: 0px; 
z-index: 1; 
padding-left: 10px } 

#tabmenu li { 
display: inline; 
overflow: hidden; 
list-style-type: none; } 

#tabmenu a, a.active { 
color: #aaaaaa; 
background: #295229;
font: normal 1em verdana, Arial, sans-serif; 
border: 1px solid black; 
padding: 2px 5px 0px 5px; 
margin: 0px; 
text-decoration: none;
cursor:hand; } 

#tabmenu a.active { 
background: #ffffff; 
border-bottom: 3px solid #ffffff; } 

#tabmenu a:hover { 
color: #fff; 
background: #ADC09F; } 

#tabmenu a:visited { 
color: #E8E9BE; } 

#tabmenu a.active:hover { 
background: #ffffff; 
color: #DEDECF; } 

#content {font: 0.9em/1.3em verdana, sans-serif; 
text-align: justify; 
background: #ffffff; 
padding: 20px; 
border: 1px solid black; 
border-top: none; 
z-index: 2; } 

#content a { 
text-decoration: none; 
color: #E8E9BE; } 

#content a:hover { background: #aaaaaa; }

Step 3. Create, Name and Upload PHP file. The location I chose was the FORUMS root. path example /www/forums . You can name this file anything you want. I named mine tabcontent.php

Note: Modifications to this file can be made once you get the initial system up and running.

PHP file - Sample name: tabcontent.php

PHP Code:

<?php 

// ============================================ 
// Enter the full path to your forum here 
// Example: /home/vbadvanced/public_html/forum 
// ============================================ 


// ####################### SET PHP ENVIRONMENT ###########################  
error_reporting(E_ALL & ~E_NOTICE);  

// #################### DEFINE IMPORTANT CONSTANTS #######################  
define('NO_REGISTER_GLOBALS', 1);  
define('THIS_SCRIPT', 'tabcontent'); // change this depending on your filename  

// ################### PRE-CACHE TEMPLATES AND DATA ######################  
// get special phrase groups  
$phrasegroups = array(  

);  

// get special data templates from the datastore  
$specialtemplates = array(  
      
);  

// pre-cache templates used by all actions  
$globaltemplates = array(  
    'TAB',  
);  

// pre-cache templates used by specific actions  
$actiontemplates = array(  

);  

// ######################### REQUIRE BACK-END ############################  
require_once('./global.php');  
require_once('./includes/vba_cmps_include_template.php'); 
require_once('./includes/vba_cmps_global.php'); 

// #######################################################################  
// ######################## START MAIN SCRIPT ############################  
// #######################################################################  


?> 


<?php 

if ($_GET['content'] == 1) {  
echo 'Congrats, Insert Dynamic or Static Code here for Tab 1';  

}  


if ($_GET['content'] == 2) {  
echo 'Insert Dynamic or Static Code here for Tab 2'; 
}  


if ($_GET['content'] == 3) {  

echo 'Insert Dynamic or Static Code here for Tab 3';  
} 

?>

Step 4. (optional) Create an Alternative Module Wrapper Template. I chose to do this, because I didn't want to use the standard Module Wrapper that comes default with vBadvanced. Use the default wrapper if you choose not to create your own custom one. I named mine - adv_portal_alt_module_wrapper

Alternative Module Wrapper Template - Sample name: adv_portal_alt_module_wrapper

<div style="padding-bottom:$vba_style[portal_vspace]px">
	<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]"  width="100%">
		
		<tbody id="collapseobj_module_$mods[collapse]" style="$modcollapse">
			<if condition="$show['tablerow']">
				<tr>
					<td class="$bgclass">
						$modulehtml
					</td>
				</tr>
			<else />
				$modulehtml
			</if>
		</tbody>
	</table>
</div>

Step 5. Create a new Template. This template will be the one that you include with the module that you will create in Step 6. I've included the code for the template below, HOWEVER, there are some edits that you will need to make to the code based upon steps 1-3 above.

Custom Template Sample name: adv_portal_Tab_Block

<tr><td >
<body onload="makeactive(1)">
<link href="http://www.domain.com/forums/clientscript/vbulletin_css/TabAJAX.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/javascript" src="http://www.domain.com/forums/clientscript/ahahLib.js"></script> 
<script language="JavaScript" type="text/javascript">
function makeactive(tab) { 
document.getElementById("tab1").className = ""; 
document.getElementById("tab2").className = ""; 
document.getElementById("tab3").className = "";
document.getElementById("tab"+tab).className = "active";
callAHAH('http://www.domain.com/forums/tabcontent.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error'); 
} 
</script>

<ul id="tabmenu" > 
<li onclick="makeactive(1)"><a class="" id="tab1">Tab 1</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Tab 2</a></li> 
<li onclick="makeactive(3)"><a class="" id="tab3">Tab 3</a></li> 
</ul> 
<div id="content" class="smallfont"></div>  

</td></tr>

EDITS NEEDED TO THE ABOVE TEMPLATE:

Path location of the CSS file created in step 2. Simply edit this line in the template to the correct path where you uploaded the CSS File.

<link href="http://www.domain.com/forums/clientscript/vbulletin_css/TabAJAX.css" rel="stylesheet" type="text/css">

Path location of the ahahLib.js file in step 1. Simply edit this line in the template to the correct path where you uploaded the ahahLib.js file.

<script language="JavaScript" type="text/javascript" src="http://www.domain.com/forums/clientscript/ahahLib.js"></script>

Path location of the PHP file created in step 3. Simply edit this line in the template to the correct path where you uploaded the PHP file.

callAHAH('http://www.domain.com/forums/content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');

NOTE: the body onload function is to force a tab active when the page is first loaded... I added this to the template so that you could designate a tab other than the first tab to be opened in case of an important issue that you may want people to see in (for example) tab 3. Its set at 1 default. To force the opening of another tab, change the # to the tab you wish to be open... the below will open Tab 3 when ever the page is first accessed or refreshed.

<body onload="makeactive(3)">

Step 6. Create a TEMPLATE Module. Name it what ever you like. Include the template that you created in Step 5 above. Make sure that you either use the Module Wrapper Template OR the Alternative Module Wrapper Template that you created in optional Step 4 above. Give permission(s) to the user groups that you want to be able to view this.

Step 7. Add the Module . Add the module created in Step 6 above to a page.

Step 8. Load the page that you added the module to. If you performed the above steps correctly, the result will be a tabbed block module with 3 tabs named Tab 1, Tab 2, Tab 3. The content for Tab 1 will say "Congrats, Insert Dynamic or Static Code here for Tab 1"


CUSTOMIZATION

Style: Modify CSS File created in Step 2 to match the Style of your site.

Tab Names: Modify Template created in Step 5 to change the NAME of the tabs themselves - ie.. from Tab 1 to Announcements (see below)

<li onclick="makeactive(1)"><a class="" id="tab1">Announcements</a></li>

Content: Modify PHP File created in Step 3 to generate content. You can add static content or Dynamic Content. Below is a very simple sample of what can be done.

Sample mix of static and dynamic content

PHP Code:

if ($_GET['content'] == 1) {  
echo "Welcome Back {$vbulletin->userinfo['username']}!<br><br> 
Hope you are enjoying the off season so far. The Draft & Mini Camps are complete, now its just a few weeks away from Training Camp 2007.  
<br><br> 
Im sure these next few months will be fun to follow and make the upcoming season even more exciting. Good luck with your team {$vbulletin->userinfo['username']}!";  

} 


NOTE: You can get as creative as you want to with content. For example, I took code from the recentthreads.php file, modified it and included that as tab content to display recent threads within a tab on my site (as seen in the screen shots attached in Post 1 of this thread).


ADDING MORE TABS

To add more tabs, you will need to modify the template created in Step 5 and the PHP file created in Step 3.

Step 1. Add the following 2 lines of code to the Template that you created in Step 5 for each new Tab that you want to appear. Make sure that when you add the lines that you keep them in order with the other lines currently in the file.

document.getElementById("tab4").className = "";

<li onclick="makeactive(4)"><a class="" id="tab4">Tab 4</a></li>

Step 2. Add the following piece of code to the PHP file created in Step 3. Make sure that you keep it in order with the other pieces of code currently in the file.

PHP Code:

if ($_GET['content'] == 4) {  

echo 'Insert Dynamic or Static Code here for Tab 4';  
} 


Well....thats it in a nutshell....

btw, Sorry for such a long post. I do hope that I explained things well enough to at least get a head start on Tabbed Modules. Let me know if you have any problems or need further explanation on anything...

Thanks and enjoy Bob

EDIT: Added screen shots.

The 1st is an example of some dynamic content based on the user.
The 2nd is an example of modified recentthreads.php used within a tab.
The 3rd is an example of using modified vbarticles within a tab.
The 4th and 5th are examples of dynamic content within a tab.

[Raman]

Hello bobster65,

Thank you so much for the detail overview. Really appreciate the time you took to prepare this post

With Regards

Raman

Edit: I also got it working, but dynamic content is giving me "Parse error: parse error, unexpected T_STRING, expecting ',' or ';'"

at following line in php dynamic content code snippet

iif($mod_options['portal_threads_cutoffdate'],

[wolf32]

I second Raman. Thank you very much.

Edit: I've gotten the module to display, but for some reason it's not displaying the content.

[bobster65]

Originally Posted by Raman

Hello bobster65,

Thank you so much for the detail overview. Really appreciate the time you took to prepare this post

With Regards

Raman

Edit: I also got it working, but dynamic content is giving me "Parse error: parse error, unexpected T_STRING, expecting ',' or ';'"

at following line in php dynamic content code snippet

If you are getting that from the sample code I posted, I mentioned that its just a sample snippet of the code, not the entire chunk.. so there is a lot missing. I have some code working for recentthreads, but won't release it public. If you are interested in taking a look at it to modify it for your needs, PM me and I'll hook you up.

[bobster65]

Originally Posted by wolf32

I second Raman. Thank you very much.

Edit: I've gotten the module to display, but for some reason it's not displaying the content.

Hey Wolf.. I sent you a PM. Sounds like its probably a path issue to the content.php within the module template.

[concepts]

this is pretty nice.. I think I may use this and incorporate it with the slideshow to allow for various categories.. exactly what I was looking for.

[bobster65]

Originally Posted by concepts

this is pretty nice.. I think I may use this and incorporate it with the slideshow to allow for various categories.. exactly what I was looking for.

Right on! Let me know how it works out for you

[bobster65]

Per request, I added a few screen shots to the first post.

[concepts]

edit*** yeah.. it was the vodka.. got it all straightened out... now its time to add in a lil custom work*

[bobster65]

Originally Posted by concepts

okay, maybe its just me.. or its the vodka.. either way, I am finding myself lost as to what goes where, etc.. i'm following this tutorial you've written.. however.. I am begining to become lost as to where does each file gets uploaded, what module gets created, etc.

your instructions are great for knowing what each template is, but for the sake of myself.. and maybe a few others.. can you provide a more "outlined" tutorial? I am a.....

1. Step One : create this :file: and upload it "name folder"
2.Step two : ... and on an on.

from there I can easily adjust settings and modify it to my liking, but for some reason I am having issues following this.
thanks.

Sure no problem Hope this makes more sense with or without the Vodka (Im terrible at writing these things)..

EDIT: Moved the new Step by Step into the first post to eliviate confusion.....

[concepts]

your a great man! (you are a man right?) I hate assuming! lol... but this is actually a perfectly written tutorial now. Couldn't be more descriptive! I look forward to showing what I have done with this.. by the way.. check your pm.. sending a message now

[bobster65]

Originally Posted by concepts

your a great man! (you are a man right?) I hate assuming! lol... but this is actually a perfectly written tutorial now. Couldn't be more descriptive! I look forward to showing what I have done with this.. by the way.. check your pm.. sending a message now

lol.. yup, last time I checked I was

Thank you... since you think its much better, I replaced the first post with the one I wrote for you.

Can't wait to see what you come up with!

[Raman]

Originally Posted by bobster65

lol.. yup, last time I checked I was

Thank you... since you think its much better, I replaced the first post with the one I wrote for you.

Can't wait to see what you come up with!

Your reply made me laugh like anything, both of you really got good sense of humor

Have a good day

[jpt62089]

There's a small problem with mine. It never loads the content. It says it is loading, but it just sits there... and sits there.... <.<

[bobster65]

Originally Posted by jpt62089

There's a small problem with mine. It never loads the content. It says it is loading, but it just sits there... and sits there.... <.<

Make sure that in the TEMPLATE that this line is correct...

PHP Code:

callAHAH('http://www.domain.com/forums/content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error'); 


I've had a few people PM me and when I checked their TEMPLATE, they had forgot to edit this part of the file and it was pointing to www.domain.com/forums/content.php instead of their domain and correct path to the PHP file they created..

[jpt62089]

Originally Posted by bobster65

Make sure that in the php file that this line is correct...

PHP Code:

callAHAH('http://www.domain.com/forums/content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error'); 


I've had a few people PM me and when I checked their PHP file, they had forgot to edit this part of the file and it was pointing to www.domain.com/forums/content.php instead of their domain and correct path to the PHP file they created..

There is no such line in the PHP file. But the one in the template is correct...

[bobster65]

Originally Posted by jpt62089

There is no such line in the PHP file. But the one in the template is correct...

ya, my bad... the template is what I meant.

If you want me to look at your system, let me know. So far, Everyone that has had problems had something in the steps that they didn't follow correctly and I got them up and running in minutes. Its up to you, PM if you are interested. Im more than willing to drop what Im doing to help you out.

[jpt62089]

I checked out the Error Console in Firefox and it gives me three errors:

Warning: Error in parsing value for property 'curser'. Declaration dropped.
Source file: The CSS file

Warning: Error in parsing value for property 'float'. Declaration dropped.
Source file: Home page URL

Warning: Expected declaration but found '$'. Skipped to next declaration. Home page URL


And I re-checked all the steps and everything is good.

[bobster65]

Originally Posted by jpt62089

I checked out the Error Console in Firefox and it gives me three errors:

Warning: Error in parsing value for property 'curser'. Declaration dropped.
Source file: The CSS file

Warning: Error in parsing value for property 'float'. Declaration dropped.
Source file: Home page URL

Warning: Expected declaration but found '$'. Skipped to next declaration. Home page URL


And I re-checked all the steps and everything is good.

I know the first one is because of the HAND image for IE browsers. Not sure what is causing the other two.. If you want, I can take a look at things for you. Just PM me when you have time.. we'll get it working

[jpt62089]

Ok, I got it working. It was because VBA is in the main domain area and I had all the files in a sub domain.

Haha

Thanks for the help