4 Replies - 1264 Views - Last Post: 11 March 2011 - 09:21 AM

#1 cryoffalcon   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Sorting reversed to what it do

Posted 10 March 2011 - 07:44 AM

Hi,
well i wanted a little help i have a script which sorts things alphabetically as starting from A to Z, well that's awesome but it does another thing that is it also sorts things according to size, so i have issue with the size thing as it bring those first which has small size and puts the heaviest at the end as 100kb is placed first and 1200kb is placed later, i want size sorting to bring heavy size first and low size at the end, i mean to say i want it to be opposite of what it is doing, well i don't know jquery that is why i am asking.
And just asking out of curiosity, is it possible to add script of date sorting to it? if possible to add it to your reply
here is the script

(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 = $('#list');
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();
});

});

thank you in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Sorting reversed to what it do

#2 Jstall   User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Sorting reversed to what it do

Posted 10 March 2011 - 08:59 AM

Looks like you are using a plugin called sorted there. As you can see the options specify which direction you want to sort to go :
var options = {
reversed: false,
by: function(a) {
return a.text();
}




reversed is the option you are looking for, just pass in
 {reversed:true}



When you are creating this and you should see the opposite of the result you are seeing now as false is the default.
Was This Post Helpful? 0
  • +
  • -

#3 cryoffalcon   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: Sorting reversed to what it do

Posted 10 March 2011 - 11:37 PM

thanks Jstall for your quick reply, dreamincode is the only forum that i like, because it is the only place where people help others.
Your method works 100% but the issue is like this
the above code do two things right now
1st is it do alphabetical ordering means from a-z.
2nd is that it orders according to size means from 200 to 800, from small size to big

Now the issue is that when i made it true it made size according to my need they are now in decending order from 800 to 200
but it also made alphabetical order z to a
i want the alphabetical order to stay a to z.

and there is one more thing that i request from you to add to the code i-e to repeat the size code means i want to use size ordering button two times. Actually i am not going to use it for size i am going to use it for date sorting.
thanks a lot for your expensive time, that you are giving me.
Was This Post Helpful? 0
  • +
  • -

#4 Jstall   User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Sorting reversed to what it do

Posted 11 March 2011 - 08:17 AM

Hi,

Aren't you dealing with rows of data? Like:

name size
apple 2
banana 3
egg 1

then sort by size you would get
name size
banana 3
apple 2
egg 1

They would still all line up, if you kept the names intact you would end up with
name size
apple 3
banana 2
egg 1

They wouldn't line up anymore and you would have wrong sizes for the items. Or am I totally getting the application of this sorting wrong?


it's really tough for me to say how to accomplish what you are looking for without the html that goes along with it. Even then I may not be able to help you. From what I am seeing you are deciding what data to sort by the sorting_kind variable which can either be "all" or something specific. From there it assigns a $filtered_data variable. It then checks a sorting type variable which can be either "size" or something else. It's hard to say how to integrate date in there without seeing your html.


Edit : If you do post any more code could you please use the [ code] tags? It makes things easier to read. Thanks!

This post has been edited by Jstall: 11 March 2011 - 08:19 AM

Was This Post Helpful? 0
  • +
  • -

#5 cryoffalcon   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: Sorting reversed to what it do

Posted 11 March 2011 - 09:21 AM

Hi thanks once again for your quick reply well i will give you now link to the testing blog of mine where i have created a demo of what i want to do.
there you will see two sorting buttons one reads as Name and the 2nd reads as Date, i want to add a third one named as Size, but i don't know what code to add to the script that i have.
here is the link to testing blog
http://letseedrop.bl.../testing-8.html

well to save your time from searching code in page source i will explain it
this is the Html&Css part of the code
<ul id="gamecategories">
<li><span class="gamecategoriespara2">Categorize</span><span class="gamecategoriespara1">These</span><span class="gamecategoriespara2">Games</span><span class="gamecategoriespara1">By:</span>
<ul>
<li class="segment-1 selected-1"><a href="#" data-value="all">All</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><span class="gamecategoriespara2">Sort</span><span class="gamecategoriespara1">These</span><span class="gamecategoriespara2">Games</span><span class="gamecategoriespara1">By:</span>
<ul>
<li class="segment-1"><a href="#" data-value="name">Name</a></li>
<li class="segment-2"><a href="#" data-value="size">Date</a></li>
</ul>
</li>
</ul>

<div class="demosa">
<ul id="data" class="gamecolumns">
<li data-id="id-1" class="util"><a href="#"><img src="http://lh5.ggpht.com/_QAJ2Le4En08/TTsLIZqwZCI/AAAAAAAAAcc/zTEP3WxjP6s/s128/thumb_birdinator60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Anika's odyssey</strong>
<p class="gamedetailpara">
Date:</p>
<span>18/2/2001</span>
<p class="gamedetailpara">
Size:</p>
200 KB</div>
</div>
</a>
</li>
<li data-id="id-2" class="app"><a href="#"><img src="http://lh5.ggpht.com/_QAJ2Le4En08/TTsLIcSc7jI/AAAAAAAAAcg/K_jZSWNWOEE/s128/thumb_alter60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Cnika's odyssey</strong>
<p class="gamedetailpara">
Date:</p>
<span>14/4/2001</span>
<p class="gamedetailpara">
Size:</p>
400 KB</div>
</div>
</a>
</li>
<li data-id="id-3" class="util"><a href="#"><img src="http://lh4.ggpht.com/_QAJ2Le4En08/TTsLIYPHJOI/AAAAAAAAAck/s26KCPxhcWQ/s128/thumb_bloxorz60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Bnika's odyssey</strong>
<p class="gamedetailpara">
Date:</p>
<span>13/3/2001</span>
<p class="gamedetailpara">
Size:</p>
300 KB</div>
</div>
</a>
</li>
<li data-id="id-4" class="app"><a href="#"><img src="http://lh4.ggpht.com/_QAJ2Le4En08/TTsLVUsLoKI/AAAAAAAAAcs/VxuiKD3f6co/s128/thumb_bmxrex60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Dnika's odyssey</strong>
<p class="gamedetailpara">
Date:</p>
<span>15/3/2001</span>
<p class="gamedetailpara">
Size:</p>
500 KB</div>
</div>
</a>
</li>
<li data-id="id-5" class="util"><a href="#"><img src="http://lh3.ggpht.com/_QAJ2Le4En08/TTsLVtrhx_I/AAAAAAAAAcw/XF6TqV-n-tg/s128/thumb_anikasodyssey60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Enika's the monkey girl and the shit</strong>
<p class="gamedetailpara">
Date:</p>
<span>16/3/2001</span>
<p class="gamedetailpara">
Size:</p>
600 KB</div>
</div>
</a>
</li>
<li data-id="id-6" class="app"><a href="#"><img src="http://lh3.ggpht.com/_QAJ2Le4En08/TTsLIPQ3TtI/AAAAAAAAAcY/x4BgLE8vXG8/s128/thumb_alliant60%20%2890%20x%2090%29.jpg" alt="FF" /><div class="gamedetails">
<div class="gamedetailshover">
<p class="gamedetailpara">
Name:</p>
<strong>Fnika's odyssey</strong>
<p class="gamedetailpara">
Date:</p>
<span>17/3/2001</span>
<p class="gamedetailpara">
Size:</p>
700 KB</div>
</div>
</a>
</li>
</ul>
</div>



and these are the files that are used to make this thing run btw it uses lots of jquery but the end result is so beautiful that it worth it.

<script src='http://bloghuts.googlecode.com/files/jquery-latest.min.js' type='text/javascript'/>
<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%20compatibility1.2.js' type='text/javascript'/>



and the other script that i am requesting you to make okay is this, i want to adjustments in it 1st is that it should reverse the effect, which you told me already but it is also reversing alphabetical order which i don't want, and 2nd is that i am requesting you to add some code to it so that i can have third button of sorting for size, the size and date script are same, the problem with me is that i don't know how to duplicate it in it.

the other script is
&lt;script type=&quot;text/javascript&quot;&gt;
(function($) {
 $.fn.sorted = function(customOptions) {
  var options = {
   reversed: true,
   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 &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0;    
   } else {  
    return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0; 
   }
  });
  return $(arr);
 };

})(jQuery);

$(function() {
  
  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i &lt; 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*=&quot;selected-&quot;]');
    return $selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*=&quot;selected-&quot;]');
    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#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. &lt;a href=&quot;#toggle&quot;&gt;Reverse&lt;/a&gt;.');
      high_performance = false;
    } else {
      $preferences.useScaling = true;
      $performance_container.html($original_html);
      high_performance = true;
    }
    e.preventDefault();
  });
});

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 &lt; 20 ) { //If tooltip exceeds the X coordinate of viewport
                 mousex = e.pageX - tipWidth - 20;
             } if ( tipVisY &lt; 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 });
         });
    });
};
&lt;/script&gt;



thank you for all the time that you spend in reading,solving issue and writing back. I am thankful.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1