Clip and toggle signatures

Hello,

This script is for clipping signatures that are large in height, and adds a button to toggle the height.

Example :


Clicking show more will show the default height, while clicking show less will clip the signature. Currently, it will apply this to signatures whose height is greater than 100.

Script :
Administration Panel > Modules > Javascript codes management > Create a new script
Title : Clip and toggle signature
Placement : can be applied in the topics or all the pages if you want it everywhere (pm, preview..)

Code:

$(document).ready(function() {
   
    var settings = {
        height : 100,
        title : 'toggle signature',
        show : 'Show more',
        hide : 'Show less'
    };
   
    $('.signature_div').each(function() {
      if ($(this).height() > settings["height"]) {
          var Y = settings["height"].toString();
          var t0 = 'height:'+Y+'px;overflow:hidden;';
          var t1 = '<div id="showMore" class="toggleSig" title="'+settings["title"]+'">'+settings["show"]+'</div>';
         
        $(this).attr('style',t0).before('<div></div>'+t1);

          $(document).on('click','#showMore',function() {
            $(this).next().attr('style','height:auto;');
            $(this).after('<div id="showLess" class="toggleSig" title="'+settings["title"]+'">'+settings["hide"]+'</div>').remove();
          });
   
          $(document).on('click','#showLess',function() {
            $(this).next().attr('style',t0);
            $(this).after(t1).remove();
          });
      }
    });
});

At the beginning of the script above are some options which you can customize :

Code:

var settings = {
    height : 100,
    title : 'toggle signature',
    show : 'Show more',
    hide : 'Show less'
};

height : takes a number value, this number determines when signatures are clipped. 100 = 100px

title : is the texts displayed when you hover you cursor over the button.

show : is the show button texts, i.e. Show more.

hide : is the hide button texts, i.e. Show less.

CSS :
Administration Panel > Display > Colors > CSS stylesheet

This is for the button style, you can change it if you want since it is by my forums style.

Code:

.toggleSig {
background:#FFF;
border:1px solid #CCC;
box-shadow:0 -10px 3px rgba(0, 0, 0, 0.07) inset;
color:#000;
cursor:pointer;
display:inline-block;
margin-bottom:3px;
margin-top:10px;
padding:3px
}
.toggleSig:hover {
border:1px solid #059;
color:#D41141
}

I have written it on phpbb3, but it should work for all versions. If you encounter any bugs please remember to report them here.

Thank you and enjoy !