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:
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
Code:
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 ;(
