Using layoutcomplete with Isotope - javascript

I am using Isotope to place some grid elements which is working fine. Now I need to run some code on layoutcomplete so I have added the event and end up with the following code.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
...
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
});
This all works fine except that layoutcomplete is not executed on page load which is of course beacuse the event is added after init. I have then tried setting isInitLayout: false but is then having problem what to do next - I would expect that I could use .arrange() but with no luck.
Anybody who can figure out how I get layoutComplete to execute on page load?

I was pulling my hair off too because of isotope for a long time. But as much as I experienced the 2.0.1 version of it finally we got a stable plugin.
You can use the code below to layout/relayout your isotope:
$container.isotope('layout');
I recommend you to use isInitLayout: false.
Also keep in mind this, if your containers size changes and your isotope is responsive then your layoutComplete gets fired everytime when it happens. So, you may need to use once instead of on.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
isInitLayout: false
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
$container.isotope('layout');
});
Cheers.

Related

Isotope executing before Images load

I'm struggling to get my Isotope to execute after images load because otherwise, the Isotope items overlap. - I am trying to apply the ImagesLoaded plugin (http://imagesloaded.desandro.com/) to my Isotope, however, I am struggling to execute the Isotope after Images load.
Below is my Isotope WITHOUT ImagesLoaded, if anyone knows how to go about this I'd be most grateful! (: Here is my Isotope in action: http://illuminategg.hol.es/portfolio.html
var isotope_port = $('.port-isotope');
isotope_port.isotope({
'itemSelector': '.item'
});
$('.port-filter a').click(function() {
$(this).parent().parent().find('li').removeClass('selected');
$(this).parent().addClass('selected');
var selector = $(this).attr('data-filter');
isotope_port.isotope({ filter: selector });
return false;
});
For imagesloaded, first add the script to your page since it is not part of isotope. Then use it as follows:
var isotope_port = $('.port-isotope');
isotope_port.imagesLoaded( function() {
isotope_port.isotope({
'itemSelector': '.item'
});
});

isotope container - show on click

I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.
I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.
You can see my code here - http://chrsdev.com/test.html
How can I fix the issue of all items positioning on top of each other on the initial content load?
Would greatly appreciate it if someone can point me in the right direction.
Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)
Then call isotope like this:
//Initialize isotope on each container
jQuery.each($container, function (j) {
this.imagesLoaded( function() {
this.isotope({
itemSelector : '.element-item'
});
});
});
ADDENDUM
The issue is with your each function and "this". Try this instead.
//Initialize isotope on each container
jQuery.each($container, function (j) {
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.element-item'
});
});
});

Ember and window load hook

What hook can I use in ember that will only run after all of the content has been loaded?
I'm using zurb foundation's top-bar fixed and once a view is rendered I want to do something like this to dynamically space my body:
$(window).load(function() {
$("body").css("padding-top", parseInt($(".top-bar").css("height")) - 2);
});
The closest solution I've found here is:
Ember.View.reopen({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
// implement this hook in your own subclasses and run your jQuery logic there
}
});
This almost works except for the fact that all of the content is not yet loaded i.e. images have not yet been loaded and therefore calculation above is wrong.
Inside the afterRenderEvent you can use some jQuery logic that waits for the image to be fully loaded
afterRenderEvent : function(){
$(photo).bind('load',doSomething());
}

jQuery isotope won't hide all filtered elemets on first load

I have a weird bug in Firefox, where jquery isotope won't hide all my elements, specified in the initial filter. Look here for my site
I could not find the problem.
Any clue or solution how to fix it?
All the items with class "entryItem" should be hidden by default, but they are not. This is the code I use. I tried onLayout, but it does not work on first load.
$container.isotope({
animationEngine : isoengine,
resizable: false,
filter:':not(.entryItem)',
onLayout: function( $elems, instance ) {
jQuery('.isotope-hidden').css('opacity','0');
},
// disable normal resizing
//transformsEnabled: false,
// set columnWidth to a percentage of container width
masonry: {
columnWidth: getUnitWidth()
},
});
This is maybe an awkward solution, but I added sth like this to the initialisation of the plugin
onLayout: function( $elems, instance ) {
jQuery('.isotope-hidden').css('opacity','0');
setTimeout("jQuery('.isotope-hidden').css('opacity','0');",500);
},
On Firefox there was an issue with hiding the elements, that is why i triy to hide it 2 times - the secont time after a slight delay resolved my problem

jQuery - bxSlider plugin reloadSlider issues

I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.

Categories

Resources