Call (Trigger) a JS function on Y overflow of div element

Question

So, I have a <div> element, which has word wrap, but overflow-y has been set to hidden (which is what I need).

But let's say that the <div> is so full of text, that it overflows and in result - the rest of the text is hidden (which is fine).

But I want to achieve the following effect: when and only when the box is overflowing in y direction, I want it to display some text, saying: "Click to display the rest". I know how to make the "Click to display the rest" part, but what I don't know is how to display the text only when the box is overflowing in y direction.

Quick sidenote: I read Calling JavaScript from function from CSS. I had the idea that on overflow-y it would call a function, but that proved to be impossible. So I am looking for another solution.

My <div> element:

<div style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;">

So, the overview of the problem: I need to display "Click here do see the rest" when the div is overflowing in y direction.

Thank you in advance

thepio · Answer 1 · 2016-08-30T10:56:22.013

Your basic idea could be to check if the div is overflowing and show the button accordingly. Please note that this is really basic demo. You would be better off toggling a class on the button depending on if it's overflowing or not etc.

var popup = document.getElementById('popup');
var button = document.getElementById('showmore');

var isOverflowing = isOverflowed(popup);

console.log('is the div overflowing? ' + isOverflowing);

if (isOverflowing) {
  button.style.display = 'block';
} else {
  button.style.display = 'none';
}

function isOverflowed(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

function displayRest() {
  popup.style.height = 'auto';
  button.style.display = 'none';
}

html, body {
  margin: 10px 0 20px 0;
}

.popup {
  width: 400px;
  height: 270px;
  overflow: hidden;
  border: 1px solid black;
  margin: 0 auto;
  padding: 0;
}
.showmore {
  background-color: red;
  color: white;
  padding: 10px 15px;
  display: none;
  margin: 10px auto 0 auto;
}

<div id="popup" class="popup">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button type="button" id="showmore" class="showmore" onclick="displayRest()">
  Click to display the rest
</button>

score 0 · Answer 2 · answered Aug 30 '16 at 10:45

you can use the following function to count the number of lines you have:

var divHeight = $('div.use-overflow').height();
var x = ('div.use-overflow').css('line-height');
lineHeight = parseInt(x); // Returns clean line-height
var lines = divHeight / lineHeight; // Returns number of lines

And then simply use an if statement to either show or hide the read more button depending on how many lines the paragraph has. Something like this:

if(lines > 4){
  $('.readmore').show();
}else{
  $('.readmore').hide();
}

nice idea using number of lines, a word count would be better tho' — Subomi, Aug 30 '16 at 11:02

score 0 · Answer 3 · answered Aug 30 '16 at 10:59

Your div (added id):

<div id="overflow" style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;">

There are no event Handlers for such; that am aware of, but there is trick, you can do a word count and then fire the event e.g

$(document).ready(function() {
    var overflowText = document.getElementById("overflow").innerHTML;
    var TextLength = overflowText.length
    if(TextLength >= 100) {
       // emit event
    }
})

Call (Trigger) a JS function on Y overflow of div element

3 Answers3