Javascript's call back function

Javascript's call back function

by cryoffalcon » Thu Apr 19, 2012 8:10 am

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

Code: Select all

<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:

Code: Select all

<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:

Code: Select all

<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>



Re: Javascript's call back function

by XainPro » Thu Apr 19, 2012 10:36 am

where the problem is ?
its working perfectly.

Re: Javascript's call back function

by cryoffalcon » Thu Apr 19, 2012 1:32 pm

where the problem is ?
its working perfectly.

Well click on any buttons (Bicycles, Motorcycles etc) and you will see the callback function that I have added doesn't make it work. I want a callback function for it so that lazyload doesn't stop working.

Re: Javascript's call back function

by XainPro » Fri Apr 20, 2012 4:47 am

i go to your website clicked on cars and all car games filtered and appears the way it should be and after that i clicked on All buttons and all games appears back on screen.
that's how it work. :P.
i got absolutely no problem with it.