Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Module CMPS: AJAX Tabbed Content Details »
Module CMPS: AJAX Tabbed Content
Mod Version: 1.5, 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: (8 votes - 5.00 average) Installs: 69
Released: 08 Aug 2007 Last Update: 17 Aug 2007 Downloads: 485
Not Supported Template Edits Additional Files Translations  

AJAX Tabs - Version 1.5

Note: Version 1.0 is still available as a secondary option and is located in post 2 of this thread.

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

Whats changed within this release?: This new version (based on the AJAX Tabs script written by Dynamic Drive - http://www.dynamicdrive.com/dynamici...tent/index.htm) utilizes Ajax to display a selection of external content on your page inside a DIV and via CSS tabs. Below lists the features of this script that together make it highly adaptable in the real world:
  • Fetch and display an external page (from the same domain) inside a container when a tab is clicked on.
  • 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 directly to your page and not fetched via Ajax, for sake of server efficiency.
  • For each tab, you can not only fetch an external page to be shown, but also load external .css and .js files associated with that page if desired.
  • 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.
  • Supports multiple Ajax Tabs Contents on the same page.
  • Fully unobtrusive, search engine friendly script. The tabs are simply list based links. For search engines or browsers with JavaScript disabled, the contents will just load as actual pages (instead of inline via Ajax).
As I mentioned in the previous release, I received many emails & PMs about how I implemented AJAX Tabbed Modules within vBadvance & vB, so instead of replying to each one seperately, I went ahead and wrote up this "how to". 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 module is, check out the attached screen shots for a visual.

This is what I've done so far to implement AJAX Tabs functionality within vBadvance for my websites and others....

CMPS Version Note: Coded for CMPS v3.0 RC1. 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, adv_portal_alt_module_wrapper (optional)
Files: ajaxtabs.js, ajaxtabs.css, Sample Content Files, images(3)

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

CSS file - Name: ajaxtabs.css

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


Step 3. Create, Name and Upload Multiple "Content" files.
I've included working samples in the attached Zip File.
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: Modifications to these files can be made once you get the initial system up and running.

Sample PHP "Content" file - Sample name: tabexternal.php

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

Sample HTM "Content" file - Sample name: tabexternal.htm

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



Step 4. (optional) Create an Alternative Module Wrapper Template.
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. I named mine - adv_portal_alt_module_wrapper

Alternative Module Wrapper Template - Sample name: adv_portal_alt_module_wrapper

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


Step 5. Create a new Template.
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 template below, HOWEVER, there are some edits that you will need to make to the code based upon steps 1-3 above.

Custom Template Sample name: adv_portal_Tab_Block_Main

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

EDITS NEEDED TO THE ABOVE 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 ahahLib.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 initially say "Congrats, AJAX Tabbed Content is working on your site!" as that will preload, Click on Tab 1 and it will retrieve via AJAX, the code created in the external file for tab 1. Click on the other tabs to retrieve the info created within those external files..


CUSTOMIZATION

Style: Modify CSS File in Step 2 to match the Style of your site.

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)


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.


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 Modules. 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 some dynamic content based on the user.
The 2nd is an example of modified recentthreads.php used within a tab.
The 3rd is an example of using modified vbarticles within a tab.
The 4th and 5th are 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:	tab1.jpg
Views:	1693
Size:	149.2 KB
ID:	68236   Click image for larger version

Name:	tab2.jpg
Views:	1556
Size:	196.5 KB
ID:	68237   Click image for larger version

Name:	tab3.jpg
Views:	1180
Size:	213.1 KB
ID:	68238   Click image for larger version

Name:	tab6.jpg
Views:	1315
Size:	144.1 KB
ID:	68239  

Click image for larger version

Name:	tab7.jpg
Views:	779
Size:	130.8 KB
ID:	68240  

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
Portal Software vBISpy module - live AJAX feed of new threads - for vBAdvanced CMPS MPDev vBulletin 3.6 Add-ons 240 30 Nov 2011 23:49

Comments
  #2  
Old 08 Aug 2007, 16:31
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Version 1.0 ahahLib.js AJAX Tabs

This is what I've done so far to implement AJAX Tabs functionality within vBadvance for my websites and others using the ahahLib.js version of AJAX Tabs...

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

CMPS Module Type: TEMPLATE w/Alternative Module Wrapper Template
Templates: adv_portal_Tab_Block, adv_portal_alt_module_wrapper (optional)
Files: ahahLib.js, TabAJAX.css, tabcontent.php

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

Download the latest ahahLib.js file from crackajax.net (http://www.crackajax.net/ahahLib.js) (now included in the zip file)

Step 1. Upload the ahahLib.js file.
No modifications to this file are needed. The location I chose was the clientscript folder that comes default with your vBulletin installation.
path example: /www/forums/clientscript
It doesn't HAVE to go there, I just chose to put it there since its a common place for js files.

Step 2. Create, Name and Upload CSS file.
The location I chose was the vbulletin_css folder that comes default with your vBulletin installation.
path example: /www/forums/clientscript/vbulletin_css
Again, it doesn't HAVE to go there, I just chose to put it there since its a common place for css files. You can name the css file anything you like.. I named mine TabAJAX.css .

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

CSS file - Sample Name: TabAJAX.css

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


Step 3. Create, Name and Upload PHP file.
The location I chose was the FORUMS root.
path example: /www/forums
You can name this file anything you want. I named mine tabcontent.php

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

PHP file - Sample name: tabcontent.php

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


Step 4. (optional) Create an Alternative Module Wrapper Template.
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. I named mine - adv_portal_alt_module_wrapper

Alternative Module Wrapper Template - Sample name: adv_portal_alt_module_wrapper

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


Step 5. Create a new Template.
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 template below, HOWEVER, there are some edits that you will need to make to the code based upon steps 1-3 above.

Custom Template Sample name: adv_portal_Tab_Block

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

EDITS NEEDED TO THE ABOVE TEMPLATE:

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

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

EDIT 2 - Path location of the ahahLib.js file in step 1. Simply edit this line in the template to the correct path where you uploaded the ahahLib.js file.
<script language="JavaScript" type="text/javascript" src="http://www.domain.com/forums/clientscript/ahahLib.js"></script>
EDIT 3 - Path location of the PHP file created in step 3. Simply edit this line in the template to the correct path where you uploaded the PHP file.

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


NOTE: the body onload function is to force a tab active when the page is first loaded... I added this to the template so that you could designate a tab other than the first tab to be opened in case of an important issue that you may want people to see in (for example) tab 3. Its set at 1 default. To force the opening of another tab, change the # to the tab you wish to be open... the below will open Tab 3 when ever the page is first accessed or refreshed.


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 3 tabs named Tab 1, Tab 2, Tab 3. The content for Tab 1 will say "Congrats, Insert Dynamic or Static Code here for Tab 1"


CUSTOMIZATION

Style: Modify CSS File created in Step 2 to match the Style of your site.

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 PHP File 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. For example, I took code from the recentthreads.php file, modified it and included that as tab content to display recent threads within a tab on my site (as seen in the screen shots attached in Post 1 of this thread).


ADDING MORE TABS

To add more tabs, you will need to modify the template created in Step 5 and the PHP file created in Step 3.

Step 1. Add the following 2 lines of code to the Template that you created in Step 5 for each new Tab that you want to appear. Make sure that 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.


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

Step 2. Add the following block of code to the PHP file created in Step 3. Make sure that you keep it in order with the other blocks of code currently in the file.


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

If you want to read up on AJAX Tabs, check out the Ajax Project - Tabbed Page Interface over at crackajax (http://www.crackajax.net/tabs.php)

Well....thats it in a nutshell....Sorry for such a long post. I do hope that I explained things well enough to at least get a head start on AJAX Tabbed Modules using the ahahLib.js script. Let me know if you have any problems or need further explanation on anything...

Thanks and enjoy Bobster
Attached Files
File Type: zip Tab AJAX.zip (2.8 KB, 52 views)

Last edited by bobster65; 15 Aug 2007 at 16:05. Reason: ahahLib.js version
Reply With Quote
  #3  
Old 08 Aug 2007, 16:32
blogtorank's Avatar
blogtorank blogtorank is offline
 
Join Date: Jan 2006
Real name: Demetrius
Wow nice, will be installing later here, happen to post in another thread and read the overall and seen AJAX, GOTTA love it!

Will put this to use later for sure.
Reply With Quote
  #4  
Old 08 Aug 2007, 17:36
sensimilla sensimilla is offline
 
Join Date: Dec 2004
Real name: Eric Estrada
Outstanding work, thanks alot for this one.
Reply With Quote
  #5  
Old 08 Aug 2007, 19:47
radarhunter radarhunter is offline
 
Join Date: Jul 2006
i also have sumthin` like this on my site and so does Brandon but u`ve for the perfect thing what we needed to make out of our Tab codes.........

Seriously i`m not jokin` the whole work has been discussed here [Please Click Here]

Thanks man u`ve helped us a lot.....
Reply With Quote
  #6  
Old 08 Aug 2007, 20:18
radarhunter radarhunter is offline
 
Join Date: Jul 2006
jus` out of curiosity i wanted to ask u that where is the code for the one in the second picture.......


how do we integrate the latest posts in the tab contents.... And can we integrate the latests posts from different sections....

I mean under the Entertainment tab there are only latest posts of entertainment section under music latest news in music section like this ........

Can this happen or if has what are the exact codes of this please ?????
Reply With Quote
  #7  
Old 08 Aug 2007, 20:24
Deepdog009's Avatar
Deepdog009 Deepdog009 is offline
 
Join Date: Dec 2004
Beauts

Great work Bobster65,

CSS & Ajax are taking over...

Keep the ball rolling...
__________________
Long vacation folks, back 2 dabble and doodle... *** Enjoy the Forums
Reply With Quote
  #8  
Old 08 Aug 2007, 20:27
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by radarhunter View Post
jus` out of curiosity i wanted to ask u that where is the code for the one in the second picture.......

how do we integrate the latest posts in the tab contents.... And can we integrate the latests posts from different sections....

I mean under the Entertainment tab there are only latest posts of entertainment section under music latest news in music section like this ........

Can this happen or if has what are the exact codes of this please ?????
Im going to be writing a "how to" on how to mimic the recent threads module within this Module. Its not ready for public release yet. The one you see in the 2nd image is code that I modified from vBadvanced recentthreads.php module.

You can easily do what you want to do. I've helped a few members out over at vBadvance do just what you are asking. I won't release code to the public tho until I am comfortable knowing there are no security holes and or bugs.
Reply With Quote
  #9  
Old 08 Aug 2007, 20:30
radarhunter radarhunter is offline
 
Join Date: Jul 2006
k did u see my site ? .... I hope i have the same outcome of what u`re showing here.........

And if possible please take out the second pic off ur thread as then till the time the codes for which are not included the same should not be shown as pics to the public *just a suggestion*
Reply With Quote
  #10  
Old 08 Aug 2007, 21:23
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by radarhunter View Post
k did u see my site ? .... I hope i have the same outcome of what u`re showing here.........

And if possible please take out the second pic off ur thread as then till the time the codes for which are not included the same should not be shown as pics to the public *just a suggestion*
I just checked it out. Looks like you are using the tab script from dynamic drive. I use that one as well from time to time for various web applications (I also use codethattab for various web apps).

If you are interested, I'll hook you up with some beta code that you can modify & test with the understanding that it won't be released publicly until its stable.. .. just PM me when you have time.

As for the screen shots, they are two fold. Number one is to give members an idea of what Tabbed Modules are/look like. Number two is to give members/designers/coders an idea of what can be done content wise. This initial how to is about the Tabbed Module itself tho, not the content within the module. Coders are more than welcome to write/share Dynamic Content Blocks of code for this module as I plan to as well. Im also more than willing to help people out with both custom static and dynamic content (as time permits)..
Reply With Quote
  #11  
Old 08 Aug 2007, 21:28
radarhunter radarhunter is offline
 
Join Date: Jul 2006
Originally Posted by bobster65 View Post
If you are interested, I'll hook you up with some beta code that you can modify & test with the understanding that it won't be released publicly until its stable.. .. just PM me when you have time.
okay count me in
Reply With Quote
  #12  
Old 08 Aug 2007, 22:35
concepts's Avatar
concepts concepts is offline
 
Join Date: May 2005
Real name: Jamale
Originally Posted by radarhunter View Post
And if possible please take out the second pic off ur thread as then till the time the codes for which are not included the same should not be shown as pics to the public *just a suggestion*
are you serious? hahaha... this is simply a modification to allow members to have "tabbed" modules... the photos show the functionality in which the "tabbed modules" can be used for.. leave your personal thoughts to yourself.
__________________

Achieving Superior Aesthetic Conditioning
Reply With Quote
  #13  
Old 08 Aug 2007, 23:11
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Real name: Brandon
I just added the tab featured from DD on vBulletin Setup

I may have to remove it and try this one out
__________________

Email me for website help: brandon[at]sheley[dot]org
Reply With Quote
  #14  
Old 09 Aug 2007, 02:55
Dr. Bantham's Avatar
Dr. Bantham Dr. Bantham is offline
 
Join Date: Feb 2007
Nice one! I have this working in the test mode. I hope to be able to utilize many of my VBA modules in this format. I do have a question regarding styles. It seems that the CSS file approach is not conducive to accommodating sites with multiple styles. How can we work around this? Ideally, these settings would adhere to the current style.
__________________
THOMAS LIGOTTI ONLINE
A Shining Brainless Beacon Of Elegant Mutations And Cunning Annihilations
Reply With Quote
  #15  
Old 09 Aug 2007, 04:26
beduino's Avatar
beduino beduino is offline
 
Join Date: Dec 2005
Real name: Joao
It is a big mod!
But.. if it is possible you can tell how insert last threads and last news [vba] in dynamic content?
Tks in advance
Beduino
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 10:31.

Layout Options | Width: Wide Color: