GuildPortal will be going offline (permanently) by the end of the month.
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
Mottie (MVP) 1/29/2011 3:03 PM EST : Make Any Widget Scrollable
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

Make Any Widget Scrollable

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.


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" />')
  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+/) );

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).

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