This could be kind of complex cause there is a lot of ravioli code involved. I'm just looking for possible causes of this behavior.
Im using Jquery Isotope, it works correctly. The only thing that is not working is a function that I call when the document is ready, why could that be? :
$( document ).ready(function(){
$('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'packery',
packery: {
gutter: 10
}
});
var isotopeFilter = function(f){
console.log(f);
$(".grid").isotope({filter: f});
}
isotopeFilter('.xp'); // Doesn't Work!!
$("#filter-basket").on("click", function(){
isotopeFilter('.basket'); // Works correctly
});
$("#filter-all").on("click", function(){
$(".grid").isotope({ filter: '.xp' }); // Works correctly
});
$("#filter-ghacking").on("click", function(){
$(".grid").isotope({ filter: '.ghacking' }); // Works correctly
});
})
The reason I need to call that function at document load is because I want to set a default filtering.
Related
My Isotope somehow does strange things, when it loads it zooms like crazy and when you filter, the images zoom and scale. It only happens once but it looks super strange. I already tried to place the jQuery at first before all the other code and I also tried to disable the CSS animations for the hover but none of these worked out.
My jQuery is:
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// Make filtering work
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// Highlight the active filter
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
and a live demo can be found here:
http://dominikwierl.com/develop/v+v/projects
This can be closed.
I've found the answer with some more searching. It's called Isotope Shaking and it can happen when there are too many animations on one object.
See: https://isotope.metafizzy.co/faq.html#items-jump-after-transitioning-position
I have an issue with my masonry code.
It works fine on pageload, but the items that are inside the masonry can be filtered, I am doing this using ajax and I'm replacing the entire div with elements to show the filtered items.
After this happens, the masonry code is not applied again and it falls apart.
How can I make sure the masonry stays applied even when content changes after pageload?
In my footer I have the following code:
<script type="text/javascript">
$(document).ready(function() {
$('.gridlist').isotope({
itemSelector: '.masonryitem',
layoutMode: 'masonry',
});
});
</script>
Then in my custom.js I have the following:
$( document ).ready(function() {
/* Ajax code voor aanbiedingen */
$("#branche").on('change', function() {
var option = $('#branche > option').filter(':selected');
if(option.val() == 'default'){
$.post("includes/ledenall.php", {
filter: option.val()
}, function(result){
$("#content1").html(result);
});
}else{
$.post("includes/leden.php?option=" + option.val(), {
filter: option.val()
}, function(result){
$("#content1").html(result);
});
}
});
});
Which returns my php file, but this time without the masonry being applied.
What can I do about this?
You can try reapplying your isotope library after changing the DOM:
/* Ajax code voor aanbiedingen */
$("#branche").on('change', function() {
var option = $('#branche > option').filter(':selected');
if(option.val() == 'default'){
$.post("includes/ledenall.php", {
filter: option.val()
}, function(result){
$("#content1").html(result);
$('.gridlist').isotope({
itemSelector: '.masonryitem',
layoutMode: 'masonry',
});
});
}else{
$.post("includes/leden.php?option=" + option.val(), {
filter: option.val()
}, function(result){
$("#content1").html(result);
$('.gridlist').isotope({
itemSelector: '.masonryitem',
layoutMode: 'masonry',
});
});
}
});
I don't know if .gridlist is totally replaced in your updated DOM. If not, you may need to somehow "remove" the old isotope instance, but something like this is what you need to do.
Add your code to a function
function func() {
$('.gridlist').isotope({
itemSelector: '.masonryitem',
layoutMode: 'masonry',
});
}
Then you can call the function and apply your isotope at any point you want
I have the following jQuery code using Isotope plugin:
$(document).ready(function() {
/**
* Initialise Isotope
*/
var $grid = $('.grid').isotope({
"itemSelector": ".grid-item",
layoutMode: 'masonry',
"masonry": {
"columnWidth": 0
}
});
/**
* Trigger when arrangement completes
*/
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
alert("HERE!");
});
});
The alert does not trigger at all although the Isotope grid works. What have I missed? Thanks!
I got my code working with the following change:
$('.grid').isotope().on( 'layoutComplete', function( event, filteredItems ) {
alert("HERE!");
});
I got the arrangeComplete from here so I do not understand why it does not work, as I have Isotope 2.2.2 which is the latest version. layoutComplete did the trick, which I found with some research.
$grid.on('arrangeComplete', function() {
console.log('arrangeComplete')
}).isotope();
I'm using Rails 4, Bootstrap and Masonry. I have the following code working for jQuery Masonry to arrange my divs, in application.js:
$(function(){
$('#pins').masonry({
itemSelector: '.box',
isFitWidth: true
});
});
var masonryUpdate = function() {
setTimeout(function() {
$('#pins').masonry();
}, 200);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);
It works otherwise, but when I try to delete an item with AJAX, Masonry doesn't update. Here is my destroy.js:
$('.deleting').bind('ajax:success', function() {
$(this).closest('.poista').fadeOut();
});
How could I force Masonry to reload, after the code example above? For some reason .ajaxComplete(masonryUpdate) is not triggered?
From the jQuery Documentation on ajaxComplete it seems as though it doesn't perform a function call on a given argument but instead calls a handler function when the Ajax requests complete.
handler
Type: Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions )
The function to be invoked.
Your best bet would be to use an anonymous function to call masonryUpdate.
$(document).ajaxComplete(function(event, xhr, settings) {
masonryUpdate();
};
Edit
It might be better to cache your masonry spec in a variable.
var mas = $('#pins').masonry({
itemSelector: '.box',
isFitWidth: true
});
Then you can call masonry on that variable
var masonryUpdate = function() {
setTimeout(function() {
mas.masonry('reload');
}, 200);
}
So here's what I'm trying to do. I have a grid with a lot of images, so I'm using the imagesLoaded library along with masonry.
Here's my CSS:
.grid {
opacity:0;
}
And HTML:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
And here's my JS:
var $container = $('.grid');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
gutter: '.gutter-sizer'
});
$container.masonry('on', 'layoutComplete', function(){
console.log('got here');
$container.animate({'opacity':1});
});
});
My goal is to have the grid hidden until all images are load and the layout is complete, and then fade it in. For some reason in my code above, it's never getting into the on layoutComplete block.
If I move that block outside of imagesLoaded, $container.masonry is undefined that point.
Any ideas?
FIDDLE HERE
If you change the grid opacity to 1 you can see everything is getting laid out fine. Just trying to figure out how to get the layoutComplete to call to set the opacity to 1.
You don't need to use the layoutComplete event on masonry. As you can just add your animation code under the masonry initialization .
When all images are loaded, the imageLoaded function will execute. You can then create the masonry object and animate right away like so:
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
columnWidth: 200,
itemSelector: '.item',
gutter: 10
});
console.log('got here');
$('.grid').animate({'opacity':1});
});
Here is a jsfiddle that demonstrate that
jQuery(document).ready(function($){
var wdm_wait = function(){
jQuery("body").find("img").each(function(i) {
if(!this.complete)
{
return false;
}
});
// when code reaches here Its assured that all the images are loaded
clearInterval(waiting);
console.log('got here');
var $container = $('.grid');
// initialize Masonry after all images have loaded
$container.masonry({
columnWidth: 100,
itemSelector: '.item',
gutter: 10
});
$container.animate({'opacity':1});
}
waiting = setInterval(wdm_wait,100);
});
This would certainly assure that your js code executes only after all the images have been loaded (rendered)
Hope this helps! :)
have you ever try this one, I think this is your answer
var $container = $('.grid').masonry({
columnWidth: 200,
itemSelector: '.item',
gutter: 10
});
$container.masonry( 'on', 'layoutComplete', function() {
$container.animate({'opacity':1});
});
$container.masonry();