Javascript's call back function

[cryoffalcon]

Hi,
I am using Lazy Load Jquery plugin here on my test page: http://bloghutsbeta.blogspot.com/201...ting-2_04.html
And this is the minified script for lazyload:

 <script src="http://files.cryoffalcon.com/javascript/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>

this one is to trigger lazy load:

<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({
     effect : "fadeIn"
 });
      });
  </script>

In the above script I have added fadeIn effect to it, I don't know if I have done it right according to script writting I am not good in scripts ^^ So, I would like have an advise if it's well written or there is some comma mistake.

But that is not my important question, all of the above lazy load plugin is used with QuickSand Jquery plugin that I am using for sorting.
QuickSand Jquery Plugin requires callback function if it's tooltip or Lazy Load, So can someone kindly tell me how to make lazy load work together with quicksand jquery.
Here is the quicksand's script:

<script type="text/javascript">
(function($) {
 $.fn.sorted = function(customOptions) {
  var options = {
   reversed: false,
   by: function(a) {
    return a.text();
   }
  };
  $.extend(options, customOptions);
 
  $data = $(this);
  arr = $data.get();
  arr.sort(function(a, b) {
   
      var valA = options.by($(a));
      var valB = options.by($(b));
   if (options.reversed) {
    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;    
   } else {  
    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; 
   }
  });
  return $(arr);
 };

})(jQuery);

$(function() {
  
  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i < class_names.length; i++) {
      if (class_names[i].indexOf('selected-') == 0) {
        r.selected = true;
      }
      if (class_names[i].indexOf('segment-') == 0) {
        r.segment = class_names[i].split('-')[1];
      }
    };
    return r;
  };
  
  var determine_sort = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };
  
  var $preferences = {
    duration: 800,
    easing: 'easeInOutQuad',
    adjustHeight: 'dynamic'
  };
  
  var $list = $('#data');
  var $data = $list.clone();
  
  var $controls = $('ul#gamecategories ul');
  
  $controls.each(function(i) {
    
    var $control = $(this);
    var $buttons = $control.find('a');
    
    $buttons.bind('click', function(e) {
      
      var $button = $(this);
      var $button_container = $button.parent();
      var button_properties = read_button($button_container.attr('class').split(' '));      
      var selected = button_properties.selected;
      var button_segment = button_properties.segment;

      if (!selected) {

        $buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2');
        $button_container.addClass('selected-' + button_segment);
        
        var sorting_type = determine_sort($controls.eq(1).find('a'));
        var sorting_kind = determine_kind($controls.eq(0).find('a'));
        
        if (sorting_kind == 'all') {
          var $filtered_data = $data.find('li');
        } else {
          var $filtered_data = $data.find('li.' + sorting_kind);
        }
        
        if (sorting_type == 'size') {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return parseFloat($(v).find('span').text());
            }
          });
        } else {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return $(v).find('strong').text().toLowerCase();
            }
          });
        }
        
        $list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );
        
      }
      
      e.preventDefault();
    });
    
  }); 

var high_performance = true;  
  var $performance_container = $('#performance-toggle');
  var $original_html = $performance_container.html();
  
  $performance_container.find('a').live('click', function(e) {
    if (high_performance) {
      $preferences.useScaling = false;
      $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
      high_performance = false;
    } else {
      $preferences.useScaling = true;
      $performance_container.html($original_html);
      high_performance = true;
    }
    e.preventDefault();
  });
});
</script>

[jscheuer1]

That's correct. You only need a comma if there's more than one property. You have only one, the effect. There should never be a comma after the last property. Since the first is the last in this case, you're perfect.

About the callback. I see you have:

$list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );

That's the callback (highlighted). I'm not sure what the callback for lazyload would be there. You could try various things, but this looks like it would work, addition red:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ();
	$("img").lazyload({
		effect : "fadeIn"
	});
});

I changed the line breaks and spacing, but only the red was added.

But that might be overkill. You could also try:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ();
	$(this).lazyload({
		effect : "fadeIn"
	});
});

Or if that works, the shortcut version might as well:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ().lazyload({
		effect : "fadeIn"
	});
});

[cryoffalcon]

That's correct. You only need a comma if there's more than one property. You have only one, the effect. There should never be a comma after the last property. Since the first is the last in this case, you're perfect.

About the callback. I see you have:

$list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );

That's the callback (highlighted). I'm not sure what the callback for lazyload would be there. You could try various things, but this looks like it would work, addition red:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ();
	$("img").lazyload({
		effect : "fadeIn"
	});
});

I changed the line breaks and spacing, but only the red was added.

But that might be overkill. You could also try:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ();
	$(this).lazyload({
		effect : "fadeIn"
	});
});

Or if that works, the shortcut version might as well:

$list.quicksand($sorted_data, $preferences, function(){
	$(this).tooltip ().lazyload({
		effect : "fadeIn"
	});
});

Hi,
thanks for your reply I tried both of the methods but they didn't work

[jscheuer1]

The first worked when I pasted it into the browser after running quicksand. So perhaps you just missed something, or forgot to clear the browser cache and reload the page before testing.

In any case, to diagnose it further I would need a link to the page or a copy of the page with the first method in place so I can see what went wrong.

[cryoffalcon]

The first worked when I pasted it into the browser after running quicksand. So perhaps you just missed something, or forgot to clear the browser cache and reload the page before testing.

In any case, to diagnose it further I would need a link to the page or a copy of the page with the first method in place so I can see what went wrong.

Hi,
thanks for quick reply, here is the link to the page with the first code that you gave me
http://bloghutsbeta.blogspot.com/201...ting-2_04.html
you can see I have it there and its not working, I don't know why?

[jscheuer1]

Oddly, and I could have checked this before, but I just assumed it was OK, an error is coming from:

$(this).tooltip ();

So either not only is that an error, but it also must not be required for the tool tips to follow the quicksand content, because they do anyway.

Or perhaps it is required, but that it fires more than once and that one of those times it's an error.

I also did some more testing and:

	$("img").lazyload({
		effect : "fadeIn"
	})

only works in some browsers.

And it appears that it's not just the images that are faded out, their parent li elements are as well, at least in IE.

So let's try this:

$list.quicksand($sorted_data, $preferences, function(){
	try{$(this).tooltip ();} catch(e){}
	$('.lazy').each(function(){
		this.src = this.getAttribute('data-original');
	}).add($('.lazy').parent('li')).fadeIn('slow');
});

However, I think there may also be other problems because, even as it is, repeated calls to quicksand appear not to work properly, only the first seems to execute correctly in some browsers. But let's try the above anyway to see what it gets us.

[cryoffalcon]

Oddly, and I could have checked this before, but I just assumed it was OK, an error is coming from:

$(this).tooltip ();

So either not only is that an error, but it also must not be required for the tool tips to follow the quicksand content, because they do anyway.

Or perhaps it is required, but that it fires more than once and that one of those times it's an error.

I also did some more testing and:

	$("img").lazyload({
		effect : "fadeIn"
	})

only works in some browsers.

And it appears that it's not just the images that are faded out, their parent li elements are as well, at least in IE.

So let's try this:

$list.quicksand($sorted_data, $preferences, function(){
	try{$(this).tooltip ();} catch(e){}
	$('.lazy').each(function(){
		this.src = this.getAttribute('data-original');
	}).add($('.lazy').parent('li')).fadeIn('slow');
});

However, I think there may also be other problems because, even as it is, repeated calls to quicksand appear not to work properly, only the first seems to execute correctly in some browsers. But let's try the above anyway to see what it gets us.

Oh I am really really sorry, I forgot to mention that my tooltips are made by me through css, as previously I had issues with this callback for tooltips so later I gave up. I just removed the tooltip calling from it, and used your first code part without tooltip it works like a charm ^^
Thanks alot for your help I am greatful