Conditional behaviour with $(window).width
<p>I'd like a certain mouseenter and mouseleave behavior when the window is above 1278 pixels. For widths below 1278, I want to disable this toggle behavior and just set the 2 elements to 1 state (visible &amp; active). I also have to reset the state back to default (hidden &amp; inactive) if the browser is made wider than 1278. This is what I have:</p>

<pre><code>$('section').live('mouseenter', function() {
  if ($(window).width() &gt; 1278) {
    $(this).find('menu').removeClass('hidden');
    $(this).find('div.section-wrapper').addClass('active');
  }
}).live('mouseleave', function() {
  if ($(window).width() &gt; 1278) {
    $(this).find('menu').addClass('hidden');
    $(this).find('div.section-wrapper').removeClass('active');
  }
});

$(document).ready(function() {
  $(window).bind('load resize orientationchange', function(){
    if ($(window).width() &lt; 1278) {
      $('section').find('menu').removeClass('hidden');
      $('section').find('div.section-wrapper').addClass('active');
    } else {
      $('section').find('menu').addClass('hidden');
      $('section').find('div.section-wrapper').removeClass('active');
    }
  });
});
</code></pre>

<p>It works but I'm wondering if I can do something more graceful.</p>
