Ayan Ayan - 6 months ago 30
HTML Question

Resizing browser window doesnt activate the jQuery event until refresh is done

What I am trying to do:

1) When the browser window size is that of a mobile clicking a button would slide up and reveal a div and on clicking anywhere on the document should slide it back down thus hiding it.

2) When the browser window is anything more than that of a mobile browser width clicking of the same button should reveal that same div in a different manner(ex: fade in and fade out)

Problem

When I resize the browser to anything between 320px to 480 px and hit refresh, the sliding up works perfectly. But then when I resize the browser to more than 480px, the sliding up still happens which is not what I want.
Now if I hit refresh in that state, the event doesnt happen and also doesnt happen if I again resize it back to range of 320px to 480 px;

HTML

<div id="signup_container">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Create Password">
<button id="join" type="button">JOIN YUM YUM</button>
</div>

<div id="login_container">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<div id="forgot">Forgot Your Password?</div>
<button id="login" type="button">SIGN INTO YUM YUM</button>
</div>


CSS

#signup_container, #login_container
{
width:50%;
background-color:#FFFFFF;
overflow:hidden;
text-align:center;
border-top: 1px solid #D1D1D1;
box-shadow:0px -1px 2px #888888;
-webkit-box-shadow:0px -1px 2px #888888;
-moz-box-shadow:0px -1px 2px #888888;
opacity:0.9;
display:none;
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
{
#signup_container, #login_container
{
width:100%;
overflow:hidden;
text-align:center;
border-top: 1px solid #D1D1D1;
box-shadow:0px -1px 2px #888888;
-webkit-box-shadow:0px -1px 2px #888888;
-moz-box-shadow:0px -1px 2px #888888;
opacity:0.9;
position:absolute;
bottom:0px;
display:none;
}

#forgot
{
font-size:14px;
margin-top:4%;
}
}


JS

var isBreakPoint = function (bp) {
var bps = [320, 480, 768, 1024],
w = $(window).width(),
min, max
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0
max = bps[i]
break
}
}
return w > min && w <= max
}

// Usage
// Breakpoint between 320 and 480
if (isBreakPoint(480)) {

$(document).ready(function(){
$("#signup").click(function(){
$("#signup_container").show("slide",{direction:'down'});
});
});

}


What can be done to actively respond the browser?
NOTE There might be some question related to it but I am not sure.
Thanks in advance.

UPDATE JS

$(document).ready(function(){
$(window).resize(function(){
var currentWidth = window.innerWidth;
if(currentWidth < 320){
//code here
}
else if(currentWidth > 320 && currentWidth < 480 ){
$("#signup").click(function(){
$("#signup_container").show("slide",{direction:'down'});
});
$("#signin").click(function(){
$("#login_container").show("slide",{direction:'down'});
});

}
else if(currentWidth > 480 && currentWidth < 768){
//code here
}
else if(currentWidth > 768 && currentWidth < 1024){
//code here
}
else{
//width greater than 1024px
}
});
});


using two click function in a single group doesnt cause anything to happen.

Answer

Your javascript appears to be checking window.innerWidth but are you aware that browsers these days have the window.matchMedia method for matching media queries with javascript? The matchMedia method accepts a media query string as you would write one in CSS. You could use this straight out the box with a window resize listener or you could look at something like Nick Williams great enqirejs library to get the job done.

I've put together a simple example on jsfiddle using enquirejs with some of your code. I believe it does what you need it to - different behaviour at different breakpoints. I've used enquirejs on quite large scale projects and I've found it to be a solid solution to the issue you're facing.

JS

// Use enquirejs to listen for a media query match with matchMedia
enquire.register('screen and (max-width: 480px)', {

  match: function() {
    // remove any namespaced click event then create
    // a new listener to handle max-width: 480px clicky behaviour.
    jQuery('.reg-link').off('click.userReg');
    jQuery('.reg-link').on('click.userReg', function() {
      // create a context to the clicked link so we can reference it later
      var self = this;
      // check if the form is already open if not show it
      if (!jQuery(this).data('isOpen')) {
        // set the isOpen flag to true
        jQuery(this).data('isOpen', true);
        jQuery('#' + this.id + '_container').show("swing", function() {
          // after the animation has fired register an event handler on the body
          // to listen for all clicks.
          jQuery('body').on('click.closeOutside', function(event) {
            // if the event target isn't inside the 'open' container then we close
            // it by removing the style attribute, then we remove the body click
            if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
              // hide open form.
              jQuery('#' + self.id + '_container').removeAttr('style');
              // unbind event and remove the data flag so subsequent clicks 
              jQuery('body').off('click.closeOutside');
              jQuery(self).data('isOpen', false);
            }
          });
        });
      }

    });
    // visual aids!
    jQuery('.reg-link').css('color', 'red');
  }

  // Use enquirejs to listen for another media query match with matchMedia
}).register('screen and (min-width: 481px)', {

  match: function() {
    // remove any namespaced click event then create
    // a new listener to handle min-width: 481px clicky behaviour.
    jQuery('.reg-link').off('click.userReg');
    jQuery('.reg-link').on('click.userReg', function() {
      // create a context to the clicked link so we can reference it later
      var self = this;
      // check if the form is already open if not show it
      if (!jQuery(this).data('isOpen')) {
        // set the isOpen flag to true
        jQuery(this).data('isOpen', true);
        jQuery('#' + this.id + '_container').fadeIn("fast", function() {
          // after the animation has fired register an event handler on the body
          // to listen for all clicks.
          jQuery('body').on('click.closeOutside', function(event) {
            // if the event target isn't inside the 'open' container then we close
            // it by removing the style attribute, then we remove the body click
            if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
              // hide open form.
              jQuery('#' + self.id + '_container').removeAttr('style');
              // unbind event and remove the data flag so subsequent clicks 
              jQuery('body').off('click.closeOutside');
              jQuery(self).data('isOpen', false);
            }
          });
        });
      }

    });
    // visual aids!
    jQuery('.reg-link').css('color', 'blue');
  }

});

If you need to support IE9 or Opera 12.0 then you'll need to include a matchMedia polyfill such as Paul Irish/Scott Jehl's matchMedia polyfill. All this info is mentioned in the enquirejs docs.