Recent Tutorials
Who is online?
In total there are 6 users online :: 2 Registered, 0 Hidden and 4 Guests

djblah, SLGray

[ View the whole list ]

Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Clip and toggle signatures

View previous topic View next topic Go down

Ange Tuteur
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostAnge Tuteur on Thu 27 Feb 2014, 01:21


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..)
$(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>';

          $(document).on('click','#showMore',function() {
            $(this).after('<div id="showLess" class="toggleSig" title="'+settings["title"]+'">'+settings["hide"]+'</div>').remove();
          $(document).on('click','#showLess',function() {

At the beginning of the script above are some options which you can customize :
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.

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.
.toggleSig {
border:1px solid #CCC;
box-shadow:0 -10px 3px rgba(0, 0, 0, 0.07) inset;
.toggleSig:hover {
border:1px solid #059;

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 ! Very Happy

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!

Create a new account

Log in

Already have an account? No problem, log in here.

Log in

Permissions in this forum:
You cannot reply to topics in this forum