Revision: 63523
Updated Code
at May 14, 2013 18:39 by duronrulez
Updated Code
/*
* throttledresize: special jQuery event that happens at a reduced rate compared to "resize"
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery-smartresize
*
* Copyright 2012 @louis_remi
* Licensed under the MIT license.
*
* This saved you an hour of work?
* Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
*/
(function($) {
var $event = $.event,
$special,
dummy = {_: 0},
frame = 0,
wasResized, animRunning;
$special = $event.special.throttledresize = {
setup: function() {
$(this).on("resize", $special.handler);
},
teardown: function() {
$(this).off("resize", $special.handler);
},
handler: function(event, execAsap) {
// Save the context
var context = this,
args = arguments;
wasResized = true;
if (!animRunning) {
setInterval(function() {
frame++;
if (frame > $special.threshold && wasResized || execAsap) {
// set correct event type
event.type = "throttledresize";
$event.dispatch.apply(context, args);
wasResized = false;
frame = 0;
}
if (frame > 9) {
$(dummy).stop();
animRunning = false;
frame = 0;
}
}, 30);
animRunning = true;
}
},
threshold: 0
};
})(jQuery);
/* ======================= imagesLoaded Plugin ===============================
https://github.com/desandro/imagesloaded
$('#my-container').imagesLoaded(myFunction)
execute a callback when all images have loaded.
needed because .load() doesn't work on cached images
callback function gets image collection as argument
this is the container
original: MIT license. Paul Irish. 2010.
contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
blank image data-uri bypasses webkit log warning (thx doug jones)
*/
$ = jQuery;
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$.fn.imagesLoaded = function(callback) {
var $this = this,
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
hasNotify = $.isFunction(deferred.notify),
$images = $this.find('img').add($this.filter('img')),
loaded = [],
proper = [],
broken = [];
// Register deferred callbacks
if ($.isPlainObject(callback)) {
$.each(callback, function(key, value) {
if (key === 'callback') {
callback = value;
} else if (deferred) {
deferred[key](value);
}
});
}
function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if (deferred) {
if (broken.length) {
deferred.reject($images, $proper, $broken);
} else {
deferred.resolve($images);
}
}
if ($.isFunction(callback)) {
callback.call($this, $images, $proper, $broken);
}
}
function imgLoaded(img, isBroken) {
// don't proceed if BLANK image, or image is already loaded
if (img.src === BLANK || $.inArray(img, loaded) !== -1) {
return;
}
// store element in loaded images array
loaded.push(img);
// keep track of broken and properly loaded images
if (isBroken) {
broken.push(img);
} else {
proper.push(img);
}
// cache image and its state for future calls
$.data(img, 'imagesLoaded', {isBroken: isBroken, src: img.src});
// trigger deferred progress method if present
if (hasNotify) {
deferred.notifyWith($(img), [isBroken, $images, $(proper), $(broken)]);
}
// call doneLoading and clean listeners if all images are loaded
if ($images.length === loaded.length) {
setTimeout(doneLoading);
$images.unbind('.imagesLoaded');
}
}
// if no images, trigger immediately
if (!$images.length) {
doneLoading();
} else {
$images.bind('load.imagesLoaded error.imagesLoaded', function(event) {
// trigger imgLoaded
imgLoaded(event.target, event.type === 'error');
}).each(function(i, el) {
var src = el.src;
// find out if this image has been already checked for status
// if it was, and src has not changed, call imgLoaded on it
var cached = $.data(el, 'imagesLoaded');
if (cached && cached.src === src) {
imgLoaded(el, cached.isBroken);
return;
}
// if complete is true and browser supports natural sizes, try
// to check for image status manually
if (el.complete && el.naturalWidth !== undefined) {
imgLoaded(el, el.naturalWidth === 0 || el.naturalHeight === 0);
return;
}
// cached images don't fire load sometimes, so we reset src, but only when
// dealing with IE, or image is complete (loaded) and failed manual check
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
if (el.readyState || el.complete) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise($this) : $this;
};
var Grid = (function() {
// list of items
var $grid = $('.og-grid'),
// the items
$items = $grid.children('li'),
// current expanded item's index
current = -1,
// position (top) of the expanded item
// used to know if the preview will expand in a different row
previewPos = -1,
// extra amount of pixels to scroll the window
scrollExtra = 0,
// extra margin when expanded (between preview overlay and the next items)
marginExpanded = 10,
$window = $(window), winsize,
$body = $('html, body'),
// transitionend events
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ],
// support for csstransitions
support = Modernizr.csstransitions,
// default settings
settings = {
minHeight: 460,
speed: 350,
easing: 'ease'
};
function init(config) {
$grid = $('.og-grid');
settings.minHeight = $grid.attr("data-minheight") ? parseInt($grid.attr("data-minheight"), 10) : settings.minHeight;
// the items
$items = $grid.children('li');
settings = $.extend(true, {}, settings, config);
// preload all images
$grid.imagesLoaded(function() {
// save item´s size and offset
saveItemInfo(true);
// get window´s size
getWinSize();
// initialize some events
initEvents();
});
}
// saves the item´s offset top and height (if saveheight is true)
function saveItemInfo(saveheight) {
$items.each(function() {
var $item = $(this);
$item.data('offsetTop', $item.offset().top);
if (saveheight) {
$item.data('height', $item.height());
}
});
}
function initEvents() {
// when clicking an item, show the preview with the item´s info and large image.
// close the item if already expanded.
// also close if clicking on the item´s cross
$items.on('click', 'span.og-close', function() {
hidePreview();
return false;
}).children('a').on('click', function(e) {
var $item = $(this).parent();
// check if item already opened
current === $items.index($item) ? hidePreview() : showPreview($item);
return false;
});
// on window resize get the window´s size again
// reset some values..
$window.on('debouncedresize', function() {
scrollExtra = 0;
previewPos = -1;
// save item´s offset
saveItemInfo();
getWinSize();
var preview = $.data(this, 'preview');
if (typeof preview != 'undefined') {
hidePreview();
}
});
}
function getWinSize() {
winsize = {width: $window.width(), height: $window.height()};
}
function showPreview($item) {
var preview = $.data(this, 'preview'),
// item´s offset top
position = $item.data('offsetTop');
scrollExtra = 0;
// if a preview exists and previewPos is different (different row) from item´s top then close it
if (typeof preview != 'undefined') {
// not in the same row
if (previewPos !== position) {
// if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
if (position > previewPos) {
scrollExtra = preview.height;
}
hidePreview();
}
// same row
else {
preview.update($item);
return false;
}
}
// update previewPos
previewPos = position;
// initialize new preview for the clicked item
preview = $.data(this, 'preview', new Preview($item));
// expand preview overlay
preview.open();
}
function hidePreview() {
current = -1;
var preview = $.data(this, 'preview');
preview.close();
$.removeData(this, 'preview');
}
// the preview obj / overlay
function Preview($item) {
this.$item = $item;
this.expandedIdx = $items.index($item);
this.create();
this.update();
}
Preview.prototype = {
create: function() {
// create Preview structure:
this.$title = $('<h3></h3>');
this.$description = $('<p></p>');
this.$href = $('<div><a href="#">Visit website</a></div>');
this.$details = $('<div class="og-details"></div>').append(this.$title, this.$description, this.$href);
this.$loading = $('<div class="og-loading"></div>');
this.$fullimage = $('<div class="og-fullimg"></div>').append(this.$loading);
this.$closePreview = $('<span class="og-close"></span>');
this.$previewInner = $('<div class="og-expander-inner"></div>').append(this.$closePreview, this.$fullimage, this.$details);
this.$previewEl = $('<div class="og-expander"></div>').append(this.$previewInner);
// append preview element to the item
this.$item.append(this.getEl());
// set the transitions for the preview and the item
if (support) {
this.setTransition();
}
},
update: function($item) {
if ($item) {
this.$item = $item;
}
// if already expanded remove class "og-expanded" from current item and add it to new item
if (current !== -1) {
var $currentItem = $items.eq(current);
$currentItem.removeClass('og-expanded');
this.$item.addClass('og-expanded');
// position the preview correctly
this.positionPreview();
}
// update current value
current = $items.index(this.$item);
// update preview´s content
var $itemEl = this.$item.children('a'),
eldata = {
href: $itemEl.attr('href'),
largesrc: $itemEl.data('largesrc'),
title: $itemEl.data('title'),
link: $itemEl.attr('data-link-url'),
label: $itemEl.attr('data-link-label'),
description: $itemEl.data('description')
};
this.$title.html(eldata.title);
this.$description.html(eldata.description);
if (eldata.label) {
this.$href.html('<a href="' + eldata.link + '">' + eldata.label + '</a>').show();
} else {
this.$href.hide();
}
//this.$href.attr( 'href', eldata.href );
var self = this;
// remove the current image in the preview
if (typeof self.$largeImg != 'undefined') {
self.$largeImg.remove();
}
// preload large image and add it to the preview
// for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
if (self.$fullimage.is(':visible')) {
this.$loading.show();
$('<img/>').load(function() {
var $img = $(this);
if ($img.attr('src') === self.$item.children('a').data('largesrc')) {
self.$loading.hide();
self.$fullimage.find('img').remove();
self.$largeImg = $img.fadeIn(350);
if ($.browser.msie) {
self.$largeImg.width("auto").height("auto");
}
self.$fullimage.append(self.$largeImg);
}
}).attr('src', eldata.largesrc);
}
},
open: function() {
setTimeout($.proxy(function() {
// set the height for the preview and the item
this.setHeights();
// scroll to position the preview in the right place
this.positionPreview();
}, this), 25);
},
close: function() {
var self = this,
onEndFn = function() {
if (support) {
$(this).off(transEndEventName);
}
self.$item.removeClass('og-expanded');
self.$previewEl.remove();
};
setTimeout($.proxy(function() {
if (typeof this.$largeImg !== 'undefined') {
this.$largeImg.fadeOut('fast');
}
this.$previewEl.css('height', 0);
// the current expanded item (might be different from this.$item)
var $expandedItem = $items.eq(this.expandedIdx);
console.log($expandedItem);
$expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
}, this), 25);
return false;
},
calcHeight: function() {
var heightPreview = winsize.height - this.$item.data('height') - marginExpanded,
itemHeight = winsize.height;
if (heightPreview < settings.minHeight) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight;
},
setHeights: function() {
var self = this,
onEndFn = function() {
if (support) {
self.$item.off(transEndEventName);
}
self.$item.addClass('og-expanded');
};
this.calcHeight();
this.$previewEl.css('height', this.height);
//this.itemHeight = "auto";
this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
},
positionPreview: function() {
// scroll page
// case 1 : preview height + item height fits in window´s height
// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
var position = this.$item.data('offsetTop'),
previewOffsetT = this.$previewEl.offset().top - scrollExtra,
scrollVal = this.height + this.$item.data('height') + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - (winsize.height - this.height) : previewOffsetT;
$body.animate({scrollTop: scrollVal}, settings.speed);
},
setTransition: function() {
this.$previewEl.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
},
getEl: function() {
return this.$previewEl;
}
}
return {init: init};
})(jQuery);
Revision: 63522
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at May 14, 2013 18:39 by duronrulez
Initial Code
/*
* throttledresize: special jQuery event that happens at a reduced rate compared to "resize"
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery-smartresize
*
* Copyright 2012 @louis_remi
* Licensed under the MIT license.
*
* This saved you an hour of work?
* Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
*/
(function($) {
var $event = $.event,
$special,
dummy = {_: 0},
frame = 0,
wasResized, animRunning;
$special = $event.special.throttledresize = {
setup: function() {
$(this).on("resize", $special.handler);
},
teardown: function() {
$(this).off("resize", $special.handler);
},
handler: function(event, execAsap) {
// Save the context
var context = this,
args = arguments;
wasResized = true;
if (!animRunning) {
setInterval(function() {
frame++;
if (frame > $special.threshold && wasResized || execAsap) {
// set correct event type
event.type = "throttledresize";
$event.dispatch.apply(context, args);
wasResized = false;
frame = 0;
}
if (frame > 9) {
$(dummy).stop();
animRunning = false;
frame = 0;
}
}, 30);
animRunning = true;
}
},
threshold: 0
};
})(jQuery);
/* ======================= imagesLoaded Plugin ===============================
https://github.com/desandro/imagesloaded
$('#my-container').imagesLoaded(myFunction)
execute a callback when all images have loaded.
needed because .load() doesn't work on cached images
callback function gets image collection as argument
this is the container
original: MIT license. Paul Irish. 2010.
contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
blank image data-uri bypasses webkit log warning (thx doug jones)
*/
$ = jQuery;
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$.fn.imagesLoaded = function(callback) {
var $this = this,
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
hasNotify = $.isFunction(deferred.notify),
$images = $this.find('img').add($this.filter('img')),
loaded = [],
proper = [],
broken = [];
// Register deferred callbacks
if ($.isPlainObject(callback)) {
$.each(callback, function(key, value) {
if (key === 'callback') {
callback = value;
} else if (deferred) {
deferred[key](value);
}
});
}
function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if (deferred) {
if (broken.length) {
deferred.reject($images, $proper, $broken);
} else {
deferred.resolve($images);
}
}
if ($.isFunction(callback)) {
callback.call($this, $images, $proper, $broken);
}
}
function imgLoaded(img, isBroken) {
// don't proceed if BLANK image, or image is already loaded
if (img.src === BLANK || $.inArray(img, loaded) !== -1) {
return;
}
// store element in loaded images array
loaded.push(img);
// keep track of broken and properly loaded images
if (isBroken) {
broken.push(img);
} else {
proper.push(img);
}
// cache image and its state for future calls
$.data(img, 'imagesLoaded', {isBroken: isBroken, src: img.src});
// trigger deferred progress method if present
if (hasNotify) {
deferred.notifyWith($(img), [isBroken, $images, $(proper), $(broken)]);
}
// call doneLoading and clean listeners if all images are loaded
if ($images.length === loaded.length) {
setTimeout(doneLoading);
$images.unbind('.imagesLoaded');
}
}
// if no images, trigger immediately
if (!$images.length) {
doneLoading();
} else {
$images.bind('load.imagesLoaded error.imagesLoaded', function(event) {
// trigger imgLoaded
imgLoaded(event.target, event.type === 'error');
}).each(function(i, el) {
var src = el.src;
// find out if this image has been already checked for status
// if it was, and src has not changed, call imgLoaded on it
var cached = $.data(el, 'imagesLoaded');
if (cached && cached.src === src) {
imgLoaded(el, cached.isBroken);
return;
}
// if complete is true and browser supports natural sizes, try
// to check for image status manually
if (el.complete && el.naturalWidth !== undefined) {
imgLoaded(el, el.naturalWidth === 0 || el.naturalHeight === 0);
return;
}
// cached images don't fire load sometimes, so we reset src, but only when
// dealing with IE, or image is complete (loaded) and failed manual check
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
if (el.readyState || el.complete) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise($this) : $this;
};
var Grid = (function() {
// list of items
var $grid = $('.og-grid'),
// the items
$items = $grid.children('li'),
// current expanded item's index
current = -1,
// position (top) of the expanded item
// used to know if the preview will expand in a different row
previewPos = -1,
// extra amount of pixels to scroll the window
scrollExtra = 0,
// extra margin when expanded (between preview overlay and the next items)
marginExpanded = 10,
$window = $(window), winsize,
$body = $('html, body'),
// transitionend events
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ],
// support for csstransitions
support = Modernizr.csstransitions,
// default settings
settings = {
minHeight: 460,
speed: 350,
easing: 'ease'
};
function init(config) {
$grid = $('.og-grid');
settings.minHeight = $grid.attr("data-minheight") ? parseInt($grid.attr("data-minheight"), 10) : settings.minHeight;
// the items
$items = $grid.children('li');
settings = $.extend(true, {}, settings, config);
// preload all images
$grid.imagesLoaded(function() {
// save item´s size and offset
saveItemInfo(true);
// get window´s size
getWinSize();
// initialize some events
initEvents();
});
}
// saves the item´s offset top and height (if saveheight is true)
function saveItemInfo(saveheight) {
$items.each(function() {
var $item = $(this);
$item.data('offsetTop', $item.offset().top);
if (saveheight) {
$item.data('height', $item.height());
}
});
}
function initEvents() {
// when clicking an item, show the preview with the item´s info and large image.
// close the item if already expanded.
// also close if clicking on the item´s cross
$items.on('click', 'span.og-close', function() {
hidePreview();
return false;
}).children('a').on('click', function(e) {
var $item = $(this).parent();
// check if item already opened
current === $items.index($item) ? hidePreview() : showPreview($item);
return false;
});
// on window resize get the window´s size again
// reset some values..
$window.on('debouncedresize', function() {
scrollExtra = 0;
previewPos = -1;
// save item´s offset
saveItemInfo();
getWinSize();
var preview = $.data(this, 'preview');
if (typeof preview != 'undefined') {
hidePreview();
}
});
}
function getWinSize() {
winsize = {width: $window.width(), height: $window.height()};
}
function showPreview($item) {
var preview = $.data(this, 'preview'),
// item´s offset top
position = $item.data('offsetTop');
scrollExtra = 0;
// if a preview exists and previewPos is different (different row) from item´s top then close it
if (typeof preview != 'undefined') {
// not in the same row
if (previewPos !== position) {
// if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
if (position > previewPos) {
scrollExtra = preview.height;
}
hidePreview();
}
// same row
else {
preview.update($item);
return false;
}
}
// update previewPos
previewPos = position;
// initialize new preview for the clicked item
preview = $.data(this, 'preview', new Preview($item));
// expand preview overlay
preview.open();
}
function hidePreview() {
current = -1;
var preview = $.data(this, 'preview');
preview.close();
$.removeData(this, 'preview');
}
// the preview obj / overlay
function Preview($item) {
this.$item = $item;
this.expandedIdx = $items.index($item);
this.create();
this.update();
}
Preview.prototype = {
create: function() {
// create Preview structure:
this.$title = $('<h3></h3>');
this.$description = $('<p></p>');
this.$href = $('<div><a href="#">Visit website</a></div>');
this.$details = $('<div class="og-details"></div>').append(this.$title, this.$description, this.$href);
this.$loading = $('<div class="og-loading"></div>');
this.$fullimage = $('<div class="og-fullimg"></div>').append(this.$loading);
this.$closePreview = $('<span class="og-close"></span>');
this.$previewInner = $('<div class="og-expander-inner"></div>').append(this.$closePreview, this.$fullimage, this.$details);
this.$previewEl = $('<div class="og-expander"></div>').append(this.$previewInner);
// append preview element to the item
this.$item.append(this.getEl());
// set the transitions for the preview and the item
if (support) {
this.setTransition();
}
},
update: function($item) {
if ($item) {
this.$item = $item;
}
// if already expanded remove class "og-expanded" from current item and add it to new item
if (current !== -1) {
var $currentItem = $items.eq(current);
$currentItem.removeClass('og-expanded');
this.$item.addClass('og-expanded');
// position the preview correctly
this.positionPreview();
}
// update current value
current = $items.index(this.$item);
// update preview´s content
var $itemEl = this.$item.children('a'),
eldata = {
href: $itemEl.attr('href'),
largesrc: $itemEl.data('largesrc'),
title: $itemEl.data('title'),
link: $itemEl.attr('data-link-url'),
label: $itemEl.attr('data-link-label'),
description: $itemEl.data('description')
};
this.$title.html(eldata.title);
this.$description.html(eldata.description);
if (eldata.label) {
this.$href.html('<a href="' + eldata.link + '">' + eldata.label + '</a>').show();
} else {
this.$href.hide();
}
//this.$href.attr( 'href', eldata.href );
var self = this;
// remove the current image in the preview
if (typeof self.$largeImg != 'undefined') {
self.$largeImg.remove();
}
// preload large image and add it to the preview
// for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
if (self.$fullimage.is(':visible')) {
this.$loading.show();
$('<img/>').load(function() {
var $img = $(this);
if ($img.attr('src') === self.$item.children('a').data('largesrc')) {
self.$loading.hide();
self.$fullimage.find('img').remove();
self.$largeImg = $img.fadeIn(350);
if ($.browser.msie) {
self.$largeImg.width("auto").height("auto");
}
self.$fullimage.append(self.$largeImg);
}
}).attr('src', eldata.largesrc);
}
},
open: function() {
setTimeout($.proxy(function() {
// set the height for the preview and the item
this.setHeights();
// scroll to position the preview in the right place
this.positionPreview();
}, this), 25);
},
close: function() {
var self = this,
onEndFn = function() {
if (support) {
$(this).off(transEndEventName);
}
self.$item.removeClass('og-expanded');
self.$previewEl.remove();
};
setTimeout($.proxy(function() {
if (typeof this.$largeImg !== 'undefined') {
this.$largeImg.fadeOut('fast');
}
this.$previewEl.css('height', 0);
// the current expanded item (might be different from this.$item)
var $expandedItem = $items.eq(this.expandedIdx);
console.log($expandedItem);
$expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
}, this), 25);
return false;
},
calcHeight: function() {
var heightPreview = winsize.height - this.$item.data('height') - marginExpanded,
itemHeight = winsize.height;
if (heightPreview < settings.minHeight) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight;
},
setHeights: function() {
var self = this,
onEndFn = function() {
if (support) {
self.$item.off(transEndEventName);
}
self.$item.addClass('og-expanded');
};
this.calcHeight();
this.$previewEl.css('height', this.height);
//this.itemHeight = "auto";
this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
},
positionPreview: function() {
// scroll page
// case 1 : preview height + item height fits in window´s height
// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
var position = this.$item.data('offsetTop'),
previewOffsetT = this.$previewEl.offset().top - scrollExtra,
scrollVal = this.height + this.$item.data('height') + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - (winsize.height - this.height) : previewOffsetT;
$body.animate({scrollTop: scrollVal}, settings.speed);
},
setTransition: function() {
this.$previewEl.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
},
getEl: function() {
return this.$previewEl;
}
}
return {init: init};
})(jQuery);
Initial URL
Initial Description
wp-content/themes/halfcreative/js/grid.js - replace the contents with the provided code. Or "whatever your themepath is"/js/grid.js
Initial Title
og-grid multiple grid fix
Initial Tags
Initial Language
JavaScript