Forum Display Enhancements - Collapsable First Post using AJAX (or Last Post!)

[hr]-[/hr]

NOTICE: This is for vBulletin v3.6 ONLY. You can find a v3.5 compatible version here.

[hr]-[/hr]

*** Confirmed working on ALL vBulletin 3.6.x versions! ***

[hr]-[/hr]
Keywords: FORUMDISPLAY, search, results, collapse, AJAX, collapsable, first, last, unread, post

Description:
Allows you to expand/collapse the first, last or first unread post of a thread from FORUMDISPLAY and search results without the need to load the entire thread.

Details:
Upon perusing the wonderful deals over at slickdeals.net, I noticed this nifty feature which caught my eye. I found it quite useful as most people have a bad habit of not being very descriptive with their thread titles. This little trick made my browsing experience much more enjoyable, so naturally I had to borrow [read: shamelessly rip] the idea.

Please note that no additional queries are added, unless using the 'First Unread Post' option. Otherwise, the only queries performed are the same as those when a thread is normally viewed.

The magic behind this modification is performed by jQuery: The Write Less, Do More, JavaScript Library.

[hr]-[/hr]
Usage:
Simply click the expand icon [+] in front of the thread title to expand, and the collapse icon [-] to collapse. Rocket science, eh?

[hr]-[/hr]
Installation:

1. Download and unzip the ajax_first_post.zip archive.
2. Upload necessary files to their respective locations. (Attention custom style users! Be sure to upload the images to your custom image directory.)
3. Import the product-ajax_first_post.xml via the Product Manager.
4. Make any desired configuration changes via AdminCP > vBulletin Options > Collapsable First Post using AJAX
5. ???
6. Profit!

Notes:
All template modifications are made automatically. They attach to pretty common text locations, so modified styles shouldn't* be a problem.

However, for those who wish (or need) to perform the edits manually, you can find that information here.

[hr]-[/hr]
Comments:
As with all my hacks, this modification is provided free of charge. However, if you find this product useful and have money burning a hole in your pocket, feel free to make a small donation, I won't mind.. really.

Version History:

• 1.0.0 - Initial release, here's to hoping...
• 1.1.0
  • Fixed JavaScript errors when using search.
  • Resolved (known) cross browser compatibility issues.
• 1.2.0
  • New AdminCP configuration options:
    • Ability to select first or last post to be displayed.
    • Ability to disable on a per forum basis.
    • Option to update thread views when expanded.
    • Option to disable automatic template editing with a single click.
  • Tweaked a couple plugins to prevent unnecessary checking.
  • Properly registers in Who's Online
• 1.2.1
  • Will no longer show expand icon next to thread redirects.
  • Added ability to display first unread post.
  • Completely revamped the automatic template editing system. Should now be able to make template edits to even the most modified templates as well.
  • Fixed a couple non-breaking typos.
  • Included JavaScript in USERCP_SHELL to allow expand/collapse of subscribed threads.
  • Added a hover title to the expand icon to inform the user what they can expect when clicking it.

[hr]-[/hr]
Tips, Tricks and Modifications:

• Fix for users of passiveVid receiving Warning: Invalid argument supplied for foreach() in /includes/class_postbit.php(296) : eval()'d code on line [#]

Currently Known Bugs:

• None

* Please note that this modification was developed on a forum with a userbase of 1 (myself). I've tested it for basic functionality but I cannot guarantee functionality or behavior on your forum. So, please -- make backups before installing this product!

[raiderlax]

Wow, man thanks alot it works awesome now

[Coldhands]

Is it possible to condense the clientscript/jquery.js file? Is every function in that library being used for this hack or is there a lot of fat in this code?

What functions in clientscript/jquery.js can we do without?????? I'm just sayin, 61k of js is a lot just to show the first post.

[magnus]

Feel free to edit whatever you like from the jquery.js file. I can't distribute it if I modify it.

[Coldhands]

I've deleted my post, in hopes of eliminating all evidence that I am in fact retarded. :tin-foil-hat:

[Coldhands]

Originally Posted by magnus

Feel free to edit whatever you like from the jquery.js file. I can't distribute it if I modify it.

I think you may be misinterpreting the license, not that the jquery police would be knocking on your door anytime soon.

JQuery offers a compressed version that you can download from the Google Gods here >> http://code.google.com/p/jqueryjs/do....1.3.1.pack.js

jquery-1.1.3.1.pack.js works the same as the clientscript/jquery.js in the download for this hack, but it's only 1/3 the size. Just rename jquery-1.1.3.1.pack.js to jquery.js and overwrite the clientscript/jquery.js that came with this hack.

The js file in the download is made for humans to read, develop and debug; the code I linked to is for production. If you're feeling saucy, you could even trim that one down a bit. When you go through 300 gigs a month, every little bit counts.

P.S. Thanks for the great hack and quick response Magnus. :up:

[mtlcore]

Nice hack dude.

One thing though, I install it, works fine on Default template. Doesn't show up on my custom template. Even did the template edits (turned off auto edits too). Still nothing.

[magnus]

Originally Posted by mtlcore

Nice hack dude.

One thing though, I install it, works fine on Default template. Doesn't show up on my custom template. Even did the template edits (turned off auto edits too). Still nothing.

You're probably using a custom image directory. You'll need to copy the images to that dir as well.

[magnus]

Originally Posted by Coldhands

I think you may be misinterpreting the license, not that the jquery police would be knocking on your door anytime soon.

JQuery offers a compressed version that you can download from the Google Gods here >> http://code.google.com/p/jqueryjs/do....1.3.1.pack.js

jquery-1.1.3.1.pack.js works the same as the clientscript/jquery.js in the download for this hack, but it's only 1/3 the size. Just rename jquery-1.1.3.1.pack.js to jquery.js and overwrite the clientscript/jquery.js that came with this hack.

The js file in the download is made for humans to read, develop and debug; the code I linked to is for production. If you're feeling saucy, you could even trim that one down a bit. When you go through 300 gigs a month, every little bit counts.

P.S. Thanks for the great hack and quick response Magnus. :up:

I'll look at that, thanks.

[cheekymonk3y]

Originally Posted by magnus

You're probably using a custom image directory. You'll need to copy the images to that dir as well.

woot, that fixed mine as well, you should change it if you can to just look in the parent image directory instead of the style's directories. :P

[magnus]

Originally Posted by cheekymonk3y

woot, that fixed mine as well, you should change it if you can to just look in the parent image directory instead of the style's directories. :P

It properly uses the $stylevar[imgdir_{x}] variables. Changing it to anything other would cause breakage for others.