Quote Expander / Collapse - By Technidev

[Dave]

Mark as installed = get support.

If you're tired of people quoting long posts and having to scroll past it, then this modification is definitely something you want to use.

This template modification will make it possible to resize quote containers and add an "Expand" button to it which can be clicked to view the whole quote.

This modification should work on pretty much all vBulletin 4 versions.

Installation

Open the "showthread" template and paste the following above </body>
<script>window.jQuery||document.write(unescape("%3Cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script>
$(function(){
$(".quote_container").each(function(index){
if($(this).height() > 250){
$(this).css({
'height': '250px',
'overflow': 'hidden'
});

$(this).parent().append('<div class="quote_expander"><a href="">Expand</a></div>');
}
});

$(".quote_expander").click(function(){
$(this).parent().find('.quote_container').css({'he ight': 'initial', 'overflow': 'initial'});
$(this).remove();
return false;
});
});
</script>
Now open the additional.css template under "CSS Templates" and add the following:
.quote_expander{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-size: 11px;
text-align: center;
color: rgb(63, 63, 63);
cursor: pointer;
padding-top: 65px;
background: -webkit-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
background: -moz-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
background: -o-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
background: linear-gradient(to bottom, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
width: 100%;
position: absolute;
bottom: 0;
}
Done.


How to change the height of when the quote should be resized?
Change the 2 occurences of the number "250" in the showthread template to whatever height you want.

How to change the background color of the expander?
Change all occurences of the color "#C2CAD2" in the additional.css template to the hex code of the color you want.

Screenshots
https://vborg.vbsupport.ru/external/2016/02/15.png

[MarkFL]

Nice work, Dave! :)

I had to do something similar at the site I help admin (we have many users who will lazily quote an entire huge post to address one point), but I had to also account for LaTeX by MathJax making quotes grow after the DOM was in place. Fortunately they provide a script queue that will allow javascript to execute only after the LaTeX is done rendering.

[Dave]

Nice work, Dave! :)

I had to do something similar at the site I help admin (we have many users who will lazily quote an entire huge post to address one point), but I had to also account for LaTeX by MathJax making quotes grow after the DOM was in place. Fortunately they provide a script queue that will allow javascript to execute only after the LaTeX is done rendering.

Yeah I'm surprised vBulletin didn't create something like this themselves and that no one else released something like this before. Long quotes are the most annoying thing on forum boards.

[Alan_SP]

Only thing I would add, if it is possible, that users choose if they want their quotes expanded or collapsed.

[ArcadeSyndicate]

very nice, looks like xenforo :)

[Dave]

very nice, looks like xenforo :)

Yep, that's where I got the idea from.

[Techno Cowboy]

Installed & Thanks! :cool:

[X-or]

it's very nice, and working in 4.2.3 PL2
wish you could make this into a plugin for easy install
wish also you could re-collapse after expansion
it can be improved but very useful nonetheless

[Bulent Tekcan]

Not work on 4.2.3 version, mesage not expand. When I press Expand button no any action. Can you check this problem ? Is it possible to make expand and collapse again function ?

[Flipfloptrader]

Works nicely on Avenger Fluid also on 4.2.5.

[iamme_meisi]

Installed and working great!

[iyihost]

l want to 3.8.x
who can hep me ?

[ramesh_umk3]

l want to 3.8.x
who can hep me ?


<script>window.jQuery||document.write(unescape("%3Cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script>
$(function(){
$(".quote").each(function(index){
if($(this).height() > 250){
$(this).css({
'height': '250px',
'overflow': 'hidden'
});

$(this).parent().append('<div class="quote_expander"><a href="">Expand</a></div>');
}
});

$(".quote_expander").click(function(){
$(this).parent().find('.quote').css({'height': 'initial', 'overflow': 'initial'});
$(this).remove();
return false;
});
});
</script>


Should Work with vB 3.8

Try once.

Thanks.

[Mellow]

Nice, works great thanks... would be nice to have a contract on the expanded quote but this is nice enough.

[Hostboard]

Vbulletin 4 has a "Use Remote jQuery" with; Google, jQuery, and Microsoft. being listed.
Your using CloudFlare jQuery 2.2.0
Any reason why you did not default to one of the built in selections? Are there any performance enhancements between any of these? Would it be worth while to add Cloudflare to the available default configuration list? Could not be too difficult... Will vBulletin 4.2.x run under jQuery 2.2.0?

Would be nice to have a collapse option once expanded :)