Window height doesn't work on browser resize

Question

I have this chunk of code that shows a "scroll to bottom" link when the page has scroll bars, or in other words when the browser height exceeds the users desktop resolution. Anyhow it works just fine if the browser window height is larger when the page initially loads but not if I resize the window after the page loads, then it wont trigger.

Any help would be appreciated.

$(function() {
    // Check to see if window has scrollbars
        if ($(document).height() > $(window).height()) {
            $('.scrollToBottom').animate({
                opacity : 'show',
                height : 'show'
            }, 'fast');
        } else {
            $('.scrollToBottom').animate({
                opacity : 'hide',
                height : 'hide'
            }, 'fast');
        }
    // Click event to scroll to bottom
    $('.scrollToBottom').click(function() {
        $('html, body').animate({
            scrollTop : $(document).height()-$(window).height()
        }, 1500, 'easeOutQuint');
        return false;
    });
});

Why would it? It's not inside anything that would make that logic repeat. Can you elaborate on why you think it would repeat? — Taplar, Feb 19 '18 at 16:08
Possible duplicate of [How to call a function in jQuery on window resize?](https://stackoverflow.com/questions/10312696/how-to-call-a-function-in-jquery-on-window-resize) — Turnip, Feb 19 '18 at 16:10
A better dupe: https://stackoverflow.com/questions/9828831/jquery-on-window-resize/9828919 — Turnip, Feb 19 '18 at 16:13
I'd still like to get some feedback from the OP as to why they thought it would repeat, so we can clear up some confusion for them. — Taplar, Feb 19 '18 at 16:14
I assumed as long as this was the case: if ($(document).height() > $(window).height()) it would trigger. I wasn't aware that .resize was a listener that existed. — zemaker, Feb 19 '18 at 16:20
Javascript, unless you write it otherwise, does not implicitly repeat. If code implicitly repeated, coding in javascript would be a nightmare. This is why constructs such as loops and event handlers exist. Just keep that in mind. @zemaker — Taplar, Feb 19 '18 at 16:25

SimplePixels · Accepted Answer · 2018-02-19T16:15:49.197

1

This is because there is no "trigger" for it.

See this statement $(function() { .// code }) as when the document is ready, execute code.

What you need is another trigger for when the browser resizes:

$(window).resize(function (){
  if ($(document).height() > $(window).height()) {
    $('.scrollToBottom').animate({
        opacity : 'show',
        height : 'show'
    }, 'fast');
  } else {
      $('.scrollToBottom').animate({
          opacity : 'hide',
          height : 'hide'
      }, 'fast');
  }
})

And since you don't want to repeat yourself ou should write a function and call it inside these "triggers".

function showBar() {
  if ($(document).height() > $(window).height()) {
    $('.scrollToBottom').animate({
        opacity : 'show',
        height : 'show'
    }, 'fast');
  } else {
      $('.scrollToBottom').animate({
          opacity : 'hide',
          height : 'hide'
      }, 'fast');
  }
}

$(window).resize(function (){
  showBar();
})

$(function() {
  showBar();
})

These triggers are called events. For reference: https://developer.mozilla.org/en-US/docs/Web/Events

edited Feb 19 '18 at 16:15

answered Feb 19 '18 at 16:12

SimplePixels

147
5

awesome, had no idea about .resize being a thing. That did it, thanks! – zemaker Feb 19 '18 at 16:15
No problem, here are all events jquery has listeners for: https://api.jquery.com/category/events/ – SimplePixels Feb 19 '18 at 16:16
there is a issue to your original solution, it only triggers if I do a window resize, otherwise the scroll button doesn't show. – zemaker Feb 19 '18 at 16:46
Exactly! That's kind of the point. You execute the code on window resize. In the second example I put the same code in both events with a function. "showBar();" – SimplePixels Feb 20 '18 at 15:49

Window height doesn't work on browser resize

1 Answers1