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: 1019
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:	2982
Size:	32.9 KB
ID:	71573   Click image for larger version

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

Name:	tab2.jpg
Views:	3298
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:	2506
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 10:42
Forum Home Enhancements Flipped tabs = Swivel tabs = INVERTED TABS Deepdog009 vBulletin 3.7 Add-ons 29 20 Jan 2010 09:39

  #106  
Old 06 Feb 2008, 18:14
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
For those of you that have been wanting to display Post Icons and or limit the thread title character limit for the recent threads content file within a tab, check out the attached file.

PLEASE NOTE: all paths in this file are assumed that you have your forums installed in {forums} folder off the root ie /forums/showthread.php so if you have a different set up, just edit those lines to the correct path and everything will work as it should.

LINES OF CODE TO EDIT FOR YOUR PERSONAL NEEDS:

Line 46: Change 30 to the cut of length you wish.


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


Line 68: Change this to pull threads from which ever forums you desire.. you can edit/add/or delete ..


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


Line 72: Change the number to display the amount of threads you wish.


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


Lines 156-180: You MAY have to change the paths on all the href's .. Change to match your individual forums setup.
Attached Files
File Type: php tabrecentthreadsexp2.php (8.6 KB, 6 views)

Last edited by bobster65; 06 Feb 2008 at 18:23.
Reply With Quote
  #107  
Old 06 Feb 2008, 18:34
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by reddyink View Post
Bobster,
As you suggested, I looked at dynamicdrive code and using and I need your help for the error I am getting. When i call onclick event in echo statement in php page. I am getting follwing error

Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in C:\Program Files\EasyPHP 2.0b1\www\upload\tabexternal5.php on line 71

The line where I am getting error is
echo'<input type="button" onclick="javascript:return toggleMe('para1');" value="Toggle">';

echo '<div id="para1">
Decription here....
</div>';

When I change to double quotes like 'para1' to "para1" and also tried with '.para1.'
onclick="javascript:return toggleMe("para1");" value="Toggle">'; - no errors but nothing is happening when I click on toggle button.actually it should expand/collapse.
Javascript:
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

Please help me with this echo statement javascript onclick.

Thanks for your reply
Hey Ready, can you zip up the entire file and anything else that goes along with it so I can play with it on my dev server? those ' around para1 are causing that error by the way..

anyway, if you can do that.. just PM me and I will give you my email addy so that you can send the file.
Reply With Quote
  #108  
Old 07 Feb 2008, 17:49
petteyg359 petteyg359 is offline
 
Join Date: Dec 2007
Layout question. I've got tabs working, I've added my forum CSS to the top of ajaxtabs.css and my testtabs.php page has the same theme as my forum now. First, where would I change the CSS (I'm using "indentmenu") to move the tab menu to the top?

Then, I have another custom PHP file, with a custom template. The PHP file loads a bunch of nested tables, theads, tcats, collapsing trs and tds, into strings, and then the template displays certain strings depending on the usergroup of the person looking at the page. I would like to replace some of the nested collapsing stuff with tabs like these. Should I just move the ajaxtabs template into the custom PHP file where I need tab boxes? Can I place dynamic content (loaded from MySQL) into the tab boxes, rather than loading a file?
Reply With Quote
  #109  
Old 07 Feb 2008, 18:48
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by petteyg359 View Post
Layout question. I've got tabs working, I've added my forum CSS to the top of ajaxtabs.css and my testtabs.php page has the same theme as my forum now. First, where would I change the CSS (I'm using "indentmenu") to move the tab menu to the top?
The Tab menu for the Indentmenu CSS SHOULD be on the top (unless you didn't use the template formatting for the Indentmenu as shown in Post 2 of this thread). The template layout is different for each of the 3 provided CSS... Sounds like you just changed the name of the CSS in the DIV on the template that is arranged for the Modern Bricks CSS.. just take a quick look at post 2 and make sure that the template is formatted correctly for use with the Indentmenu CSS..

Originally Posted by petteyg359 View Post
Then, I have another custom PHP file, with a custom template. The PHP file loads a bunch of nested tables, theads, tcats, collapsing trs and tds, into strings, and then the template displays certain strings depending on the usergroup of the person looking at the page. I would like to replace some of the nested collapsing stuff with tabs like these. Should I just move the ajaxtabs template into the custom PHP file where I need tab boxes? Can I place dynamic content (loaded from MySQL) into the tab boxes, rather than loading a file?
Ya know.... what I think would work better for that would be the NON AJAX tabs. That is what I use for my Tabbed Forum Home .. the code is easy to imbed in php or via the vb template system.. You wouldn't need the AJAX version if you did it the way you are talking, because with the tabs imbeded into the php file itself, when you click on a tab, its going to execute the code within its area of the file (hope that made sense) lol if not, I will try and explain it better.
Reply With Quote
  #110  
Old 07 Feb 2008, 19:30
stonner stonner is offline
 
Join Date: Jun 2006
Hi

I tried to add a tab with the newest profile photos. But it shows this error:

Parse error: syntax error, unexpected '<' in /home/stonner/public_html/forums/tabexternal4.php on line 42

Could you please help me?

I attached my file tabexternal4.php.

Thank you very much
Attached Files
File Type: php tabexternal4.php (2.7 KB, 6 views)
Reply With Quote
  #111  
Old 07 Feb 2008, 19:56
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by stonner View Post
Hi

I tried to add a tab with the newest profile photos. But it shows this error:

Parse error: syntax error, unexpected '<' in /home/stonner/public_html/forums/tabexternal4.php on line 42

Could you please help me?

I attached my file tabexternal4.php.

Thank you very much
That error is because you need to echo out HTML in the file.. after looking at what you are trying to do, I think that the iframe option would be the best (since you are calling external javascript) .. I don't have any iframe stuff that you could look at that would help, so I would suggest going to dynamic drive and reading the section on iframes for AJAX Tabs 2 .. I'll do some digging when I have some spare time.. just have not played with that option yet (but know that its the best for what you are attempting)..
Reply With Quote
  #112  
Old 07 Feb 2008, 22:46
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
*Update* added two new sample content files for use with this addon as well as a sample make your own file (Replicate the vBa UserCP Block)

The FILES for these are located in Post 3 of this Thread.

NEW 02-07-2008 - tabrecentthreadsexp2.php - This file includes Post ICON Column and the ability to set a specific Thread Title Character cut off amount.

NEW 02-07-2008 - tab_blog.php - This content file is for use with vbulletins blog system. It is a BASIC recent blogs layout. The File contains 2 Layout Styles (Wide and Small). Wide is the default. To use small (for skinny Tab Layouts) remark out the 2 Wide Layout Areas and uncomment out the 2 ALT Layout Areas. Both display Title, Name, Data and Views.

What to make your own?
Check out Post 3 of this thread to see an example of replicating the USER CP BLOCK.
Reply With Quote
  #113  
Old 08 Feb 2008, 00:10
ZiG ZiG is offline
 
Join Date: Oct 2002
Real name: Zig
I apologize, I said I would post up the GARs tab that I completed and I completely forgot. For those of you using GARs for articles on your vBulletin forums, if you would like to display the latest recent GARs articles within an Ajax TAB you can do so with the following .php file:


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

Basically, I just took the GARs vB CMPS module file and merged it with the recent threads tab file that came with this Ajax TABS script (I think thats what I did? It's been a little while so I kind of forgot. )

I hope this helps anyone using GARs and the Ajax TABs script. You can see this running live at my website (www.ready-up.com). There is currently a small bug in firefox with my nested tabs, just hit the "Home" link on the top of the page if you are using firefox and you should be able to see the tabs working perfectly after that. PM me if you have any questions or problems setting that up.

Thanks again bob, wonderful script!
Reply With Quote
  #114  
Old 08 Feb 2008, 17:57
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by ttnb
Hello
Thanks for your help!
what I want is to put is based on this hack

http://www.vbadvanced.com/forum/showthread.php?t=18416

I want to dis play new or random links from links directory. The ways is like this
------------------------------------------
-Link name --Category name
-Link name2- category name 2
-link name 3- category name 3
------------------------------------------
And if the name of link is too long it is automatically cut of(for not break my page).

Sorry but I would like to post here instead of PM you because I want other members who are interested in share idea.
OK.. this was pretty simple actually and I made you two different styles (basic and expanded) .. The Basic one is just as you described above. The Expanded one includes the Link Name, Author, Date, Time, Category, # of Replies and # of Views.

Each file comes with various configuration settings to meet your needs/requirements.. ie

$linkurl Variable (The full URL Path to your vba links directory)

$order Variable can be set as follows (1 = newest, 2 = most viewed, 3 = most comments, 4 = highest rated, 5 = random) to give you 5 different ways of displaying your data for your members.

$limit Variable can be set to the number of links you would like to display

$maxnamechars Variable used to set the max characters of the links name before the rest will be replaced with '...' NOTE: Set this to 0 to disable it.

Both files contain the same basic code, just different echo output to control the Layout for the Data.

To further customize the layout, look for the echo statements and edit the HTML output.. simple as that
Attached Files
File Type: php tab_latestlinks.php (3.9 KB, 4 views)
File Type: php tab_latestlinksexp.php (4.2 KB, 4 views)
Reply With Quote
  #115  
Old 18 Feb 2008, 12:05
duncan99 duncan99 is offline
 
Join Date: Feb 2003


This is an mazing hack I have ever seen, thank you for your time to code.

I have a little request, I just want to make a simple tab category for different categories in a forum like the picture shown, say I click on announcement tab it only pulls out the threads about announcement, click on recent NFL news it shows only thoses threads of NFL news. Can somone show me how, the more I read on the post the more I confuse...

Thank you in advance...
Reply With Quote
  #116  
Old 18 Feb 2008, 13:34
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by duncan99 View Post


This is an mazing hack I have ever seen, thank you for your time to code.

I have a little request, I just want to make a simple tab category for different categories in a forum like the picture shown, say I click on announcement tab it only pulls out the threads about announcement, click on recent NFL news it shows only thoses threads of NFL news. Can somone show me how, the more I read on the post the more I confuse...

Thank you in advance...
Well, you will need to make 4 .php files (use the recentthreads example file and make 3 additional copies of it). Then, edit each file to contain only the forum ID you wish. Upload those new files, then edit the template, change the tab names to what ever you want and point each tab to the specific file.
Reply With Quote
  #117  
Old 18 Feb 2008, 17:26
ericgtr's Avatar
ericgtr ericgtr is offline
 
Join Date: Apr 2003
bobster, I just wanted to say thanks for all of your work on this. Your support is nothing less than superb and you deserve a lot of credit. I installed it on my site this morning and it's working great!
Reply With Quote
  #118  
Old 18 Feb 2008, 17:40
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by ericgtr View Post
bobster, I just wanted to say thanks for all of your work on this. Your support is nothing less than superb and you deserve a lot of credit. I installed it on my site this morning and it's working great!
You are more than welcome Eric. If you have any questions, feel free to PM me anytime.
Reply With Quote
  #119  
Old 22 Feb 2008, 14:53
barroca barroca is offline
 
Join Date: Feb 2008
Thumbs up new dynamic drive

hello bobster,

first: a hudge thank you for this work

I see in dynamic drive page a new js version. We can update in our installs?
The new version have a interesting feature [forward/reward] tabs

All the best
Joao Barroca
aka beduino
Reply With Quote
  #120  
Old 22 Feb 2008, 15:06
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by barroca View Post
hello bobster,

first: a hudge thank you for this work

I see in dynamic drive page a new js version. We can update in our installs?
The new version have a interesting feature [forward/reward] tabs

All the best
Joao Barroca
aka beduino
I was just there yesterday and didn't see it lol .. Im sure you can upgrade without any problems.. might have to change a few things in the template, but thats about it (besides uploading the new .js file) ..

I'll check things out

EDIT: OK, checked it out. Nothing major, just a .(dot) release. All you need to do is upload the new .js and you can use the forward/back feature. When I get time, I will update posts 1-3 with the new available info. Thanks for the heads up bud!
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 04:39.

Layout Options | Width: Wide Color: