rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

_s: rework nav JS file a bit 

* Remove top-level browser width variable, only needed in one internal function
 * Add timeout so that the resize action doesn't constantly trigger, instead give it a short delay to anticipate the user finishing the window size change
 * Better comments
 * Incorporate mattwiebe fix for calling jQuery objects incorrectly, see http://core.trac.wordpress.org/ticket/20131 


git-svn-id: https://wpcom-themes.svn.automattic.com/_s/@9026 d957f892-c61d-0410-b221-f235e6eecf30
This commit is contained in:
Lance Willett 2012-02-29 18:53:02 +00:00
parent fc97fbd34d
commit 8298c23e74
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/small-menu.js
View File

@ -1,31 +1,39 @@
/**
* Handles toggling the main navigation menu for small screens.
*/
jQuery( document ).ready( function( $ ) { jQuery( document ).ready( function( $ ) {
var $browserWidth = $( window ).width(); var $masthead = $( '#masthead' ),
var $masthead = $( '#masthead' ); timeout = false;
$.fn.smallMenu = function() { $.fn.smallMenu = function() {
$( $masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
$( $masthead ).find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); $masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
$( '.menu-toggle' ).click( function () { $( '.menu-toggle' ).click( function() {
$( $masthead ).find( '.menu' ).toggle(); $masthead.find( '.menu' ).toggle();
$( this ).toggleClass( 'toggled-on' ); $( this ).toggleClass( 'toggled-on' );
}); } );
} };
$(window).resize(function() { // Check viewport width on first load.
var $browserWidth = $( window ).width(); if ( $( window ).width() < 600 )
$.fn.smallMenu();
if ( $browserWidth < 600 ) { // Check viewport width when user resizes the browser window.
$( window ).resize( function() {
var browserWidth = $( window ).width();
if ( false !== timeout )
clearTimeout( timeout );
timeout = setTimeout( function() {
if ( browserWidth < 600 ) {
$.fn.smallMenu(); $.fn.smallMenu();
} else { } else {
$( $masthead ).find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' ); $masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
$( $masthead ).find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); $masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
$( $masthead ).find( '.menu' ).removeAttr( 'style' ); $masthead.find( '.menu' ).removeAttr( 'style' );
} }
}); }, 200 );
} );
if ( $browserWidth < 600 ) {
$.fn.smallMenu();
}
} ); } );