Javascript Wheelmouse Controls : PHP Data Grid
The premise:
Assuming you've already set up some neat-o PHP/MySQL & AJAX (or AHAH) Data Grid with all nifty onmouseovers you can cram in there, I've got another one you might try...
Warning, this was a total hack. Feel free to clean up after me, just do me a favor and report your version.
Here we go. Somewhere in your neat data grid table interface you've got paging buttons, and I imagine those paging buttons have values that they send to some kind of AJAX call, which sends it to PHP which then tells MySQL which records we want to view next, ie. the next 10 records starting at record 20? or the last 10 records starting at record 20?
Does that button have an ID? The DOM owns you in this Web 2.0 era, so I suggest that it must have an ID, if not, please add one (hint: i just used id=n for the next button and id=p for the previous button ... cryptic, huh?).
Ok, now that you have an ID, we can access the button's value="" from document.getElementById('').value
So throw this in the <head> or in a *.js :
function handle(delta) {
if (delta <>
process(document.getElementById('n').value); // NEXT SET OF RECORDS
else
process(document.getElementById('p').value); // PREVIOUS SET OF RECORDS
}
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
Thats it. process(); is my AJAX call and I don't need to tell you want the values were, figure that part out. (hint: 10, 20, 30 , 40 , 50, 60 etc.). process(); will send back that value, which will then be processed by a PHP script that will then instruct MySQL to give it so many records from such and such table and so on, order by, desc, asc, limit *, * and what-have-you. Once MySQL coughs up the goods to PHP, PHP send back some lovely JSON-ese and AJAX takes it from there, putting it into a nice table and then shoving it into a <div> on the users end.
So what's the end product? Mousewheel controlled record perusing in your browser based data-grid.
Fancy.
EDIT! I've re-written this for use with Prototype... and its much better now.
I will take this seriously... I promise.
Disregard my last post. That's not the only thing I will be talking about.