I’m wondering if this could be achieved.
I know how to get the top 10 from my database using SQL. But I would like to take it a step further.
My idea is to update the DIV every couple of seconds. First the script will check if there are any updates in the database, if so the DIV should be updated. I can do this on my own, but my question is: Can I animate this using jQuery?
Example:
[code]
Top 10 know is
1. Product 1 Views: 49
2. Product 2 Views: 48
3. Product 3 Views: 34
etc…
Top 10 in a few seconds is
1. Product 2 Views: 52
2. Product 1 Views: 49
3. Product 4 Views: 35
[/code]
So now I would like to FadeOut product 1, move product 2 up, fadeIn product 1 on position 2….the same will happen to the rest of the top 10.
I don’t know if this is even possible, that’s why I’m asking here.
Thanks a lot!
Moon, it’s certainly possible, but perhaps not entirely trivial. It’s very similar to the challenge that I had in my CMS when doing a promote/demote function for articles. In that case, if a user chose to demote an item, say from #4 to #5, the first step was to get the value and do the change via Ajax. Part two was to determine the id of the value below, and promote it up, again via Ajax. The trick was to determine the two on the fly via Ajax to minimize the hits on the database.
Now, in your case there’s an extra step, which is that an element theoretically could jump several places up or down, where in my case it was always only up one/down one. So, I think the trick would be to give the system awareness of the current pattern of results, and upon change provide it with the new set to do comparisons. During this comparison process is where the fading, blinking, etc would occur.
So, from a practical standpoint, I’d start with a query that returned an array. On update, you could return a similar array with updated data. Using array functions, you could compare position from the first set of data, descending from items 1-X (in a foreach loop) If the item has dropped, you fade it out and into the appropriate div. If the item moves up, you’d assign it to the higher div. A good visual might be to first go from a background color to dark (or gray) and then do a slow fade out for effect. Since only one item at a time can be in a div, the new item would essentially “bump” the next item, so it would be important to insure that each item is re-assigned so it doesn’t just disappear.
I’d be worried about doing this every few seconds…that’s a lot of DB hits and the Javascript would be pushing the client’s browser pretty hard. Maybe every 10-15 seconds would be more appropriate.