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

  #46  
Old 19 Sep 2008, 17:09
FiMeTi FiMeTi is offline
 
Join Date: May 2008
Hi bob! It works fine, but there is 1 prob. When I klick a second time on a Tab, it will load again with a little optical error. (Check attached image)
Attached Images
File Type: jpg loading.jpg (18.6 KB, 95 views)
Reply With Quote
  #47  
Old 19 Sep 2008, 17:37
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by FiMeTi View Post
Hi bob! It works fine, but there is 1 prob. When I klick a second time on a Tab, it will load again with a little optical error. (Check attached image)
lol.. well, it appears some tweaking to that is in order I added this to Project tools and will tweak it when I get some spare time...
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #48  
Old 19 Sep 2008, 18:31
orkyn orkyn is offline
 
Join Date: Oct 2006
great hack .... installed and nomination

can't wait post #2 and #3 :-)
__________________
#####My Board#####
Reply With Quote
  #49  
Old 19 Sep 2008, 19:11
4x4 Mecca 4x4 Mecca is offline
 
Join Date: Feb 2007
Thanks for your help bobster! It was my fault, I didn't set the date to an old enough date and it was on my test server.
Reply With Quote
  #50  
Old 20 Sep 2008, 15:08
Magz's Avatar
Magz Magz is offline
 
Join Date: Nov 2006
Just one slight issue at the moment, and im sure its something ive overlooked.

This displays fine on my vbadvanced home page, however, all links are missing the root/forum element, thus resulting in page not found message.

What do i need to change here ?

Thanks
__________________
General Chat Forum - Follow us on Twitter, Youtube and Facebook
Reply With Quote
  #51  
Old 20 Sep 2008, 15:26
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Magz View Post
Just one slight issue at the moment, and im sure its something ive overlooked.

This displays fine on my vbadvanced home page, however, all links are missing the root/forum element, thus resulting in page not found message.

What do i need to change here ?

Thanks
you can fix that by editing the href and img tags in all the content files. Towards the end of the content files is the "// CONTENT OUTPUT (echos out each individual recent thread result into Tab Div Container)"

HREFs for example


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


change to


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


IMGs for example


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

Change to


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
  #52  
Old 20 Sep 2008, 16:06
Magz's Avatar
Magz Magz is offline
 
Join Date: Nov 2006
As easy as that, thank you bobster
__________________
General Chat Forum - Follow us on Twitter, Youtube and Facebook
Reply With Quote
  #53  
Old 20 Sep 2008, 19:41
karlm's Avatar
karlm karlm is offline
 
Join Date: Jul 2006
Real name: Karl
Mr. Bobster... could you give some guidance on how someone may implement their own code to the tabs?

I realise they can adjusted - but I don't mean the tabs themselves... I mean, instead of forum listings under tab 1, perhaps put x- images, under tab 2 a forum and under tab 3 some videos...
Reply With Quote
  #54  
Old 21 Sep 2008, 05:40
4x4 Mecca 4x4 Mecca is offline
 
Join Date: Feb 2007
I added the code to show a new thread button for each page, but is there any way to be able to show multiple pages, I mean it maxes out at 30 posts per page, but can't I have like page 1 page 2 etc... ?
Reply With Quote
  #55  
Old 21 Sep 2008, 15:29
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by karlm View Post
Mr. Bobster... could you give some guidance on how someone may implement their own code to the tabs?

I realise they can adjusted - but I don't mean the tabs themselves... I mean, instead of forum listings under tab 1, perhaps put x- images, under tab 2 a forum and under tab 3 some videos...

I added the code to show a new thread button for each page, but is there any way to be able to show multiple pages, I mean it maxes out at 30 posts per page, but can't I have like page 1 page 2 etc... ?
Building Content files is similar to building additional pages (minus the need for header, footer). Just take a look at the CONTENT FILES folder in the ZIP File, there are a few different types in there (and will be more soon).

I am working on a recent thread and a News with ajax pagenation..
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #56  
Old 21 Sep 2008, 16:39
Trana Trana is offline
 
Join Date: Apr 2005
Bob,

Regarding all your custom work, I'd love to see the VBA Gallery (Photopost VBG), VB Blogs, and VBA Links if you don't mind sharing them.

Also, I'd like to get tabthumbs updated with ajax for real time updates if you want to take on a new custom job. PM me.

Thanks.
Reply With Quote
  #57  
Old 22 Sep 2008, 11:00
derandechser derandechser is offline
 
Join Date: May 2008
Hi, thanks for sharing this great modification!
Ive a question: Is it possible to display the most recent Album-Pictures in a tab?
There some modifications to show them on Forumhome, but there must be a way to show them in a seperate tab, i think.
Could you help me?
Greetings,
Peter
Reply With Quote
  #58  
Old 22 Sep 2008, 16:31
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by derandechser View Post
Hi, thanks for sharing this great modification!
Ive a question: Is it possible to display the most recent Album-Pictures in a tab?
There some modifications to show them on Forumhome, but there must be a way to show them in a seperate tab, i think.
Could you help me?
Greetings,
Peter
Yes, its possible.. attached is a SAMPLE on how to do it. The sample is preset to display the 5 latest Photos (side by side) ..

Feel free to modify it to your needs... Everything is commented in the file for advanced Customization ..
Attached Files
File Type: php tab_album.php (3.0 KB, 24 views)
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #59  
Old 22 Sep 2008, 18:00
derandechser derandechser is offline
 
Join Date: May 2008
Thank you! Thank you! Thank you!!

Abolutely what i was looking for!

Works fine.

Greetings,
Peter
Reply With Quote
  #60  
Old 24 Sep 2008, 23:21
Hornstar's Avatar
Hornstar Hornstar is offline
 
Join Date: Jun 2005
Real name: Matt
I got this error:

Warning: require_once(./includes/vba_cmps_global.php) [function.require-once]: failed to open stream: No such file or directory in [path]/tabsample1.php on line 28

Fatal error: require_once() [function.require]: Failed opening required './includes/vba_cmps_global.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/******/public_html/***/forums/tabsample1.php on line 28

Fixed: I deleted line 28 and now it is working after clearing my cache.


Any recommendation on where a good place to show this on the forums is? which template and spot?


Also, I think I would like to show this up as if it was an extra forums on the site. how would I go about doing that? code would be needed, as I am not that experienced just yet.

Many thanks for such a wondering mod.

Last edited by Hornstar; 22 Dec 2008 at 02:13.
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 07:12.

Layout Options | Width: Wide Color: