Expand and hide large blockquotes Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Expand and hide large blockquotes

    Wecoc
    Wecoc
    Forumember


    Male Posts : 144
    Reputation : 111
    Language : Catalan, Spanish, English

    Expand and hide large blockquotes Empty Expand and hide large blockquotes

    Post by Wecoc February 28th 2018, 3:54 am

    I'm not an expert programmer but I managed to make this for my forum so I thought maybe someone else would like to use it.
    This simple code adds the option to expand and hide large quotes.

    I tested it on phpBB3 and works just fine.
    The configuration is only in the very start of the code, you don't need to change anything else.

    Example:

    Edit: Insert as a new Javascript with the state 'In all pages'

    Code:
    /*
    * -- Expand and hide large blockquotes --
    * Version: 1.0 EN (2018-02-28)
    * Author: Wecoc
    * Description: Adds Expand & Hide options on large quotes
    */

    $(function() {
     
      var b_height      = 128;      // Max height of the blockquote
      var expand_name  = "> Expand <";   // Text to expand the quote
      var hide_name    = "> Hide <";   // Text to hide the quote
      var expand_color  = "#ff6600";   // Color of the Expand text
      var hide_color    = "#808080";   // Color of the Hide text
     
      // Define new class blockquote_content / blockquote_content_closed
      // Define new class blockquote_button / blockquote_button_closed
      $('blockquote div').filter(function() {
        if (this.clientHeight > (b_height + 16)) {
          var e = $(this);
          e.addClass('blockquote_div_closed');
          e.html('<div class="blockquote_content_closed">' + e.html() + '</div>');
          e.append('<div class="blockquote_button_closed">' + expand_name + '</div>');
        }
      });
      // Define new class blockquote_closed
      $('blockquote').filter(function() {
        if ($(this.firstChild).hasClass('blockquote_div_closed')){
          $(this).addClass('blockquote_closed');
        };
      });
      // CSS to add format to the new defined classes
      $('head').append($('<style>', {
        text:
        '.blockquote_closed { height: ' + (b_height + 16) + 'px }' +
        '.blockquote_div_closed { max-height: ' + b_height + 'px }' +
        '.blockquote_content, .blockquote_content_closed { margin:0; padding:0 }' +
        '.blockquote_content_closed { height:' + b_height + 'px; overflow:hidden }' +
        '.blockquote_button { color:' + hide_color + '; font-weight:600; text-align:center }' +
        '.blockquote_button_closed { color:' + expand_color + '; font-weight:600; text-align:center }' +
        '.blockquote_button, .blockquote_button_closed { margin:0; padding:0; cursor:pointer; }'
      }));
      // Toggle mode on click
      $(document).ready(function() {
        $('.blockquote_button_closed').on('click', (function (f) {
          var a = $(this.parentElement.parentElement);
          var b = $(this.parentElement);
          var c = $(this.parentElement.children[0]);
          var d = $(this.parentElement.children[1]);
          if (a.hasClass('blockquote_closed')) {
            // Expand
            a.removeClass('blockquote_closed');
            b.removeClass('blockquote_div_closed');
            c.removeClass('blockquote_content_closed');
            c.addClass('blockquote_content');
            d.removeClass('blockquote_button_closed');
            d.addClass('blockquote_button');
            d.html(hide_name);
          } else {
            // Hide
            a.addClass('blockquote_closed');
            b.addClass('blockquote_div_closed');
            c.removeClass('blockquote_content');
            c.addClass('blockquote_content_closed');
            d.removeClass('blockquote_button');
            d.addClass('blockquote_button_closed');
            d.html(expand_name);
          }
        }));
      });
    });


    Last edited by Wecoc on February 28th 2018, 2:04 pm; edited 1 time in total
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51520
    Reputation : 3519
    Language : English
    Location : United States

    Expand and hide large blockquotes Empty Re: Expand and hide large blockquotes

    Post by SLGray February 28th 2018, 4:36 am

    You need to state the placement for the JavaScript:  in all pages, in topics, etc.



    Expand and hide large blockquotes Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.