jQuery Forum

Thanks  
for your reply, as i said earlier i am not good in jquery but as i am at the last step to use quick sand so i don't want to quit using it, from the reply you did, what i understand is that i have to copy the above code that you have given and paste it into the quicksand.js, where to place in it, i will be placing it at the end, i hope it will work, and if you read my comment and found that i am doing wrong then i would really appreciate if you can guide me and push me little more forward. And yah i will using the class tip trigger for it. I tried other tootips with images but none of them work with quick i guess all have same problem.
Thanks once again.

Hi,
well i did what i said in my comment, and it didn't worked, this is how i added the code you gave me to add to quick sand.js
http://bloghuts.googlecode.com/files/jquery.quicksand2002.js
i have added it to the end of the code, now quicksand has stoped working.
thank you for time.
take care.

Hi,
thanks again for your quick reply, i really appreciate that you are responding to me, as i have posted the same issue on two other forums that are codingforums, and digitalforums.
My personal experience is very bad with the forums as i had never received help through it, and if you ask me why am i trying here, well i was trying luck as i don't know anyone who knows jquery here all are accountants like me.
Well i would like to ask for some more of your time, i know time=money and i really understand the value of your help. So please do help me, as i don't think others are ready to do so. I am implementing this quicksand on blogger, here is a testing place, where quick sand and tooltip both are in place. If you just check this place source code
http://letseedrop.blogspot.com/2011/01/testing-18.html
and tell me what is my element that i am applying to quicksand as i am bit confused, and i think you are saying that i should make a <script>-your given code here-</script> and then put it into head.
Everything is there in place in testblog for which i gave you link, if you would give me the ready code, and tell where to place it in that example page, and what changes to do the existing scripts.
I am sorry if i am demanding much, but i am helpless.
Thanks

Hi used this code before closing </head> and then used it instead before closing body tag </body>
<script>
$(document).ready(function(){
   $(&quot;#list&quot;).quicksand(
      $(&quot;#data &gt; li&quot;),
      { duration: 1000 },
      function() { // callback function
            $(&#39;#list a.tip_trigger&#39;).hover(function(){
                  tip = $(this).find(&#39;.tip&#39;);
                  ...
                  tip.css({  top: mousey, left: mousex });
            });
      }
);
</script>

but it didn't worked, i replace #content with the list, as that is the only thing that is with id in html of quicksand. Can you tell where did i go wrong?
take care.

Hi,
thanks for taking out time and giving me a response, well i saw your example and yah it works, i am thankful to you,
but as you know i don't know jquery so there is a problem with it, you have used your own sorting script, while i am using this one,
<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: false
  };
 
  var $list = $('#data');
  var $data = $list.clone();
 
  var $controls = $('ul#splitter 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);
       
      }
     
      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>
how to attach this script with the tooltip thing, i don't know that, well i am not asking you to do my homework, i am just saying that is why i will not be able to use it. and yah i want to make page load faster that is why i will be placing all scripts in body.
But i am thankful to you for all your help, i choose your answer as best and am following you, this is max i can do, i can't pay you as i am myself at the struggle age.
take care friend.

Hi,
thanks for quick reply, well you are right that i didn't guided you well, that was a big mistake, well if you do a last thing, i won't ask another time, i will go straight to use css tooltip.
Now let me tell you in detail, what am i doing,
this is first part by click on these links quick sanding is done like in your example you used button:
<ul id="splitter">
<li>Filter by type:<ul>
<li class="segment-1 selected-1"><a href="#" data-value="all">Everything</a></li>
<li class="segment-0"><a href="#" data-value="app">Applications</a></li>
<li class="segment-2"><a href="#" data-value="util">Utilities</a></li>
</ul>
</li>
<li>Sort by:<ul>
<li class="segment-1 selected-1"><a href="#" data-value="name">Name</a></li>
<li class="segment-2"><a href="#" data-value="size">Size</a></li>
</ul>
</li>
</ul>
the 2nd part is where i will be placing pictures which is the components area:
the code looks like this:
<ul id="data" class="image-grid">
<li data-id="id-1" class="util">
<a href="http://www.yahoo.com">
<img src="http://razorjack.net/quicksand/content/images/activity-monitor.png" width="128" height="128" alt="" /></a>
<strong>Activity Monitor</strong>
<span>348 KB</span>
</li>
<li data-id="id-2" class="app">
<img src="http://razorjack.net/quicksand/content/images/address-book.png" width="128" height="128" alt="" />
<strong>Address Book</strong><span>1904 KB</span>
</li>
<li data-id="id-3" class="app">
<img src="http://razorjack.net/quicksand/content/images/finder.png" width="128" height="128" alt="" />
<strong>Finder</strong>

<span>1337 KB</span>
</li>
<li data-id="id-4" class="app">
<img src="http://razorjack.net/quicksand/content/images/front-row.png" width="128" height="128" alt="" />
<strong>Front Row</strong>
<span>401 KB</span>
</li>
<li data-id="id-5" class="app">
<img src="http://razorjack.net/quicksand/content/images/google-pokemon.png" width="128" height="128" alt="" />
<strong>Google Pokémon</strong>
<span>12875 KB</span>
</li>
<li data-id="id-6" class="app">
<img src="http://razorjack.net/quicksand/content/images/ical.png" width="128" height="128" alt="" />
<strong>iCal</strong>

<span>5273 KB</span>
</li>
<li data-id="id-7" class="app">
<img src="http://razorjack.net/quicksand/content/images/ichat.png" width="128" height="128" alt="" />
<strong>iChat</strong>
<span>5437 KB</span>
</li>
<li data-id="id-8" class="app">
<img src="http://razorjack.net/quicksand/content/images/interface-builder.png" width="128" height="128" alt="" />
<strong>Interface Builder</strong>
<span>2764 KB</span>
</li>
<li data-id="id-9" class="app">
<img src="http://razorjack.net/quicksand/content/images/ituna.png" width="128" height="128" alt="" />
<strong>iTuna</strong>

<span>17612 KB</span>
</li>
<li data-id="id-10" class="util">
<img src="http://razorjack.net/quicksand/content/images/keychain-access.png" width="128" height="128" alt="" />
<strong>Keychain Access</strong>
<span>2 KB</span>
</li>
<li data-id="id-11" class="util">
<img src="http://razorjack.net/quicksand/content/images/network-utility.png" width="128" height="128" alt="" />
<strong>Network Utility</strong>
<span>245 KB</span>
</li>
<li data-id="id-12" class="util">
<img src="http://razorjack.net/quicksand/content/images/sync.png" width="128" height="128" alt="" />
<strong>Sync</strong>
<span>3788 KB</span>
</li>
<li data-id="id-13" class="app">
<img src="http://razorjack.net/quicksand/content/images/textedit.png" width="128" height="128" alt="" />
<strong>TextEdit</strong>
<span>1669 KB</span>
</li>
</ul>
well the third part is the script which tells about sorting, and this is the place where i am not able to insert the tooltip code, as i don't know where to change which element and to attach which sohtanaka's code into which place, if you just redesign it, means recode it, in complete like that its ready to be placed in these<script type="text/javascript"></script> as every time you tell me something you keep your teaching level high at newbie level but my level is down then that:
the code is same as above comment's code:
<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: false
  };
 
  var $list = $('#data');
  var $data = $list.clone();
 
  var $controls = $('ul#splitter 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);
       
      }
     
      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>

and the last part is about the files that i am using to make it work are these, they are five but with jquery library its equal to six and the sequence of the csstransfor and animate should be kept like this under jquery library otherwise errors might occur that is what i read:
<script src='http://bloghuts.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>
<script src='http://bloghuts.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='http://bloghuts.googlecode.com/files/quicksand.js' type='text/javascript'/>
<script src='http://bloghuts.googlecode.com/files/easeinoutquad1.3.js' type='text/javascript'/>
<script src='http://bloghuts.googlecode.com/files/easeinout compatibility1.2.js' type='text/javascript'/>
these are all the things that i am doing to make quick sand work everything is going awesome except that i am not able to attach tooltip code to it, and you have explained it to me 1000 times but you didn't gave me a copy paste code that is what we call ready made, if someone who was at begining level of jquery he would have got what you are saying but to me its really hard.
If you just modify the codes from the above and paste it back to me in the comment, then i will copy it and paste it back and start using it.
thanks for being patient with me, you are the first person who gave me this long time, and is still trying to help (knowing that a dumb in jquery is sitting at the other side)
take care, i will be looking forward to your comment.

Hi,
thanks for the quick reply and yah i agree that copy pasting will lead me to failure and i am already facing the speed of snail. You are one smart person i can see that.
By the way i did this by pasting it in head but it didn't worked you told me to replace it, i did the replace in the right way but i have doubts about the function thing
<script type="text/javascript">
(function($) {
jQuery.fn.tooltip = function () {
    this.each ( function ( index, element ) {
        $(element).mouseover(function(){
            tip = $(this).find('.tip');
             tip.show(); //Show tooltip
         }).mouseout ( function() {
             tip.hide(); //Hide tooltip
         }).mousemove(function(e) {
             var mousex = e.pageX + 20; //Get X coodrinates
             var mousey = e.pageY + 20; //Get Y coordinates
             var tipWidth = tip.width(); //Find width of tooltip
             var tipHeight = tip.height(); //Find height of tooltip
    
             //Distance of element from the right edge of viewport
             var tipVisX = $(window).width() - (mousex + tipWidth);
             //Distance of element from the bottom of viewport
             var tipVisY = $(window).height() - (mousey + tipHeight);
    
             if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                 mousex = e.pageX - tipWidth - 20;
             } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                 mousey = e.pageY - tipHeight - 20;
             }
             //Absolute position the tooltip according to mouse position
             tip.css({  top: mousey, left: mousex });
         });
    });
};

 $.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: false
  };
 
  var $list = $('#data');
  var $data = $list.clone();
 
  var $controls = $('ul#splitter 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>
thanks again for your help, and this will be my last copy paste after it i will for sure start learning things, as i don't want to face such things again, thanks for your comments and advice.
take care.