CODEWITHSUNDEEP
javascriptjqueryresponsive-designtogglethis
EoghanTadhg
EoghanTadhg

Reputation: 522

Reset a toggled function upon passing a browser width with jQuery

I've created a custom jquery panel expander, of which I have successfully configured to operate in all browser widths.

The trouble is that the function has some if/elses regarding browser width: which all work correctly until you interact with the panels and then begin to resize your browser past the "break points," for lack of a better phrase.

What I would like to do ideally; is completely deactivate any active elements and reset the toggle upon passing the 690px browser width.

Here is my current jQuery in place, which I have simplified for readability:

var action = 1;

$( document ).ready(function() {
  $("div.panel-left, div.panel-right").on("click", promoAnimation);
});

function promoAnimation() {
  var parentPromo = $(this);
  var wi = $(window).width();
  if ( action == 1 ) {
      //Assorted animations to open panel
      if (wi < 691){
          //Assorted animations for mobile view
      }
      else{
          //Assorted animations for desktop
      }
      action = 2;
  }
  else {
      if (wi < 691){
          //Assorted animations to close the panel on mobile
      }
      else{
         //Assorted animations to close the panel on desktop
      }
      action = 1;
   }
}

So I've learned one cannot simply run a function while passing the window width of 690 alone, as it does not register until you physically stop resizing the browser. (Which is more than likely not going to land on 690 exactly.)

In addition, to make things more complicated, using $(this) within the promoAnimation function, referring to either div.panel-left or div.panel-right: I could not figure out a way to run this function again in an outside function where $(this) is not defined.

Again, to reiterate and in lay terms: I'd like to write a new function which states: When 690px browser width is passed on screen resize, do the following:

Clear all style attributes; Always Run the ELSE section of the promoAnimation function on both div.panel-left & div.panel-right; Which will then inturn reset our action to equal 1.

Upvotes: 2

Views: 443

Answers (1)

Ludovic Guillaume
Ludovic Guillaume

Reputation: 3287

This should work...

$(document).ready(function() {
    $(window).resize(function() {
        if ($(this).width() <= 690) {
            // clear style
        }
        else {
            // do something ?
        }
    });

    // uncomment if needed
    //$(window).resize();
});

jsfiddle : http://jsfiddle.net/LaS6T/

Resize the vertical bar to view the result.

Upvotes: 1

Related Questions