Expand and hide large blockquotes
2 posters
Page 1 of 1
Expand and hide large blockquotes
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.
Edit: Insert as a new Javascript with the state 'In all pages'
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
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Expand and hide large blockquotes
You need to state the placement for the JavaScript: in all pages, in topics, etc.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Hide Admin Online Status & Hide Rank Title
» hide category + hide popup + pictures for posts
» [GFX R] Expand Background
» Expand SCEditor Color Selector
» categorie and title glow/expand
» hide category + hide popup + pictures for posts
» [GFX R] Expand Background
» Expand SCEditor Color Selector
» categorie and title glow/expand
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum