jQuery resizing issue

Question

I'm doing a simple animation if the screen width is > 800px and don't do nothing (just stay with the default css) if it's < 800, the problems are:

with window width > 800: I refresh the page it doesn't do the animation unless i resize a little to trigger the resize function.
with window < 800: if i had done the animation ( > 800px) and then resize to <800 the animation still goes on instead of just respect the css and nothing more. Any tips?

JS:

  $(document).ready(function () {
      $(window).resize(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          } else {}
      })
  })

HTML:

<html lang="en" />
<head>
    <meta charset="UTF-8">
    <title>Intertrafego - Quem Somos</title>
    <link rel="stylesheet" href="css/navBar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/stylesAboutUs.css">
    <meta name="viewport" content="width=width-device, initial-scale=1.0" />
</head>
<body data-stellar-background-ratio="0.2">
    <div id="upBar"></div>
    <div id="middleBar"></div>
    <div id="middleImg"></div>
    <div id="missValBar"></div>
    <div id="wrapper">
        <header>
            <nav>   <a href="index.html"><img id="logo" src="imgs/logo.png"></a>
    <a href="quem_somos.html"><div id="langMobile">EN<br>&#8595;<br>Pt</div></a>

                <div id="btnMobile">
                    <img src="imgs/mobileBtn.jpg">
                </div>
                <ul>
                    <li id="lang"><a id="PT" href="quem_somos.html">PT</a> / <a id="EN" href="#">EN</a>

                    </li>   <a href="news.html"><li>News</li></a>
    <a href="logistics.html"><li>Logistics</li></a>
    <a href="services.html"><li>Services</li></a>
    <a href="#"><li>About Us</li></a>

                </ul>
            </nav>
        </header>

If you don't have to support older browsers, I recommend you to use CSS 3 Media Queries and Transitions. But your solution is not working as you expect it because `$(window).resize` is only triggered if the window is resized. So that's why when you refresh the page, you no longer see the animation. Also jQuery's animate method, if I remember correctly, uses inline styles (e.g. `...` to resize elements). — Behrang, Feb 23 '14 at 11:05

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

FIDDLE

$(document).ready(function () {
    doAnnimation();
    $(window).resize(function () {
        $('#upBar').off('mouseenter mouseleave', annimateNav);
        doAnnimation();
    });
});

function doAnnimation() {
    if ($(window).width() > 800) {
        $('#upBar').on('mouseenter mouseleave', annimateNav);
    }
}

function annimateNav() {
    var height = '60px';
    if( $('#upBar').hasClass('animating') ) {
        height = '45px';
    }
    $('#upBar').toggleClass('animating').stop(true).animate({
        height: height
    }, 200);
}

I'll recommend that you have a look at this question in order to handle resize events efficiently.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 23 '14 at 11:03

Lucky Soni

6,811
3
38
57

Why there is a need to separate that code into a separate method then calling on `resize` event? I don't find difference. – Praveen Feb 23 '14 at 11:06
@Praveen because he wants to call the same functionality more than once.. once on page load and then on each subsequent resize event. – Lucky Soni Feb 23 '14 at 11:07
don't i need the empty else as well? – Miguel Feb 23 '14 at 11:08
@user3162303 no you don't – Lucky Soni Feb 23 '14 at 11:08
you **need** else statement on resize event because if you don't unbind those events you attached, you can't get rid of them on smaller widths. check my answer. – Volkan Ulukut Feb 23 '14 at 11:10
The problem number 2 still happens – Miguel Feb 23 '14 at 11:12
I really would rather not edit the css file (add class) is that possible? sry for you trouble. Thanks – Miguel Feb 23 '14 at 11:51
@user3162303 you don't have to edit the css file.. just try this.. no need to edit the css file at all. – Lucky Soni Feb 23 '14 at 11:52
There must be an error somewhere, i can't find it, it isn't doing anything – Miguel Feb 23 '14 at 12:01
@user3162303 Check now – Lucky Soni Feb 23 '14 at 13:15

Volkan Ulukut · Answer 2 · 2014-02-23T11:28:36.600

0

IF your page is started with > 800 the events are attached and never unbinds. you should add unbinds to else statement. this is how it looks JSFiddle:

else {
    $('#upBar, nav').unbind("hover");
    $('#upBar, nav').unbind("mouseleave");
}

also you need to run the code on document ready as well

$(document).ready(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          }
  })

edited Feb 23 '14 at 11:28

answered Feb 23 '14 at 11:04

Volkan Ulukut

4,230
1
20
38

Something must be wrong. i'm just implemented the unbinds on the 'else' and it doesn't do anything, don't know why – Miguel Feb 23 '14 at 11:18
added JSFiddle link for implementation – Volkan Ulukut Feb 23 '14 at 11:28
Better, thanks, however the problem 2. still happens, the mouseleave animations atributes stay until i hover it at least once on window width < 800 – Miguel Feb 23 '14 at 11:35
can you update your code to reflect what you have done so far? – Volkan Ulukut Feb 23 '14 at 11:50
i really didn't change anything, however the closest solution it was your anwser so far, the jsfiddle you did – Miguel Feb 23 '14 at 11:58
did you add the else statement, the unbind commands on window.resize function? – Volkan Ulukut Feb 23 '14 at 12:01
Yap actuly i copied and paste it. i also tried to unbind just the mouseleave (since coincidently with css's what i want is the hover atributes to stay), but it has the little problem i told you above – Miguel Feb 23 '14 at 12:09
The prob 2. is happening until i hover it. better indeed – Miguel Feb 23 '14 at 12:15
maybe you should manually run the code in one of those events once the page is resized. since i don't know your css and how it looks in a web page, i can't speculate more. do you have this page up and running in a server? – Volkan Ulukut Feb 23 '14 at 12:19
No, i can put it tomorow thou. Can i send you a message when it's online? – Miguel Feb 23 '14 at 12:21
sure just comment here. – Volkan Ulukut Feb 23 '14 at 12:25
Hello Volkan you there?... I just uploaded the files on http://www.datafilehost.com/d/7e145bbc , i'm working on about Us/quem somos page. As you can see the animation when width > 800 works fine but when is < 800 i would like it to have the behavior of the index page nothing more nothing less, on resize and on refresh, and it seens after the animation a resize to < 800 it isn't respecting the media queries on navBar.css don't know why. sorry for the trouble and thanks very much – Miguel Feb 24 '14 at 10:21

Struchu · Answer 3 · 2014-02-23T18:03:24.990

0

First: to trigger resize event simply call resize after setting up a handler:

Second: to stop animation from taking place when the screen is smaller remove the event handlers using jQuery's .off method called in resize handler.

The whole code would look something like this:

$(document).ready(function () {
  var hoverHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '60px'
      }, 200);
  };

  var mouseleaveHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '45px'
      }, 200);
  };

  var handlersAdded = false;               // this prevents from multiple event binds

  $(window).resize(function () {
      var $hoverTarget = $('#upBar, nav');

      if ($(window).width() > 800) {
          if(!handlersAdded) {
              $hoverTarget.hover(hoverHandler)
                  .mouseleave(mouseleaveHandler);

              handlersAdded = true;
          }
      } else {
          $hoverTarget.off('hover', hoverHandler)
              .off('mouseleave', mouseleaveHandler);

          $('#upBar, ul nav').stop(true).removeAttr('style');

          handlersAdded = false;
     }
  }).resize();
});

edited Feb 23 '14 at 18:03

answered Feb 23 '14 at 11:05

Struchu

76
2
8

As soon as I get to PC. I am on my mobile now and it's not so convenient to post code from here ;-) – Struchu Feb 23 '14 at 11:19
Better, thanks, however the problem 2. still happens differently, the mouseleave animations atributes stay until i hover it at least once on window width < 800. i will put it online tomorow as a test and you can check out. Tanks very much for anwser, you didn't forget cheers – Miguel Feb 23 '14 at 17:43
Ok, I might have solution to this problem. In else statement of resize function call .removeAttr('style') on the animated element. I will update my answer soon. – Struchu Feb 23 '14 at 17:59
Thanks best solution yet, althou now it isn't respecting the media queries for screen < 800 if i resize from > 800. if you don't mind we can think of an way for me to send you the files, so you can see exactly what i'm talking about – Miguel Feb 23 '14 at 18:39
Please upload your files to some filehosting and post the URL here - I'll take a look. – Struchu Feb 24 '14 at 06:23
Hello Struchu i just upload it. thanks for your trouble the link is http://www.datafilehost.com/d/7e145bbc , i'm working on quem somos/about us page. As you can see the animation when width > 800 works fine but when is < 800 i would like it to have the behavior of the index page nothing more nothing less, on resize and on refresh, and it seens after the animation and a resize to < 800 it isn't respecting the media queries for the ul on navBar.css don't know why. sorry for the trouble and thanks very much – Miguel Feb 24 '14 at 10:25

jQuery resizing issue

3 Answers3