laurakalbag.com JS

gistfile1.js

(function($, window, document) {

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
    var timeout;

    return function debounced() {
      var obj = this,
        args = arguments;

      function delayed() {
        if (!execAsap) func.apply(obj, args);
        timeout = null;
      }

      if (timeout) clearTimeout(timeout);
      else if (execAsap) func.apply(obj, args);

      timeout = setTimeout(delayed, threshold || 100);
    };
  };

  // smartresize
  jQuery.fn['smartresize'] = function (fn) {
    return fn ? this.on('resize', debounce(fn)) : this.trigger('smartresize');
  };

  // Add in the functions below if the browser width is less than 760px
  function slideMenu (event) {
    //Prevent the browser jump to the link anchor
    event.preventDefault();

    // Toggle menu-hidden class on body
    $('body').toggleClass('menu-hidden');

    // Slide toggle
    $('header nav div.menu-navigation-container').slideToggle('slow', function() {
      // Animation complete.
    });
  }

  function windowResized() 
  {
    // only fire our function if the viewport > 760px
    if ($(window).width() < 760) {
      // Add a classes specific to this functionality to the body
      $('body').addClass('has-slide-menu menu-hidden');

      // Add a menu toggle button
      $('header nav').prepend('<a href="#" class="menu-toggle">Menu</a>');

      // Hide the navigation menu
      $('header nav div.menu-navigation-container').hide();
    } else {
      // Remove body class of has-slide-menu and menu-hidden
      $('body').removeClass('has-slide-menu menu-hidden');

      // Remove menu-toggle button
      $('.menu-toggle').remove();

      // Show navigation
      $('header nav div.menu-navigation-container').show();
    }
  }

  // set up a window resize selector
  $(window).smartresize(function () {
    // Execute are window resized function and do some magic!
    windowResized();
  });

  // trigger the resize for the first time
  // $(window).trigger('resize');
  // Rather than trigger a resize just execute the function and it'll do the checks
    windowResized();

  // Setup the click handler so it only ever gets bound once
  $('header nav').on('click', '.menu-toggle', function (event) {
    slideMenu(event);
  });

}(jQuery, this, this.document));