Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
AJAX Tabs Content Script v2 Details »
AJAX Tabs Content Script v2
Mod Version: 2.0, by bobster65 (Member) bobster65 is offline
Developer Last Online: Nov 2013 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.6.x Rating: (16 votes - 4.94 average) Installs: 108
Released: 26 Oct 2007 Last Update: Never Downloads: 1018
Not Supported Additional Files Translations  

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.

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

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.

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

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

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


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)


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


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

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

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


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

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.


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

Example:

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

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.

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	tab-slide.gif
Views:	2980
Size:	32.9 KB
ID:	71573   Click image for larger version

Name:	tab1.jpg
Views:	3371
Size:	149.2 KB
ID:	71574   Click image for larger version

Name:	tab2.jpg
Views:	3297
Size:	196.5 KB
ID:	71575   Click image for larger version

Name:	tab3.jpg
Views:	2474
Size:	213.1 KB
ID:	71576  

Click image for larger version

Name:	tab6.jpg
Views:	2505
Size:	144.1 KB
ID:	71577  

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
Add-On Releases AJAX Tabs Content Script - Version 3.0 (YUI) bobster65 vBulletin 3.8 Add-ons 252 21 Aug 2012 11:42
Forum Home Enhancements Flipped tabs = Swivel tabs = INVERTED TABS Deepdog009 vBulletin 3.7 Add-ons 29 20 Jan 2010 10:39

  #151  
Old 23 May 2008, 16:46
Nikoo Nikoo is offline
 
Join Date: Apr 2007
Thanks again Bob, i will try this later. ( :
Reply With Quote
  #152  
Old 26 May 2008, 07:57
Chief Corn Chief Corn is offline
 
Join Date: Nov 2002
this is exactly what i was looking for except i don't know how to do it. what i want to do in showthread.php is have the chief post in the first tab separated from the replies in a second tab. any help here?
Reply With Quote
  #153  
Old 01 Jun 2008, 11:24
CFodder CFodder is offline
 
Join Date: Mar 2008
Thanks for a fantastic mod Bobster, just wish I could get it to work, but being the prized nub I am I can't figure it out.

The tabs are setup and appear on my forum hompage and as far as I can see have followed your instructions correctly as far as I know (but hey, who the hell knows it's me after all!!). When the page first loads the button text flashes up but after that they are all blank (have the std 4), when I click on any of the buttons get an error as follows:


"Warning: require_once(./includes/vba_cmps_include_template.php) [function.require-once]: failed to open stream: No such file or directory in /home/oldrdev/public_html/dev/ajaxtabs/tabexternal2.php on line 33

Fatal error: require_once() [function.require]: Failed opening required './includes/vba_cmps_include_template.php' (include_path='.:/usr/local/php52/pear') in /home/oldrdev/public_html/dev/ajaxtabs/tabexternal2.php on line 33"

Any help would be greatly appreciated, I've pm'd you my template module contents and a link for the site.
Reply With Quote
  #154  
Old 01 Jun 2008, 15:24
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by CFodder View Post
Thanks for a fantastic mod Bobster, just wish I could get it to work, but being the prized nub I am I can't figure it out.

The tabs are setup and appear on my forum hompage and as far as I can see have followed your instructions correctly as far as I know (but hey, who the hell knows it's me after all!!). When the page first loads the button text flashes up but after that they are all blank (have the std 4), when I click on any of the buttons get an error as follows:


"Warning: require_once(./includes/vba_cmps_include_template.php) [function.require-once]: failed to open stream: No such file or directory in /home/oldrdev/public_html/dev/ajaxtabs/tabexternal2.php on line 33

Fatal error: require_once() [function.require]: Failed opening required './includes/vba_cmps_include_template.php' (include_path='.:/usr/local/php52/pear') in /home/oldrdev/public_html/dev/ajaxtabs/tabexternal2.php on line 33"

Any help would be greatly appreciated, I've pm'd you my template module contents and a link for the site.
just comment out (or remove) these lines in the content files..


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
  #155  
Old 03 Jun 2008, 13:03
CFodder CFodder is offline
 
Join Date: Mar 2008
Didn't work sorry, still got error but this time for vba_cmps_global.php.

Doesn't matter anyway as I tried your tabbed forumhome page and that seems to be working ok, although I will have a coupla questions for ya .
Reply With Quote
  #156  
Old 03 Jun 2008, 16:05
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by CFodder View Post
Didn't work sorry, still got error but this time for vba_cmps_global.php.

Doesn't matter anyway as I tried your tabbed forumhome page and that seems to be working ok, although I will have a coupla questions for ya .
This may sound dumb, but what version of vbadvanced do you have installed?
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #157  
Old 03 Jun 2008, 23:06
CFodder CFodder is offline
 
Join Date: Mar 2008
VBulletin 3.7.1, VBAdvanced Dynamics 1.0.1 and VBAdvanced CMPS 3.0.0.

And nah, it's not a dumb question .
Reply With Quote
  #158  
Old 03 Jun 2008, 23:16
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by CFodder View Post
VBulletin 3.7.1, VBAdvanced Dynamics 1.0.1 and VBAdvanced CMPS 3.0.0.

And nah, it's not a dumb question .
remark out the require vba_cmps_global.php line as well .. if I remember correctly, I stripped the stuff out that was needed and those are no longer required.. once I am done with version 2 of Tabbed Forum Home, I am going to release a newer version of this one as well.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #159  
Old 08 Jun 2008, 22:11
Defkalion Defkalion is offline
 
Join Date: Jan 2007
Hey Bob, congratulations once again for another fantastic mod, I have it working great.

I need help on one thing though: is there a way to load only in the initial page load the tabs and not everytime you click on a tab? I tried setting the

ddajaxtabssettings.bustcachevar=0

to the 0 value, but it only seems to work in IE. In my Firefox, tabs try to load content every time you click on them.
Reply With Quote
  #160  
Old 01 Sep 2008, 23:16
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
** CONTENT FILE UPDATES **

For those of you that have this installed and don't get over to vBa ... I've updated a couple of the content files. The updates are located in the 3rd post of this thread and of course also over at vBa....
(http://www.vbulletin.org/forum/showp...44&postcount=3)

The main reason for the Update was to ADD in Thread Marking to the recent threads content file as well as the Thumbnail Threads content file.. there are however a few enhancements made to the top of both files for ease of setup and administration. Look for more updates soon.

**UPDATED** RECENT THREADS 09-01-2008 - tabrecentthreadsexp2.php - This file includes Post ICON Column and the ability to set a specific Thread Title Character cut off amount. The UPDATE includes both database thread marking and cookie based thread marking. Various settings at the top of the file make install/Setup a breeze.

**UPDATED** RECENT THREADs with THUMBNAIL 09-01-2008 - tabthumbs.php - This file is the same as tabrecentthreadsexp2.php with the addition of displaying a thumbnail in place of the post ICON if there is a image attached to the first post. You can see an example of this @ www.veggieblogs.com specifically the RECIPES or Cookbooks Tabs. The UPDATE includes both database thread marking and cookie based thread marking. Various settings at the top of the file make install/Setup a breeze.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #161  
Old 01 Sep 2008, 23:19
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Defkalion View Post
Hey Bob, congratulations once again for another fantastic mod, I have it working great.

I need help on one thing though: is there a way to load only in the initial page load the tabs and not everytime you click on a tab? I tried setting the

ddajaxtabssettings.bustcachevar=0

to the 0 value, but it only seems to work in IE. In my Firefox, tabs try to load content every time you click on them.
Lucky for you, I am going to release version 3.0 sometime this week. It uses YUI Tab View which takes care of that problem for you PLUS, all the content files from the previous versions work flawlessly with it.. I'll be releasing it at vBa first, then here.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #162  
Old 10 Sep 2008, 20:29
Masiello's Avatar
Masiello Masiello is offline
 
Join Date: Jul 2005
Real name: Antonio
I need this one Just for vBa 3.0.1 and not the board, like vbseo home layout, can this work? (vb 3.7.3 pl1)
Reply With Quote
  #163  
Old 11 Sep 2008, 00:01
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Masiello View Post
I need this one Just for vBa 3.0.1 and not the board, like vbseo home layout, can this work? (vb 3.7.3 pl1)
Yes, This IS for vBa (I also have it released at vBa)..
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #164  
Old 11 Sep 2008, 07:04
Masiello's Avatar
Masiello Masiello is offline
 
Join Date: Jul 2005
Real name: Antonio
Originally Posted by bobster65 View Post
Yes, This IS for vBa (I also have it released at vBa)..
Thanks a lot
Reply With Quote
  #165  
Old 12 Sep 2008, 20:55
karlm's Avatar
karlm karlm is offline
 
Join Date: Jul 2006
Real name: Karl
Is this the same one available at vbadvanced.com?
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 18:54.

Layout Options | Width: Wide Color: