[jQuery] using spin button in a scrolling parent
Hi,
I'm using the spinButton plugin (http://www.softwareunity.com/sandbox/
jqueryspinbtn/) on input elements which have a parent div with
"overflow:auto". whenever this parent div has enough content so that
the scroll bars show up and you scroll down to use a spinbButton, the
plugin won't work properly - you can only use the up arrow.
This is because the calculation of the mouse coordinates gets messed
up with the parent's div scrollTop value. I made some changes to the
plugin to solve this. It's very specific to this kind of situation,
but I hope it'll help others with the same problem.
My idea is to pass a reference of the parent element which will have
some scroll and have the plugin take that into account.
somewhere in this.spinCfg initialization add this line:
scroller: cfg && cfg.scroller ?
document.getElementById(cfg.scroller) : null,
in the mousemove function, after
var x = e.pageX || e.x;
var y = e.pageY || e.y;
add
// account for scroll amount of parent element
if (this.spinCfg.scroller) y+= this.spinCfg.scroller.scrollTop;
in your html file just add a reference to your element in the options
array:
var myOptions = {min: 0,max: 100,step: 1,
scroller:"myScroller"};
$(".mySpin").SpinButton(myOptions);
yes, I used "document.getElementById" instead of jquery... I couldn't
get it to pass a reference of the object and work properly. maybe some
of you can suggest something.
Tested in Firefox2.0.0.4(win), IE6(win) and IE7(win)