Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made Grid-a-licious more responsive #4

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Made Grid-a-licious more responsive #4

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
789e002
Update jquery.grid-a-licious.js
mjcampagna Oct 19, 2012
19270db
Update jquery.grid-a-licious.js
mjcampagna Oct 19, 2012
5dfdd22
Update jquery.grid-a-licious.js
mjcampagna Oct 23, 2012
15512bd
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
f6eb0c4
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
7acb22c
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
cd025e8
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
d693495
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
3dd4dee
Update jquery.grid-a-licious.js
mjcampagna Oct 24, 2012
1c6d5ca
Update jquery.grid-a-licious.js
mjcampagna Oct 25, 2012
de2091d
Update jquery.grid-a-licious.js
mjcampagna Oct 25, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 94 additions & 57 deletions jquery.grid-a-licious.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/**
* jQuery Grid-A-Licious(tm) v3.0
* jQuery Grid-A-Licious(tm) v3.01
* forked 2012-10-24 by Matthew Campagna v3.01.4
*
* Terms of Use - jQuery Grid-A-Licious(tm)
* under the MIT (http://www.opensource.org/licenses/mit-license.php) License.
Expand Down Expand Up @@ -35,7 +36,7 @@
};
})(jQuery, 'smartresize');

// The Grid-a-Licious magic…
// The Grid-A-Licious magic

(function ($) {

Expand All @@ -46,6 +47,8 @@

$.Gal.settings = {
selector: '.item',
getCSSWidth: false,
clearfix: false,
width: 225,
gutter: 20,
animate: false,
Expand All @@ -72,13 +75,15 @@
this.cols = 0;
this.itemCount = 0;
this.prependCount = 0;
this.isPrepending = false;
this.appendCount = 0;
this.resetCount = true;
this.ifCallback = true;
this.box = this.element;
this.options = $.extend(true, {}, $.Gal.settings, options);
this.gridArr = $.makeArray(this.box.find(this.options.selector));
this.isResizing = false;
this.w = 0;
this.boxArr = [];

// build columns
Expand All @@ -100,16 +105,35 @@

_setCols: function () {
// calculate columns
this.cols = Math.floor(this.box.width() / this.options.width);
diff = (this.box.width() - (this.cols * this.options.width) - this.options.gutter) / this.cols;
w = (this.options.width + diff) / this.box.width() * 100;


if (this.options.getCSSWidth) {
itemWidth = $(this.options.selector).outerWidth(true);
} else {
itemWidth = this.options.width;
}

this.cols = Math.floor(this.box.width() / itemWidth);
diff = (this.box.width() - (this.cols * itemWidth) - this.options.gutter) / this.cols;
w = (itemWidth + diff) / this.box.width() * 100;
this.w = w;
// add columns to box

if (this.options.getCSSWidth) {
gutter = diff;
gutterRight = 0;
gutterLeft = Math.floor(diff/2);
} else {
gutter = this.options.gutter;
gutterRight = this.options.gutter/2;
gutterLeft = this.options.gutter/2;
}

for (var i = 0; i < this.cols; i++) {
var div = $('<div></div>').addClass('galcolumn').attr('id', 'item' + i + this.name).css({
'width': w + '%',
'paddingLeft': this.options.gutter,
'paddingBottom': this.options.gutter,
'paddingRight': gutterRight,
'paddingLeft': gutterLeft,
'paddingBottom': gutter,
'float': 'left',
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
Expand All @@ -118,14 +142,29 @@
});
this.box.append(div);
}
// add clear float
var clear = $('<div></div>').css({
'clear': 'both',
'height': '0',
'width': '0',
'display': 'block'
});
this.box.append(clear);

if (this.options.getCSSWidth) {
// nudge first column to center columns within container
$('#item0' + this.name).css('margin-left', Math.floor((this.box.width() - $('.galcolumn').outerWidth() * this.cols))/2 + 'px');
} else {
$('#item0' + this.name).css('margin-left', Math.floor((this.box.width() - $('.galcolumn').outerWidth() * this.cols))/2 + 'px');
$(this.options.selector).css({
'padding': 0,
'width': 'auto'
});
}

if (!this.options.clearfix) {
this.box.find($('#clear' + this.name)).remove();
// add clear float
var clear = $('<div></div>').css({
'clear': 'both',
'height': '0',
'width': '0',
'display': 'block'
}).attr('id', 'clear' + this.name);
this.box.append(clear);
}
},

_renderGrid: function (method, arr, count, prepArray) {
Expand All @@ -135,10 +174,10 @@
var itemCount = 0;
var prependCount = this.prependCount;
var appendCount = this.appendCount;
var gutter = this.options.gutter;
var cols = this.cols;
var name = this.name;
var i = 0;
var w = $('.galcolumn').width();

// if arr
if (arr) {
Expand All @@ -149,14 +188,13 @@
appendCount += count;
// set itemCount to last count of appened items
itemCount = this.appendCount;
}
}
// if prepend
if (method == "prepend") {
// set itemCount to 0 (restart)
itemCount = 0;
// render old items and reverse the new items
this._updateAfterPrepend(this.gridArr, boxes);
boxes.reverse();
// set itemCount
this.isPrepending = true;
itemCount = Math.round(count % cols);
if (itemCount <= 0) itemCount = cols;
}
// called by _updateAfterPrepend()
if (method == "renderAfterPrepend") {
Expand All @@ -165,7 +203,7 @@
// set itemCount by counting previous prepended items
itemCount = count;
}
} 
}
else {
boxes = this.gridArr;
appendCount = $(this.gridArr).size();
Expand All @@ -174,37 +212,52 @@
// push out the items to the columns
$.each(boxes, function (index, value) {
var item = $(value);
var width = '100%';

// if you want something not to be "responsive", add the class "not-responsive" to the selector container
if (item.hasClass('not-responsive')) {
width = 'auto';
}

item.css({
'paddingBottom': (gutter - 1),
'marginBottom': gutter,
'zoom': '1',
'filter': 'alpha(opacity=0)',
'opacity': '0'
}).find('img, object, embed, iframe').css({
'width': '100%',
'height': 'auto'
'width': width,
'height': 'auto',
'display': 'block',
'margin-left': 'auto',
'margin-right': 'auto'
});

// prepend on append to column
if (method == 'prepend') {
itemCount--;
$("#item" + itemCount + name).prepend(item);
items.push(item);
if(itemCount == 0) itemCount = cols;

} else {
$("#item" + itemCount + name).append(item);
items.push(item);
itemCount++;
if (itemCount >= cols) itemCount = 0;
if (appendCount >= cols) appendCount = (appendCount - cols);
}
itemCount++;
items.push(item);

// reset counters
if (prependCount >= cols) prependCount = (prependCount - cols);
if (itemCount >= cols) itemCount = 0;
if (appendCount >= cols) appendCount = (appendCount - cols);

});

this.appendCount = appendCount;
this.itemCount = itemCount;

if (method == "append" || method == "prepend") {
if (method == "prepend") {
// render old items and reverse the new items
this._updateAfterPrepend(this.gridArr, boxes);
}
this._renderItem(items);
this.isPrepending = false;
} else {
this._renderItem(this.gridArr);
}
Expand Down Expand Up @@ -235,6 +288,7 @@

// fadeInOnAppear
if (queue === true && effect == "fadeInOnAppear") {
if (this.isPrepending) items.reverse();
$.each(items, function (index, value) {
setTimeout(function () {
$(value).animate({
Expand All @@ -248,6 +302,7 @@
i++;
});
} else if (queue === false && effect == "fadeInOnAppear") {
if (this.isPrepending) items.reverse();
$.each(items, function (index, value) {
$(value).animate({
opacity: '1.0'
Expand Down Expand Up @@ -277,7 +332,7 @@
});
}

// don’t animate & no queue
// don not animate & no queue
} else {
$.each(items, function (index, value) {
$(value).css({
Expand All @@ -291,28 +346,13 @@
}
},

_updateAfterPrepend: function (prevItems, newItems) {
_updateAfterPrepend: function (prevItems, newItems) {
var gridArr = this.gridArr;
var box = this.box;
box.append('<div class="' + box.attr('id') + 'box"></div>');

// append .item from box to temp element
$.each(prevItems, function (index, value) {
box.find($(value)).appendTo('.' + box.attr('id') + 'box');
})

// turn of animation and render the rest of the grid
this.isResizing = true;
this._renderGrid('renderAfterPrepend', prevItems, $(newItems).size());
this.isResizing = false;

// add new items to gridArr
$.each(newItems, function (index, value) {
gridArr.unshift(value);
})

// delete temp element
box.find($('.' + box.attr('id') + "box")).remove();
this.gridArr = gridArr;
},

resize: function () {
Expand All @@ -328,8 +368,6 @@
this._renderGrid('append');
this.ifCallback = true;
this.isResizing = false;

// provide $elems as context for the callback
},

append: function (items) {
Expand All @@ -343,7 +381,6 @@
},

prepend: function (items) {
//items.reverse();
this.ifCallback = false;
this._renderGrid('prepend', items, $(items).size());
this.ifCallback = true;
Expand Down