PDA

View Full Version : Mootools FX.Sort Problem Help Needed!

neospark
03-20-2009, 12:16 PM
Hi

i am trying to do some results pinning using FX sort, so basically
when a result is clicked it goes to the top of the result set and is
pinned there , and so on if you click another that goes to the top
along with the first pinned one etc

As far as I can see my code is OK, maybe not the best but it seems to
debug correctly but ... the sorting is messed up. I cant actually show
you the HTML and code as its on an internal system etc , but i have
created a stripped down version for you to look at this gives the same
issues.

An example can be found here

http://www.homecheeq.com/sort.html

You can see if you click on say "7" and then "4" , crazy stuff happens
at the moment it , alerts out the ID of the click div and the current
sort order AFTER the sort has been called , the sort order look
correct but the sorting seems to be not the same as the sort order
given in the alert box .

My code is also below , HTML and JSCRIPT, i need help and i dont get
whats going on

HTML CODE:



<html>
<head>
<script src="http://www.clientcide.com/scripts/
clientside.moo.v1.2.packed.js" type="text/javascript"
charset="utf-8"></script>

<script src="http://www.clientcide.com/scripts/clientside.1.2.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://www.clientcide.com/wiki/lib/
tpl/clientside/mootorial.js"></script>

<script type="text/javascript" src="dynamic.js"></script>
</head>
<body>

<div class="products">
<div class="product">
0
<div class="sortdiv">
<a href="#" id="0">Sort </a>
</div>

</div>

<div class="product">
1
<div class="sortdiv">
<a href="#" id="1">Sort </a>
</div>

</div>

<div class="product">
2
<div class="sortdiv">
<a href="#" id="2">Sort </a>

</div>

</div>

<div class="product">
3
<div class="sortdiv">
<a href="#" id="3">Sort </a>

</div>

</div>

<div class="product">
4
<div class="sortdiv">
<a href="#" id="4">Sort </a>

</div>

</div>

<div class="product">
5
<div class="sortdiv">
<a href="#" id="5">Sort </a>

</div>

</div>

<div class="product">
6
<div class="sortdiv">
<a href="#" id="6">Sort </a>

</div>

</div>

<div class="product">
7
<div class="sortdiv">
<a href="#" id="7">Sort </a>

</div>

</div>

<div class="product">
8
<div class="sortdiv">
<a href="#" id="8">Sort </a>

</div>

</div>

<div class="product">
9
<div class="sortdiv">
<a href="#" id="9">Sort </a>

</div>

</div>

</div>

</body>
</html>



JSCRIPT



var PinningOrder = new Array('0','1','2','3','4','5','6','7','8','9');
var vert;

window.addEvent('domready',function()
{

vert = new Fx.Sort($$('.product'), {transition:
Fx.Transitions.Back.easeInOut, duration: 1000});

$$("[class=product]").each(function(obj) {
$$("[class=sortdiv] a").addEvent('click', PinResults)

});

});

function PinResults()
{
alert(this.id);

var id = this.id;

PinningOrder.erase(id);

var PinningOrderFirst = new Array(this.id);

var SortOrder = PinningOrderFirst.concat(PinningOrder);
alert(SortOrder);

vert.sort(SortOrder).chain(vert.rearrangeDOM.bind(vert));

PinningOrder.empty(); // empty the pinning order array and fill
again below
PinningOrder = SortOrder;

this.id = "xx";
this.removeEvents('click');
this.innerHTML = "done";

// $$("[class=result]").each(function(obj,index) {
// if (index == 0)
// {
// var obj3 = $$("[class=iconholder] img")[index];
// // obj3.id = index;
// var pinValue = index;
// /// PinningOrder[index] = pinValue;
// // alert(obj.className);
// // obj.className = "pinned";
// /// alert(obj.className);
// // $$("[class=iconholder] img")[index].addEvent('click',
UnPinResults);
// }
// else
// {
// var obj2 = $$("[class=iconholder] img")[index];
// var pinValue = index;
// // PinningOrder[index] = pinValue;
// // alert(obj2);
// //obj2.id = index;
//
// }
//
// });

/// vert = new Fx.Sort($$('.result'), {transition:
Fx.Transitions.Back.easeInOut, duration: 1000});
// vert.sort(PinningOrder).chain(vert.rearrangeDOM.bind(vert));

}




Any ideas let me know some of the commeted out code kind of shows what
I have been trying to do but none of it works ;(