Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > Make Any Widget Scrollable
Mottie (SuperAdmin) 1/29/2011 3:05 PM EST : Make Any Widget Scrollable
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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