JS breaking on window resize

Question

I have a website where I am using two different logos on scroll, but I use only one if the screen is less than 1024px.

Everything works as expected, except on screen resize that this breaks. It doesn't show any of the logos on the header, but if I refresh the page, it works...

This is my code:

HTML

<div class="container clearfix" >
      <h2 id="logo"><a rel="home" href="#">LOGO ONE</a></h2>
      <h2 id="logo2"><a rel="home" href="#"><span>LOGO</span> <br/>TWO</a></h2>
</div>

JS

$(document).ready(function() {
    //Main menu animation
    $(function () {
    if($(window).width() >= 1023){
        var targetOffset = $("#section--4").offset().top;
        var $w = $(window).scroll(function() {
        if ( $w.scrollTop() + 200 > targetOffset ) {   
            $("#logo").fadeIn(1000);
            $("#logo2").fadeOut('slow');
            $("header").css({"overflow": "hidden"});
        } else {
            $("#logo2").fadeIn(2000)
            $("#logo").fadeOut('slow');
            $("header").css({"overflow": "visible"});
        }
    });
    }
});

You might want to set a minimum width and height for your page — Laazo, Jun 20 '17 at 08:45

score 2 · Answer 1 · answered Jun 20 '17 at 08:48

2

Just use @media screen and (min-width: 1024) { logo { display: none; }} to hide your logo. You don't need JS to handle visible depending on with. Also you can do this object.addEventListener("resize", myScript);

answered Jun 20 '17 at 08:48

Sergey

7,184
13
42
85

How do you want me to use object.addEventListener("resize", myScript); ? – patie Jun 20 '17 at 09:01

Chiller · Answer 2 · 2017-06-20T09:17:05.603

You need to fire the event on window resize and run your code, what you did is just run the code on page load

$(window).on('resize', function() {
  // call your function here
});

See code snippet:

function myfunction() {
  if ($(window).width() >= 1023) {
    var targetOffset = $("#section--4").offset().top;
    var $w = $(window).scroll(function() {
      if ($w.scrollTop() + 200 > targetOffset) {
        $("#logo").fadeIn(1000);
        $("#logo2").fadeOut('slow');
        $("header").css({
          "overflow": "hidden"
        });
      } else {
        $("#logo2").fadeIn(2000)
        $("#logo").fadeOut('slow');
        $("header").css({
          "overflow": "visible"
        });
      }
    });
  }
};

$(document).ready(function() {
  myfunction();
});
$(window).on('resize', function() {
  myfunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container clearfix">
  <h2 id="logo"><a rel="home" href="#">LOGO ONE</a></h2>
  <h2 id="logo2"><a rel="home" href="#"><span>LOGO</span> <br/>TWO</a></h2>
</div>

I modified $(document).ready(function() with your code, but it breaks the website... — patie, Jun 20 '17 at 09:02

score 0 · Answer 3 · answered Jun 20 '17 at 08:51

This is because the code that deals with window width is called before scroll meaning that when the window resizes the logo will remain the same until the pages I refreshed in the browser and the code is reloaded. To fix this use jQuery's $(element).resize() handler to fix this. Another solution is to use ccs media queries with a max-width of 1024px

Documentation links

https://api.jquery.com/resize/

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

score 0 · Accepted Answer · answered Jun 20 '17 at 08:53

The JS code you currently have, will only be triggered when the page is loaded, since you're using

$(document).ready(function() {
    //Main menu animation
});

jQuery has the .resize() event handler, which will trigger when the browser window is resized, so I suggest using the following code, if you really want to stick with a JS solution. Although I find the usage of media queries in this specific situation a lot better/smoother:

$( window ).resize(function() {
   //Main menu animation
   $(function () {
    if($(window).width() >= 1023){
       var targetOffset = $("#section--4").offset().top;
       var $w = $(window).scroll(function() {
       if ( $w.scrollTop() + 200 > targetOffset ) {   
         $("#logo").fadeIn(1000);
         $("#logo2").fadeOut('slow');
         $("header").css({"overflow": "hidden"});
       } else {
         $("#logo2").fadeIn(2000)
         $("#logo").fadeOut('slow');
         $("header").css({"overflow": "visible"});
       }
    });
   }
});

Hope it can help you

I can't debug the code entirely, because the selector you use in your code `$("#section--4")` will not be found since it is not in your HTML code. — kevin b., Jun 20 '17 at 09:16

score 0 · Answer 5 · answered Jun 20 '17 at 08:56

0

I can't stress enough how much you should be doing this with media queries as Sergey suggests.

It can be done with JS and event handlers, but CSS @media queries will be your friend here.

answered Jun 20 '17 at 08:56

DMcCallum83

498
3
13

I already tried with media queries and it didn't work, that's why I had to do it with jQuery... – patie Jun 20 '17 at 09:00
If it isn't working with media queries then something's wrong. `@media only screen and (max-device-width : 1024px)` – DMcCallum83 Jun 22 '17 at 12:07

score 0 · Answer 6 · answered Jun 20 '17 at 09:04

0

You may need to listen to the resize jQuery event if you want to respond to window resize.

That said, my suggestion is to manage it in css using media queries. To do that, have a look at this answer: @media queries and image swapping

answered Jun 20 '17 at 09:04

salvatore

511
4
11

JS breaking on window resize

6 Answers6