Skip to content

Instantly share code, notes, and snippets.

@thotbox
Last active August 29, 2015 14:03
Show Gist options
  • Save thotbox/5e187f8c37a9f2ef439e to your computer and use it in GitHub Desktop.
Save thotbox/5e187f8c37a9f2ef439e to your computer and use it in GitHub Desktop.
JavaScript: Center Block Grid Orphans
// Blog Grid Center Fix
function centerBlockGrid(listID){
$window = $(window);
var windowWidth = $window.width();
var listWidth = $(listID).width();
var smallGrid;
var mediumGrid;
var largeGrid;
var gridClass = $(listID).attr('class');
if(gridClass.indexOf('small-block-grid') >= 0) {
smallGrid = $(listID).attr('class').match(/small-block-grid-([0-9]+)/)[1];
}
else {
smallGrid = 1;
}
if(gridClass.indexOf('medium-block-grid') >= 0) {
mediumGrid = $(listID).attr('class').match(/medium-block-grid-([0-9]+)/)[1];
}
else {
mediumGrid = smallGrid;
}
if(gridClass.indexOf('large-block-grid') >= 0) {
largeGrid = $(listID).attr('class').match(/large-block-grid-([0-9]+)/)[1];
}
else {
largeGrid = mediumGrid;
}
var listCount = $(listID + ' li').length;
var responsiveGrid;
if (windowWidth <= 640) { responsiveGrid = smallGrid; }
if (windowWidth > 640 && windowWidth <= 1024) { responsiveGrid = mediumGrid; }
if (windowWidth > 1024) { responsiveGrid = largeGrid; }
var blockWidth = listWidth / responsiveGrid;
var listRemainder = listCount % responsiveGrid;
var listMissing = responsiveGrid - listRemainder;
var listPush = listMissing / 2;
var marginFix = blockWidth * listPush;
if (listRemainder > 0) {
$(listID + ' li').css('margin-left','0');
$(listID + ' li:nth-last-child(' + listRemainder + ')').css('margin-left',marginFix + 'px');
} else {
$(listID + ' li').css('margin-left','0');
}
}
$(document).ready(function() {
if($('#logos').length ) {
centerBlockGrid('#logos');
}
});
$(window).resize(function() {
if($('#logos').length ) {
centerBlockGrid('#logos');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment