Expand and hide large blockquotes

Go down

Expand and hide large blockquotes Empty 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:
Expand and hide large blockquotes Expand10

Expand and hide large blockquotes Expand11

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
Wecoc
Wecoc
Forumember

Male Posts : 136
Reputation : 100
Language : Catalan, Spanish, English

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

Back to top Go down

Expand and hide large blockquotes Empty 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.


Expand and hide large blockquotes Slgray10

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

Male Posts : 45914
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Back to top


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