├── .editorconfig ├── .gitignore ├── README.md ├── demo ├── index.html └── style.css ├── dist └── jquery.dynamicmaxheight.min.js ├── gulpfile.js ├── package.json └── src └── jquery.dynamicmaxheight.js /.editorconfig: -------------------------------------------------------------------------------- 1 | ; http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | insert_final_newline = true 7 | 8 | [*.SCSS] 9 | indent_style = space 10 | indent_size = 2 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | 15 | [*.md] 16 | indent_size = 4 17 | 18 | [node_modules/**.js] 19 | codepaint = false 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /vendor 2 | /node_modules 3 | .env 4 | /.idea/ 5 | *.sublime-project 6 | *.sublime-workspace 7 | composer.phar 8 | *.sublime-gulp.cache 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Dynamic max height plugin for jQuery 2 | ======================================== 3 | This is a jQuery plugin to dynamically check a layer height and compare it to a custom height value. 4 | 5 | [![Preview](http://joanclaret.github.io/jquery-dynamic-max-height/img/github-cover.png)](http://joanclaret.github.io/jquery-dynamic-max-height/) 6 | 7 | - Configure `max-height` via data attribute 8 | - Button appears only in if `item-height` > `max-height` 9 | - Configure "show more / show less" messages via data attributes 10 | - Animate via CSS transitions (best performance) 11 | 12 | Online demo 13 | ----------- 14 | [DEMO](http://joanclaret.github.io/jquery-dynamic-max-height) 15 | 16 | How to use? 17 | ----------- 18 | 19 | ### Javascript 20 | Include the ```jquery.dynamicmaxheight.min.js``` before your `````` tag and initialise it: 21 | 22 | ```html 23 | 24 | 27 | ``` 28 | 29 | 30 | ### HTML 31 | The plugin depends on the following HTML structure: 32 | 33 | ```html 34 |
35 |
36 |

My life fades. The vision dims. All that remains are memories. I remember a time of chaos... ruined dreams... this wasted land. But most of all, I remember The Road Warrior. The man we called "Max." To understand who he was, you have to go back to another time... when the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. Gone now... swept away. For reasons long forgotten, two mighty warrior tribes went to war, and touched off a blaze which engulfed them all. Without fuel they were nothing. They'd built a house of straw. The thundering machines sputtered and stopped. Their leaders talked and talked and talked. But nothing could stem the avalanche. Their world crumbled.

37 |
38 | 39 |
40 | ``` 41 | 42 | ### CSS 43 | Minimal CSS Rules for the plugin: 44 | 45 | ```css 46 | .dynamic-height-wrap { 47 | overflow: hidden; 48 | position: relative; 49 | transition: max-height 0.25s ease-in-out; 50 | width: 100%; 51 | } 52 | 53 | /* Bottom gradient (optional, but recommended)*/ 54 | .dynamic-height-active .dynamic-height-wrap:before { 55 | background: linear-gradient(to bottom, rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%); 56 | bottom: 0; 57 | content:''; 58 | height: 30px; 59 | left: 0; 60 | position: absolute; 61 | right: 0; 62 | z-index: 1; 63 | } 64 | 65 | .dynamic-height-active .dynamic-show-more { 66 | display: inline-block; 67 | } 68 | 69 | .dynamic-show-more { 70 | display: none; 71 | } 72 | ``` 73 | 74 | ### Options 75 | 76 | | Value|Description| 77 | | ------- |:---------------------| 78 | | **data-maxheight** | Change "data-maxheight" in each item to set a different max height value | 79 | | **data-replace-text** | Change "data-maxheight" in each button to set a custom "show less" message | 80 | 81 | 82 | VanillaJS version 83 | ------ 84 | Looking for a VanillaJS verion? Check out [pinceladasdaweb](https://github.com/pinceladasdaweb/DynamicMaxHeight)'s DynamicMaxHeight in pure Javascript. 85 | 86 | License 87 | ------- 88 | 89 | The MIT License (MIT) 90 | 91 | Copyright (c) 2015 Joan Claret 92 | 93 | Permission is hereby granted, free of charge, to any person obtaining a copy 94 | of this software and associated documentation files (the "Software"), to deal 95 | in the Software without restriction, including without limitation the rights 96 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 97 | copies of the Software, and to permit persons to whom the Software is 98 | furnished to do so, subject to the following conditions: 99 | 100 | The above copyright notice and this permission notice shall be included in 101 | all copies or substantial portions of the Software. 102 | 103 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 104 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 105 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 106 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 107 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 108 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 109 | THE SOFTWARE. 110 | 111 | Thanks 112 | ------- 113 | Many thanks to [David Panyella](https://github.com/davidpanyella) and [Òscar Casajuana](https://github.com/elboletaire) for help and inspiration. 114 | 115 | 116 | Other useful plugins 117 | --------------------- 118 | * [Maximum Characters limit warning](https://github.com/JoanClaret/max-char-limit-warning): Get a warning when the max char limit has been exceeded with a jQuery plugin 119 | * [jcSlider](http://joanclaret.github.io/jcSlider): A responsive slider jQuery plugin with CSS animations 120 | * [html5 canvas animation](http://joanclaret.github.io/html5-canvas-animation): 3D lines animation with three.js 121 | * [slide and swipe menu](http://joanclaret.github.io/slide-and-swipe-menu): A sliding swipe menu that works with touchSwipe library. 122 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic max height plugin for jQuery 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Dynamic max height plugin for jQuery with a CSS animation

17 |
18 |
19 |

20 | My life fades. The vision dims. All that remains are memories. I remember a time of chaos... ruined dreams... this wasted land. But most of all, I remember The Road Warrior. The man we called "Max." To understand who he was, you have to go back to another time... when the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. Gone now... swept away. For reasons long forgotten, two mighty warrior tribes went to war, and touched off a blaze which engulfed them all. Without fuel they were nothing. They'd built a house of straw. The thundering machines sputtered and stopped. Their leaders talked and talked and talked. But nothing could stem the avalanche. Their world crumbled. The cities exploded. A whirlwind of looting, a firestorm of fear. Men began to feed on men. On the roads it was a white line nightmare. 21 |

22 |
23 | 24 |
25 | 26 | 44 |
45 | View on github 46 | Download 47 |
48 |
49 |

Looking for a VanillaJS verion? Check out pinceladasdaweb's DynamicMaxHeight in pure Javascript

50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /demo/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Plugin styles 3 | */ 4 | 5 | .dynamic-height-wrap { 6 | overflow: hidden; 7 | position: relative; 8 | -webkit-transition: max-height 0.25s ease-in-out; 9 | -moz-transition: max-height 0.25s ease-in-out; 10 | -o-transition: max-height 0.25s ease-in-out; 11 | transition: max-height 0.25s ease-in-out; 12 | width: 100%; 13 | } 14 | 15 | /* Bottom gradient (optional, but recommended)*/ 16 | .dynamic-height-active .dynamic-height-wrap:before { 17 | background: -moz-linear-gradient(top, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); 18 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,0)), color-stop(100%,rgba(255,255,255,1))); 19 | background: -webkit-linear-gradient(top, rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%); 20 | background: -o-linear-gradient(top, rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%); 21 | background: -ms-linear-gradient(top, rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%); 22 | background: linear-gradient(to bottom, rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%); 23 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0f9ff', endColorstr='#ffffff',GradientType=0 ); 24 | bottom: 0; 25 | content:''; 26 | height: 30px; 27 | left: 0; 28 | position: absolute; 29 | right: 0; 30 | z-index: 1; 31 | } 32 | 33 | .dynamic-height-active .dynamic-show-more { 34 | display: inline-block; 35 | } 36 | .dynamic-show-more { 37 | display: none; 38 | } 39 | 40 | 41 | /** 42 | * Demo styles 43 | */ 44 | 45 | * { 46 | box-sizing: border-box; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | 51 | body { 52 | color: #2c3e50; 53 | font-family: 'Helvetica Neue','sans-serif', Arial; 54 | line-height: 1.5em; 55 | margin: 30px auto; 56 | max-width: 800px; 57 | padding: 0 20px; 58 | } 59 | 60 | a { 61 | color:#2980b9; 62 | } 63 | 64 | h1 { 65 | font-size: 28px; 66 | margin-bottom: 1em; 67 | line-height: 1.3em; 68 | } 69 | 70 | h1 span { 71 | color: #b0b0b0; 72 | font-size: .8em; 73 | font-weight: normal; 74 | } 75 | 76 | .section { 77 | margin-bottom: 30px; 78 | } 79 | pre { 80 | background: #ecf0f1; 81 | border-radius: 4px; 82 | margin: 10px 0; 83 | padding: 5px 10px; 84 | } 85 | 86 | .button { 87 | color: #fff; 88 | background: #27ae60; 89 | border: none; 90 | border-radius: 4px; 91 | font-size: 15px; 92 | outline: none; 93 | padding: 10px 20px; 94 | text-shadow: 0 1px 1px rgba(0, 0, 0, .2); 95 | } 96 | button.button{ 97 | background:#2980b9; 98 | } 99 | 100 | li { 101 | list-style: none; 102 | margin-top: 20px; 103 | } 104 | 105 | li strong { 106 | color: #27ae60; 107 | } 108 | 109 | .dynamic-height-wrap { 110 | margin-bottom: 20px; 111 | } 112 | 113 | .buttons-wrap{ 114 | display: flex; 115 | margin-top: 20px; 116 | } 117 | 118 | .button { 119 | flex: 1; 120 | text-align:center; 121 | text-decoration: none; 122 | } 123 | 124 | .button + .button{ 125 | margin-left:10px; 126 | } 127 | 128 | -------------------------------------------------------------------------------- /dist/jquery.dynamicmaxheight.min.js: -------------------------------------------------------------------------------- 1 | !function(t,i,e,n){"use strict";t.fn.dynamicMaxHeight=function(i){function e(t,i){var e;e=t.hasClass(d)?i.data("replace-text"):i.attr("title"),i.text(e)}function n(t,i){t.find("."+c).css("max-height",i)}function a(t,i){i.css("display","inline-block")}var c="dynamic-height-wrap",d="dynamic-height-active",o="js-dynamic-show-hide";return this.each(function(i,s){var h=t(s),u=h.data("maxheight"),l=h.find("."+c).outerHeight(),r=h.find("."+o);h.attr("data-itemheight",l),l>u&&(n(h,u),h.toggleClass(d),a(h,r)),r.click(function(){h.hasClass(d)?n(h,l):n(h,u),e(h,r),h.toggleClass(d)})})}}(window.jQuery||window.$,document,window),"undefined"!=typeof module&&module.exports&&(module.exports=dynamicMaxHeight); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var uglify = require('gulp-uglify'); 3 | var rename = require('gulp-rename'); 4 | 5 | gulp.task('build', function() { 6 | return gulp.src('src/jquery.dynamicmaxheight.js') 7 | .pipe(uglify()) 8 | .pipe(rename('jquery.dynamicmaxheight.min.js')) 9 | .pipe(gulp.dest('dist')); 10 | }); 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-max-height", 3 | "version": "2.0.0", 4 | "description": "Dynamic max height plugin for jQuery with CSS animation", 5 | "main": "build/jquery.dynamicmaxheight.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/JoanClaret/jquery-dynamic-max-height" 12 | }, 13 | "keywords": [ 14 | "jquery", 15 | "animation", 16 | "css", 17 | "max-height", 18 | "height", 19 | "CSS3" 20 | ], 21 | "author": "joanclaret (https://www.github.com/JoanClaret)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/JoanClaret/jquery-dynamic-max-height/issues" 25 | }, 26 | "homepage": "https://github.com/JoanClaret/jquery-dynamic-max-height", 27 | "devDependencies": { 28 | "gulp": "^3.9.1", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-uglify": "^1.5.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/jquery.dynamicmaxheight.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dynamic max height plugin for jQuery created by Joan Claret 3 | * 4 | * @copyright Copyright 2015 Joan Claret 5 | * @license MIT 6 | * @author Joan Claret 7 | * @version 1.0 8 | * 9 | * Licensed under The MIT License (MIT). 10 | * Copyright (c) 2015 Joan Claret 11 | * 12 | * Permission is hereby granted, free of charge, to any person obtaining a copy 13 | * of this software and associated documentation files (the "Software"), to deal 14 | * in the Software without restriction, including without limitation the rights 15 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | * copies of the Software, and to permit persons to whom the Software is 17 | * furnished to do so, subject to the following conditions: 18 | * 19 | * The above copyright notice and this permission notice shall be included in 20 | * all copies or substantial portions of the Software. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 24 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 25 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 26 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 27 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 28 | * THE SOFTWARE. 29 | */ 30 | 31 | 32 | ;(function($, document, window, undefined) { 33 | 34 | 'use strict'; 35 | 36 | var dynamicMaxHeight = 37 | 38 | $.fn.dynamicMaxHeight = function(selector) { 39 | 40 | // Define variable classes 41 | var dynamicHeightWrapperClass = 'dynamic-height-wrap', 42 | dynamicHeightActiveClass = 'dynamic-height-active', 43 | dynamicHeightButtonClass = 'js-dynamic-show-hide' 44 | ; 45 | 46 | return this.each(function(i, selector) { 47 | 48 | /** 49 | * Init plugin. Get max height and layer height 50 | */ 51 | var el = $(selector), 52 | itemMaxHeight = el.data('maxheight'), 53 | itemHeight = el.find('.'+dynamicHeightWrapperClass).outerHeight(), 54 | itemButton = el.find('.'+dynamicHeightButtonClass) 55 | ; 56 | 57 | el.attr("data-itemheight", itemHeight ); // store layer height as a data attribute 58 | 59 | 60 | /** 61 | * Apply max height if necessary 62 | */ 63 | if (itemHeight > itemMaxHeight){ 64 | updateHeight(el, itemMaxHeight); 65 | el.toggleClass(dynamicHeightActiveClass); 66 | showDynamicMaxHeightButton(el, itemButton); 67 | } 68 | 69 | /** 70 | * Setup "show more / show less" button 71 | */ 72 | itemButton.click(function(){ 73 | if(el.hasClass(dynamicHeightActiveClass)){ 74 | updateHeight(el, itemHeight); 75 | } 76 | else{ 77 | updateHeight(el, itemMaxHeight); 78 | } 79 | updateTextButton(el, itemButton); 80 | el.toggleClass(dynamicHeightActiveClass); 81 | }); 82 | }); 83 | 84 | function updateTextButton(el, itemButton){ 85 | var buttonText; 86 | if(el.hasClass(dynamicHeightActiveClass)){ 87 | buttonText = itemButton.data( 'replace-text' ); 88 | } 89 | else{ 90 | buttonText = itemButton.attr( 'title' ); 91 | } 92 | itemButton.text(buttonText); 93 | } 94 | 95 | function updateHeight(el, height){ 96 | el.find('.'+dynamicHeightWrapperClass).css('max-height', height); 97 | } 98 | 99 | function showDynamicMaxHeightButton(el, itemButton){ 100 | itemButton.css('display','inline-block'); 101 | } 102 | }; 103 | })(window.jQuery || window.$, document, window); 104 | 105 | 106 | /** 107 | * Export as a CommonJS module 108 | */ 109 | if (typeof module !== 'undefined' && module.exports) { 110 | module.exports = dynamicMaxHeight; 111 | } --------------------------------------------------------------------------------