The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
AJAX Tabs Content Script v2 Details »» | |||||||||||||||||||||||||
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:
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" /> Code:
<script type="text/javascript" src="/forums/ajaxtabs/ajaxtabs.js"> 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:
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> 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> Code:
<li><a href="http://www.domain.com/forums/tabcontent5.php" rel="ajaxcontentarea">Sports News</a></li> 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. Show Your Support
|
Comments |
#32
|
|||
|
|||
Also, I just disabled the archive links for vbSEO for now and that solved that problem.
|
#33
|
||||
|
||||
Quote:
as far as adding text, make sure you \ out and ' in your text.. |
#34
|
|||
|
|||
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>'; 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"> Views </td><td class="thead" width="20%" align="left">Forum</td></tr>'; Code:
// echo BR; echo '<tr> <td class="alt1" class="smallfont">» <a href="http://www.DOMAIN.COM/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a> <br><span class="smallfont"> ' . $thread[postdate] . ' ' . $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>"; Code:
// echo BR; echo '<tr>'; echo '<td class="alt1 smallfont">» <a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px"> ' . $thread[postusername] . '</div></td>'; echo '<td class="alt1 smallfont" align="right">' . $thread[lastpostdate] . ' <span class="time">' . $thread[lastposttime] . ' </span><div> <span style="font-size:10px">by ' . $thread[lastposter] . ' <a href="/forums/showthread.php?p=' . $thread[lastpostid] . '#post' . $thread[lastpostid] . '"></span><strong>»</strong></a> </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"> <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>"; 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 Code:
// ####################################################################### $portal_threads_maxchars = '33'; $portal_threads_maxwordchars = '15'; ?> <?php 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; } } } } 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; } } } } $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">» <a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px"> ' . $thread[postusername] . '</div></td>'; Code:
if ($show['gotonewpost']) { echo '<td class="alt1 smallfont"><a href="/forums/showthread.php?t=' . $thread[threadid] . '&goto=newpost">∇</a> <a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '"><strong>' . $thread[title] . '</strong></a><div style="font-size:10px"> ' . $thread[postusername] . '</div></td>'; } else { echo '<td class="alt1 smallfont">» <a href="/forums/showthread.php?t=' . $thread[threadid] . '"title="' . $thread[preview] . '">' . $thread[title] . '</a><div style="font-size:10px"> ' . $thread[postusername] . '</div></td>'; } |
#35
|
||||
|
||||
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 |
#36
|
||||
|
||||
Quote:
Please remember, if you are interested in enhancing or writing content addons, feel free to do so.. |
#37
|
|||
|
|||
For whoever want to see what Ken just provided above, in LIVE, please visit here http://www.vshares.net
|
#38
|
|||
|
|||
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. |
#39
|
|||
|
|||
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 |
#40
|
||||
|
||||
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 |
#41
|
|||
|
|||
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.. 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.. |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|