This time I will share jQuery Plugin and tutorial about Multiline Text Truncation Plugin With jQuery – Dynamic Max Height, hope it will help you in programming stack.
Dynamic Max Height is a jQuery multiline text truncating plugin for collapsing long blocks of text with a “Read more” link which allows you to expand the content with a CSS3 transition effect.
How to use it:
1. Add data-maxheight
value to set the visible area.
01 |
< div class = "dynamic-max-height" data-maxheight = "70" > |
02 |
< div class = "dynamic-wrap" > |
03 |
< p > Long Content Goes Here</ p > |
05 |
< div class = "align-center" > |
06 |
< a class = "dynamic-show-more" href = "javascript:;" title = "Read more" |
07 |
data-replace-text = "Show less" > |
2. Add the latest version of jQuery library and the Dynamic Max Height plugin to your webpage.
1 |
< script src = "//code.jquery.com/jquery-2.2.0.min.js" ></ script > |
2 |
< script src = "jquery.dynamicmaxheight.js" ></ script > |
3. Initialize the plugin and define the trigger selector.
1 |
$( '.dynamic-max-height' ).dynamicMaxHeight( |
2 |
{ trigger : '.dynamic-show-more' } |
4. Add CSS3 transitions to the text wrapper.
2 |
-webkit-transition: max-height 0.25 s ease-in-out; |
3 |
-moz-transition: max-height 0.25 s ease-in-out; |
4 |
transition: max-height 0.25 s ease-in-out; |
5. Add a bottom gradient to the text wrapper when collapsed.
01 |
.height-active .dynamic-wrap:before { |
08 |
background : -moz-linear-gradient( top , rgba( 240 , 249 , 255 , 0 ) 0% , rgba( 255 , 255 , 255 , 1 ) 100% ); |
09 |
background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , rgba( 240 , 249 , 255 , 0 )), color-stop( 100% , rgba( 255 , 255 , 255 , 1 ))); |
10 |
background : -webkit-linear-gradient( top , rgba( 240 , 249 , 255 , 0 ) 0% , rgba( 255 , 255 , 255 , 1 ) 100% ); |
11 |
background : -o-linear-gradient( top , rgba( 240 , 249 , 255 , 0 ) 0% , rgba( 255 , 255 , 255 , 1 ) 100% ); |
12 |
background : -ms-linear-gradient( top , rgba( 240 , 249 , 255 , 0 ) 0% , rgba( 255 , 255 , 255 , 1 ) 100% ); |
13 |
background : linear-gradient(to bottom , rgba( 240 , 249 , 255 , 0 ) 0% , rgba( 255 , 255 , 255 , 1 ) 100% ); |
14 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#00f0f9ff' , endColorstr= '#ffffff' , GradientType= 0 ); |
6. Style the read more and show less links.
1 |
.dynamic-max-height.height-active .dynamic-show-more { display : inline- block ; } |
3 |
.dynamic-max-height .dynamic-show-more { |
Change log:
2016-02-09
This awesome jQuery plugin is developed by JoanClaret. For more Advanced Usages, please check the demo page or visit the official website.