Adding A Most Recent Post Display Box

GuildPortal admin site link to original post

*NOTE* GuildPortal has added a "Recent Topics Stand Alone" that takes the place of this code, but I'll leave this here if anyone still has need of this version.

*NOTE 2* Archiving this post now that there are subforums, this code will be really really slow if it had to check all of them as well.

• I will apologize in advance to the staff at GuildPortal if this script causes too much server load... I will remove it if it does start to cause problems.
• Please check out the load time of this script on my help site forum's page to see if are ok with the time delay before adding this script to your site.
• Add this code to a "Free Form Text/HTML" type content box on any page of your site. If you add it to your Forum page, it will automatically replace the "Most Recent Posts" listing below the forums.
• The time difference between the two displays is odd... but it is pulled directly from the forums, so I think this script may be more accurate than the original *shrug*

* Just one quick note about working on this script... I tried to include the forum group where the post was added, but this proved to increase the page loading time too much and at least for my help site it messed up the CSS, so I removed it. I might look into this again at a later time.

Original Recent Post Display 10 Posts - displays up to 10 of the most recent postings RSS feed - available Fast - instant display of information Any Site Page - this information can be placed on any page of your site - it is called the "Recent Post Stand-Alone" type content box.

This Recent Post Display 10+ Posts - displays much more than 10 recent posts - this is dependent on how many forum groups your site has. The formula for the max number of post listings would be ( # of forum groups on your site X 25 ). The 25 is from the number of posts per page in the forums.... so for my Help site with 6 forum groups, I could display up to 150 of my most recent posts! No RSS Feed  Slower - display of information is dependent on your internet speed and how many forum groups you have on your site. This script needs to load the first page of each forum group. With my connection speed (DSL) it takes about 1-2 seconds per group for a total time of 5-10 seconds. So this method is a lot slower than the original. Any GuildPortal Page - this script shows your site's most recent posts on any GuildPortal web site. So this would be a nice addition if you have more than one GuildPortal website, say for different games, etc. I haven't tested it, but I think it should also work with alliance forums.

The Code

<style type="text/css">
#recentPosts .ForumTitleHeaderCell { color: #0080ff; }
#recentPosts .ForumTopicCountHeaderCell { width: 90px; }
#recentPosts .ForumLastPostInfoHeaderCell { width: 150px; }
#recentPosts th { text-align: left; }
.page-number, .view-all { padding: 0 2px; cursor: pointer; color: #aaaaaa; }
</style>

<div id="rpContainer">
<div id="rpLoading" style="text-align:center">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading4.gif"><br>
Loading
</div>
<table width="100%" style="display:none;" id="recentPosts">
 <thead>
  <tr class="ForumCategoryHeader">
   <th colspan="3" class="ForumCategoryHeader">Most Recent Posts</th>
  </tr>
  <tr>
   <th class="ForumTitleHeaderCell">Post Title</th>
   <th class="ForumTopicCountHeaderCell">Poster</th>
   <th class="ForumLastPostInfoHeaderCell sorted-asc">Posted</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>
</div>
<div style="display:none;" id="preloadPosts"></div>
<input type="hidden" style="display:none;" value="0" id="fgindex" />
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquerysortpage.js"></script>
<script type="text/javascript">

var showPostHeader = false;
var recentPostsToDisplay = 20; // set to zero to display all found posts ( max = #forum groups x 25 )
var paginatePosts = true;
var paginateLocationTop = true; // Set to true to place at top, false to add below 
var postsPerPage = 10; // number of posts to display when using paginate function ( paginatePosts must be true for this to work )
var forumURL = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224';

/*******************************    
 Don't change anything below    
*******************************/    
var recentPosts = new Array();    
var forumGroups = new Array();    
var tmp,ttile,tx,tdate,tlink,tposter;    
forumURL = forumURL.substring(forumURL.lastIndexOf('/Guild.aspx'),forumURL.length);    
$(document).ready(function(){    
 if ( $("div[id*='pnlMostRecent']").length || ( gup('TabID',forumURL) != gup('TabID',location.href) ) ) {    
  $('#preloadPosts').hide('fast',loadForum); /* Load main forum page only if recent post box exists or it's not on forum page */    
 }    
})    
function loadForum(){    
 $('#preloadPosts').load(forumURL + ' div[id*="ForumView"]',findGroups);    
}    
function findGroups(){    
 /* get URL for each forum group */    
 $('#preloadPosts .ForumTitleCell').each(function(){    
  tmp = $(this).find('a').attr('href');    
  tx = (tmp.match('#')) ? tmp.lastIndexOf('#') : tmp.length;    
  forumGroups.push([tmp.substring(0,tx)]);    
 })    
 /* search each forum group's first page for posts */    
 for (j=0; j < forumGroups.length; j++) {    
  $('#preloadPosts').hide('fast',loadTopics(j));    
 }    
 /* wait until all data is loaded into the table */    
 $("#preloadPosts").bind("ajaxComplete", function(){    
  var k = $('#fgindex').val();    
  k++;    
  if (k>forumGroups.length){    
   sortme();    
   if (recentPostsToDisplay != 0) {    
    $('#recentPosts tbody tr:gt(' + (recentPostsToDisplay-1) + ')').remove(); /* remove left over posts */    
   }    
   if (paginatePosts) pageinate();    
   $('#recentPosts tbody tr:odd').addClass('AltGridRow');    
   $('#recentPosts tbody tr:even').addClass('NormGridRow');    
   if (!showPostHeader) $('#recentPosts tr.ForumCategoryHeader').remove(); /* hide header */    
   if ( $("div[id*='pnlMostRecent']").length ) {    
    $("div[id*='pnlMostRecent']").html( $('#rpContainer').html() ); /* replace Most Recent Posts on Forums page */    
    $('#rpContainer').hide();    
   };    
   $('#rpLoading').hide();    
   $('#recentPosts').show(); /* show posts */    
  };    
  $('#fgindex').val(k);    
 });    
};    
function loadTopics(j){    
 $('#preloadPosts').load(forumGroups[j] + ' div[id*="ThreadView"]',findTopics)    
}    
function findTopics(){    
 $('#preloadPosts').find('.NormGridRow,.AltGridRow').each(function(){    
  ttitle = $(this).find('.TopicTitleCell a').html();    
  tx = $(this).find('.TopicLastPosterCell');    
  tdate = tx.find('a:last-child').html();    
  tlink = tx.find('a:last-child').attr('href');    
  tx.find('a').remove(); /* strips out date so only the poster is left */    
  tposter = tx.text().replace(/&nbsp/,'');    
  tmp = '<tr onclick="location.href=\'' + tlink + '\'"><td class="SmallDisplay"><a href="' + tlink +    
   '">' + ttitle + '</a></td><td class="SmallDisplay">' + tposter + '</td><td>' + tdate +'</td></tr>';    
  $('#recentPosts').find('tbody').append(tmp);    
 })    
}    
function gup(name, myString) {    
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");    
 var regexS = "[\\?&]"+name+"=([^&#]*)";    
 var regex = new RegExp( regexS );    
 var results = regex.exec( myString );    
 if( results == null )    
  return "";    
 else    
  return results[1];    
}    
</script>

Customizing

• You can change the Recent Post header title and each of the column headers by modifying the text within the HTML (in green). I didn't want to add more coding to the script just to allow these names to be changed via the javascript... in addition, you can hide the table header ("Most Recent Posts") by setting the javascript variable below to false.


• The styling of this box follows the same styling of the recent posts listing on your forum page, you can change the CSS specific to this display by using the "recentPosts" ID in the CSS. For example, you could add this bit of CSS to change the Post Title header. The rest of the CSS shown sets the width of each column, aligns the text and adds color to the page selectors.

  #recentPosts .ForumTitleHeaderCell { color: #0080ff; }
  #recentPosts .ForumTopicCountHeaderCell { width: 90px; }
  #recentPosts .ForumLastPostInfoHeaderCell { width: 150px; }
  #recentPosts th { text-align: left; }
  .page-number, .view-all { padding: 0 2px; cursor: pointer; color: #aaaaaa; }
  

• The header (as seen in the image above) can be shown or hidden by changing the "showPostHeader" variable in the script.
  

  var showPostHeader = false;

• The number of recent posts to display can be set in the script by replacing the number in red with the number of posts you wish to display on your site. As stated above, this number doesn't have a set maximum, but is dependent on the number of forum groups you have on your site. If you have 4 forum groups, this script could potentially display 100 posts ( # forums groups x 25 )... that's 25 posts per page. The script only looks at the first page of the forum group. If you set this to zero, it will display all the posts it finds!
  

  var recentPostsToDisplay = 20;
  

• The next varibles are "paginatePosts" and "paginateLocationTop". What this means is if you have for example 50 posts, and you set the number of posts per page (postsPerPage, set below) to 10,  it will make 5 pages of 10 posts. So, it makes the list more compact and easier to read. Set this to true to activate it. "paginateLocationTop" will position the page selector at the top if set to true and bottom if set to false.
  

  var paginatePosts = true;
  var paginateLocationTop = true;

• If you decide to paginate your posts by setting the variable above to true. Set the "postsPerPage" variable to the number of posts you want to display on each page.
  

  var postsPerPage = 10;

• This last variable "forumURL" must have the URL to your forum page. Below is the URL to my Help site forum page. Modify the text in orange with your URL. This code isn't set up to handle more than one copy of this script on a page with different forum URLs... if I get a request to do this, I'll look into it.
  

  var forumURL = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224';
  

• To change the loading image, look up in the HTML for the image URL in orange. I used http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading4.gif, but also provided a few more images:

	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading2.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading3.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading4.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading5.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading6.gif
	http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading7.gif

Edit (9/3/2009): Updated the script to work with IE. It seems IE doesn't like having a "#forums" at the end of a URL. I also added a "loading" image.
Edit (10/26/2009): Replaced the old table sorting script with a different one, hopefully it won't cause as much trouble. This means I also had to update the HTML, so if you are using this script, you'll need to update the whole thing.
Edit (10/27/2009): Fixed a sorting problem, also added pagination of the posts.
Edit (10/28/2009): Changed the sorting program, hopefully it'll work with all sites now. Also added a new variable "paginateLocationTop" that allows you to move the page selector to the top or bottom
Edit (6/18/2010): updated the code above to work with the changes to the forum layout.

This topic was moved from forum Widgets to forum Archive on 2/1/2011 9:02 AM by Mottie.

I'm attempting to add the this updated code to a new guild site, and am having a problem. Well, actually a few.

First... for some reason adding a Free Form HTML Box using Firefox is a bit hosed. Or maybe it's just me. Who knows. Either way... I copy/paste the code you currently have listed into the widget edit box (in HTML mode), then save it. When I load the forum page, all I see is the working icon but the script never runs. I go back to the widget editor, and all the scripting is gone and only the HTML output remains. It's as if the editor box rendered the HTML mode then saved that rendered code, not the full HTML code. IE does not seem to have this problem.

Second... I'm getting a javascript error from both Firefox and IE in the included jquery js file.

IE Error Report
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
Timestamp: Sat, 24 Oct 2009 05:06:47 UTC

Message: 'type' is null or not an object
Line: 2
Char: 6697
Code: 0
URI: http://www.guildportal.com/Cms/jquery.tablesorter.min.js

Firefox Error Report
Error: parsers is undefined
Source File: http://www.guildportal.com/Cms/jquery.tablesorter.min.js
Line: 2

URL of the Forum page I'm attempting to add this code to...
http://drivenbydistraction.guildportal.com/Guild.aspx?PageName=Forums&GuildID=268085&TabID=2251152

 

Alright... it's nice to know it's not just me. I remember this problem about 4-5 months ago, but it was either fixed or I was able to work around it.

Guess I'll just have to wait till it's fixed.

Once the editor is fixed, I'm assuming that will remove the errors from the tablesorter.min.js?

Based on the suggestion by bhFranka, I'm able to get the script content to persist upon saving by switching from HTML to Preview mode then saving changes.

However, the following error in the tablesorter jquery file still persists and the script does not work.

Error: parsers is undefined

Source File: http://www.guildportal.com/Cms/jquery.tablesorter.min.js

Line: 2 

Is anyone having any trouble with scripts in the editor now?  I just pushed something that should help.