Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Adding a Most Recent Post Display Box
Mottie (SuperAdmin) 10/29/2009 2:16 PM EST : Recent Post Display v 1.12
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Recent Posts Display v1.12

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.

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 10/29/2009 5:37 PM EST : RE: Recent Post Display v 1.1
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Very nifty Mottie. Though I can't use it or my page will explode
TopBottom

bhFranka (Applicant) 10/29/2009 6:02 PM EST : RE: Recent Post Display v 1.1
bhFranka
Posts: 108

0
Like

0
Dislike

Thanks for the code Mottie. Two questions though. One, it seems to not be wanting to work when I plug in my forum url although it works when I change it back to yours. Two, when I am on my first page of the forums tab it moves the new code to be displayed in the default position. Is there a way to get it to stop doing that and keep it at the top like it is when I am on any other page of the forums? Thanks for your time. 

Ooo and, before I click submit, how did you change the background color of your forum posting box? It is pretty. clap
TopBottom

Mottie (SuperAdmin) 10/29/2009 10:58 PM EST : RE: Recent Post Display v 1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi bhFranka!

On the first & second questions, I'll look into it tomorrow... too tired tonight.

Third, look here
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/30/2009 10:38 AM EST : RE: Recent Post Display v 1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi bhFranka!

I updated the script, I'm still not sure why it wasn't working with your site... maybe add another thread - it might be messing up because it only had one post to display.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Bob_Laublaw (Member) 10/30/2009 4:55 PM EST : RE: Recent Post Display v 1.1
Bob_Laublaw
Posts: 1256

0
Like

0
Dislike

Hey Mottie... I'm back again. Two things to mention.

First... the images for New Posts or No New Posts doesn't seem to work on either my test or live site. It's possible (and probable) that since I'm the only poster on the test site the system sees me as "reading" anything I posted. But the live site has a number of folks posting, and the icons are not changing.

Test Site: http://www.guildportal.com/Guild.aspx?GuildID=334575&TabID=2805195
Live Site: http://drivenbydistraction.guildportal.com/Guild.aspx?GuildID=268085&TabID=2251152

Second... I'm noticing the script is running even when looking at a specific thread and not the base forum listing page. Do you think this is causing overhead on the browser that would slow down that page or cause any negative effects? Is it possible to check if the user is not on the forum base page and not execute the script if that is the case? If you don't think it has any detrimental effects, we can forgo doing the conditional check.

Raid Leader for <High Lords of the Horde> on Hyjal (US)
Zymurg
TopBottom

Mottie (SuperAdmin) 10/30/2009 6:11 PM EST : RE: Recent Post Display v 1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hey Bob!

Looking at your forum page, none of the images in your forums had an alt attribute (oddly). So I modified the lastest version (1.11) to accept image names that indicate a new post. Give me a few minutes to update the post with details on how to use this option.

Actually, If you update to version 1.11 (which I just updated) it will now look for the image filename... so specifically for you, if you add this variable to the version 1.11 script, the icons will work properly.
var newPostsImages = 'folder_page|folder_lightbulb';
The script you added below the forums appears to continue running when reading other posts, but it actually isn't.. you're just seeing the loading image in place. So another reason to update to version 1.11 as I have added a bit of script to hide the loading icon when it isn't being used.... the best idea would be to hide your "Recent Thread Script" box all together.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

bhFranka (Applicant) 11/1/2009 4:31 AM EST : RE: Recent Post Display v 1.1
bhFranka
Posts: 108

0
Like

0
Dislike

It does not want to work and I do not know why. I added more topics, no dice. Reduced the amount of topics to display, no dice. Tried to put the code in a box by its self, no dice. I am not getting anywhere with this on my own... It don't like me. cry
TopBottom

Mottie (SuperAdmin) 11/1/2009 9:47 AM EST : RE: Recent Post Display v 1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi bhFranka!

I found the problem, it was in my script =(... I've updated it and it looks like it's working on your site now =)

If you wanted to move the recent posts up to the top box, set the "replaceForumRecentPosts" to false.
var replaceForumRecentPosts = false;
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Bob_Laublaw (Member) 11/2/2009 9:53 AM EST : RE: Recent Post Display v 1.1
Bob_Laublaw
Posts: 1256

0
Like

0
Dislike

I've updated the scripts on my live and test site... both are working as intended now. Thank you, again, Mottie

And yes, I'll be removing the random extra script container boxes once I move content from test site to live site. For now this is all quick & dirty to show the GM what is possible...

Raid Leader for <High Lords of the Horde> on Hyjal (US)
Zymurg
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%