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

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

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

- - Add-On Releases - AJAX Tabs Content Script v2 (https://vborg.vbsupport.ru/showthread.php?t=161197)

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.

Code:

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

Code:

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

Code:

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

Code:

<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

Code:

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

Code:

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

Example:

Code:

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

Additional Enhancements

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

Different Tab Layout Styles

The attached CSS file contains CSS for 3 different layout styles. To change the inverted style that is preset with the sample, edit the adv_portal_TAB_BLOCK_MAIN template (or what ever you named it) to one of the below samples.. both samples below have the tabs on the top.

This layout is for the shadetabs CSS

Code:

<ul id="tabs" class="shadetabs">

<li><a href="tabexternal.php" rel="tabcontainer" class="selected">Tab 1</a></li>

<li><a href="tabexternal2.php" rel="tabcontainer">Tab 2</a></li>

<li><a href="tabexternal3.php" rel="tabcontainer">Tab 3</a></li>

<li><a href="tabexternal4.php" rel="tabcontainer">Tab 4</a></li>

</ul>



<div id="divcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

</div>



<script type="text/javascript">



var mytabs=new ddajaxtabs("tabs", "divcontainer")

mytabs.setpersist(true)

mytabs.setselectedClassTarget("link") //"link" or "linkparent"

mytabs.init()



</script>

This layout is for the indentmenu CSS

Code:

<div id="tabs" class="indentmenu">

<ul>

<li><a href="tabexternal.php" rel="tabcontainer" class="selected">Tab 1</a></li>

<li><a href="tabexternal2.php" rel="tabcontainer">Tab 2</a></li>

<li><a href="tabexternal3.php" rel="tabcontainer">Tab 3</a></li>

<li><a href="tabexternal4.php" rel="tabcontainer">Tab 4</a></li>

</ul>

<br style="clear: left" />

</div>



<div id="divcontainer" style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

</div>





<script type="text/javascript">



var mytabs=new ddajaxtabs("tabs", "divcontainer")

mytabs.setpersist(false)

mytabs.setselectedClassTarget("link")

mytabs.init()





</script>

Dynamically selecting a tab anywhere on your page

After your Ajax Tab script is initialized and displayed, you can dynamically select any of its tabs either based the tab's position relative to its peers, or its ID attribute (you have to assign it one first). The method to call is the following:

Code:

instance.expandit(tabid_or_position)

The parameter entered should either a string representing the tab link's ID attribute (you need to first assign one to that tab), or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab). For example:

Code:

<p><a href="javascript: countries.expandit(2)">Select 3rd Tab</a></p>

<p><a href="javascript: countries.expandit('favorite')">Select Tab with ID "favorite"</a></p>

Dynamically loading an external page using Ajax

You can dynamically load an external page into the Ajax Tabs content container via Ajax, such as by using a link on the page. It's done with the below method:

Code:

instance.loadajaxpage(pageurl)

"pageurl" should be the full URL or path to the external file on your server. You cannot use this method to load a page from an outside domain, due to Ajax domain restrictions:

Code:

<p><a href="javascript: countries.loadajaxpage('external5.htm')">Load "external5.htm" into content container via Ajax</a></p>

<p><a href="javascript: countries.loadajaxpage('http://www.mysite.com/content/external5.htm')">Load into "external5.htm" content container via Ajax</a></p>

The selected tab in this case doesn't change when you load a new page directly into the content container using this method.

Dynamically loading an external page using IFRAME

You can also load an external page into the Ajax Tabs content container via IFRAME. What this does is erase whatever previous content was inside the content container, add an IFRAME tag into it, and load the desired page into the IFRAME:

Code:

instance.loadiframepage(pageurl)

"pageurl" should be the full URL or path to the external file on your server or beyond. Since the external page is loaded via IFRAME, the page can be either from your domain or outside as well (ie: http://www.google.com):

Code:

<p><a href="javascript: countries.loadiframepage('external5.htm')">Load "external5.htm" into content container via IFRAME</a></p>

<p><a href="javascript: countries.loadiframepage('http://www.google.com')">Load Google Homepage into content container via IFRAME</a></p>

In case you're wondering, the IFRAME tag that's added to the content container always carries the CSS class name "tabcontentiframe" and a name attribute of "_ddajaxtabsiframe-contentdivid", where "contentdivid" is the ID of the content container (ie: "countrydivcontainer"). You can further use this information to either style the IFRAME using CSS, or manipulate it somehow by directly accessing it via its name attribute.

Nesting Tabs..

It's possible to have nested Ajax Tabs. That is to say, the external page fetched by one of the tabs can in itself contain a new Ajax Tabs Content instance that loads other content when clicked on. The key is to enlist the help of the custom event handler "instance.onajaxpageload" on your main page to initialize the tabs that are on the external page.

Main Tab Template:

Code:

<ul id="countrytabs" class="shadetabs">

<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>

<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>

<li><a href="externalnested.htm" rel="countrycontainer">Tab 3</a></li>

</ul>



<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

</div>



<script type="text/javascript">



var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")

countries.setpersist(true)

countries.setselectedClassTarget("link") //"link" or "linkparent"

countries.init()



countries.onajaxpageload=function(pageurl){

if (pageurl.indexOf("externalnested.htm")!=-1){

var provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")

provinces.setpersist(true)

provinces.setselectedClassTarget("link") //"link" or "linkparent"

provinces.init()

}



}



</script>

Nested Template:

Code:

<ul id="provincetabs" class="shadetabs">

<li><a href="external1.htm" rel="provincedivcontainer">Tab 1</a></li>

<li><a href="external2.htm" rel="provincedivcontainer">Tab 2</a></li>

<li><a href="external3.htm" rel="provincedivcontainer">Tab 3</a></li>

</ul>



<div id="provincedivcontainer" style="padding: 10px; border-top: 1px solid gray;">

</div>

Notice the code in red- this is code that originally should appear inside "nested template", but since the tabs in question are on an external page and being called dynamically via Ajax as nested tabs, the code to invoke it needs to be moved to the main page instead and called via the "onajaxpageload" event handler. This event handler basically fires whenever a tab fetching Ajax content has completed loading the external page in question:

Code:

instance.onajaxpageload=function(pageurl){

//if (pageurl=="href_attribute_value_of_tab"){

//run custom code

}

Use the parameter "pageurl" to determine which tab exactly is being clicked on based on its href attribute value, and only fire your custom code for the correct tab. In this case, since I only want to call my custom code to initialize the nested tabs when the 3rd tab is clicked on, I'm testing for:

Code:

if (pageurl.indexOf("externalnested.htm")!=-1){

"

"

}

here, or the "href" attribute of the 3rd tab.

Use the above technique to set up nested tabs whenever the nested tabs are contained in an external page and fetched via the Ajax option. If the external page is fetched via IFRAME, the above will not work and is unnecessary anyhow, as the nested tab's invocation code should simply appear within the external page itself.

Enhanced Recent Threads Layout

See this post - >> https://vborg.vbsupport.ru/showpost....5&postcount=29

** ADDITIONAL CONTENT FILES **

This Post will be used to identify member submitted content files and enhancements as well as additional content files that I release.

Attached to this Post:

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

NEW vB Blogs 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.

NEW vBa Links 02-08-2008 - tab_latestlinks.php & tab_latestlinksexp.php - These 2 files are for displaying data from vba links directory (you must have vba links installed for this to work)

Member Submitted Enhancements:

Date - Attachment name - Description - Member Name

NEW GARS 02-07-2008 - https://vborg.vbsupport.ru/showpost....&postcount=113 - GARS Content File - ZiG

What to make your own?
Here is an example of how I replicate the User CP CMPS Block in a Tab

PHP Code:


		
			
<?php



// ####################### SET PHP ENVIRONMENT ###########################

error_reporting(E_ALL & ~E_NOTICE);



// #################### DEFINE IMPORTANT CONSTANTS #######################

define('NO_REGISTER_GLOBALS', 1);

define('THIS_SCRIPT', 'tabwelcome'); // change this depending on your filename



// ################### PRE-CACHE TEMPLATES AND DATA ######################



// get special phrase groups

$phrasegroups = array();



// get special data templates from the datastore

$specialtemplates = array();



// pre-cache templates used by all actions

$globaltemplates = array('TEST');



// pre-cache templates used by specific actions

$actiontemplates = array();



// ######################### REQUIRE BACK-END ############################



require_once('./global.php');

//require_once('./includes/vba_cmps_include_template.php');

require_once('./includes/vba_cmps_global.php');

require_once('./includes/functions_user.php');

require_once('./includes/functions_reputation.php');



// #######################################################################

// ######################## START MAIN SCRIPT ############################

// #######################################################################



?>





<?php



//Get Avatar

    $avatarurl = fetch_avatar_url($vbulletin->userinfo['userid']);

        if ($avatarurl[0])

        {

            $avatarurl = $vbulletin->options['bburl'] . '/' . $avatarurl[0];

        }

        else 

        {

            $avatarurl = "/forums/images/misc/noavatar.gif"; // ADD PATH TO THE LOCATION OF YOUR NO AVATAR image

        }



//Get Rep Images

    fetch_reputation_image($vbulletin->userinfo, $permissions);



//Get Rep Power

    $reppower = vb_number_format(fetch_reppower($vbulletin->userinfo, $permissions));



//Get Rank Image

    $vbulletin->userinfo['rank'] = str_replace('src="', 'src="' . $vbulletin->options['bburl'] . '/', $vbulletin->userinfo['rank']);



// New posts

        if (strlen($vbulletin->session->vars['newposts']) > 0 AND !$vbulletin->options['threadmarking'])

        {

            $newposts = number_format($vbulletin->session->vars['newposts']);

        }

        else

        {

            $getnewposts = $db->query_first("

                SELECT COUNT(*) AS count

                FROM " . TABLE_PREFIX . "post AS post

                " . iif($vbulletin->options['threadmarking'],

                    'LEFT JOIN ' . TABLE_PREFIX . 'threadread AS threadread ON (threadread.threadid = post.threadid AND threadread.userid = ' . $vbulletin->userinfo['userid'] . ')') . "

                WHERE dateline >= " . $vbulletin->userinfo['lastvisit'] .

                    iif($vbulletin->options['threadmarking'],

                        ' AND dateline > IF(threadread.readtime IS NULL, ' . (TIMENOW - ($vbulletin->options['markinglimit'] * 86400)) . ', threadread.readtime)') . "

                    AND visible = 1

            ");



            if (!$vbulletin->options['threadmarking'])

            {

                $db->query_write("UPDATE " . TABLE_PREFIX . "session SET newposts = '$getnewposts[count]' WHERE userid = " . $vbulletin->userinfo['userid']);

            }



            $newposts = vb_number_format($getnewposts['count']);

        }



//Get PM Quota, PM Total and PM Unread

    $permissions['pmquota'] = vb_number_format($permissions['pmquota']);

    $vbulletin->userinfo['pmtotal'] = vb_number_format($vbulletin->userinfo['pmtotal']);

    $vbulletin->userinfo['pmunread'] = vb_number_format($vbulletin->userinfo['pmunread']);

    

//Echo Content into Tab Div    



echo '<table border="0" cellpadding="6" cellspacing="1" class="tborder" width=100%>';



echo '<tr> <td class="alt1"><a href="/forums/profile.php?do=editavatar"><img src="'. $avatarurl . '" border="0" alt="Edit Avatar" /></a> </td> <td class="alt2" valign="top" width="100%">    <div class="smallfont" style="float:'. $stylevar[right] . '">Rep Power: ' . $reppower . ' <div align="' . $stylevar[right] . '" style="padding-bottom:' . $stylevar[cellpadding] .'px">' . $vbulletin->userinfo['reputationdisplay'] . '</div> <div align="' . $stylevar[right] . '" style="padding-top:' . $stylevar[cellpadding] . 'px; padding-bottom:' . $stylevar[cellpadding] . 'px">' . $vbulletin->userinfo['rank'] . '</div>     </div> <span class="smallfont"> Welcome back &nbsp;<b>' . $vbulletin->userinfo['username'] . '</b><br /> You last visited: &nbsp;' . $vbulletin->userinfo['lastvisitdate'] . '<br /> <a href="/forums/search.php?do=getnew">New Posts</a>: ' . $newposts . '<br /> <a href="/forums/login.php?' . $session[sessionurl] . 'do=logout&amp;logouthash=' . $vbulletin->userinfo['logouthash'] . '">Log Out</a>    </span></td></tr>';



// Echo Private Message portion of the User CP Block



echo '<tr> <td class="thead" colspan="2"><a href="/forums/private.php">Private Messages</a></td></tr>';

echo '<tr> <td class="alt1" colspan="2"><span class="smallfont">' . $vbulletin->userinfo['pmunread'] . ' New PMs. You have ' . $vbulletin->userinfo['pmtotal'] . ' total out of ' . $permissions['pmquota'] . ' allowed.</span></td></tr>';



// End Private Message portion of the User CP Block



echo "</table>";



// The below can be removed if you don't want the Horizontal Rule and additional space for adding some custom text/sitemessage/other code.. 



echo "<hr>";



echo '<table cellspacing="2" cellpadding="0" width=100%>';



echo '<tr> <td class="smallfont">THIS IS WHERE YOU CAN ADD A SITE MESSEAGE OR WHAT EVER... YOU CAN ALSO JUST GET RID OF IT AS WELL.  SIMPLY COMMENT OUT OR REMOVE LINE 109 THRU 115... </td></tr>';



echo'</table>';



// End additional Comment area...



?>

...

OMG, this is totally RAD...***INSTALLED***

Nice job bobster! :up:

::walk awzy in amazement::

Just amazing.. I wanted to do something like this too. Glad someone else got it done :D

I vote MOTM!

Looks great, I am going to have to try this out one of these days.

Quote:

Originally Posted by Strike3ForumsMH (Post 1369339)

Looks great, I am going to have to try this out one of these days.

Hey Mission... I'll hook ya up Bro ;)

RZ

Wow, sweet. Definitely installed.

Very nice work, I will be keeping this in mind that is for sure.

I got this error

Code:

Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /includes/vba_cmps_include_template.php on line 47

Congrats  Admin!



You have successfully added AJAX Tab Content to your Site.

how to fix it, please!

I'm confused... I just downloaded a "non-enhanced" version a few days ago over at vBadvanced...

So what has changed since then? Everything denoted with "v2.0"? I was under the impression that Nested Tabs worked on the version I downloaded.

Quote:

Originally Posted by rapidphim (Post 1369545)

I got this error

Code:

Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /includes/vba_cmps_include_template.php on line 47

Congrats  Admin!



You have successfully added AJAX Tab Content to your Site.

how to fix it, please!

Just delete the references to that file in all the tabexternal*.PHP files.

This was talked about over at vBadvanced, I suggest anyone with problems go read the several pages about this mod over there. :)

[high]* projectego clicks install :D[/high]

Quote:

Originally Posted by TheMilkCarton (Post 1369567)

Yes, everything denoted with (v2.0) is new in this version. Nested tabs were possible, but there were some issues in order to get them to work. Nested tabs function a lot different (and better) with the newer version.

Added the steps to achieve different layout styles... they are located at the beginning of the 2nd post.

Wow lol, this looks like one amazing mod for any vBAdvanced using site! Well done creating this mate. It looks really hard to install unfortunately. I have no knowledge whatsoever about php or vBulletin but I managed to installed tons of other mod. Will this be harder than other mods to install?

Something else, I do like live demo's. The screenshots do say a lot but the real thing always gives a clearer picture. Do you have a site for me to check out which has this mod installed? Or perhaps someone else who reads this and has it installed can give me a quick peak hehe?

Thanks in advance. Like I say, awesome mod!

this hack looks complicate and confuse but once you install, it's freaking easy and turned out really nice and worth the hack.

Hi,

Looks great :D

How do you achieve screen shot 3 (The 3rd is an example of modified recentthreads.php used within a tab)?

Cheers,

Ross

very nice mod !!! installed ...

Quote:

Originally Posted by BozzaJos (Post 1369764)

No, this is easy to install and use. Custom Content for each tab is where things might get difficult for you tho. Hopefully, members will share custom content files with the community that you will be able to download and use in conjunction with this interface. I've attached a basic recent threads content which can be modified. I will be releasing some content addons soon... ie, recent threads with different layouts.. news with different layouts and functionality.

Quote:

Originally Posted by BBI-Ross (Post 1370426)

Hi,

Looks great :D

How do you achieve screen shot 3 (The 3rd is an example of modified recentthreads.php used within a tab)?

Cheers,

Ross

the 3rd screen shot uses the same content php files that I attached with some additional lines of code. I will be releasing a recent threads add on soon with multiple layout options to choose from. Same thing with news.

Really awesome mod :)
I am also really not familiar with php and have a question:
Is it possible to use the php files within the modules folder of vba cmps without modification?
Or does every cmps module need a customisation for using it?

Sorry for this beginner question.

Quote:

Originally Posted by D|ver (Post 1371783)

No, you can not simply point to one of the php files in the modules folder. You can copy those files and the modify them tho. If you are not familiar with php tho, it could be somewhat of a challenge. Hopefully, members of the community will share their Custom Content files with everyone :) I will have a few more custom content files for use soon.

This is the thread I've been looking for. Thanks for the mod and the help.

Dragon

Any news on when to expect the recent threads enhancement? Thanks for the most amazing mod!

Problem:

I have vbSEO installed and I'm getting the archive page numbers on the bottom of the tabs content module (along with at the normal bottom of page location).

Quote:

Originally Posted by cygy2k (Post 1372720)

Any news on when to expect the recent threads enhancement? Thanks for the most amazing mod!

Sometime today....

Quote:

Originally Posted by cygy2k (Post 1372789)

Problem:

I have vbSEO installed and I'm getting the archive page numbers on the bottom of the tabs content module (along with at the normal bottom of page location).

hmmmmm I don't have or use vbSEO, so I don't know why it would be doing that. I'll take a look and see if there is something in the content file that isn't needed and strip it out.

Thank you so much, this is such a fantastic mod!

Quote:

Originally Posted by cygy2k (Post 1372720)

Any news on when to expect the recent threads enhancement? Thanks for the most amazing mod!

Download the attachment within this post and see if its more along the lines of what you are looking for. You will need to make some simple edits to the file before you can use it tho...

Line 81. This is where you put the forumID's that you wish to pull recent threads from. In this example, I have it set to pull from 5 seperate forums. Just change the ID numbers to match the forums on your site that you wish to pull from. If you want less than 5, remove one of the or statements.. if you wish to pull from more, add another or statement.

Line 83. This is where you set the limit on the amount of threads to show. Its set at 15, change this to what ever you like.

Line 210. This is the visual output. Simply change all the paths in this block to match your site. The defaults in the example are all www.domain.com/forum

NOTE: This will produce an output similar to the 3rd screen shot.

That is great! Is there a way to have it still show bold for unread threads, a down arrow to go to most recent unread post, etc? Sorry for sounding like a pest:)

Also - when I try to just add text to your example tabexternal.php file where the echo part is at the bottom, I always get an error message saying that a ' or ; was expected on line 46. I must not be following some sort of coding pattern I guess.

Also, I just disabled the archive links for vbSEO for now and that solved that problem.

Quote:

Originally Posted by cygy2k (Post 1372911)

Ya, I'm working on the thread marking right now (That will include going to the most recent post)... and yer not a pest :eek: lol

as far as adding text, make sure you \ out and ' in your text..

couple of request for this - now its' here for those who need it, wish to use it .
these are just edits - thanks to the author of the mod ;)

edits for AJAX Tabs Content Script v2 - vBulletin.org Forum

i use this for admin only right now -- so no demo , just images of what i see .

i am NOT a coder by no means - just figured it out for myself and .. .
am certainly no writer either .. .

in the template(s) provided from this mod :

adding more information to the new posts:

this uses all of the information i needed -
to remove unneeded fields both the sections must be edited.

the first from <td to </td for the top section (lables) and the second section (what it displays for each one), the entire line : echo '<td to /td>';

find:

Code:

echo '<table cellspacing="2" cellpadding="0" width=100%><tr> <td class="thead">Title - Date</td></tr>';

replace with :

Code:

echo '<table class="tborder" cellspacing="1" cellpadding="1" width="100%"><tr align="center"><td class="thead" width="48%" align="left">Title / Started by</td><td class="thead" width="28%">LastPost</td><td class="thead" width="4%">Replies</td><td class="thead" width="4%" nowrap="nowrap">&nbsp;Views&nbsp;</td><td class="thead" width="20%" align="left">Forum</td></tr>';

find:

Code:

                        // echo BR;



                        echo '<tr> <td class="alt1" class="smallfont">&raquo;&nbsp;<a href="http://www.DOMAIN.COM/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a> <br><span class="smallfont">&nbsp;&nbsp;&nbsp;' . $thread[postdate] . '&nbsp;' . $thread[posttime] . '</span></td></tr>';







                 }

        }



$tabstring = $thread;





        $db->free_result($threads);

        unset($thread);



        $foruminfo['allowratings'] = $oldforumratings;



        if (!$mods['threadcount'] OR $mods['nodisplay'])

        {

                $show['tablerow'] = true;

                if ($mods['modcol'] == 1)

                {

                        $home["$mods[modid]"]['content'] = construct_phrase($vbphrase['no_x_to_display'], $vbphrase['threads']);

                }

                else

                {

                        $home["$mods[modid]"]['content'] = construct_phrase($vbphrase['no_x_to_display'], $vbphrase['threads']);

                }

        }



//}



echo "</table>";

replace with :

Code:

                        // echo BR;



                echo '<tr>';



                echo '<td class="alt1 smallfont">&raquo;&nbsp;<a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px">&nbsp; &nbsp;' . $thread[postusername] . '</div></td>';



                echo '<td class="alt1 smallfont" align="right">' . $thread[lastpostdate] . '&nbsp;<span class="time">' . $thread[lastposttime] . '&nbsp;</span><div> <span style="font-size:10px">by ' . $thread[lastposter] . ' <a href="/forums/showthread.php?p=' . $thread[lastpostid] . '#post' . $thread[lastpostid] . '"></span><strong>&raquo;</strong></a>&nbsp;</div></td>';



        echo '<td class="alt2 smallfont" align="center">' . $thread[replycount] . '</td>';



        echo '<td class="alt2 smallfont" align="center">' . $thread[views] . '</td>';



        echo '<td class="alt1 smallfont">&nbsp;<a href="/forums/forumdisplay.php?f=' . $thread[forumid] . '">' . $thread[forumtitle] . '</a></td>';

                 }

        }



$tabstring = $thread;





        $db->free_result($threads);

        unset($thread);



        $foruminfo['allowratings'] = $oldforumratings;



        if (!$mods['threadcount'] OR $mods['nodisplay'])

        {

                $show['tablerow'] = true;

                if ($mods['modcol'] == 1)

                {

                        $home["$mods[modid]"]['content'] = construct_phrase($vbphrase['no_x_to_display'], $vbphrase['threads']);

                }

                else

                {

                        $home["$mods[modid]"]['content'] = construct_phrase($vbphrase['no_x_to_display'], $vbphrase['threads']);

                }

        }



//}



echo "</tr></table>";

the arrow on the last post takes you to the last post.

dont' forget to change the path to your forum : is at /forums now.

to trim the thread titles to a desired length:

find : near the top :

Code:

// #######################################################################





?>



<?php

add the 2 varables or replace the section with :

Code:

// #######################################################################



$portal_threads_maxchars = '33';

$portal_threads_maxwordchars = '15';



?>



<?php

find :

Code:

                        // Trim title

                        if (strlen($thread['title']) > $mod_options['portal_threads_maxchars'] AND $mod_options['portal_threads_maxchars'])

                        {

                                $thread['title'] = fetch_trimmed_title($thread['title'], $mod_options['portal_threads_maxchars']);

                        }



                        // Check for long words that may stretch the page

                        if ($mod_options['portal_threads_maxwordchars'])

                        {

                                $thread['titlecheck'] = explode(' ', $thread['title']);



                                if (!empty($thread['titlecheck']))

                                {

                                        $thread['title'] = '';



                                        foreach ($thread['titlecheck'] AS $key => $word)

                                        {

                                                if (!$thread['titletrimmed'])

                                                {

                                                        if (strlen($word) > $mod_options['portal_threads_maxwordchars'])

                                                        {

                                                                $word = fetch_trimmed_title($word, $mod_options['portal_threads_maxwordchars']);

                                                                $thread['titletrimmed'] = true;

                                                        }



                                                        if ($thread['title'])

                                                        {

                                                                $thread['title'] .= ' ';

                                                        }



                                                        $thread['title'] .= $word;

                                                }

                                        }

                                }

                        }

replace with :

Code:

                        // Trim title

                        if (strlen($thread['title']) > $portal_threads_maxchars AND $portal_threads_maxchars)

                        {

                                $thread['title'] = fetch_trimmed_title($thread['title'], $portal_threads_maxchars);

                        }



                                                // Check for long words that may stretch the page

                        if ($portal_threads_maxwordchars)

                        {

                                $thread['titlecheck'] = explode(' ', $thread['title']);



                                if (!empty($thread['titlecheck']))

                                {

                                        $thread['title'] = '';



                                        foreach ($thread['titlecheck'] AS $key => $word)

                                        {

                                                if (!$thread['titletrimmed'])

                                                {

                                                        if (strlen($word) > $portal_threads_maxwordchars)

                                                        {

                                                                $word = fetch_trimmed_title($word, $portal_threads_maxwordchars);

                                                                $thread['titletrimmed'] = true;

                                                        }



                                                        if ($thread['title'])

                                                        {

                                                                $thread['title'] .= ' ';

                                                        }



                                                        $thread['title'] .= $word;

                                                }

                                        }

                                }

                        }

are the same 2 settings as in the vBa CP.
$portal_threads_maxchars is for how many charters are displayed.
$portal_threads_maxwordchars is for how long words are.
change the 33 and 15 to your needs.

an attempt
thread marking for new: this works DIFFERENTLY than expected - how it should!
if it was in templates it may work correctly - for me it works untill i learn how to change things.

posts will show new untill you mark the forums read manualy - there may be other conditions, its' a start.
NO i can NOT change how this is working now or how it functions!!!
am using what i thought may work and .. . it dont'.

find:

Code:

                echo '<td class="alt1 smallfont">&raquo;&nbsp;<a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px">&nbsp; &nbsp;' . $thread[postusername] . '</div></td>';

replace with:

Code:

                                 if ($show['gotonewpost'])

 

                                 {

                        echo '<td class="alt1 smallfont"><a href="/forums/showthread.php?t=' . $thread[threadid] . '&amp;goto=newpost">&nabla;</a>&nbsp;<a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '"><strong>' . $thread[title] . '</strong></a><div style="font-size:10px">&nbsp; &nbsp;' . $thread[postusername] . '</div></td>';

                    }

                   else

                    {

                     echo '<td class="alt1 smallfont">&raquo;&nbsp;<a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px">&nbsp; &nbsp;' . $thread[postusername] . '</div></td>';

                                        }

clicking the arrow will take you to the first new post.

OMG this is probabily the greates thing i've seen :O
I'll check it out propely when I have the time, but if it works as promised (and looks like it does) then it will be a great great GREAT improvement for my forums :)
so many options and possibilities to explore :O

Quote:

Originally Posted by kennethj (Post 1378301)

couple of request for this - now its' here for those who need it, wish to use it .
these are just edits - thanks to the author of the mod ;)

Outstanding Kenneth :up: Thank you for the enhancements. There are a few member enhancements over at vbadvanced as well (for those of you that are interested)..

Please remember, if you are interested in enhancing or writing content addons, feel free to do so..

For whoever want to see what Ken just provided above, in LIVE, please visit here http://www.vshares.net

Kenneth,

Go over to vBadvanced to check out how to REALLY integrate Thread Read Marking. :) I got it working fine for real, no having to mark forums read manually.

I also integrated forum permissions just fine, with the help of Brian over at vBadvanced. I just use the code built into vBa to apply perms.

i use a GARs vBA CMPS module to show the 5-10 latest stories from my GARs article forum on the front page. it would be great to use this script to have the different article categories tabbed for visitors to switch through. i dont know php well enough to put that together myself though

having the ability to directly link to the php module files would be great too, even though i realize that is probably much more difficult to code

i was hoping to just be able to put something like

include('/home/blah/whatever.php');

in the tab files would work, but unfortunately it doesn't seem like you can do that and you actually have to put together the code. im not that great at doing that, so i hope someone creates a GARs one.

very nice script anyway

Damn this thing is great :) been playing with it for he last day or so. It's so damn great in every aspect :)

I got one problem, I don't seem to be able to use $thread[preview] code :( I use it but returns and empty result where it should give a preview of the threads content :(
<a href=... title="' . $thread[preview] . '"

if anyone can help me wioth that it would be great ^^

Note: I'm using kenmeth's enhancement

First of all, Thank you bobster65 for this mod.. :)
My issue is kind a strange one..For that reason I want to give more detail about it..
1.I had downloaded your recentthread file and specify the forums where it will calls last threads from..
This file: https://vborg.vbsupport.ru/showpost....5&postcount=29
2.Setup templates for ajax..

At the end, It is working on firefox browser but not internet explorer..On IE, it just keeps saying "content is loading"..

Same ajax system that not calling those php files but html files working on IE (tabs with images on the top-right side)..These means ajax is working properly to my poor coding knowledge..:)
On other hand, when I type link URL of that php file to IE addres bar, it loads..Then I decide I know nothing about coding..:D

For those reasons, I am completely lost here..
Please help me out.. :)

http://www.turkforum.net/pasali.php?pageid=turkforum
+
I had mentioned same issue on previous version thread but I had no luck..

Phrase Groups Available:

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