diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js
index d33dd9e..44fd758 100644
--- a/includes/js/theme-jquery.js
+++ b/includes/js/theme-jquery.js
@@ -35,115 +35,115 @@ jQuery( document ).ready( function( $ ) {
$( '.site-header .title-area' ).after( '' );
$( '.site-header .widget-area, .nav-primary' ).each( function( i ) {
- // Store target
- $target = $( this );
+ // Store target
+ $target = $( this );
- // Scope variables
- var $target, buttonClass, targetClass;
+ // Scope variables
+ var $target, buttonClass, targetClass;
- // Setup classes
- buttonClass = 'toggle-button';
- targetClass = $target.attr( 'class' ).split( /\s+/ );
+ // Setup classes
+ buttonClass = 'toggle-button';
+ targetClass = $target.attr( 'class' ).split( /\s+/ );
- // Add targets-[] class to buttonClass
- $.each( targetClass, function( index, value ) {
- buttonClass += ' targets-' + value;
- });
+ // Add targets-[] class to buttonClass
+ $.each( targetClass, function( index, value ) {
+ buttonClass += ' targets-' + value;
+ });
- // Add nav-toggle class to buttonClass if the button is for the nav
- if ( $target.is( 'nav' ) ) {
- buttonClass += ' nav-toggle';
- }
+ // Add nav-toggle class to buttonClass if the button is for the nav
+ if ( $target.is( 'nav' ) ) {
+ buttonClass += ' nav-toggle';
+ }
- // Add toggle buttons to header
- $( '.toggle-buttons' ).prepend( 'Toggle' );
+ // Add toggle buttons to header
+ $( '.toggle-buttons' ).prepend( 'Toggle' );
- // Add target class to nav and widget areas
- $target.addClass( 'toggle-target-' + i );
- });
+ // Add target class to nav and widget areas
+ $target.addClass( 'toggle-target-' + i );
+ });
- // Toggle widget areas and primary nav
- $( '.site-header .toggle-button' ).click( function( event ) {
+ // Toggle widget areas and primary nav
+ $( '.site-header .toggle-button' ).click( function( event ) {
- // Prevent default behavior
- event.preventDefault();
+ // Prevent default behavior
+ event.preventDefault();
- // Scope our variables
- var $button, $target;
+ // Scope our variables
+ var $button, $target;
- // Get toggle button that was clicked
- $button = $( this );
+ // Get toggle button that was clicked
+ $button = $( this );
- //Remove focus
- $button.blur();
+ //Remove focus
+ $button.blur();
- // Match the button to the right target
- $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) );
+ // Match the button to the right target
+ $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) );
- // Toggle buttons
- $button.toggleClass( 'open' );
- $( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' );
+ // Toggle buttons
+ $button.toggleClass( 'open' );
+ $( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' );
- // Toggle targets
- $target.toggleClass( 'open' );
- $( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' );
- });
+ // Toggle targets
+ $target.toggleClass( 'open' );
+ $( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' );
+ });
- // Mobile navigation icons
- var closedIcon = '+';
- var openIcon = '-';
+ // Mobile navigation icons
+ var closedIcon = '+';
+ var openIcon = '-';
- // Insert the icons into the nav where appropriate
- $( '.nav-primary' ).find( '.genesis-nav-menu .parent:not( .current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ).after( '' + closedIcon + '' );
- $( '.nav-primary' ).find( '.genesis-nav-menu .parent.current-menu-item > a, .genesis-nav-menu .parent.current_page_item > a, .genesis-nav-menu .parent.current_page_parent > a, .genesis-nav-menu .parent.current_page_ancestor > a' ).after( '' + openIcon + '' );
+ // Insert the icons into the nav where appropriate
+ $( '.nav-primary' ).find( '.genesis-nav-menu .parent:not( .current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ).after( '' + closedIcon + '' );
+ $( '.nav-primary' ).find( '.genesis-nav-menu .parent.current-menu-item > a, .genesis-nav-menu .parent.current_page_item > a, .genesis-nav-menu .parent.current_page_parent > a, .genesis-nav-menu .parent.current_page_ancestor > a' ).after( '' + openIcon + '' );
- // Mobile navigation expand/contract functionality
- $( '.sub-icon' ).click( function( event ) {
+ // Mobile navigation expand/contract functionality
+ $( '.sub-icon' ).click( function( event ) {
- // Prevent default behavior
- event.preventDefault();
+ // Prevent default behavior
+ event.preventDefault();
- // Get icon click
- var $icon = $( this );
+ // Get icon click
+ var $icon = $( this );
- // Remove focus
- $icon.blur();
+ // Remove focus
+ $icon.blur();
- // Expand/contract
- $icon.next( 'ul' ).slideToggle().toggleClass( 'open' );
+ // Expand/contract
+ $icon.next( 'ul' ).slideToggle().toggleClass( 'open' );
- // Change the icon to indicate open/closed
- if ( $icon.text().indexOf( closedIcon ) !== -1 )
- $icon.text( openIcon );
- else if ( $icon.text().indexOf( openIcon ) !== -1 )
- $icon.text( closedIcon );
- });
+ // Change the icon to indicate open/closed
+ if ( $icon.text().indexOf( closedIcon ) !== -1 ) {
+ $icon.text( openIcon );
+ } else if ( $icon.text().indexOf( openIcon ) !== -1 ) {
+ $icon.text( closedIcon );
+ }
+ });
- // Header widget area expand/contract functionality
- $( '.widget-area-toggle' ).click( function( event ) {
+ // Header widget area expand/contract functionality
+ $( '.widget-area-toggle' ).click( function( event ) {
- // Prevent default behavior
- event.preventDefault();
+ // Prevent default behavior
+ event.preventDefault();
- // Get button clicked
- var $button = $( this );
+ // Get button clicked
+ var $button = $( this );
- // Remove focus
- $button.blur();
+ // Remove focus
+ $button.blur();
- // Expand/contract
- $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle();
- });
+ // Expand/contract
+ $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle();
+ });
- // Executes when complete page is fully loaded, including all frames, objects, and images
- $( window ).on( 'load', function() {
+ // Executes when complete page is fully loaded, including all frames, objects, and images
+ $( window ).on( 'load', function() {
- // Equal height homepage cols
- $( '.equal-height-genesis-extender-cols .ez-home-container-area' ).each( function() {
- $( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint );
- });
-
- });
+ // Equal height homepage cols
+ $( '.equal-height-genesis-extender-cols .ez-home-container-area' ).each( function() {
+ $( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint );
+ });
+ });
}); /* end of page load scripts */
@@ -151,7 +151,7 @@ jQuery( document ).ready( function( $ ) {
* Equal Heights Plugin
*
* Equalize the heights of elements. Great for columns or any elements
- * that need to be the same size (floats, etc).
+ * that need to be the same height (floats, etc).
*
* Based on Rob Glazebrook's (cssnewbie.com) script
*
@@ -163,18 +163,53 @@ jQuery( document ).ready( function( $ ) {
*
* Usage: jQuery( object ).equalHeights( [minHeight], [maxHeight], [breakPoint] );
*
- * Example 1: jQuery( ".cols" ).equalHeights(); Sets all columns to the same height.
- * Example 2: jQuery( ".cols" ).equalHeights( 400 ); Sets all cols to at least 400px tall.
+ * Example 1: jQuery( ".cols" ).equalHeights(); Sets all .cols to the same height.
+ * Example 2: jQuery( ".cols" ).equalHeights( 400 ); Sets all .cols to at least 400px tall.
* Example 3: jQuery( ".cols" ).equalHeights( 100, 300 ); Cols are at least 100 but no more
* than 300 pixels tall. Elements with too much content will gain a scrollbar.
- * Example 4: jQuery( ".cols" ).equalHeights( null, null, 768 ); Only resize columns above 768px viewport
+ * Example 4: jQuery( ".cols" ).equalHeights( null, null, 768 ); Only resize .cols above 768px viewport
*/
( function( $ ) {
- $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) {
+ // debouncing function from John Hann
+ // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+ var debounce = function( func, threshold ) {
+
+ // The timer
+ var timeout;
+
+ return function debounced() {
+
+ // Store the passed in function and args
+ var obj = this;
+ var args = arguments;
+
+ // This is the callback that the timer triggers when debouncing is complete
+ function delayed() {
+
+ // We have successfully debounced, trigger the function
+ func.apply( obj, args );
+
+ // And clear the timer
+ timeout = null;
+ }
+
+ // If the timer is active, clear it
+ if ( timeout ) {
+ clearTimeout( timeout );
+ }
+
+ // Set the timer to 100ms and have it call delayed() when it completes
+ timeout = setTimeout( delayed, threshold || 50 );
+ };
+ };
+
+ // Main plugin function
+ $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) {
// Scope our variables
- var selector, args, eventData, resizeSet;
+ var selector, minHeight, maxHeight, breakPoint, eventData,
+ ourEvents, eventName, eventSet;
// Get the selector used to call equalHeights
selector = this.selector;
@@ -184,15 +219,14 @@ jQuery( document ).ready( function( $ ) {
maxHeight = maxHeight || null;
breakPoint = breakPoint || 0;
- // Combine args into an array
- args = [ minHeight, maxHeight, breakPoint ];
+ // Combine args into an object
+ args = { minHeight: minHeight, maxHeight: maxHeight, breakPoint: breakPoint };
// Check if our global already exists
if ( window.equalHeightsItems ) {
// It does, so add or overwrite the current object in it
window.equalHeightsItems[selector] = args;
-
} else {
// It doesn't, so create the global and store the current object in it
@@ -200,80 +234,103 @@ jQuery( document ).ready( function( $ ) {
window.equalHeightsItems[selector] = args;
}
- // Function to do the equalizing of the heights
- function doEqualHeights( selector, args ) {
+ // Grab the current event data from the window object
+ eventData = $( window ).data( 'events' );
- // Scope our variables
- var $items, tallest, e, a, width;
+ // Store the events that will retrigger doEqualHeights()
+ ourEvents = [ 'resize', 'orientationchange', 'equalheights' ];
- // Grab the collection of items fresh from the DOM
- $items = $( selector );
+ // Loop through each event and attach our handler if it isn't attached already
+ $( ourEvents ).each( function() {
- // Store the passed in args
- minHeight = args[0];
- maxHeight = args[1];
- breakPoint = args[2];
+ // Reset our flag to false
+ eventSet = false;
- // Calculate the tallest item
- tallest = ( minHeight ) ? minHeight : 0;
- $items.each( function() {
- $( this ).height( 'auto' );
- if( $( this ).outerHeight() > tallest ) {
- tallest = $( this ).outerHeight();
- }
- });
+ // Store this event
+ thisEvent = this;
- // Get viewport width (taking scrollbars into account)
- e = window;
- a = 'inner';
- if ( !( 'innerWidth' in window ) ) {
- a = 'client';
- e = document.documentElement || document.body;
- }
- width = e[ a+'Width' ];
+ // Add the namespace
+ eventName = this + '.equalheights';
- // Equalize heights if viewport width is above the breakpoint
- if ( width >= breakPoint ) {
- if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight;
- return $items.each( function() {
- $( this ).height( tallest );
- });
- }
- }
+ // Check whether this event is already on the window
+ if ( eventData[ thisEvent ] ) {
- // Function to trigger the equalizing
- function triggerEqualHeights() {
+ // Be careful not to disturb any unrelated listeners
+ $( eventData[ thisEvent ] ).each( function() {
- // Loop through each object in our global
- $.each( window.equalHeightsItems, function( selector, args ) {
+ // Confirm that the event has our namespace
+ if ( this.namespace == 'equalheights' ) {
- // Call doEqualHeights and pass in the current object
- doEqualHeights( selector, args );
- });
- }
+ // It does, so set our flag to true
+ eventSet = true;
+ }
+ });
+ }
- // Grab the event data from the window object
- eventData = $( window ).data('events');
+ // If our flag is still false then we can safely attach the event
+ if ( ! eventSet ) {
- // Check if the window has the smartresize event
- if ( eventData.resize ) {
+ // Namespace it and debounce it to be safe
+ $( window ).on( eventName, debounce( triggerEqualHeights ) );
+ }
+ });
- // Check if the smartresize event has our namespace
- $( eventData.resize ).each( function() {
+ // Trigger the first equalizing
+ triggerEqualHeights();
+ };
- // It does, so store this information in a variable
- if( this.namespace == 'equalheights' ) { resizeSet = true; }
+ // Function to trigger the equalizing
+ function triggerEqualHeights() {
+
+ // Loop through each object in our global
+ $.each( window.equalHeightsItems, function( selector, args ) {
+
+ // Call doEqualHeights and pass in the current object
+ doEqualHeights( selector, args );
+ });
+ }
+
+ // Function to do the equalizing of the heights
+ function doEqualHeights( selector, args ) {
+
+ // Scope our variables
+ var $items, minHeight, maxHeight, breakPoint, tallest, e, a, width;
+
+ // Grab the collection of items fresh from the DOM
+ $items = $( selector );
+
+ // Store the passed in args
+ minHeight = args.minHeight;
+ maxHeight = args.maxHeight;
+ breakPoint = args.breakPoint;
+
+ // Calculate the tallest item
+ tallest = ( minHeight ) ? minHeight : 0;
+ $items.each( function() {
+ $( this ).height( 'auto' );
+ if( $( this ).outerHeight() > tallest ) {
+ tallest = $( this ).outerHeight();
+ }
+ });
+
+ // Get viewport width (taking scrollbars into account)
+ e = window;
+ a = 'inner';
+ if ( !( 'innerWidth' in window ) ) {
+ a = 'client';
+ e = document.documentElement || document.body;
+ }
+ width = e[ a+'Width' ];
+
+ // Equalize heights if viewport width is above the breakpoint
+ if ( width >= breakPoint ) {
+ if ( ( maxHeight ) && tallest > maxHeight ) {
+ tallest = maxHeight;
+ }
+ return $items.each( function() {
+ $( this ).height( tallest );
});
}
-
- // Bind the window smartresize event to our trigger function if we
- // haven't already done so
- if ( ! resizeSet ) {
- $( window ).on( 'resize.equalheights', triggerEqualHeights );
- }
-
- // Trigger the first equalizing
- triggerEqualHeights();
}
})( jQuery );