Make Any Widget Scrollable

GuildPortal admin site link to original post

This script was written to make any widget scrollable. I tried to make the script as generic as possible because of so many differences in the themes, so please tell me if this script doesn't work on your site.

Code

Add the following code to your custom javascript (Control Panel > Custom HTML & Script > Custom Javascript/JQuery > Document Ready Event tab)

 // Enter Widget title then in parenthesis include the scroll height

 // One widget:  "Title(###)" // the "###" in parenthesis is the height to make the widget

 // Two widgets: "Title 1(###), Title 2(###)" // separate the titles with a comma

 var makeScrollable = "Guild News(500), Shout!(200)"

 /* Don't change anything below */

 ,scrollIt = function(t,h){

  t = $.trim(t);

  h = h || 'auto';

  var cb = $('.ContentBoxTitle:contains(' + t + '), .ContentBoxTitleNoBackground:contains(' + t + ')').closest('.gpWidget'),

   cbc = cb.find('.blkContent');

  if (!cb.length) { return; }

  if (!cbc.length || cbc[0].tagName === "TD") {

   cbc = cb.find('.ContentBoxBody')

    .wrapInner('<div class="blkContent" />')

    .find('.blkContent');

  }

  cbc.css({ height:h, 'overflow-y':'auto', 'overflow-x':'hidden' });

 }, j, list = makeScrollable.split(',');

 for ( j=0; j<list.length; j++ ){

  scrollIt( list[j].replace(/\(\d+\)/,''), list[j].match(/\d+/) );

 }

Customizing

Follow this template to add a widget or multiple widgets that you want to make scrollable

One widget: var makeScrollable = "Title(###)"
Two widgets: var makeScrollable = "Title 1(###), Title 2(###)"

• Title
  
  
  • Add the widget title (in blue and purple). 
  • The title is case sensitive. So the script will find "Title" but not "title".
  • The title is used to match the widget title, so "News" will match "Guild News", "Site News", "We Sit On Newspaper", etc.
  • Include spaces in the title as desired.
  • Separate titles using a comma.
    
    
• Height
  
  
  • Include the widget height to set in parenthesis with the title.
  • This number should not include "px".
  • If this number isn't defined, the height is set to "auto" which basically means the height of it's content (so nothing will change).