vb.org Archive - Add-On Releases - AJAX Tabs Content Script

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=235)

- - Add-On Releases - AJAX Tabs Content Script - Version 3.0 (YUI) (https://vborg.vbsupport.ru/showthread.php?t=191106)

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.

Code:

<!-- 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

Code:

<!-- 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.

Code:

<!-- 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

Code:

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

NON ACTIVE TAB EXAMPLE

Code:

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

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.

Additional Enhancements

** Coming Soon ** (Adding on the fly lol)

** ADDITIONAL CONTENT FILES **

Coming soon! be patient.. all content files released for previous versions DO WORK with this ;)

new Album-Pictures - Side by Side display, default is 5 photos (simple change of a variable to increase/decrease).. sort by dateline or random.

new Recent Blogs - This is a NEW Recent Blogs layout (similar to Recent Threads, but for Blogs)..

new Blog Entry - This is a NEW Blog Entry style layout. It displays the entire entry. Can display random entires, more than one entry etc..

Im wetting my pants in anticipation !!!!! cmon BOB you the man

any demo to chick it how it is work

I have a lot of patience :D great job

Quote:

Originally Posted by yahoooh (Post 1623867)

any demo to chick it how it is work

i think its very similar to this

http://developer.yahoo.com/yui/examp...rommarkup.html

Quote:

Originally Posted by yahoooh (Post 1623867)

any demo to chick it how it is work

You can check out version 2 and see some examples.... I'll be putting up some more details about this version soon.... Its pretty much the same as v2, but with a totally different more powerful backbone (YUI vs Dynamic Drives AJAX Tabs JS script)

https://vborg.vbsupport.ru/showthread.php?t=161197

Awesome, thank you..

_V

WHOA!

can't wait to see what you have in store ahead. GREAT JOB as is. thanks!

Installed and already nominated for MOTM

Desperately awaiting this. You're the man Bob.

As i said on vbadvanced, thank you ! Great work !

LOVE IT !!!
Have fully integrated it.. already !!

Every USER loves it !!! Thanks BOB

Is this suppose to be 2.0 to your old tabs?

Quote:

Originally Posted by TheInsaneManiac (Post 1624006)

Is this suppose to be 2.0 to your old tabs?

If you are talking about TFH (Tabbed Forum Home) then NO this is something different .. TFH V2 (BETA) will be released sometime in the next few days... HOWEVER, if you know what you are doing, you can use parts of this to pull it off (you can use the backbone of this to convert TFH v2 from the dynamic drive AJAX JS to YUI .....I see a few that have already done so) .. however, this is NOT a replacement for TFH..... this is an update to a MOD that has been through multiple phases over the past few years now for displaying Tabbed External Content.

only thing i cant get working is the loading gif.

Had to amend lastpost.gif filepath.. for our style, just the loading.gif and all sexy

Quote:

Originally Posted by TimberFloorAu (Post 1624063)

only thing i cant get working is the loading gif.

Had to amend lastpost.gif filepath.. for our style, just the loading.gif and all sexy

Ya, feel free to do what ever you want with ANY of the content files.. those are all just a "BASE" to get you started on your own custom content.

Ah.. loading thingy.. forgot about that.. that will be fixed. I figured there will be a few bugs :o

hey its all good.

Works a charm.
I thought the image.png was a figment of my imagination too lol

be nice to give each tab its own css attribute for colour etc.

Now I have the menu systm, sat above normal forum home forums.. first tab is all.. which links to forumhome... all others to a variety of forums etc.

Would be nice to parse non forum id links, such as vb powered pages we have installed.

Great work !

voted motm

Hi

Looks great but
Will it work for users with no javascript? :)
*cough* spiders *cough*

Bob,

Thanks for all your help and congrats on getting this one out the door.

Can you please post a list of changes for the existing v2 users so we can determine if we want to upgrade?

Thanks.

could i make a suggestion bob.
Something i will look into coding, also..

on the tabbed forum display style i have, top of the list would be good to have start a new thread, and choice of drop down box, to slide it into the forums within that tab.. so..

lets say tab1 has forums 23,45,67 ( called apples bananas an nuts )
at top of ajaxified forum dropdown ( listing the threads ) theres a New Thread button, with a drop down choice for a,apples b, bananas c, nuts

get my drift..?

Quote:

Originally Posted by TimberFloorAu (Post 1624401)

lets say tab1 has forums 23,45,67 ( called apples bananas an nuts )
at top of ajaxified forum dropdown ( listing the threads ) theres a New Thread button, with a drop down choice for a,apples b, bananas c, nuts

This is a very good idea, something that I have wanted to do myself.

Quote:

Originally Posted by TimberFloorAu (Post 1624401)

That would be something built into that specific content file. I'll look into that. You MIGHT take a quick look at the "news" content file as it sorta has some of that functionality built in (the dynamic creation of the create new thread button for the specific forum that the news item resides in..

what shall I do with "CONTENT FILES" ?

Quote:

Originally Posted by RvG2 (Post 1624850)

what shall I do with "CONTENT FILES" ?

Those are for use with the system. You can use them as is (by making some simple setting changes in the Config area at the top of each file or you can modify them to your liking. They Mimic some of the more popular CMPS modules (like recent threads, news, thumbs, blogs etc).. The whole idea is to have a system to allow you to add your own custom content how ever you wish to. I encourage members to come up with their own content files and share with the rest of the community :) I have a bunch of custom content files that I will be sharing.

This looks very impressive from what I've read so far, Bobster. However, you state that it is not the same (nor an upgrade) to TFH v2 (which I am very happily using, kudos). So, forgive my ignorance - but what exactly does this do if it is not a TFH?

Quote:

Originally Posted by RvG2 (Post 1624850)

what shall I do with "CONTENT FILES" ?

btw, the files go in the forum ROOT. You can put them anywhere, but you will have to edit the REQUIRE BACK-END area if you put them anywhere besides the forum root (because of the paths to the included and require files being called)

Quote:

Originally Posted by karlm (Post 1624858)

TFH is for tabbing out the Categories on the FORUMHOME page. THIS is for Tabbing custom content anywhere.. ie, vBa CMPS pages, side columns on the Forum Home, just about anywhere that you would want to "tab" custom content....

Installed & Nominated.
This just roxxx :=)

Quote:

Originally Posted by FiMeTi (Post 1624972)

Installed & Nominated.
This just roxxx :=)

Ya, its pretty fun to mess around with.. opens up a ton of options.. I have built over 100 custom content files for various sites so far lol.. I use the hell out of it :cool:

Quote:

Originally Posted by bobster65 (Post 1624060)

:D I'd rather wait until you get everything worked out.

Quote:

Originally Posted by TheInsaneManiac (Post 1625105)

:D I'd rather wait until you get everything worked out.

If you are only wanting to do Tabbed Forum Home, its best to wait for that specific MOD.. however, the new TFH will also be able to use any content files made for this as well ;)

Quote:

Originally Posted by bobster65 (Post 1624760)

Have had a look Bob, and looks very good. Will wait until you can rovide some instruction on implementation

Ste

Quote:

Originally Posted by bobster65 (Post 1624992)

I have built over 100 custom content files for various sites so far lol..

Can you share what some of them do? I know all the basic ones, just wondering what other sites have done with this.

Thanks!

On one of the demonstration pages you supplied (I forgot the link at this moment), it has a rotating image which holds an image if you hover the mouse of that tab... is that what this is? If not, could you point me in the direction of where to acquire a similar finish. Because that is something I'm kind of looking for.

Quote:

Originally Posted by Trana (Post 1625233)

Can you share what some of them do? I know all the basic ones, just wondering what other sites have done with this.

Thanks!

I'll put together a full list one of these days.. lots of different variations of recent threads and news (to the clients specifications).. same thing with the blogs.. just did a blog on yesterday that looks similar to recent threads with a snippet of the Blog Text under the title (see the Blogs Tab here: http://www.usafacommunity.com/). I've done a lot of custom recent threads with Thumbnails (which I believe you have).. I've got a few variations of vBa Links Directory stuff, 5 or 6 different Photo Album ones, Just about every CMPS Module I have custom versions of.. lots of stuff for the forum home page like the whos online area tabbed out with some of the more popular addons from Paul and Cyb.. A bunch of different vBookie ones... some sports ones.. the list is pretty extensive lol... I've done so many that I can't remember them all.. those are just ones that involve vbulletin.. I've got a ton that do dynamic external stuff integrated with vB as well..

Won't even go into the simple static HTML files that are beyond easy for anyone to knock out lol

I think I'll waiting til the beta is finished, but looks like it will be great. For the people who've integrated it into their site, can you post a link so the rest of us can check it out?

Installed, btw bobster65 , I sent u a pm regarding some custom work hope u have time to check it out

I may be dumb, and in the last three pages, I might have missed it, but i get the error for CMPS
so I took out the line require_once('./includes/vba_cmps_global.php'); and it loads the tab, but it doesn't show any content, just a thin line saying "Title, Username, Date Last Post Replies Views"
My site is www.socaloffroading.com but I'll probably have it changed or fixed by the time you reply, lol I usually do.

never mind, this is over my head, i can't get it working. I even read that this was an update, so I went back and installed v2 and now neither one work :(

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01540 seconds Memory Usage 1,861KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (15)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: