Expand and hide large blockquotes

Go down

Expand and hide large blockquotes

Post by Wecoc on 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
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: Expand and hide large blockquotes

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

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43469
Reputation : 3086
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


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