Add-On Releases - AJAX Tabs Content Script - Version 3.0 (YUI)

AJAX Tabs Content Script - Version 3.0 (YUI)

This is written for implementation within both vBa CMPS AND within vbulletin (can add to any existing vbulletin template or custom template for use on custom vB pages)

Description/Whats changed within this new release?: This newest released version is based on YUI TabView http://developer.yahoo.com/yui/tabview/.

NOTE: This is an initial release with some of the basic features of YUI TabView. More Powerful Enhancements Addons/Enhanced Configuration settings will be released as soon as I write them up. I already have multiple enhancements underway. All Content Files that have been release with previous versions still work.

Note: I've included sample content files in the attached Zip File to use with the step by step how to.


THE BASICS TO GET YOU STARTED

The Following 5 easy steps will get the base system installed. Once you have the base system installed and tested, then move onto the Advanced Customization Steps.

Step 1. Upload the clientscript directory (located in the attached Zip File) to your vbulletin root directory (This will add all the new YUI files to the existing vbulletin clientscript/yui directory).

Step 2. EDIT and Upload the 3 sample content files (located in the SAMPLE CONTENT FILES FOLDER within the attached Zip File) to your vbulletin root directory.

NOTE: Edit the 3 sample content files to change the MODIFICATION CONTROL OPTIONS (starting at line 31) for your testing (mainly the ForumIDs so you can see sample result data)

NOTE 2: For those of you that have used previous versions, you can use your existing content files. (simple edit the template in step 4 to use your existing content files to test instead of the samples)

Step 3. Add the below code to the end of your HEADINCLUDE TEMPLATE.

<!-- YUI CSS for TabView -->
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/tabview.css" />
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/tabview-skin.css" />
<!-- JavaScript Dependencies for Tabview: -->
<script type="text/javascript" src="clientscript/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="clientscript/yui/element/element-beta-min.js"></script>
<!-- Source file for TabView -->
<script type="text/javascript" src="clientscript/yui/tabview/tabview-min.js"></script>
<!-- Source file for Dispatcher -->
<script type="text/javascript" src="clientscript/yui/tabview/dispatcher-min.js"></script>

STEPS 4 and 5 are for vBa CMPS Use Only.... Skip these steps and follow the ALT Step for vB Pages.

Step 4 (FOR vBa CMPS ONLY). Create a new TEMPLATE Module.

Module Title: What ever you want to name it.(ie, Tab Content)
Template to Include: What ever you want to name it (ie, Tab_Content_Main)
Select the Styles you want it added to.
Template Content: Paste the below code into the box.
Use Module Wrapper Template: NO
Usergroup Permissions: Set your perms to your liking

<!-- YUI Tabs Display Start -->

<div id="tab_container"></div>

<script type="text/javascript">
var tabView = new YAHOO.widget.TabView();

	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);
	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);
   	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 3', dataSrc: 'tabsample3.php', cacheData: false }), tabView);
   	tabView.appendTo('tab_container');

</script>

<!-- YUI Tabs Display End  -->

Step 5 (FOR vBa CMPS ONLY). Add the New Module to a page and test it out. You should have a Tabbed Module with 3 Tabs (tab 1, tab 2 and tab 3) and all 3 should display a layout similar to the Recent Threads Module (unless you used your own custom content modules).


ALT Step for vB Pages(To Use on any vB Page). Simply add the following code to any vBulletin Template for where you want Tabs to display.

<!-- YUI Tabs Display Start -->

<div id="tab_container"></div>

<script type="text/javascript">
var tabView = new YAHOO.widget.TabView();

	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);
	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);
   	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 3', dataSrc: 'tabsample3.php', cacheData: false }), tabView);
   	tabView.appendTo('tab_container');

</script>

<!-- YUI Tabs Display End  -->

Now that you have added the code to a template, test the page out. You should have a Tabbed Layout with 3 Tabs (tab 1, tab 2 and tab 3) and all 3 should display a layout similar to the Recent Threads Module (unless you used your own custom content modules)



ADVANCED CUSTOMIZATION

Now that you have the new base system installed, its time to Customize the Tabs. Customization includes CSS to match your style(s), Controlling the Tabs and Custom Content for each Tab


TABS

To control the tabs, you will need to modify the template created in Step 4.

Lets examine a tab (the line of code in the template for each tab). The first example is for the ACTIVE tab (the one that is launched when the page is first displayed). The 2nd is for all other tabs since you only have one active tab.

What you need to be concerned with is what is inside the {} (I've highlited this in RED)

lable: This is the Display Name of the Tab
dataSrc: This is the content file associated with the specific tab
cacheData: This allows you to control whether the content from the dataSrc is to be cached or to be called each time the tab is selected. Set this to false if you want the data to be updated when you click on the tab. Set it to True if you want the data to be cached upon page launch
active: true .. only use this for the first tab.

ACTIVE TAB EXAMPLE

YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);

NON ACTIVE TAB EXAMPLE

YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);

CSS

You will probably notice that there are TWO CSS Files that are being called in the HEADINCLUDE template (tabview.css & tabview-skin.css). I broke the CSS into two files so that the control elements that SHOULD NOT be edited are contained in one file (tabview.css) and the control elements that CAN be edited are in the other (tabview-skin.css).

I made plenty of comments in the tabview-skin.css file that should help you change the tab colors to match your style. Just simply look for the Color Elements and match them to the color elements of your Styles CSS. I am FAR from a CSS guru.. I learned by playing around with the settings

The tabview-skin.css file is located in: clientscript/yui/tabview/assets/tabview-skin.css


Content Files

Please see posts 2&3 of this thread for additional enhancements. Members are encourage to provide their custom content file for inclusion in Post 3.

[bobster65]

Originally Posted by yotsume

Content File for Social Groups and Comment? (for vb 3.7x)

Can anyone please provide me with a working content file for Social Groups and comments?

The one I tried didn't work for me. (I attached it as reference.)

Developer God to the rescue???

Whats not working? Is the content file simply "dieing" on you or is it just not producing what you are looking for?

What specs do you want?

[TheLastSuperman]

Originally Posted by yotsume

You Have Empty Profile Field ERROR

I Just added a new profile field that is required at registration and at all other time for gender. When a member logins in the theme of my vba homepage layout breaks and the message that you have uncompleted fields sits in the middle of the tabs.

I need to get this fixed ASAP please.

Please see attached screenshot of the error.

It's in the options for that user profile field, you must have had it set to something causing it to say hey.. I need info lol

AdminCP --> User Profile Fields --> Profile Field Manager

Now select the profile field to edit, then look for this option:

Field Required - It has 4 selections so choose appropriately i.e. before you must have had it set to either [Yes, at registration and profile updating] OR [Yes, Always] so simply change that to [No, but display at registration] or simply [No] and keep on trucking

S-MAN

Love your mods Bob

[JVCode]

Originally Posted by bobster65

Included in the zip file is a folder with some sample types of content files (recent threads, news, blogs, etc) ... you can use those as a starting point and customize them to your specific needs.

I'm still stuck on the code I'm meant to use... can anyone provide me with the code needed?

[yotsume]

Originally Posted by TheLastSuperman

It's in the options for that user profile field, you must have had it set to something causing it to say hey.. I need info lol

AdminCP --> User Profile Fields --> Profile Field Manager

Now select the profile field to edit, then look for this option:

Field Required - It has 4 selections so choose appropriately i.e. before you must have had it set to either [Yes, at registration and profile updating] OR [Yes, Always] so simply change that to [No, but display at registration] or simply [No] and keep on trucking

S-MAN

Love your mods Bob

Sorry but your reply is not correct. There is a glitch in the tabs when displayed on a VBA homepage. The standard VB incomplete profile message will break the tabs. This issue is unresolved. I worked with the dev and he was not able to figure out this issue. I am working on a way to make the standard VB incomplete profile message go into a top vba block to prevent it from breaking the tabs layout.

I will report back when I have the proper solution to this issue.

[yotsume]

Originally Posted by bobster65

Whats not working? Is the content file simply "dieing" on you or is it just not producing what you are looking for?

What specs do you want?

I need content files that work for social groups:
1. A tab to show latest groups
2. A tab for latest group comments
3. (were also missing a content file for tab blog comments)

When I enable the group php file I attached it spits back a database error:
Note: I know there are social group changes from vb3.7x to 3.8x

Are there any working social group content files for recent groups and comments?

Database error in vBulletin 3.7.4:

Invalid SQL:
 
    SELECT socialgroup.groupid, socialgroup.name, socialgroup.description, socialgroup.dateline, socialgroup.members
    FROM vb_socialgroup
    WHERE socialgroup.visible='1'
    ORDER BY dateline DESC
    LIMIT 3;

MySQL Error   : Unknown column 'socialgroup.groupid' in 'field list'
Error Number  : 1054
Request Date  : Thursday, August 6th 2009 @ 03:54:58 PM
Error Date    : Thursday, August 6th 2009 @ 03:54:59 PM
Script        : http://www.mysite.com/tab_groups.php
Referrer      : http://www.mysite.com/
IP Address    : xxxxxxxxxxx
Username      : xxxxxxxx
Classname     : vB_Database
MySQL Version : 5.0.67-log

[TheLastSuperman]

Originally Posted by yotsume

Sorry but your reply is not correct. There is a glitch in the tabs when displayed on a VBA homepage. The standard VB incomplete profile message will break the tabs. This issue is unresolved. I worked with the dev and he was not able to figure out this issue. I am working on a way to make the standard VB incomplete profile message go into a top vba block to prevent it from breaking the tabs layout.

I will report back when I have the proper solution to this issue.

Ahh ok, I C it won't help in your situation... couldn't you locate it and comment it out using the if this script etc w/ an else to do it otherwise then no need to move to another block/module? Just an idea but no time to tinker w/ it now otherwise I would look into it but maybe!

<if condition="THIS_SCRIPT != 'index'">Code or Phrase here to hide</if>

However I have seen some mods w/ auto template edit not work if the phrase is not found so you should use an else to prevent future headaches

<if condition="THIS_SCRIPT != 'index'">Code or Phrase here to hide<else />
Just show the Phrase</if>

S-MAN

[Omar Al-Ansari]

I got this error ...

I have vba in the root and the forum is in /forums .. is that the issue?

Warning: require_once(./global.php) [function.require-once]: failed to open stream: No such file or directory in /home/qlick/public_html/tabsample1.php on line 27

Fatal error: require_once() [function.require]: Failed opening required './global.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/qlick/public_html/tabsample1.php on line 27

[bobster65]

Originally Posted by Omar Al-Ansari

I got this error ...

I have vba in the root and the forum is in /forums .. is that the issue?


Warning: require_once(./global.php) [function.require-once]: failed to open stream: No such file or directory in /home/qlick/public_html/tabsample1.php on line 27

Fatal error: require_once() [function.require]: Failed opening required './global.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/qlick/public_html/tabsample1.php on line 27

put your content files in /forums

[Omar Al-Ansari]

Originally Posted by bobster65

put your content files in /forums

Hi bobster,

that fixed the error however nothing shows up?

all i got are empty tabs ?

[bobster65]

Originally Posted by Omar Al-Ansari

Hi bobster,

that fixed the error however nothing shows up?

all i got are empty tabs ?

Im not sure what content file(s) you are using. They are Samples, so you need to edit them and change settings like ForumIDs (if you are using the sample News or Recent Threads Content files) .. also, being that not everyone has the same server setup, you might need to edit some of the "paths" in the echo statements (which are towards the end of the content files)..