Skip to content

Instantly share code, notes, and snippets.

@JGallardo
Last active December 20, 2015 03:49
Show Gist options
  • Save JGallardo/6066028 to your computer and use it in GitHub Desktop.
Save JGallardo/6066028 to your computer and use it in GitHub Desktop.
Things that I have to nest for various cases for this responsive site.
/* -----------------------------------------
Global
----------------------------------------- */
$(window).load(checkWindowSize);
$(window).resize(checkWindowSize);
/*
function checkWindowSize() {
if ( $(window).width() < 380 ) {
$('div#footer ul li').addClass('button medium secondary expanded');
}
else {
$('div#footer ul li').removeClass('button medium secondary expanded');
}
}
*/
/* -----------------------------------------
Home Page - shipping.aspx
----------------------------------------- */
$('div#homelinks div').addClass('panel');
function checkWindowSize() {
if ( $(window).width() < 1200 ) {
$('div.responsiveContainer').addClass('row');
$('#homelinks div.panel:not(:last-child)').addClass('large-4 small-11 columns');
$('#homelinks div.panel:last-child').addClass('small-11 columns');
}
else {
$('div.responsiveContainer').removeClass('row');
$('#homelinks div.panel:not(:last-child)').removeClass('large-4 small-11 columns');
$('#homelinks div.panel:last-child').removeClass('small-11 columns');
}
}
/* -----------------------------------------
Shipping Page - shipping.aspx
----------------------------------------- */
/*
function checkWindowSize() {
if ( $(window).width() < 380 ) {
$('span.shippingPhone').addClass('block');
}
else {
$('span.shippingPhone').removeClass('block');
}
}
*/
@bfontaine
Copy link

Here is an optimized version of checkWindowSize, assuming that div.responsiveContainer always refer to the same elements:

var checkWindowSize = (function() {

    // cache variables
    var $window    = $(window),
        $container = $('div.responsiveContainer'),
        $links     = $('#homelinks div.panel:not(:last-child)'),
        $last_link = $('#homelinks div.panel:last-child');

    return function() {
        var small_width = $window.width() < 1200;

        $container.toggleClass('row', small_width);
        $links.toggleClass('large-4 small-11 columns', small_width);
        $last_link.toggleClass('small-11 columns', small_width);
    };

})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment