Geek Answers Handbook

Problem resizing jQuery windows at breakpoints for responsive web design

I am making a responsive website. Here is the fiddle:

http://jsfiddle.net/c6c99sbf/4/

I made several effects that fire when the width of the window is less than 768 pixels, and some other effects that fire when the width of the wind window is more than 768 pixels. Everything works fine, except when I manually resize the browser window and skip the 768px breakpoint, or the effects do not work properly, or the layout breaks.

For example, when scrolling down, you will see a + button. I encoded this menu when you hover the "+" button in the width of the window with a width of more than 768 pixels ... In the width of the window less than 768 pixels, the menu should appear only when the "+" button is pressed.

But when you view a page in a browser window of 1200 pixels, for example, and manually resize it to 600 pixels, the + button still rotates to "hover" and sidemenu appears for a few clicks - thus, the click event does not work properly . Once you update it, everything will be fine. All other effects associated with the 768px breakpoint do not work correctly.

I googlged and searched the forum and tried them, but no luck. I also tried putting if (windowsize> 768) in $ (window) .scroll (function () {for example:

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 that didn't work either. What should be done? I have been trying to figure this out for the last two days and am completely exhausted. Any help would be greatly appreciated!

+4
2

if if else,

" " , "" "else". , , , , "if", "else" window.resize.

. http://api.jquery.com/unbind/

.

0

, css media queries

0

More articles:


All Articles