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: 125
Released: 17 Sep 2008 Last Update: Never Downloads: 1420
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

  #76  
Old 28 Sep 2008, 15:39
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by FiMeTi View Post
Anyone solved the problem with the loading.gif?
Check first post on page 4 in this thread. ^^

peaze
sorry, not yet.. I have not even had 5 minutes to look into it yet. I am sure its something simple tho as it works, just that its showing up in ALL the divs lol
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #77  
Old 28 Sep 2008, 16:17
derandechser derandechser is offline
 
Join Date: May 2008
Hi Bobster and thank you again for the "Album-Pics"-Feature.
Is it possible to show latest comments for Album-Pics in a seperate Tab.
This would be helpful.

Another thing is this. Iīm showing up the latest events from calendar on my forumhome. Now, i like to put it in a seperate tab, to clean up my forumhome. I tried a few things but that didnīt work. maybe you got an idea how to solve it?

Sorry for my questions, i know, you must be very busy.
Thanks for your support and for this very useful addon!

Greetings, Peter
Reply With Quote
  #78  
Old 28 Sep 2008, 16:32
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by derandechser View Post
Hi Bobster and thank you again for the "Album-Pics"-Feature.
Is it possible to show latest comments for Album-Pics in a seperate Tab.
This would be helpful.

Another thing is this. Iīm showing up the latest events from calendar on my forumhome. Now, i like to put it in a seperate tab, to clean up my forumhome. I tried a few things but that didnīt work. maybe you got an idea how to solve it?

Sorry for my questions, i know, you must be very busy.
Thanks for your support and for this very useful addon!

Greetings, Peter
Hi Peter,

I do have a couple different calendar/event content files.. however, they were written over a year ago, so I will have to update those before I release them.. if you want to PM me a mock up of what you are looking for, go ahead and do that and I'll try and get something out soon..

As far as latest comments for album pics, I'll look into it.. shouldn't be to tough.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #79  
Old 29 Sep 2008, 10:56
Magnumutz's Avatar
Magnumutz Magnumutz is offline
 
Join Date: Feb 2006
Real name: Alex
Is it possible to use this Tabs Content Script to replace the forumhome?
Like your other one can: http://www.vbulletin.org/forum/showthread.php?t=175687 ?
Cuz i was thinking of getting rid of the vBAdvanced portal
__________________

Reply With Quote
  #80  
Old 02 Oct 2008, 01:04
gwerzal's Avatar
gwerzal gwerzal is offline
 
Join Date: Oct 2007
Hi

Again thanks for a great mod

I have this installed on my site as a vba module but would there be any way to have a second module with different tabs.

Thank you in advance
Ben Jones
Reply With Quote
  #81  
Old 03 Oct 2008, 15:33
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by gwerzal View Post
Hi

Again thanks for a great mod

I have this installed on my site as a vba module but would there be any way to have a second module with different tabs.

Thank you in advance
Ben Jones
Hey Ben..

ok, to do multiple modules, its just a matter of some IDs (Vars and Divs) within the template..

So lets take a look at the base template:

I've highlighted in RED the VAR Name that needs to be unique for each instance (and the same within each instance). NOTE: Pay attention to the end of each tab line as there is a VAR at the end that needs to match

I've highlighted in GREEN, the Div ID that needs to be unique for each instance (and the same within each instance).


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


So if you want a 2nd Module, you would do something like this.. (I just added the number 2 to everything to make it unique and identify it as the 2nd module.. you can name them anything you want***


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

** NOTE: Altho I said you can name them anything you want to, we need to also be careful in doing so.. for example, using myTabs will conflict with vbulletins use of the YUI Tabs within the profiles.. so come up with something unique to your site when naming these.. also, DO NOT USE TabView (Capital T and capital V) ... that is a no no as its part of the TabView Function lol.

Hope this made sense?
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #82  
Old 03 Oct 2008, 15:37
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Magnumutz View Post
Is it possible to use this Tabs Content Script to replace the forumhome?
Like your other one can: http://www.vbulletin.org/forum/showthread.php?t=175687 ?
Cuz i was thinking of getting rid of the vBAdvanced portal
Well, sorta, but there are some extra things involved in pulling off Tabbed Forum Home that doesn't come with this. That Modification is in the process of being upgraded and uses the same base as this one (YUI Tab View).... It however has an Admin CP interface to control the Tabs... it also comes with a Module interface that will allow you to add any of the content modules that also work with this. It is very close to being released as Beta (just finishing up install documentation now)..
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #83  
Old 04 Oct 2008, 08:29
gothicuser's Avatar
gothicuser gothicuser is offline
 
Join Date: Apr 2004
Real name: Tony
Great mod, working great, thankyou.

Only problem I have seen is that under Firefox (2) the tabs themselves take on a life all of their own

As you'll see from the images below one tab will assume it's natural form, whilst the other two get severe vertical belligerence!

Where do you think I should look for an issue fixer for this? Firefox itself or maybe somewhere else?

Many thanks in advance
Attached Images
File Type: gif tabone.gif (10.6 KB, 55 views)
File Type: gif tabtwo.gif (9.1 KB, 48 views)
File Type: gif tabthree.gif (9.3 KB, 35 views)
__________________
Grumpy and bad tempered. I'm a pensioner, so don't care any more
Reply With Quote
  #84  
Old 04 Oct 2008, 10:30
Magnumutz's Avatar
Magnumutz Magnumutz is offline
 
Join Date: Feb 2006
Real name: Alex
Originally Posted by bobster65 View Post
Well, sorta, but there are some extra things involved in pulling off Tabbed Forum Home that doesn't come with this. That Modification is in the process of being upgraded and uses the same base as this one (YUI Tab View).... It however has an Admin CP interface to control the Tabs... it also comes with a Module interface that will allow you to add any of the content modules that also work with this. It is very close to being released as Beta (just finishing up install documentation now)..
Well, that sounds even better
__________________

Reply With Quote
  #85  
Old 04 Oct 2008, 15:46
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by gothicuser View Post
Great mod, working great, thankyou.

Only problem I have seen is that under Firefox (2) the tabs themselves take on a life all of their own

As you'll see from the images below one tab will assume it's natural form, whilst the other two get severe vertical belligerence!

Where do you think I should look for an issue fixer for this? Firefox itself or maybe somewhere else?

Many thanks in advance
You can change the settings in the tabview-skin.css file to your liking. I really don't have any "standard" suggestions.. Based on your images, I would lower the 0.4 to 0.3 and see how that looks..

the two blocks of CSS that effect that are (settings highlited in red..


lines 30-31 (Raises from the set height)

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



lines 16-23 (specifically line 20) (default set height)

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

__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #86  
Old 04 Oct 2008, 16:59
gothicuser's Avatar
gothicuser gothicuser is offline
 
Join Date: Apr 2004
Real name: Tony
Many thanks for the really fast response. Worked a treat
__________________
Grumpy and bad tempered. I'm a pensioner, so don't care any more
Reply With Quote
  #87  
Old 09 Oct 2008, 09:16
dodjer42's Avatar
dodjer42 dodjer42 is offline
 
Join Date: Jul 2006
I loved the TFH, but this is more suitable for me. I'll be loading it up on the dev site and testing it out asap. Nice work Bob!
__________________
---------------------------------------
Whirlpool Gamers Modifications:

Warhammer Enhanced Roster
Reply With Quote
  #88  
Old 10 Oct 2008, 13:17
SoulSuite SoulSuite is offline
 
Join Date: Jul 2008
Is it possible to show per category? Not threads but topics..
Reply With Quote
  #89  
Old 11 Oct 2008, 11:42
ikastara ikastara is offline
 
Join Date: Mar 2005
Just want to share my experience,
I think this mod assumed that cmps resides inside vbulletin root folder. I have my cmps file 1 folder up from vB, and i can not get this working by following original instruction.
After a lot of trial and error I finally geit it working by changing path in the template to point to the content php files. Then after that also need to edit content files to add required path.

hope this is useful for somebody

*ps: bobster65, if this is not how you intend it to be can please let me know what is the correct approach ?
Thanks ! great mod !
Reply With Quote
  #90  
Old 11 Oct 2008, 12:27
Tianuc Tianuc is offline
 
Join Date: Dec 2007
Can I use it?

NEW GARS 02-07-2008 - http://www.vbulletin.org/forum/showp...&postcount=113 - GARS Content File - ZiG
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 14:01.

Layout Options | Width: Wide Color: