Taking up jscripter's suggestion, I just noticed myself that applying
the mousedown and mouseover to the whole table keeps you from being
able to click on any links that may be contained in the table. For
example my table has links in the header cells that when clicked
reorder the table according to that column. Now I can no longer click
them...
And, as jscripter says, in the X-Library the mousedown and mouseover
was applied to the cells containing the checkboxes and not to the
checkboxes themselves, so that it was enough to click on the cells
surrounding the checkboxes in order to get them checked / unchecked.
Ricardo do you think you could manage something like that? (I'm only
an apprentice and I don't have your expertice!)
On 12 Apr, 22:31, jscripter <pc88m...@gmail.com> wrote:
> Hey - this is great work - I just happened to be looking for this
> functionality.
>
> How would you apply what you have done here to re-writing the original
> X-library code that uses TDs for the checkbox label?
>
> Thanks!
>
> On Apr 12, 2:04 pm, Ricardo <ricardob...@gmail.com> wrote:
>
> > Sure! I have a few other plugins I also want to upload, I'll do that.
>
> > I took the time to rewrite it more carefully. No more binding/
> > unbinding, a single var, all namespaced and bugs ironed out (if you
> > put the cursor away while holding the button, the mouseover would
> > remain active even after mouseup).
>
> > The advantage of namespacing is you can easily remove all event
> > handlers. I included that in the plugin, in the example you can use $
> > ('ul').dragCheck(false) to disable it completely.
>
> >http://jsbin.com/amoxi/edit
>
> > cheers,
> > - ricardo
>
> > On Apr 12, 9:48 am, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > @Ricardo
> > > Do you think it could be useful to add this to the jquery plugins at
> > > plugins.jquery.com? I'd say it could be put under your name because
> > > you did all the big work!
>
> > > On 12 Apr, 14:35, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > Ok that works better, I just changed "clicked.checked = !isChecked" to
> > > > "clicked.checked = isChecked":
>
> > > >http://jsbin.com/idihi/edit
>
> > > > On 12 Apr, 08:11, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > > The problem with your fix is that the event target for the mouseup is
> > > > > not the same as the mousedown. You can resolve that by saving the
> > > > > clicked checkbox in a var, and because of event order the change has
> > > > > to be made on 'click' rather than mouseup.
>
> > > > >http://jsbin.com/asizu/edit
>
> > > > > Sorry for the bugs, this was written rather quickly, I hope it works
> > > > > now :)
>
> > > > > On Apr 11, 11:30 am, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > Ok I tried to touch up the code a little to fix that, here's my
> > > > > > example:
>
> > > > > >http://jsbin.com/iyubi/edit
>
> > > > > > Now, with a single click, the value on mouseup is reversed to keep
> > > > > > it
> > > > > > as it was with mousedown. But, when you do a drag, the mouseup of
> > > > > > the
> > > > > > last checkbox is not canceled or reversed... I suppose it would be
> > > > > > enough to cancel $(this)'s mouseup, but how would you refer to
> > > > > > $(this)
> > > > > > from within the $boxes.bind('mouseover')?
>
> > > > > > On 11 Apr, 16:07, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > Hmm, just noticed one problem though... A single click on a
> > > > > > > checkbox
> > > > > > > is supposed to work too, but with this code as soon as you
> > > > > > > mouseup the
> > > > > > > value goes back the other way... You have to drag off in order to
> > > > > > > keep
> > > > > > > the value in there...
>
> > > > > > > On 11 Apr, 06:21, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > > > > > I think you already got the .dc namespacing thing, so: the
> > > > > > > > mousedown
> > > > > > > > is not being bound to the checkbox, but to the container
> > > > > > > > element (the
> > > > > > > > table, or in my example below, the UL). When you click a
> > > > > > > > checkbox the
> > > > > > > > mousedown event will bubble up to the container and fire this
> > > > > > > > handler.
>
> > > > > > > > As I expected my code had some flaws a few typing errors, see
> > > > > > > > it fixed/
> > > > > > > > working here:
>
> > > > > > > >http://jsbin.com/edabo/edit
>
> > > > > > > > I added the ability to specify a selector for the checkboxes,
> > > > > > > > that way
> > > > > > > > you can skip the ones you don't want. In case it's not provided
> > > > > > > > all
> > > > > > > > checkboxes are used by default.
>
> > > > > > > > cheers,
> > > > > > > > - ricardo
>
> > > > > > > > On Apr 10, 8:17 pm, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > > > Ok first of all thanks for taking interest!
> > > > > > > > > Then, I've tried going through your code and applying it, and
> > > > > > > > > I have a
> > > > > > > > > few questions:
> > > > > > > > > -- Besides the mouseover.dc that I didn't get either...
> > > > > > > > > -- I'm supposing that $boxes would be a variable where all the
> > > > > > > > > checkboxes that are applicable have been stored previously?
> > > > > > > > > Yet, if
> > > > > > > > > you build it as a "plugin" you have no way of defining which
> > > > > > > > > checkboxes are to comprised (unless this functionality is
> > > > > > > > > built into
> > > > > > > > > the plugin using data passed through parameters, I suppose).
> > > > > > > > > -- Then I don't quite understand what the "mousedown" is
> > > > > > > > > being bound
> > > > > > > > > to. In my example (which was not built as a plugin, but I
> > > > > > > > > suppose a
> > > > > > > > > plugin or defined function would be even better because it's
> > > > > > > > > much more
> > > > > > > > > flexible and anyone can download it and use it), the
> > > > > > > > > "mousedown" was
> > > > > > > > > being bound to all the cells that had checkboxes in them, and
> > > > > > > > > I was
> > > > > > > > > determining that through the class I had given them
> > > > > > > > > "mychkbox" (because I didn't want some of the checkboxes
> > > > > > > > > included,
> > > > > > > > > since they do not have an active state; the table has names,
> > > > > > > > > addresses, emails, and those that don't have an email have an
> > > > > > > > > inactive
> > > > > > > > > checkbox). I was also trying to follow cross-browser.com's
> > > > > > > > > way of
> > > > > > > > > listening to the mousedown on the cell containing the
> > > > > > > > > checkbox rather
> > > > > > > > > than on the checkbox itself, making the whole click-drag
> > > > > > > > > thing a lot
> > > > > > > > > more user-friendly.
>
> > > > > > > > > On 10 Apr, 20:36, jay <jay.ab...@gmail.com> wrote:
>
> > > > > > > > > > Just curious.. What is the difference between mouseover.dc
> > > > > > > > > > and
> > > > > > > > > > mouseover?
>
> > > > > > > > > > On Apr 10, 1:44 pm, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > > > > > > > > This (untested) is how I envision the code for that:
>
> > > > > > > > > > > $.fn.dragCheck = function(){
> > > > > > > > > > > //this == the current jQuery element
> > > > > > > > > > > return this.each(function(){
>
> > > > > > > > > > > //this == current element in the loop (table etc)
> > > > > > > > > > > $(this).bind('mousedown', function(e){
>
> > > > > > > > > > > //don't do anything if you didn't click a checkbox
> > > > > > > > > > > if ( !$(e.target).is(':checkbox') )
> > > > > > > > > > > return true;
>
> > > > > > > > > > > //get the clicked checkbox state
> > > > > > > > > > > isChecked = e.target.checked;
> > > > > > > > > > > //apply it to all other checkboxes on mouseover
> > > > > > > > > > > $boxes.bind('mouseover.dc', function(){
> > > > > > > > > > > this.checked = isChecked;
> > > > > > > > > > > });
>
> > > > > > > > > > > }).bind('mouseup', function(e){
> > > > > > > > > > > //cancel the mouseover action
> > > > > > > > > > > $boxes.unbind('mouseover.dc');
> > > > > > > > > > > });
>
> > > > > > > > > > > };
>
> > > > > > > > > > > $('#table1').dragCheck();
>
> > > > > > > > > > > cheers,
> > > > > > > > > > > - ricardo
>
> > > > > > > > > > > On 9 abr, 17:15, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > > > > > > Ok I resolved the "cannot assign to a function result"
> > > > > > > > > > > > problem by
> > > > > > > > > > > > putting the value assignment into a "function(){}":
>
> > > > > > > > > > > > 48 $("td.mychkbox").each(
> > > > > > > > > > > > 49 function(){
> > > > > > > > > > > > 50 $(this).bind(
> > > > > > > > > > > > 51 "mouseover",
> > > > > > > > > > > > 52 function(){
> > > > > > > > > > > > 53 if (gCheckedValue != null){
> > > > > > > > > > > > 54 var eccomi = this;
> > > > > > > > > > > > 55 var eccoti =
> > > > > > > > > > > > $(eccomi).find("input:checkbox");
> > > > > > > > > > > > 56* function(){$(eccoti).attr("checked") =
> > > > > > > > > > > > gCheckedValue;}
> > > > > > > > > > > > 57 }
> > > > > > > > > > > > 58 });
> > > > > > > > > > > > 59 });
>
> > > > > > > > > > > > Now I don't get any errors, but the event assignments
> > > > > > > > > > > > don't seem to be
> > > > > > > > > > > > working together correctly...
> > > > > > > > > > > > Basically what's supposed to happen is this:
> > > > > > > > > > > > 1 - "onclick" event of the checkboxes is canceled since
> > > > > > > > > > > > the clicking
> > > > > > > > > > > > and dragging is being assigned to the table cells that
> > > > > > > > > > > > contain them
> > > > > > > > > > > > 2 - the table cells themselves don't actually have on
> > > > > > > > > > > > "onclick" event,
> > > > > > > > > > > > because the value is given to the checkboxes with the
> > > > > > > > > > > > "onmousedown"
> > > > > > > > > > > > and especially the "onmouseover" event.
> > > > > > > > > > > > 3 - "onmousedown" gives the variable "gCheckedValue" a
> > > > > > > > > > > > value, either
> > > > > > > > > > > > of "true" or of "false" (depending on the actual state
> > > > > > > > > > > > of the
> > > > > > > > > > > > checkbox, so if it is unchecked it will get checked and
> > > > > > > > > > > > vice-versa),
> > > > > > > > > > > > and "onmouseup" empties "gCheckedValue" of any value.
> > > > > > > > > > > > So as long as
> > > > > > > > > > > > the mouse is down, "gCheckedValue" has a value to give
> > > > > > > > > > > > to any of the
> > > > > > > > > > > > checkboxes with the "onmouseover" event, but as soon as
> > > > > > > > > > > > the mouse
> > > > > > > > > > > > button is released it no longer has a value so the
> > > > > > > > > > > > "onmouseover" event
> > > > > > > > > > > > will no longer effect any of the checkboxes until the
> > > > > > > > > > > > mousebutton is
> > > > > > > > > > > > pressed again.
>
> > > > > > > > > > > > So the value of "gCheckedValue" is set in the
> > > > > > > > > > > > "mousedown" event, and
> > > > > > > > > > > > is transmitted in the "mouseover" event.
>
> > > > > > > > > > > > And yet the code doesn't seem to be working correctly.
> > > > > > > > > > > > The current
> > > > > > > > > > > > value of the cell is detected correctly (I've gotten it
> > > > > > > > > > > > through an
> > > > > > > > > > > > alert), it's contrary is correctly set in
> > > > > > > > > > > > "gCheckedValue" (I've gotten
> > > > > > > > > > > > that through an alert too), but the new value is not
> > > > > > > > > > > > being set in the
> > > > > > > > > > > > checkbox... In fact click sets no value, click
>
> ...
>
> leggi tutto
