IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» Forumactif Edge - Releases
by Ange Tuteur Thu 14 Dec 2017, 11:25

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ 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 : 22
Posts : 4725
Points : 9670
Reputation : 2352
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

--------

Ange Tuteur
Tips and TricksContact Me

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