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

avatar
Ange Tuteur
Administrator
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 https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 27 Feb 2014, 01:21

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