I tried to add this to my forums, but nothing is happening.

I am noticing some lag.

I realized it was laggy hehe. I'll pass on this code, but I still think it's brilliant.

Recent Posts Display v1.12

This version adds an icon to the display to show if the recent post has or hasn't been read by you... it's not perfect as it can't distinguish a new sticky post from a read post (the script uses the alt value of the image which doesn't always say new in it).

• I've updated this version to have the display work in a separate box on the forum's page.
• I've fixed a problem with the page numbers doubling sometimes.
• I also moved all the scripting into the external file to make it all a bit cleaner.

The Code

<style type="text/css">
 #recentPosts .ForumTitleHeaderCell {}
 #recentPosts .ForumTopicCountHeaderCell { width: 90px; }
 #recentPosts .ForumLastPostInfoHeaderCell { width: 150px; }
 #recentPosts th { text-align: left; }
 #recentPosts .rpicons { width: 20px; text-align: center; }
 #recentPosts .rpicons img { vertical-align: middle; width: 20px; height: 20px; }
 .page-number, .view-all { padding: 0 2px; color: #aaaaaa; cursor: pointer; }
</style>
<div id="rpContainer">
 <div class="sortPagerTop"></div>
 <div id="rpLoading" style="text-align: center; display: none;">
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading4.gif" />
 </div>
 <table width="100%" style="display: none;" id="recentPosts" class="sortable">
  <thead>
   <tr class="ForumCategoryHeader">
    <th colspan="4" class="ForumCategoryHeader">Most Recent Posts</th>
   </tr>
   <tr>
    <th class="rpicons"></th>
    <th class="ForumTitleHeaderCell">Post Title</th>
    <th class="ForumTopicCountHeaderCell">Poster</th>
    <th class="ForumLastPostInfoHeaderCell sorted-asc">Posted</th>
   </tr>
  </thead>
  <tbody>
  </tbody>
 </table>
 <div class="sortPagerBot"></div>
</div>
<div style="display: none;" id="preloadPosts"></div>
<input type="hidden" style="display: none;" value="0" id="fgindex" />
<script type="text/javascript">

 var showPostHeader = false;
 var replaceForumRecentPosts = true; // setting to false will prevent this script from replacing the existing recent posts under the forums
 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&PageName=Forums';

 var newPostsImages = '_new';
 var readIcon = 'http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/folder.png';
 var unreadIcon = 'http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/folder_new.png';

</script>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/recentposts.js"></script>

Customizing

• The only changes from the previous version are as follows:

• The CSS:
  
  .SmallDisplay img { vertical-align: middle; width: 20px; height: 20px; padding-right: 5px; }
  
  You can set the read and unread icon size using this CSS, the padding-right is the spacing between the icon and the text. Adjust as desired.
• There are two new variables in the javascript:
  
   var readIcon = 'http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/folder.png';
   var unreadIcon = 'http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/folder_new.png';
  
  Change the URL in orange to point to your desired images.


• Update: In version 1.11 an additional variable was added to prevent the display from replacing the existing forum recent post display... I actually don't recommend setting this to false because it lengthens the page loading time and really just annoys me as a user if I have a lot of posts to read up on.
  
  var replaceForumRecentPosts = true;
  
• Update #2: I just added a new variable "newPostsImages" which is the part of the forum icon filename that indicates it is a new post... for example, on my help site, my NEW forum posts images are as follows: folder_new.png, folder_hot_new.png, folder_sticky_new.png, folder_locked_new.png.
  
  The common portion of the filenames above are "_new.png", but you just need the smallest portion, so "_new" should be adequate to use:
  
  var newPostsImages = '_new';
  
  But if you have images that have very different icon names, such as: folder_page.png, folder_lightbulb.png, folder_newsticky.png, etc. You can just add them all to the variable, but separate the names with a pipe character "|" (shift-\, the key above your Enter key)
  
  var newPostsImages = '_page|_lightbulb|_newsticky';

• Please follow the rest of the instructions in the original post on how to customize other parts of this script.

Edit (10/30/2009): Updated the script to version 1.11, moved most of the scripting to an external file. Fixed a few other problems described at the top of the post.
Edit (10/30/2009): Update #2, added a new variable to allow the script to look for forum icon filenames instead of relying on the alt attribute of the image to determine if the post is new.
Edit (11/9/2009): Update #3, Modified the code to place icons is a separate table cell and made it work properly when using the "replaceForumRecentPosts" variable.

Updated this code again:

• It should now properly work with the "replaceForumRecentPosts" variable.
• Moved the icons into their own table cell, so text wrapping doesn't end up under the icon
• And hopefully it should play nicer with other scripts on the same page.

Hi Merenwench!

Just modify this variable:

var paginateLocationTop = false; // Set to true to place at top, false to add below