Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
AJAX Tabs Content Script - Version 3.0 (YUI) Details »
AJAX Tabs Content Script - Version 3.0 (YUI)
Mod Version: 3.0, by bobster65 (Member) bobster65 is offline
Developer Last Online: Nov 2013 I like it Show Printable Version Email this Page

vB Version: 3.8.x Rating: (14 votes - 5.00 average) Installs: 124
Released: 17 Sep 2008 Last Update: Never Downloads: 1405
Not Supported Additional Files Translations  

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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

NON ACTIVE TAB EXAMPLE

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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.

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Forum Home Enhancements Flipped tabs = Swivel tabs = INVERTED TABS Deepdog009 vBulletin 3.7 Add-ons 29 20 Jan 2010 09:39
Add-On Releases AJAX Tabs Content Script v2 bobster65 vBulletin 3.6 Add-ons 182 07 Jan 2010 20:21

  #226  
Old 22 Dec 2009, 14:57
xTerMn8R xTerMn8R is offline
 
Join Date: Mar 2004
Thanks for the Quick Responce Bobster
Reply With Quote
  #227  
Old 22 Dec 2009, 15:44
xTerMn8R xTerMn8R is offline
 
Join Date: Mar 2004
Installed and working but if I remember correctly, we used to be able to automate the Tabs to switch.(Slideshow) I can't figure out how to do that anymore and can't find anything on it in ANY of the posts here. I did find the Old Code in the 2.0 Thread but cant seem to get it to work...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Is that still Possible Bobster65?

Thanks,
Tom

"Marked as Installed"

Last edited by xTerMn8R; 22 Dec 2009 at 16:32. Reason: Added Slideshow ref and Slideshow code
Reply With Quote
  #228  
Old 23 Dec 2009, 08:34
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by xTerMn8R View Post
Installed and working but if I remember correctly, we used to be able to automate the Tabs to switch.(Slideshow) I can't figure out how to do that anymore and can't find anything on it in ANY of the posts here. I did find the Old Code in the 2.0 Thread but cant seem to get it to work...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Is that still Possible Bobster65?

Thanks,
Tom

"Marked as Installed"
that script code needs to be used with v1.5/2.0 as its part of the Dynamic Drive AJAX Tabs script.. it won't work with YUI Tab View and Dispatcher..
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #229  
Old 24 Dec 2009, 01:39
xTerMn8R xTerMn8R is offline
 
Join Date: Mar 2004
Smile

Ohhhhhhhhhh.... yeah I saw in another post somewhere you have said it is possible, but not validated yet... I think. Any idea if anyones doing what ever they do to make it available? If I remember correctly that post was dated quite a while ago.... Wasn't in this Thread through...

Anyway I got it working nicely, without the slideshow and I thank you for all the dedicated work and support you provide us all. If you do hear of anything concerning that please keeps us updated.

Happy Holidays,
Tom
United For Freedom
Reply With Quote
  #230  
Old 11 Apr 2010, 16:58
Doom Stone Doom Stone is offline
 
Join Date: Dec 2005
Quick question, I know this isn't a replacement or upgrade for TFH, but I would like to know if it's possible to configure it in the same manner. IE; Use this modification to display the forum home in tabbed content just as TFH does?

Edit: I've modified my forumhome to allow the use of this modification to act like the TFH, but it's not quite the same.
I know thats obviously because thats not what this modification is designed for :P
So I'm wondering if the TFH will be updated soon.

Last edited by Doom Stone; 12 Apr 2010 at 11:20.
Reply With Quote
  #231  
Old 13 Apr 2010, 01:12
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Doom Stone View Post
Quick question, I know this isn't a replacement or upgrade for TFH, but I would like to know if it's possible to configure it in the same manner. IE; Use this modification to display the forum home in tabbed content just as TFH does?

Edit: I've modified my forumhome to allow the use of this modification to act like the TFH, but it's not quite the same.
I know thats obviously because thats not what this modification is designed for :P
So I'm wondering if the TFH will be updated soon.
Ya, you can use it on Forum Home.. you can use it just about anywhere actually. Also, all the content files can be used within TFH as well (the new 3.8 version which will be released this week).

To much updating by vb is giving me a headache lol
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #232  
Old 02 May 2010, 23:26
devrimow devrimow is offline
 
Join Date: Apr 2008
oh, I've accidentally deleted images. sry my english is bad.
Yes, I mean forum post.

has something to do with the charset? how do I change it?
I have utf-8
Reply With Quote
  #233  
Old 19 May 2010, 19:39
Zylantex Zylantex is offline
 
Join Date: Sep 2009
Real name: Chris
Red face

I'm not very technical and my brain hurts after reading this thread so please excuse me if these questions have been addressed already.

Can the tab be made to link directly to a forum say "Sports" forumid=7 ?

Is there a simple way to pick up the colours from the style sheet?

Thanks.
Reply With Quote
  #234  
Old 24 May 2010, 09:15
Silmarillion's Avatar
Silmarillion Silmarillion is offline
 
Join Date: Jul 2004
Real name: Chris
Hmmm...followed step by step...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

What's the problem?
Reply With Quote
  #235  
Old 24 May 2010, 10:24
Silmarillion's Avatar
Silmarillion Silmarillion is offline
 
Join Date: Jul 2004
Real name: Chris
Does this only work with VBA and VB?
Reply With Quote
  #236  
Old 27 May 2010, 20:32
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Silmarillion View Post
Does this only work with VBA and VB?
if you don't use vba, remove the calls to the vba files.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #237  
Old 25 Jun 2010, 23:43
Scalemotorcars's Avatar
Scalemotorcars Scalemotorcars is offline
 
Join Date: Mar 2006
Real name: Daniel
Ok Im done, time to ask for help.

I just cant seem to get the first tap to load.

Ive set the cache to "true" with active also set true.

The code in my vb template is exactly the same as above placed in headincludes.

Portal is //root/index.php
Forums //root/forum/.

Any help would be great.

http://scalemotorcars.com/index.php
__________________
ScaleMotorcars.com Large scale model building at its best. Check it out.

Last edited by Scalemotorcars; 26 Jun 2010 at 00:27.
Reply With Quote
  #238  
Old 26 Jun 2010, 05:04
Scalemotorcars's Avatar
Scalemotorcars Scalemotorcars is offline
 
Join Date: Mar 2006
Real name: Daniel
Got it. It was the "/" before forums in the content scripts and the "/" before the JS scripts in the headinclude.

Still cant seem to get the loading.gif to work. I see thats been an issue all along. Anyone figure it out???
__________________
ScaleMotorcars.com Large scale model building at its best. Check it out.
Reply With Quote
  #239  
Old 27 Jul 2010, 05:34
merk_aus merk_aus is offline
 
Join Date: Feb 2008
Real name: Brendon
Bob,
Can this be used on vbulletin publishing suite 4.0? I am attempting to use this in a widget on the CMS page.
Reply With Quote
  #240  
Old 04 Aug 2010, 09:49
durham durham is offline
 
Join Date: Oct 2008
Really great mod, but I cannot figure out how to show link to specific threads rather than latest threads in a forum. Basically I want some forums to have tabs to specific threads. At them moment I have sticky threads but I would rather they were tabs.

In otherwords the tabs would be in a sub-forum with only threads below and I want to tab link to some of them.

is this possible please?

BTW. I struggled to get the examples to work until I deleted this line:

require_once('./includes/vba_cmps_global.php');

(this is only required when using vbdynamics).

I can see others having this issue!

Thanks

Durham
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 02:56.

Layout Options | Width: Wide Color: