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: 1407
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

  #241  
Old 05 Oct 2010, 10:35
Alfa1's Avatar
Alfa1 Alfa1 is offline
 
Join Date: Dec 2005
These files are taking up a lot of resources and bandwidth:
/clientscript/yui/tabview/dispatcher-min.js
/clientscript/yui/tabview/tabview-min.js
/clientscript/yui/element/element-beta-min.js

In AdminCP > vbulletin options > Server Settings and Optimization Options > remote YUI, I have set hosting to Google.
I remember there where some issues with Yahoo not hosting all YUI files.

How can I get reduce the resource and bandwidth use of these files?
is it possible to host these files on Yahoo or Google? If yes, how?
Reply With Quote
  #242  
Old 09 Oct 2010, 21:30
Alfa1's Avatar
Alfa1 Alfa1 is offline
 
Join Date: Dec 2005
I see that other js files are also eating up a lot of resources and bandwidth. To resolve this I need to find the files on http://yui.yahooapis.com or http://ajax.googleapis.com and add the location of those files to the addition css.

Which of the css files can not be replaced by the standard files on yahooapis or googleapis? i.e. Which files did you modify?
Can I replace tabview.css and tabview-skin.cs with the version on yahooapis?
Reply With Quote
  #243  
Old 23 Oct 2010, 20:52
angeljs's Avatar
angeljs angeljs is offline
 
Join Date: Aug 2005
Real name: Angela
I've just decided this is my new favourite mod! It has so much potential! Unfortunately, I'm not a programer, so I was just wondering if there is any way to show rows of images in the tabthumb_sidebyside.php page, instead of them all shown in a row. I'd like to be able to show 3 rows of 3 images, if it's possible.
Reply With Quote
  #244  
Old 23 Oct 2010, 21:15
yotsume's Avatar
yotsume yotsume is offline
 
Join Date: Jan 2007
Do you mean columns and rows of photos like my screen shot?
Attached Images
File Type: jpg Tabbed Gallery and Albums.jpg (182.3 KB, 52 views)
__________________
Yotsume
Kaydev Media Productions
Check out my mods
:
EYO-AIM, FlashChat Combo-Module for vBadvanced 3.6x or 3.7x
Reply With Quote
  #245  
Old 23 Oct 2010, 21:48
angeljs's Avatar
angeljs angeljs is offline
 
Join Date: Aug 2005
Real name: Angela
Yes, something like that
Reply With Quote
  #246  
Old 26 Oct 2010, 21:25
angeljs's Avatar
angeljs angeljs is offline
 
Join Date: Aug 2005
Real name: Angela
Also, would it be possible to modify this to show something like they have on Modthesims when viewing a post:
http://linna.modthesims.info/download.php?t=422172

So if I wanted to show one tab for the info and one for the comments for example.
Reply With Quote
  #247  
Old 08 Nov 2010, 13:01
Alfa1's Avatar
Alfa1 Alfa1 is offline
 
Join Date: Dec 2005
Do the new YUI release (2.8.2r1) and the use of PHP 5.3 make any difference for this addon?
Reply With Quote
  #248  
Old 22 Mar 2012, 11:40
zyiad zyiad is offline
 
Join Date: Nov 2011
Real name: Mahmoud
thanks
__________________
www.hagaza.com
Reply With Quote
  #249  
Old 27 Jul 2012, 23:07
merk_aus merk_aus is offline
 
Join Date: Feb 2008
Real name: Brendon
I am having an issue that I hope someone will be able to assist me with. I am using this on my website http://nrl-central.com to have the latest ladders on the sidebar. The issue is no matter what I attempt to put in the styling section the words for the tabs inherit their colors from the overall board style.

I was wondering if this could be changed. Please visit the site look on the right hand side where it says ladders and you will see what I mean. Is there anyway to get it so the words show up as ffffff or something so that they can stand out?
Reply With Quote
  #250  
Old 01 Aug 2012, 06:07
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by merk_aus View Post
I am having an issue that I hope someone will be able to assist me with. I am using this on my website http://nrl-central.com to have the latest ladders on the sidebar. The issue is no matter what I attempt to put in the styling section the words for the tabs inherit their colors from the overall board style.

I was wondering if this could be changed. Please visit the site look on the right hand side where it says ladders and you will see what I mean. Is there anyway to get it so the words show up as ffffff or something so that they can stand out?
/clientscript/yui/tabview/assets/tabview-skin.css

/* selected tab background color and text color */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {background:#053764 url(image.png) repeat-x left; color:#ffffff;}

change background:#053764 to the color you want.. 053746 is that darkish blue. also, set an !important on the color element (fro the text).. ie color: #ffffff !important; as its being over rode by #sidebar_container a

This below change (just adding !important) makes it look much better

/* selected tab background color and text color */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {background:#053764 url(image.png) repeat-x left; color:#ffffff !important;}

This file contains ALL the style settings, so to replace that blue, find other instances of it in the file and replace those as well.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.

Last edited by bobster65; 01 Aug 2012 at 06:18.
Reply With Quote
  #251  
Old 03 Aug 2012, 06:27
tehPARADOX tehPARADOX is offline
 
Join Date: Feb 2007
Thanks.
__________________
Reply With Quote
  #252  
Old 20 Aug 2012, 17:11
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Any demo or a Screenshot? Kinda boring when people dont know what this is about, if you could please put a screen shot!

I dont understand why our amazing coders use so much time to create something without setting up an image or an example of their great work!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #253  
Old 21 Aug 2012, 10:42
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by ChiNa-Man View Post
Any demo or a Screenshot? Kinda boring when people dont know what this is about, if you could please put a screen shot!

I dont understand why our amazing coders use so much time to create something without setting up an image or an example of their great work!
If you look at this previous version, there are a few screen shots of what a Tabbed Module looks like. http://www.vbulletin.org/forum/showthread.php?t=161197

btw, this stuff is so outdated and hasn't even been updated in at least 2 years, so good luck if you try and use it.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
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 20:29.

Layout Options | Width: Wide Color: