If window width doesn't work on resize

Question

I've created a function that has to run only if the window is wider than 769px. It works when the page loads, but not on resize...

It looks like this:

$(window).on('load resize', function () {
    if ($(window).width() >= 769) {
       ...funcion...
    }
});

EDITED:

Full code below

$(window).on('load resize', function () {
    if ($(window).width() >= 769) {
      var $element = $('#cont_quote');
      var $follow = $element.find('.img_quote');
      var followHeight = $element.find('.img_quote').outerHeight();
      var height = $element.outerHeight() - 300;
      var window_height = $(window).height();

      $(window).scroll(function () {
        var pos = $(window).scrollTop();
        var top = $element.offset().top;

        // Check if element is above or totally below viewport
        if (top + height - followHeight < pos || top > pos + window_height) {
          return;
        }

        var offset = parseInt($(window).scrollTop() - top);

        if (offset > 0) {
        $follow.css('transform', 'translateY('+ offset +'px)');
        }

      })
    }
});

HTML:

<section id="cont_quote">
    <article class="cont_q">
        Lorem ipsum 
        <img class="img_quote" src="img">
    </article>
</section>

@Hackerman thank you for answering, but that doesn't clarify my question... It doesn't say what I am doing wrong — Marco, Apr 24 '18 at 11:55
You need to either...use the `resize` jquery version, like `$( window ).resize(function() {});`, or the vanilla javascript version, with `window.addEventListener('resize', function() { });` — Hackerman, Apr 24 '18 at 11:57
@Hackerman that's not true, read your own link. `.resize()` is a shortcut for `on('resize'..` which woks just fine — charlietfl, Apr 24 '18 at 12:06
Possible duplicate of [JavaScript window resize event](https://stackoverflow.com/questions/641857/javascript-window-resize-event) — vitr, Apr 24 '18 at 12:09
Try to reproduce your issue in a working example, and share it with us — SilverSurfer, Apr 24 '18 at 12:21
@SilverSurfer added the whole code to the question. Beside your answers, I can't manage to make it work — Marco, Apr 24 '18 at 13:41

score 1 · Answer 1 · answered Apr 24 '18 at 11:56

1

Try something like this:

$(document).ready(function(){
  $(window).resize(function(){
    if ($(window).width() >= 769) {
       ...funcion...
    }
  }
}

You can change on ready or on load, depending on what you need, but the the function should trigger on window resize.

answered Apr 24 '18 at 11:56

David Major

86
4

`.resize()` is simply a shortcut for `on('resize'...` no reason this would change anything – charlietfl Apr 24 '18 at 12:03
And it's not, writing it in Jquery didn't change anything, compare this code with what he wrote and you'll see why his resize event wasn't triggered. – David Major Apr 24 '18 at 12:14
1

OP's code works fine here https://jsfiddle.net/vra13358/ So no idea what you mean by *"will see why it's not working"* since it does work – charlietfl Apr 24 '18 at 12:17
Then it's my bad, should have tested his code first rather than assume it didn't work. Tho is it a good practice to bind resize event with load on the same function especially if you are planning to have some more stuff happening on window load only? – David Major Apr 24 '18 at 12:26
As for good practice that is unclear from the limited snippet shown. Combining multiple events to use same handler is not unusual though. Note you also don't need `$(document).ready` since `window` always exists – charlietfl Apr 24 '18 at 12:28

v8-E · Answer 2 · 2018-04-24T12:51:04.810

I think you can try this solution this is just javaScript

    var onWindowResize = function(e) {
           width = e.target.outerWidth;
           //uncomment if need height = e.target.outerHeight;
           if(width >= 769) {

               //remove alert just added for debug
               alert("if");
        }
           else{
             //remove alert
               alert("else");
               }
           }
        window.addEventListener("resize", onWindowResize);

If window width doesn't work on resize

2 Answers2