Expanding content of a div with fixed height
I have the following requirement for a component:
For a container containing some html / text, if the content reaches the specified height (example: 175px) the following must be done:
- Text truncated to fit 175px height
- at the clipping point, add "... Advanced" (this should still match the height of 175 pixels)
- Clicking larger should expand the content to full size.
And it should run in all browsers (including IE)
I've tried several libraries:
readmore.js ( http://jedfoster.com/Readmore.js/ ) - This closes me up, but the "more" link is added as an extra div after the main content div, not at the end of the text breakpoint.
clamp.js ( https://github.com/josephschmitt/Clamp.js/ ) - This adds a "..." at a given height, but does not add a clickable link that can expand and has problems launching in IE
dotdotdot jQuery plugin - same problem as Clamp
What are my options for doing something like this? Is there a way to avoid font / pixel math?
source to share
I created a working solution for what you are trying to accomplish. Check out my fiddle here: https://jsfiddle.net/akm1essL/5/ .
Js
var container = document.getElementById('container');
var myText = container.getElementsByClassName('text-content')[0];
var spanEl = myText.childNodes[0];
var originalStr = myText.textContent.toString();
var truncatedStr;
// create the "More button" to be appended
var moreButton = document.createElement('span');
moreButton.setAttribute('class', 'readMore');
moreButton.setAttribute('id', 'moreButton');
checkHeight();
function checkHeight() {
var maxHeight = 170;
if (myText.clientHeight > maxHeight) {
truncate();
}
}
function truncate() {
var str, hasButton;
if (!hasButton) {
myText.appendChild(moreButton);
setButton("more");
hasButton = true;
}
str = myText.textContent;
truncatedStr = str.slice(0, str.lastIndexOf(' '));
spanEl.textContent = truncatedStr;
checkHeight(myText.clientHeight);
}
function showFull() {
spanEl.textContent = originalStr;
setButton();
}
function showTruncated() {
spanEl.textContent = truncatedStr;
setButton("more");
}
function setButton(display) {
var btn = document.getElementById("moreButton");
if (display === "more") {
btn.textContent = "...More";
btn.addEventListener("click", showFull);
btn.removeEventListener("click", showTruncated);
} else {
btn.textContent = "...Less";
btn.removeEventListener("click", showFull);
btn.addEventListener("click", showTruncated);
hasButton = false;
}
}
To shorten the text, this solution first checks the height of the content, then runs the truncate () function and truncates the text one word at a time from the end until it meets the maximum height. If the text you have to shorten ends in 10,000 words, that's not the best approach, but I'm not sure about your use case.
Html
<div id="container">
<p class="text-content">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam suscipit, labore nemo distinctio incidunt laboriosam, est inventore totam voluptatem explicabo unde eius et. Provident harum, dolor tempora, aut consectetur excepturi. Dolorem aperiam distinctio ratione quam saepe eius ex, quasi, corporis molestias at laborum commodi, quis voluptatum possimus temporibus. Earum quis, et laudantium labore maxime fuga numquam explicabo!</span>
</p>
</div>
Also I tested it in IE9, 10, Chrome and FF and it works for everyone.
source to share