We Keep Coding

How to delay a JQUERY onload function

I've found some solutions online for this but couldn't make them work for me. Or maybe I was doing it wrong. I am completely newbie in JS, can you please help me to delay this function?
jQuery(window).on('load', function(){ var $ = jQuery;
var $container = $('.social_container');
$container.masonry({
columnWidth:350,
gutterWidth: 355,
itemSelector: '.masonryImage'
});
});

You can use setTimeout() of javascript :-
jQuery(window).on('load', function() {
setTimeout(function() {
var $ = jQuery;
var $container = $('.social_container');
$container.masonry({
columnWidth: 350,
gutterWidth: 355,
itemSelector: '.masonryImage'
});
}, 2000);
});

Use setTimer()
jQuery(window).on('load', function() {
setTimer(function() {
var $ = jQuery;
var $container = $('.social_container');
$container.masonry({
columnWidth: 350,
gutterWidth: 355,
itemSelector: '.masonryImage'
});
}, 1000);
});
This will delay it for 1 second.

The approach should be to wait for the plug-in to load and only then call your function.
var finished_rendering = function() {
console.log("finished rendering plugins");
}
// In your onload handler
FB.Event.subscribe('xfbml.render', finished_rendering);

Jquery Javascript. Function not working on document ready

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.

.ajaxComplete is not triggered after deleting item with AJAX?

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);
}

How to add Masonry options to isotope using images loaded

I'm having an issue with firefox and chrome not rendering the proper amount of columns when using Jquery Isotope and the images loaded option. Safari shows 3 columns all the time. However firefox and chrome sometimes only show 2. All of my images have the same width 28.333%. I have tried changing that to a lower number but it does not effect anything.
Here is what I currently have:
$(document).ready(function() {
var $container = $('#artContent'),
filters = {};
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.isotopeItem'
});
});
I tried this which resulted in breaking all the jQuery
$(document).ready(function() {
var $container = $('#artContent'),
filters = {};
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.isotopeItem',
masonry: { columnWidth: 33.333% }
});
});
Has anyone else had this issue? Or know of how to fix it.

If your using % in columnWidth, it needs to be like so (note the single quotes):
$(document).ready(function() {
var $container = $('#artContent'),
filters = {};
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.isotopeItem',
masonry: { columnWidth: '33.333%' }
});
});

Using a Javascript function

I am creating the function Bricks(). It works the first time it is called, but when I call it later with another event, I get an error saying that Bricks() hasn't be defined. What could I be doing wrong?
Function Created:
<script>
$(document).ready(function(){
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector:'.post-wrap'
});
});
}
Bricks();
});
</script>
Called Upon later:
<script>
$(document).ready(function() {
$(".comment-button").click(function() {
$(this).parents(".post-bottom").find(".commenting-area").toggle();
Bricks();
});
});
</script>

Because the function Bricks is defined in closure scope(the dom ready handler) so it will be available inside that dom ready handler only.
If you want to use it in a different scope, you need to define the function in a shared scope, in this case you can use the global scope(window scope), that is define the function outside the dom ready handler
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post-wrap'
});
});
}
$(document).ready(function () {
Bricks();
});
Another solution as suggested by #AlienArrays is to move the contents of both document ready handlers to one so that both of them will share the same closure scope
$(document).ready(function () {
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post-wrap'
});
});
}
Bricks();
$(".comment-button").click(function () {
$(this).parents(".post-bottom").find(".commenting-area").toggle();
Bricks();
});
});

To be able to reference your function globally, you must define it globally:
$(document).ready(function(){
window.Bricks = function () {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post-wrap'
});
});
};
Bricks();
});
Note: there are better, cleaner ways to write the above code, but this serves as an answer to the question at hand.