0

I have a content area that has controls as the footer. The controls always sit below the content area. When the content area is longer than the window.innerHeight I want to pin (position: fixed) the footer to the bottom of the window, so the controls are always visible. If the content area is less then the window height then it sits under it again (position: relative).

I think I have achieved this when the window is resized. However I also want to listen for the #content div as it contains a textarea which can get longer than the window when the user types in it. I need some kind of event listener for this too.

window.addEventListener('resize', function() {
    var viewportHeight = window.innerHeight
    var contentHeight = document.getElementById('content').clientHeight;
    if (contentHeight > viewportHeight) {
        console.log('Larger')
    } else {
        console.log('Smaller')
    }
}, true)

I'm using Vue.js so either this or native Javascript, I'm not using jQuery.

Jack Barham
  • 3,197
  • 10
  • 41
  • 62

1 Answers1

0

Well it's not that easy. Since I don't know Vue.js I can only tell you about native JS solutions - there are two ways:
1) If the content changes only on some particular actions eg. user editing textarea, then you can attach your height checker function to the corresponding event(s).
2) The more general solution would be to set function which will watch for changes continuously like setInterval or requestAnimationFrame.

First example is better from performance point of view but might be harder to implement, it depends on how many things can change size of your content.

ri0ter
  • 61
  • 5
  • Thanks, I'm reading https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval but it's not making a huge amount of sense to me. Would you have a very basic example, or guide to point me in the right direction? – Jack Barham Feb 27 '16 at 20:41
  • 1
    Just take out your function from window resize and use it in a `setInterval`. Here's a very basic example: http://stackoverflow.com/a/5484273/5572186 – ri0ter Feb 27 '16 at 21:03