1

I have 5 divs, each having count down timers. The following numbers would obviously be be divided by <br/>'s , but for the sake of the example I am trying to be as clear as possible :-)

Example before sort

4.39
3.45
2.11
3.56
1.11

Example after sort

4.39
3.56
3.45
2.11
1.11

And each countdown counts to 0 obviously. I had in mind, that when a timer reaches 0, that div is sorted automatically sorted and put down in the last position, and then starts again.

I was looking at Jquery's website, and the ones I found are drag related, meaning you have to click on the DIV, and move it yourself. I would like to achieve that animation automatically, by a method that sorts out DIVS according to the timer.

Anyone have a code snippet, one which I didn't find already, that I might find handy? :-)

All help is greatly appreciated!! Thanks!!

James
  • 109,676
  • 31
  • 162
  • 175
Mez
  • 4,666
  • 4
  • 29
  • 57
  • use a list ( `
      ` and `
    • `) and sort them with http://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery
     – Gabriele Petrioli Oct 19 '10 at 07:32

3 Answers3

2

You can get your list using normal jquery selectors. Put all the elements inside a single ul or something and read then out using vanilla jquery.

For sorting, you can use the sort method available for Javascript arrays.

To move the li items into place, you can use either reposition then with some animation (perhaps using the position function in jquery-ui) or simply replace the contents of the ul with a sort list of li's

Finally, to do this repeatedly, you can use the setInterval function.

It might also be possible to tie in some triggers to the jquery-ui sortable and then just call that from your setInterval expression. I haven't tried this though.

Noufal Ibrahim
  • 71,383
  • 13
  • 135
  • 169
  • Hmmm I'll try your suggestion out, and paste my solution – Mez Oct 19 '10 at 07:36
  • Hi there, I came up with a solution, and is found on http://blog.stephenborg.com/?p=219. I cannot however seem to do an animation of setPosition of X and Y. But anyways, if you would like to see my way of doing it you can download the source code from my post. Thanks a lot. – Mez Oct 19 '10 at 14:11
1

Why so complicated?

  1. Iterate over the DIVs or list elements
  2. read the text
  3. convert them to a double
  4. add each value to an array
  5. Sort the array
  6. Create a string of HTML with jQuery
  7. replace the content of the container with the new list
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
0

You can sort the DIVs and then append the sorted DIV element one by one to a HTML container (such as another DIV holding all these sub-DIVs).

Nevin
  • 7,689
  • 1
  • 23
  • 25