Add-On Releases - AJAX Tabs Content Script v2

AJAX Tabs Content Script - Version 2.0

Note: Altho this "How To" is written for implementation within vbadvanced CMPS, this can also be easily implemented anywhere within vB , ie on custom vB pages or within current vB pages.

Description/Whats changed within this release?: This new version (based on the AJAX Tabs Content Script (v 2.0) written by Dynamic Drive - http://www.dynamicdrive.com/dynamici...tent/index.htm) is a versatile Ajax script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. Below lists the features of this script that together make it highly adaptable in the real world:

Here's a quick outline of the script features:

• Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax.
• (v 2.0) Apart from Ajax, an external page can also be fetched and displayed via the IFRAME element instead. This is useful for external pages that either contain JavaScript/ CSS code that doesn't run properly when fetched via Ajax, or the page is from an outside domain.
• Add a "default" content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages.
• Supports session only persistence, so the last tab user clicked on is remembered if he/she returns to the page within the same browser session.
• (v 2.0) Supports auto "slideshow" mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
• (v 2.0) Ability to also expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted.
• (v 2.0) Ability to dynamically select a tab either based on its position within its peers, or its ID attribute.
• (v 2.0) Ability to directly load a different external page into the content container, either via Ajax or IFRAME.
• (v 2.0) Ability to set where the CSS class "selected" get assigned when a tab is clicked on- either on the tab link itself (its "a" element), or its parent instead (ie: "li" element). This makes the script adaptable to both CSS Tabs that are styled at the "A" level itself, or its parent container instead.
• (v 2.0) Supports nested Ajax Tabs! In other words, you can have an external page fetched via Ajax contain in itself Ajax Tabs that show their own contents when clicked on as well. This is made possible using the "onajaxpageload" custom event handler (see documentation).
• Supports multiple Ajax Tabs Contents on the same page.
• Fully unobtrusive, search engine friendly design. For search engines or browsers with JavaScript disabled, the external contents will just load as actual pages (instead of via Ajax).

Reminder: Due to security limitations, the external pages loaded via each tab using Ajax must reside on the same domain as the script itself. This limitation doesn't apply if you use the "IFRAME" option to fetch and show the external page instead.

This is what I've done so far to implement AJAX Tabs functionality for my websites and others. I hope that its easy to follow along, answers your questions and meets your needs. If you are reading this and wondering what a tabbed content is, check out the screen shots for a visual.

CMPS Version Note: Coded for CMPS v3.0. Modifications can be made to the php files (Require Back-End) to work with CMPS v2.x

CMPS Module Type: TEMPLATE w/Alternative Module Wrapper Template
Templates: adv_portal_Tab_Block_Main, adv_portal_alt_module_wrapper (optional)
Files: ajaxtabs.js, ajaxtabs.css, Sample Content Files, images

Note: I've included sample files in the attached Zip File to use with the step by step how to.

Step 1. Upload the ajaxtabs directory (located in the attached Zip File) to the FORUMS Root.
This directory contains the ajaxtabs.js file & the ajaxtabs.css file
path example: /www/forums/ajaxtabs/ajaxtabs.js


Step 2. Modify CSS file.
Use Attached Sample CSS file - Sample name: ajaxtabs.css
Change paths to images to reflect your domain and forum root (2 lines)...

Note: Additional Modifications to this file can be made once you get the initial sample system up and running.


Step 3. Create, Name and Upload Multiple "Content" files.
Use attached Sample PHP "Content" file - Sample name: tabexternal.php (I've included working samples in the attached Zip File).

NOTE: Please read the Instructions TXT File for the edits that need to be made in order for them to work on your site.

The location I chose for these was the FORUMS root.
path example: /www/forums
You can name these files anything you want. For example, I chose a naming convention - tabexternal.htm, tabexternal2.php, tabrecentnews.php, tabvbookie.php, ..etc etc

Note: Further Modifications to these files can be made once you get the initial system up and running.


Step 4. (optional) Create an Alternative Module Wrapper Template.
Use attached Sample Alternative Module Wrapper Template - Sample name: adv_portal_alt_module_wrapper

I chose to do this, because I didn't want to use the standard Module Wrapper that comes default with vBadvanced.

NOTE: Use the default wrapper if you choose not to create your own custom one.


Step 5. Create a new Template.
Use attached sample Custom Template Sample name: adv_portal_Tab_Block_Main

This template will be the one that you include with the module that you will create in Step 6. I've included the code for the sample template in the attached file, HOWEVER, there are some edits that you will need to make to the code based upon steps 1-3 above.

EDITS NEEDED TO THE ATTACHED SAMPLE TEMPLATE:

EDIT 1 - Path location of the ajaxtabs.css file created in step 2. Simply edit this line in the template to the correct path.

<link rel="stylesheet" type="text/css" href="/forums/ajaxtabs/ajaxtabs.css" />

EDIT 2 - Path location of the ajaxtabs.js file in step 1. Simply edit this line in the template to the correct path where you uploaded the ajaxtabs.js file.

<script type="text/javascript" src="/forums/ajaxtabs/ajaxtabs.js">

EDIT 3 - Path location of the "Content" file(s) created in step 3. Simply edit the line(s) in the template to the correct path where you uploaded the PHP file(s).

<li class="selected"><a href="http://www.domain.com/forums/tabexternal.php" rel="ajaxcontentarea">Tab 1</a></li>
<li><a href="http://www.domain.com/forums/tabexternal2.php" rel="ajaxcontentarea">Tab 2</a></li>
<li><a href="http://www.domain.com/forums/tabexternal3.php" rel="ajaxcontentarea">Tab 3</a></li>
<li><a href="http://www.domain.com/forums/tabexternal4.php" rel="ajaxcontentarea">Tab 4</a></li>

Step 6. Create a new CMPS TEMPLATE Module.
Name it what ever you like. Include the template that you created in Step 5 above. Make sure that you either use the Module Wrapper Template OR the Alternative Module Wrapper Template that you created in optional Step 4 above. Give permission(s) to the user groups that you want to be able to view this.


Step 7. Add the Module to a CMPS page.
Add the module created in Step 6 above to any CMPS page (make a test page if you want to)...


Step 8. Load the CMPS page that you added the module to.
If you performed the above steps correctly, the result will be a tabbed block module with 4 tabs named Tab 1, Tab 2, Tab 3, Tab 4. The content for Tab 1 will say "Congrats USERNAME! You have successfully added AJAX Tab Content to your Site."


CUSTOMIZATION

Style: Modify CSS File in Step 2 to match the Style of your site. The Sample CSS Files comes with 3 different styles of Tab Layouts. Choose the one that best suits your needs and further modify the CSS to match your sites Style(s)....

Tab Names: Modify Template created in Step 5 to change the NAME of the tabs themselves - ie.. from Tab 1 to Announcements (see below)

<li><a href="http://www.domain.com/forums/tabexternal.php" rel="ajaxcontentarea">Announcements</a></li>

Content: Modify "Content" File(s) created in Step 3 to generate content. You can add static content or Dynamic Content. Below is a very very basic sample of what can be done.

Sample mix of static and dynamic content

PHP Code:

<?php

echo '<table cellspacing="2" cellpadding="0" width=100%><tr> <td class="alt2"><span class="smallfont">Welcome Back To YOURSITENAMEHERE&nbsp;<b>' . $vbulletin->userinfo['username'] . '!</b><br><br>Hope you are enjoying the off season so far.<br><br> The Draft, Mini Camps & Hall of Fame Weekend Events are complete, Train Camps are in full swing and Preseason Games have started to kick off!<br><br>
Im sure these next few weeks will be fun to follow and make the upcoming season even more exciting. <br><br>Good luck with your team&nbsp;<b>' .  $vbulletin->userinfo['username'] . '.</b></span></td></tr>';

?>

NOTE: You can get as creative as you want to with content (Both static and Dynamic). For example, I took code from the recentthreads.php file, modified it and included that as tabbed content to display recent threads within a tab on my site (as seen in the screen shots attached in Post 1 of this thread). (I've included samples with instructions of this within the zip file. Side Note: use/modify these samples at your own risk)


Turning on "slideshow" mode

You can have the tabs within your Ajax Tabs Content automatically rotate every x seconds until a user explicitly clicks on a tab. To enable "slideshow" mode on your Tab Content, just pass in an integer when calling instance.init() to initialize your script: This is located at the bottom of the Template you created in step 5

<script type="text/javascript">
var mytabs=new ddajaxtabs("maintab", "ajaxcontentarea")
mytabs.setpersist(true)
mytabs.setselectedClassTarget("link") //"link" or "linkparent"
mytabs.init(15000)
</script>
</body>
</td></tr>

Notice the integer in red, which is in units of milliseconds. With one defined, the script will rotate through the tabs every x milliseconds (so 15000=15 seconds).


ADDING MORE TABS

To add more tabs, you will need to modify the template created in Step 5 and create a new "content" file for each new tab (as explained in Step 3).

Step 1. Add the following line of code to the Template that you created in Step 5 for each new Tab that you want to appear. Its a good idea when you add the lines that you keep them in order with the other lines currently in the file.

<li><a href="http://www.domain.com/forums/CONTENT FILE" rel="ajaxcontentarea">TAB NAME</a></li>

Example:

<li><a href="http://www.domain.com/forums/tabcontent5.php" rel="ajaxcontentarea">Sports News</a></li>

Step 2. Upload the newly created "Content" file (as explained in Step 3) to your FORUMS root.


Additional Enhancements

Please see post 2 of this thread for additional enhancements.

If you want to read up on AJAX Tabs, check out the Ajax Tabs Content script over at Dynamic Drive (http://www.dynamicdrive.com/dynamici...tent/index.htm)

....thats it in a nutshell.... I do hope that I explained things well enough to at least get a head start on AJAX Tabbed Content. Let me know if you have any problems or need further explanation on anything...

Thanks and enjoy Bobster

Screen Shots Explained:

The 1st is an example of "Slideshow" Mode
The 2nd is an example of some dynamic content based on the user.
The 3rd is an example of modified recentthreads.php used within a tab.
The 4th is an example of using modified vbarticles within a tab.
The 5th is an examples of custom dynamic content within a tab.

[bobster65]

Originally Posted by Merrillizer

Hi. I have this on my portal. But I am having a problem in higher resolution. As you can see in the screenshots below, 1024x768 is fine. But when I tested the block in higher resolutions (I use Firefox, but tested in both FF and IE7), like 1280x1024, the block shrinks and does not "adapt" to the higher res. like the rest of the blocks do. Can someone help me to get it to adapt/conform automatically to higher resolutions like the other blocks do? For instance the shoutbox stretches/lengthens automatically. Is there some code I need to add to the tabbed block to get it to work? Thanks! Screenshots....

I would change any of the static width values in both the template divs and CSS to 100% ..

[Merrillizer]

Originally Posted by bobster65

I would change any of the static width values in both the template divs and CSS to 100% ..

Awesome! Thank you! It worked. I changed the width in the block (template) file from 600px to 100%, and I left the height the same. Works great now! :up:

[bobster65]

Originally Posted by Merrillizer

Awesome! Thank you! It worked. I changed the width in the block (template) file from 600px to 100%, and I left the height the same. Works great now! :up:

Sweet

btw, if you like that CSS version but want the tabs on the top I have a solution for that as well which works better if you have height issues with content.

[Pistils]

Id like to start by saying , This is without a doubt one of the best mods i have ever seen for vb.. top job.. i just wish i knew more about coding so i could get it done without hassling you for help..

Im at teh need to edit tabexternal.php file and i cant for teh life of me find where i neeed to edit teh file.. could you please paste a snippet example of adding forum ids and where please bobster.. id very much appreciate the help..

regards

Wayne

[bobster65]

Originally Posted by Pistils

Id like to start by saying , This is without a doubt one of the best mods i have ever seen for vb.. top job.. i just wish i knew more about coding so i could get it done without hassling you for help..

Im at teh need to edit tabexternal.php file and i cant for teh life of me find where i neeed to edit teh file.. could you please paste a snippet example of adding forum ids and where please bobster.. id very much appreciate the help..

regards

Wayne

Hi Wayne,

tabexternal.php is not a recent threads sample, so it won't have anything to do with forumIDs, it is more for static content that you wish to add.. the other files in the zip (tabexternal2, tabexternal3, tabexternal4) are for recent threads examples and there is a text doc (Instructions for PHP Samples) in the zip that explains how to edit the php content files.

HOWEVER ....

I would highly suggest using the tabrecentthreadsexp2.php file for recent threads rather than the tabexternal files. You can grab this newest file on the 3rd post in this thread ( https://vborg.vbsupport.ru/showpost....44&postcount=3 ) To set the FormIDs in this version, go to line 68 (in this sample, I am pulling from Forum 15, 31, 32 and 33 ... )

AND thread.forumid=15 or thread.forumid=31 or thread.forumid=32 or thread.forumid=33

The tabrecentthreadsexp2.php is a much better file to use.

Bobster

[Pistils]

Thankyou bobster, i think soem people are coder orientated and soem just arent.. i fall into the latter cat..lol... i think my problem is reading teh whole thread before startin as all teh suggested edits to improve seo etc got me all confused..

i am a little lost as to setting up modules etc and wrappers in vbadvanced as i haev only had it installed a few weeks and havent really gotten to grips with it..

i am just working on pulling 4 seperate tabs displaying recent threads from 4 seperate areas of my board, id like 5 Tabs total with the first showing a flash welcome message/animation

I have a couple of questions for when i do get this working.. i have phpprobid auction and photopost pro, is it possible to pull latest listings from the auction and latest uploads from gallery into a tabs also? do you know any examples of anyone else doing this? 1 last question bobster...

have you included any suggested seo improvement edits suggested by themilkcarton? or will i need to go back through and follow these edits myself? i wish this was a plugin..lol

thankyou for an awesoem mod.. just wish i werent so thick..

regards

Pistils

[Pistils]

well, im doing somat wrong for sure.. !!>?? heres a screengrb of what i see after adding the module to vbadvanced.. i get the latest threads but only 1 window? no tabs.. i see the retreiving data image if i refresh...

any tips please.. for a sore headed code ellergic nood please?

any help much appreciated.. i know this is like water off a ducks back for some of u..

regards

Pistils

[bobster65]

Originally Posted by Pistils

well, im doing somat wrong for sure.. !!>?? heres a screengrb of what i see after adding the module to vbadvanced.. i get the latest threads but only 1 window? no tabs.. i see the retreiving data image if i refresh...

any tips please.. for a sore headed code ellergic nood please?

any help much appreciated.. i know this is like water off a ducks back for some of u..

regards

Pistils

We'll get ya through this.. just take a deep breath I sent you a PM ..

[Pistils]

Hey there bobster.. thankyou for replying..

im so please to have the man helping me.. ive seen soem proper smart adaptions of this code on some sites and im jealous..lol im going to get this working if it kills me..lol
( i have no private messages from you buddy.. did you press send? or isnt vb.org working for me too? lol just my luck )

where i am thus far...



edited css and uploaded with the js file... uploaded in forums/ajaxtabs/ajaxtabs.css and ajaxtabs.js

I have named 4 of your tabrecentthreadsexp1 through to 4.. they all display same forums at the minute but ill change that when i see it working... they reside in forums/tabrecent..... 1 2 3 & 4..

I have attempted to create the wrapper with alt_module_wrapper_template code

created template in vbstyles under same style im using

created a recent threads module and included teh previous 2 files.. < this is the part i think im not getting ritght.. im v v new to vbadvanced and cant find any walkthrough examples to show me what to select and what not to select.. php or template? ill keep trying till i get it..


If you could resend me that pm bobster.. its full of needed info..lol Thank You in advance..

regards

Pistils

ps.. has anyone got flash applets working in these? swf o swv movies? can i ask what kind of gallery was installed on the site ( s) you have done custom gallery work for bobster, pelase?

[bobster65]

Originally Posted by Pistils

Hey there bobster.. thankyou for replying..

im so please to have the man helping me.. ive seen soem proper smart adaptions of this code on some sites and im jealous..lol im going to get this working if it kills me..lol
( i have no private messages from you buddy.. did you press send? or isnt vb.org working for me too? lol just my luck )

where i am thus far...



edited css and uploaded with the js file... uploaded in forums/ajaxtabs/ajaxtabs.css and ajaxtabs.js

I have named 4 of your tabrecentthreadsexp1 through to 4.. they all display same forums at the minute but ill change that when i see it working... they reside in forums/tabrecent..... 1 2 3 & 4..

I have attempted to create the wrapper with alt_module_wrapper_template code

created template in vbstyles under same style im using

created a recent threads module and included teh previous 2 files.. < this is the part i think im not getting ritght.. im v v new to vbadvanced and cant find any walkthrough examples to show me what to select and what not to select.. php or template? ill keep trying till i get it..


If you could resend me that pm bobster.. its full of needed info..lol Thank You in advance..

regards

Pistils

ps.. has anyone got flash applets working in these? swf o swv movies? can i ask what kind of gallery was installed on the site ( s) you have done custom gallery work for bobster, pelase?

Hang on, I'll PM you again... its probably something simple and we'll get you up and running