jquery window resizing issue at breakpoints for responsive web design

Question

I am making a responsive website. Here is fiddle:

I've made a few effects that fire when the window width is smaller than 768px, and some other effects that fire when the winddow width is wider than 768px. All works fine, except when I manually resize the browser window and pass the 768px breakpoint, either effects are not working properly, or layout gets broken.

For example, when you scroll down, you see the '+' button appears. I've coded so menu appears when you hover '+' button in the window width wider than 768px... In the window width smaller than 768px, menu should appear only when you click '+' button.

But when you view the page in the browser window size of 1200px, for instance, and manually resize it to 600px, + button still rotates on 'hover' and sidemenu appears on several clicks--thus click event not working properly. As soon as you refresh it, it works fine. All other effects that have to do with 768px breakpoint are not working properly.

I've googlged and searched the forum and tried them but with no luck. I also tried putting if (windowsize > 768) under $(window).scroll(function () { like this:

function checkWidth() {
    var windowsize = $window.width();

    $(window).scroll(function () {
        if (windowsize > 768) {
        var clicked = false; 

          if ($(window).scrollTop() >= 80 && clicked === false) { 
              $("#headerWrap").hide().css("position","fixed")
              ...

but it did not work either. What needs to be done? I've been trying to figure this out for last two days and totally exhausted now. Any help will be greatly appreciated!

there is a lot of code and at my place nothing fires on hover. Could you please split your code down to single problems and questions? One thing could help you is the dangerous !important css attribute. It's a thing you should use as little as possible. You know css is cascading from top to bottom of your file, last lets say color added will be the color. Now jQuery is not writing in css file, it does those inline styles in the html tag which are always stronger then css styles. Now with !importantyou can overwrite inline styles. Other way would be to remove .attr('style') from JS — caramba
@caramba thank you for your reply. Could you resize the width of the jsfiddle result section to larger than 768px (it should switch to two column layout), re-run the code, and scroll down? You'll see the top menu disappears and + button appears. When you hover this button, it should rotates and the top menu reappears. Let me know if you see any effect fires on hover. — Ernie
@caramba I also stripped down my code quickly... this may still be rough but you can still see the hover-click issue. If you were viewing the result section at width wider than 768px, you see + button rotates on hover, and when you resize the window, hover event still persists and click event is not functioning properly. (you have to click a few times to have sidemenu slide in and out. here is the fiddle: jsfiddle.net/c6c99sbf/5 — Ernie

Sameer Shemna Sameer Shemna · Accepted Answer · 2014-10-04T13:38:20

You have a huge 'if else' condition, which you should modularize using functions

You have not 'unbinded' the functions you binded on the 'if' condition on the 'else' condition. So what is happening is that the functions which are bound in the 'if' condition remain bound and more functions are bound in the 'else' condition on 'window.resize' event.

Refer: http://api.jquery.com/unbind/ for details

All the best.

jquery window resizing issue at breakpoints for responsive web design

2 Answers