Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Forum Post Menu
Mottie (MVP) 5/27/2009 11:26 AM EST : Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Forum Post Menu

This script adds an accordion style menu with links to forum topics that once clicked will open the forum post in another content box area (see screenshot below) to make it easier to organize important posts. This is the same menu system that I'm using on my Help site home page.

Features include:
  • A link that will restore the original content message from inside the menu box
  • Accordian style menu that only allows one open topic header at a time
  • Links to forums posts open the topic inside the content box area
  • Using the middle mouse button on a link will open the topic in a new tab
  • Icons will highlight new or updated posts - they automatically clear after two months have passed.


The Code
(Menu)
<style type="text/css">
/* A few IE bug fixes */
* ul#contentMenu, ul#contentMenu li ul { margin: 0; padding: 0; }
* html ul#contentMenu li a { height: 100%; }
* html ul#contentMenu ul li { margin-bottom: -1px; }
* html ul#contentMenu ul li a { height: 100%; margin: 2px auto; }

/* Some list and link styling */
ul#contentMenu { list-style-type: none; margin: 0px 5px; cursor: pointer; width: 200px; }
ul#contentMenu ul li { border: 0px; margin: 2px 5px 2px 20px; list-style-type: disc; position: static;}
ul#contentMenu ul li a { display: block; border: transparent 2px solid; padding: 0px; }
ul#contentMenu ul li a:hover { display:block; background: #333333; border: #333333 2px solid; padding: 0px; }
h5.head { width:100%; font-size: 10pt; cursor:pointer; margin:0px; }
h5:hover { background: #333333; border: 0px; }
h5.selected { background: #00496c; }

#contentMenu .new { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif) no-repeat; margin-left:0px; padding-left:22px; }
#contentMenu .update { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif) no-repeat; margin-left:0px; padding-left:22px; }

/* Header Link Styling */
h5.head {margin:0px;}
 .MessageSignature, .MessageToonContainer1 { display: none; }
</style>

<div id="preload" style="display: none;"></div>
<script type="text/javascript">
var contentMenuSpeed = 300;
var nummon = 2 // keep new/update labels for 3 months (this month + 2 more)

// *****************************
// Don't Change Anything Below
//*****************************

$(document).ready(function() {
  // make accordion
 $('#contentMenu h5').click(function(){
  var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(contentMenuSpeed);
  $('#contentMenu h5').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(contentMenuSpeed);
   }
  });
 }).next().hide();

 // restore welcome message
$('h5.restoreWelcome').click(function(){
 $('#contentBox').hide();
 $('#contentMessage').show();
});

// load content and display
 $('#contentMenu a').click(function(){
  $(this).parent().addClass('selected');
  var instLink = $(this).attr('href');
  var toLoad = instLink.substring(instLink.lastIndexOf('/Guild.aspx'), instLink.lastIndexOf('#')) + ' td.MessageBodyCell1';
  instLink = instLink.substring(instLink.lastIndexOf('#') + 1, instLink.length);
  $('#preload').load(toLoad, function(){
   var content = $('#preload td.MessageBodyCell1 a[name=' + instLink + ']').closest('.MessageBodyCell1');
   if (content.length){
    $('#contentBox').html( content.html() ).show();
    $('#contentMessage').hide();
   }
  });
  return false;
 });

// Mark Link as new or updated depending on the class
// n0409 = new on 04/09 and u0309 = updated on 03/09
 var tmp, linu, limon, liyr, newyr, now = new Date(),
  nowmon = now.getMonth() + 1, // months are stored as zero based numbers (Jan = 0, Dec = 11)
  nowyr = now.getFullYear() - 2000; // just need the last two digits
 $('#contentMenu li').each(function(){
  tmp = $(this).attr('class');
  if (tmp && tmp !== '') {
   linu = tmp.substring(0,1);
   limon = parseInt(tmp.substring(1,3),10);
   liyr = parseInt(tmp.substring(3,5),10);
   newyr = (limon + nummon > 12 && limon + nummon - 12 >= nowmon && (liyr + 1) == nowyr) ? true : false;
   if ( (liyr == nowyr && limon + nummon >= nowmon) || newyr ) {
    tmp = (linu == 'n') ? 'new' : 'update';
    $(this).addClass(tmp);
   }
  }
 });
});
</script>
<!--
*****************************
 Edit the HTML below!
***************************** -->


<div>
<h5 class="head restoreWelcome">&nbsp;CONTENT MESSAGE</h5>
<ul id="contentMenu">

<!-- Add new topic header blocks below
********************************* -->


<li style="position: static;">
<h5 class="head">TOPIC HEADER 1</h5>
 <ul style="display: none;">
  <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
  <li class="u0509"><a href="URL TO POST">Topic 1: Post 2</a></li>
 </ul>
</li>

<li style="position: static;">
<h5 class="head">TOPIC HEADER 2</h5>
 <ul style="display: none;">
  <li><a href="URL TO POST">Topic 2: Post 1</a></li>
  <li><a href="URL TO POST">Topic 2: Post 2</a></li>
</ul>
</li>

<li style="position: static;">
<h5 class="head">TOPIC HEADER 3</h5>
 <ul style="display: none;">
  <li><a href="URL TO POST">Topic 3: Post 1</a></li>
  <li><a href="URL TO POST">Topic 3: Post 2</a></li>
 </ul>
</li>

<!-- Add new topic header blocks above
********************************* -->

</ul>
<hr>
<center><img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif"> <span style="font-size: 75%;">New Post</span> <img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif"> <span style="font-size: 75%;">Updated Post</span>
</center>
</div>
The Code (Content Box)
<div id="contentBox"></div>
<div id="contentMessage">
<h2>This is my content message</h2>
This is my content message text... Put whatever you want here.
</div>
Adding this Code

  • Pick a page and add two free form text/HTML type content boxes. The "Menu" code should be placed in a side zone while the "Content Box" code should be placed into the center zone (or even inside the Welcome message like I did, but make sure you have the same message for everyone).
  • When adding this code, make sure you do so while in HTML mode ().
Customizing

CSS
  • The CSS for this content menu took a lot of tweeking to make it look right, so if you want to change something try changing one thing at a time to make sure that it doesn't mess up completely.
  • Content Menu Width: Adjust the width of the menu, by changing the width in "ul#contentMenu" from 200px to the size you desire.
  • Header Selected Color: When a (topic) header is selected, the CSS that sets the color is "h5.selected". Change the background color to match your site. The default color in the CSS is "#00496c;" which is a light blue color
  • Hover Color: When you hover over a topic header or topic, there is a color change to help you see where you are pointing. I would recommend making both the topic header and topic hover colors the same to keep from distracting users, but you can do whatever you want.

    • Change the topic header hover color in the CSS class "h5:hover" - the default background color is "#333333;"
    • Change the topic hover color in the CSS class "ul#contentMenu ul li a:hover" - the default background and border color here is "#333333;".
  • Notifications Icons: You can replace the bullets that mark each topic with an icon that shows if the topic is new or has been updated. The script rounds to the nearest month because I didn't bother making it figure out how many days have passed. So basically it adds the icon for 2 months from when you set the date on it, starting from the 1st of the month... I may change it in the future, but I wasn't that worried about exact dates.

    • Replace the New icon () URL (in orange) in the CSS class "#contentMenu .new". Make sure the new icon is around 20 x 20 pixels or you'll have to adjust the padding-left size (in red) to align it with the other bullets.

      #contentMenu .new { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif) no-repeat; margin-left:0px; padding-left:22px; }
    • Replace the Updated icon () URL (in orange) in the CSS class "#contentMenu .update". Make sure this icon is also around 20 x 20 pixels or adjust the padding-left (in red) accordingly.

      #contentMenu .update { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif) no-repeat; margin-left:0px; padding-left:22px; }
Adding Topics
  • Restore Content Message Link: The topmost topic header is actually the link to restore the original Content Message. You only need to edit the title in teal to display the title of the message. Also leave the "&nbsp;" to the left of the title as it aligns it with the other topic headers.

    <h5 class="head" onclick="restoreContent()">&nbsp;CONTENT MESSAGE</h5>
  • Template to add a topic block: Add new topics by adding the template below:
    <li style="position: static;">
    <h5 class="head">TOPIC HEADER 1</h5>
     <ul style="display: none;">
      <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
      <li class="u0509"><a href="URL TO POST">Topic 1: Post 2</a></li>
     </ul>
    </li>
  • Template to add more topics: Edit or add additional topics within the topic header using this format:

    <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
  • Topic Header Title: Replace the Topic Header title (in teal) between the <h5> tags

    <h5 class="head">TOPIC HEADER 1</h5>
  • Notification Icons: The new or updated icon can be added by adding a class to the <li>. The class is broken down as follows:

    class="n0509"
    • The 'n' at the beginning tells the script to pick the 'new' icon (). Replacing it with a 'u' tells the script to use the 'upated' icon ()
    • The four numbers (0509) that follow the 'n' or 'u' tell the script that the post was made on 05/09, or May 2009. It will then continue the replace the bullet with the new or updated icon for two months - it will stop on 0809 (August 1st, 2009). Don't include the slash between the month and year.
    • If you don't add a class to the <li> tag, then it will not add an icon.
  • Forum Post URL: The URL you put into the "URL TO POST" should be the post link you see at the top of every post in the forums. The link should contain the full URL including the post number (#40826777):
    http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224&ForumID=1235441&TopicID=8245530&Page=1#40826777
    This is necessary as the content box will only contain that one post and not the entire topic.
  • Topic Title: Basically replace the text in green with the title of the post.
Topic Icon Key
  • This may not be necessary, but it's basically showing the icon and saying if it means the topic is new or updated at the bottom of the menu. If you notice the Updated icon only has "UPD" on it LOL.. you try to fit the word updated and make it readable on a 20 x 20 icon LOL.
  • Anyway, you can edit/remove this if you want. It's the HTML at the bottom of the menu code:

    <hr>
    <center><img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif"> <span style="font-size: 75%;">New Post</span> <img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif"> <span style="font-size: 75%;">Updated Post</span>
    </center>
Edit (9/7/2009): Fixed the script so it once again works with IE.
Edit (11/18/2009): Updated code so now the subdomain of guildportal doesn't cause problems loading the content ( http://subdomain.guildportal.com/Guild.aspx.... )
Edit (1/12/2010): Fixed the notification icon calculations, it wasn't showing any icons for new/updated posts across the new year. Revised code is highlighted in blue.
Edit (3/1/2010): Fixed the code again.. apparently my math mojo was bad LOL. Now the icons will show across the new year properly. The revised code from Jan was replaced and new code is now highlighted in green.
Edit (9/14/2010): FIxed a problem with the new and updated icons still showing up. Cleaned up the code a tiny bit as well.
Edit (6/6/2011): Updated to fix a problem with the icons not showing up with the recent update of jQuery.
Edit (6/16/2011): Oops, I had the menu code looking for "instruct" instead of "contentMenu"
Edit (6/17/2011): LOL more bug fixes, thanks TimelordDC!
TopBottom

Mottie (MVP) 3/1/2010 11:12 AM EST : RE: Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated this script because apparently my math was all wrong. Topics posted at the end of last year wouldn't stop adding the notification icon! Now it works correctly! 
TopBottom

Mottie (MVP) 9/15/2010 5:32 PM EST : RE: Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated the script and some of the HTML because apparently I'm still really bad at math LOL.
TopBottom

pinstripesc (New Admin) 2/5/2011 4:50 AM EST : RE: Forum Post Menu
pinstripesc
Posts: 4895
Zomgawsh Poster

Hey Mottie,

I grabbed this fancy little script and can`t seem to get it to work. One window (left) has the chunk of code in it for the menu, while another (centre) has the little bit of content. Clicking the topics in the menu isn`t doing anything for me, dropdown, link, etc-wise.


TopBottom

Mottie (MVP) 2/19/2011 9:24 AM EST : RE: Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Pinstripesc!

Sorry, I've been busy and must have missed this question, did you ever get this working?
TopBottom

pinstripesc (New Admin) 2/19/2011 8:17 PM EST : RE: Forum Post Menu
pinstripesc
Posts: 4895
Zomgawsh Poster

Yep!
TopBottom

Mottie (MVP) 6/6/2011 6:07 PM EST : RE: Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated to fix the new/updated icons that stopped working with the new version of jQuery.
TopBottom

TimelordDC (New Admin) 6/16/2011 3:07 PM EST : RE: Forum Post Menu

TimelordDC
Posts: 16
Becoming Adept!

Hi Mottie,

We've just started using GP and I've already used a lot of your customizations.

Unfortunately, I cannot get this one to work. I am having the same problem as the one posted earlier (above) but I can't seem to figure it out on my own. If you can take a look and see what's wrong, that'll be very helpful.

Guild site: ancestrialshadows.guildportal.com

The code is in the Library tab; I've made it Public.

Thanks!

Edit: After logging out and checking that page, I see you cannot see the code behind. Basically, I just copied whatever you put in the Menu box and edited just the topics. I added only one as a test. Code below:

<li style="position: static;">
<h5 class="head">General Info</h5>
 <ul style="display: none;">
  <li class="n0509"><a href="http://ancestrialshadows.guildportal.com/Guild.aspx?GuildID=414813&TabID=3522266&ForumID=1989217&TopicID=9699894&Page=1#46803085">DKP System Details</a></li>
 </ul>
</li>
TopBottom

Mottie (MVP) 6/16/2011 9:29 PM EST : RE: Forum Post Menu
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi TimelordDC!

Oops, I think when I fixed the code last week, I used the wrong ID in the code... I've used "instruct" instead of "contentMenu". It's fixed in the code above.
TopBottom

TimelordDC (New Admin) 6/17/2011 11:27 AM EST : RE: Forum Post Menu

TimelordDC
Posts: 16
Becoming Adept!

Hi Mottie,

Thanks for the quick help. The accordion menu worked but the content wasn't displaying. Going by your note, I checked if there were similar typos elsewhere and there are a couple of places you are referring instructions instead of contentBox.
After putting in contentBox in these 2 places, it's working fine now.

// restore welcome message
$('h5.restoreWelcome').click(function(){
 $('#contentBox').hide();
 $('#contentMessage').show();
});

and

// load content and display
...
    $('#contentBox').html( content.html() ).show();
    $('#contentMessage').hide();
   }
  });
  return false;
 });

Thanks a lot for your help!
TL

Edit: And welcome should be changed to contentMessage
Or, I guess the Content Box code can be changed
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%