title: jQuery trigger function above a certain window width
body: <p>I'm having a lot of problems with some jQuery I'm trying to write. I need one function to be available all the time, and one function to be available when the users window is greater than a set width. Here are my functions, both running in <code>jQuery(document).ready(function($){</code></p>
  
  <p>Function for drop down menus, should only happen when the window is larger than set amount;</p>
  
  <pre><code>//the dropdown code for desktop users
  function largeDropDown(){
      $('#nav ul li').hover(
      //open
      function(){ $(this).find('ul').stop().slideDown(300); },
      //close
      function(){ $(this).find('ul').stop().slideUp(300); }
      );
  }
  </code></pre>
  
  <p>And this one is available all the time, although it would be nice to know how to make this one conditional to the screen size also. </p>
  
  <pre><code>//the dropdown code for smaller screens
  $('a.menu_trigger').click(openMenu);
  function openMenu(e){
      e.preventDefault();
      if($(this).next('ul').hasClass('open_menu')){
          $(this).next('ul').slideUp(300).removeClass('open_menu');
          $(this).html("&amp;darr;");
      } else {
          $(this).next('ul').slideDown(300).addClass('open_menu');
          $(this).html("&amp;uarr;");
      }
  
  }
  </code></pre>
  
  <p>Using CSS media queries, the <code>a.menu_trigger</code> is hidden when the window is over 768px. That way the jQuery won't do anything (at least that's my attempt at getting this to work!)</p>
  
  <p>So, I'd like to know how to make the first function work above 768px, and also how to call this functionality on a window resize. Any help would be great! Thanks. </p>