very strange jquery issue

Question

I am trying to run a function on page load but its not working. I've added it in every place I can think of and the ONLY thing that works is:

$("html").mousemove(function(event) {
    $('#project_thumbs_container').masonry('reload');
});

I've tried delays but I have resorted to the hacky above method :(

Does anyone have any suggestions as to why my function won't run?

UPDATE:

I am using masonry for jquery. My problem is when I load a page that uses masonry with ajax, it shows them in a single column. $('#project_thumbs_container').masonry('reload'); resets it properly, but it only works using the above mousemove method.

Answer 1

Unless someone has a better answer, I just put the code in my fadeIn(); snippet after ajax call is complete:

this.fadeIn('slow', function() {
  $('#project_thumbs_container').masonry('reload');
});

Seems to work.

Answer 2

It sounds like you have one of two problems:

1) Malformed HTML which is causing an error, which isn't allowing the code to parse correctly when using the document onReady syntax: $(function() { ... });

2) Masonry might be loading asynchronously, which means that the "onReady" callback might not be the one that you want to be using. Your Ajax call would look more like this:

$('body').load('index.html', function() {
  $('#project_thumbs_container').masonry();
});

Answer 3

Try something like this.

$(document).ready(function(){
    $('#project_thumbs_container').masonry('reload');
}); 

You can put this code anywhere on the page and it should work, as long as the dependencies have already been loaded.

Answer 4

Just put your function in this

$(document).ready(function() {
  // Handler for .ready() called.
  // your function 
});

when your page load the function will execute