[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Ok latest version I've included the possibility of adding a background
color:
http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Latest: http://jsbin.com/isuga/edit
Simplified the code for the highlighting process and corrected the
case-possibility that first parameter is left empty (in that case, all
child checkboxes are involved).
Empty parameter usage:
$('table').dragCheck()
for no parameters;
$('table').dragCheck('', 'pink')
for empty first parameter.
Second parameter can be left out completely.
On 14 Apr, 09:45, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Hi,
Here are my testing results:
IE7: table cells highlight to yellow when checkboxes are checked, but
don't go back to black when unchecked;
same issue with ul list items (highlighting stuck on pink)
Opera 9.64: same highlight problem that IE7 has
Chrome 2.0.169.1: dragging in cells just selects text; checking/
unchecking checkboxes doesn't change background in either the table or
ul list. (I think some javascript is not getting run)
Firefox 3.0.8: basically works as expected; only nit is that the
cursor changes to a text insertion bar when over the labels. Perhaps
this can be fixed with style=cursor: default ???
(Note: IE7, Chrome and Firefox have the cursor changing to an
insertion bar when over the checkbox label; only in Opera does the
cursor stay as an arrow pointer.)
Thanks again for your work on this.
ER
On Apr 14, 3:31 am, Lwangaman donjohn.f...@gmail.com wrote:
Latest:http://jsbin.com/isuga/edit
Simplified the code for the highlighting process and corrected the
case-possibility that first parameter is left empty (in that case, all
child checkboxes are involved).
Empty parameter usage:
$('table').dragCheck()
for no parameters;
$('table').dragCheck('', 'pink')
for empty first parameter.
Second parameter can be left out completely.
On 14 Apr, 09:45, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back
over
the cells, they no longer get checked / unchecked because mouseout
has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the
page
I suppose, so I guess mouseup would have to be applied to the
whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and
knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list
or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Hi Lwangman,
Now that we know all your requirements, I rewrote it(again) to clean
it up :) Everything is commented so you know what's going on. Main
things changed is that you set the selector for the container, not the
the checkbox directly, so if the inputs are nested deeper inside
(inside a div in the TD i.e.) things will still work, and using a
class for the highlight (much cleaner, you set styles in the CSS like
it should be). Clearing the plugin or setting it again also resets the
highlights.
http://jsbin.com/opove
Less than 30 lines now, w/o comments.
cheers,
- ricardo
On Apr 14, 4:45 am, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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.
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
@jscripter
Are you referring to my latest http://jsbin.com/isuga/edit ? Because
as far as text selection is concerned it's working fine for me on
Chrome, Firefox 3, and Internet Explorer 8.
Just out of curiosity, are you clicking and dragging on the first
column? Because the first column is outside of the range of the
dragcheck. It's only the cells with checkboxes that don't have text
selection. Same thing with the ul list, only the list items that have
a checkbox have text selection disabled.
Chrome 2.0 is a pre-beta release, so you can't really do testing on
that. I've got the latest stable release which is 1.0.154.55.
I also use Firefox 3.0.8, and it works fine. I suppose that the cursor
could be set also.
You are right that in Internet Explorer (I use version 8.0.6) the
highlight was not undoing on uncheck. It should work now, I also
included the cursor style which will also be unset with dragCheck
(clear):
http://jsbin.com/ujugi/edit
On 14 Apr, 17:42, jscripter pc88m...@gmail.com wrote:
Hi,
Here are my testing results:
IE7: table cells highlight to yellow when checkboxes are checked, but
don't go back to black when unchecked;
same issue with ul list items (highlighting stuck on pink)
Opera 9.64: same highlight problem that IE7 has
Chrome 2.0.169.1: dragging in cells just selects text; checking/
unchecking checkboxes doesn't change background in either the table or
ul list. (I think some javascript is not getting run)
Firefox 3.0.8: basically works as expected; only nit is that the
cursor changes to a text insertion bar when over the labels. Perhaps
this can be fixed with style=cursor: default ???
(Note: IE7, Chrome and Firefox have the cursor changing to an
insertion bar when over the checkbox label; only in Opera does the
cursor stay as an arrow pointer.)
Thanks again for your work on this.
ER
On Apr 14, 3:31 am, Lwangaman donjohn.f...@gmail.com wrote:
Latest:http://jsbin.com/isuga/edit
Simplified the code for the highlighting process and corrected the
case-possibility that first parameter is left empty (in that case, all
child checkboxes are involved).
Empty parameter usage:
$('table').dragCheck()
for no parameters;
$('table').dragCheck('', 'pink')
for empty first parameter.
Second parameter can be left out completely.
On 14 Apr, 09:45, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still
holding
the mouse button I leave the area, and still holding it come back
over
the cells, they no longer get checked / unchecked because
mouseout has
already kicked in. Instead it shouldn't kick in until I actually
let
go of the mouse button, and I could let go of it anywhere on the
page
I suppose, so I guess mouseup would have to be applied to the
whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Wow, you're good! I'm a self-taught, so I can see that you've got your
stuff, you make things clean and concise.
Only thing here is that the text selection is being canceled on all
the cells and not just the ones with checkboxes. What do you think is
better here? I think it's good to leave text selection on other cells
because they may contain values that the user can copy - paste if
necessary.
As for the css class, I was wondering in fact if it were possible to
define a class within the jquery code, but reading up on it it seems
that that is not possible, it wasn't designed for that. Which means
that the user has to define that class, so I suppose that would have
to be indicated together with the plugin.
Thanks for taking it into consideration again! I did upload a first
version of this plugin to the jquery plugins, now that it pretty much
works. I suppose we can add the new minor versions as the code is
perfected.
On 14 Apr, 22:42, Ricardo ricardob...@gmail.com wrote:
Hi Lwangman,
Now that we know all your requirements, I rewrote it(again) to clean
it up :) Everything is commented so you know what's going on. Main
things changed is that you set the selector for the container, not the
the checkbox directly, so if the inputs are nested deeper inside
(inside a div in the TD i.e.) things will still work, and using a
class for the highlight (much cleaner, you set styles in the CSS like
it should be). Clearing the plugin or setting it again also resets the
highlights.
http://jsbin.com/opove
Less than 30 lines now, w/o comments.
cheers,
- ricardo
On Apr 14, 4:45 am, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back
over
the cells, they no longer get checked / unchecked because mouseout
has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the
page
I suppose, so I guess mouseup would have to be applied to the
whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and
knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list
or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Then just wondering, I don't know all the specs... But why shouldn't
you use jquery's css method to set css? Will it be deprecated?
On 14 Apr, 22:42, Ricardo ricardob...@gmail.com wrote:
Hi Lwangman,
Now that we know all your requirements, I rewrote it(again) to clean
it up :) Everything is commented so you know what's going on. Main
things changed is that you set the selector for the container, not the
the checkbox directly, so if the inputs are nested deeper inside
(inside a div in the TD i.e.) things will still work, and using a
class for the highlight (much cleaner, you set styles in the CSS like
it should be). Clearing the plugin or setting it again also resets the
highlights.
http://jsbin.com/opove
Less than 30 lines now, w/o comments.
cheers,
- ricardo
On Apr 14, 4:45 am, Lwangaman donjohn.f...@gmail.com wrote:
Ok latest version I've included the possibility of adding a background
color:http://jsbin.com/icena/edit
The background color is specified as a second parameter in the
function:
$('table').dragCheck('td:not(.nono) :checkbox', 'pink')
To clear the dragCheck:
$('table').dragCheck('clear')
On 13 Apr, 23:29, jscripter pc88m...@gmail.com wrote:
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back
over
the cells, they no longer get checked / unchecked because mouseout
has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the
page
I suppose, so I guess mouseup would have to be applied to the
whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and
knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list
or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
On Apr 14, 6:38 pm, Lwangaman donjohn.f...@gmail.com wrote:
Only thing here is that the text selection is being canceled on all
the cells and not just the ones with checkboxes. What do you think is
better here? I think it's good to leave text selection on other cells
because they may contain values that the user can copy - paste if
necessary.
Added a .filter(':has(:checkbox)'), so everything is only applied to
elements which contain a checkbox. Whew! this has gotta be the most
rewritten jsbin code snippet ever :D
so I suppose that would have to be indicated together with the plugin.
You're right, that's very common in plugins which deal with an UI.
Then just wondering, I don't know all the specs... But why shouldn't
you use jquery's css method to set css? Will it be deprecated?
No, they won't. It's just a cleaner approach. By leaving style
definitions where they belong (CSS) one can change colors and layout
in the page without having to touch the JS code, even for the
widgets used.
cheers,
- ricardo
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Ok so what's the link to the latest version? (It's a good thing that
jsbin deletes files after 3 months of no usage! I was thinking the
same myself!)
On 15 Apr, 00:45, Ricardo ricardob...@gmail.com wrote:
On Apr 14, 6:38 pm, Lwangaman donjohn.f...@gmail.com wrote:
Only thing here is that the text selection is being canceled on all
the cells and not just the ones with checkboxes. What do you think is
better here? I think it's good to leave text selection on other cells
because they may contain values that the user can copy - paste if
necessary.
Added a .filter(':has(:checkbox)'), so everything is only applied to
elements which contain a checkbox. Whew! this has gotta be the most
rewritten jsbin code snippet ever :D
so I suppose that would have to be indicated together with the plugin.
You're right, that's very common in plugins which deal with an UI.
Then just wondering, I don't know all the specs... But why shouldn't
you use jquery's css method to set css? Will it be deprecated?
No, they won't. It's just a cleaner approach. By leaving style
definitions where they belong (CSS) one can change colors and layout
in the page without having to touch the JS code, even for the
widgets used.
cheers,
- ricardo
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Looks good under Firefox and Opera except that when I click-n-drag I
am also selecting text. I'm still not sure how the original code
avoided that.
Under Chrome is't not working at all. :-(
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Here's what I'm shooting for:
http://jsbin.com/izoce/edit
It's basically the same code as found on cross-browser.com, but I've
added the cell highlighting.
Works under Firefox, Opera and Chrome. It should also work under IE,
but it doesn't seem to work when on the jsbin.com site. However, if
you just download it and run it from a local file it should work for
you.
The text selection bug is basically fixed. It is still possible to
select text if the mousedown event occurs in the right place between
cells. I don't think text selection is possible if the border width is
set to 0 (but then you also don't get a border.)
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Sorry - one more item
Under Chrome there is a bug if you mousedown on one of the checkboxes
and then immediately mouse up. The cell hightlighing is out of sync
with the checkbox state. How that can happen is complete mystery to me
since updateBackground() always checks the .checked attribute of the
checkbox.
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
That was avoided by canceling the selectstart event, and in fact
it's working fine in Internet Explorer and in Chrome. I just tried
Firefox and you're right, it's not working right in Firefox. I'm not
sure why you say that it doesn't work under Chrome, I wrote the code
using Chrome and it worked fine for me. Try emptying the cache or
something...
I also fixed the clear function, now you do $('table').dragCheck
('clear') and it seems to be working.
Latest code: http://jsbin.com/adume/
I see another problem: since mouseup is canceled on the whole page,
any checkbox that is out of the range indicated (for example nono in
the example) get's reversed on a simple click...
On 13 Apr, 23:12, jscripter pc88m...@gmail.com wrote:
Looks good under Firefox and Opera except that when I click-n-drag I
am also selecting text. I'm still not sure how the original code
avoided that.
Under Chrome is't not working at all. :-(
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Ok I fixed the text selection problem, in fact different browsers act
differently.
http://jsbin.com/ijebi/edit
Also fixed the correct application of some of the events, in fact it
wasn't mouseup on the document that was screwing nono but the way I
was selecting elements on mousedown without referring to the
selector variable.
On 13 Apr, 23:12, jscripter pc88m...@gmail.com wrote:
Looks good under Firefox and Opera except that when I click-n-drag I
am also selecting text. I'm still not sure how the original code
avoided that.
Under Chrome is't not working at all. :-(
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Latest version works with both ul lists and with tables:
http://jsbin.com/aqefu/edit
On 14 Apr, 00:51, Lwangaman donjohn.f...@gmail.com wrote:
Ok I fixed the text selection problem, in fact different browsers act
differently.
http://jsbin.com/ijebi/edit
Also fixed the correct application of some of the events, in fact it
wasn't mouseup on the document that was screwing nono but the way I
was selecting elements on mousedown without referring to the
selector variable.
On 13 Apr, 23:12, jscripter pc88m...@gmail.com wrote:
Looks good under Firefox and Opera except that when I click-n-drag I
am also selecting text. I'm still not sure how the original code
avoided that.
Under Chrome is't not working at all. :-(
On Apr 13, 2:30 pm, Lwangaman donjohn.f...@gmail.com wrote:
I think I've done it.
http://jsbin.com/adixe/edit
I have also left out the mouseleave event, and applied the mouseup to
the whole document instead of to the table, that way even if I leave
the table but still have the mouse button down, I don't lose the value
in the variable. Only if I let go of the mouse button (on or off the
table) do I reset the variable.
@Ricardo and @jscripter: does this work good?
On 13 Apr, 14:41, Lwangaman donjohn.f...@gmail.com wrote:
I tried working on it again and made a little progress... Now I got
parent and child selected correctly, but I don't have mouseover
working for some reason...
http://jsbin.com/avigi/edit
On 13 Apr, 02:43, Lwangaman donjohn.f...@gmail.com wrote:
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery
objects...
The idea is to tie all events to the container of the checkboxes
(i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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,
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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) =
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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(
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
@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');
});
};
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Hmmm... I tried using dragCheck(false) but it doesn't unbind the events, I
had to unbind manually.
2009/4/12 Ricardo ricardob...@gmail.com
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:
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
One more detail: mouseout should not take effect until mouseup.
In fact, right now, if I click and begin to drag, then still holding
the mouse button I leave the area, and still holding it come back over
the cells, they no longer get checked / unchecked because mouseout has
already kicked in. Instead it shouldn't kick in until I actually let
go of the mouse button, and I could let go of it anywhere on the page
I suppose, so I guess mouseup would have to be applied to the whole
document.
On 13 Apr, 02:33, Lwangaman donjohn.f...@gmail.com wrote:
I tried something along those lines...
http://jsbin.com/ehedu/edit
But I just don't have the hang of using this correctly and knowing
when to refer to dom elements as dom elements or as jquery objects...
The idea is to tie all events to the container of the checkboxes (i.e.
table cells), and not to the external container (table or ul list or
whatever), and yet be able to read and write the value of the
checkboxes...
On 13 Apr, 01:13, Lwangaman donjohn.f...@gmail.com wrote:
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Wow I guess you did it! I believe you have succeeded in the endeavour!
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
BTW that jsbin.com is a great idea! Now does every little project in
there get saved to a url? For example, this one is saved to /edabo?
On 11 Apr, 10:21, Lwangaman donjohn.f...@gmail.com wrote:
Wow I guess you did it! I believe you have succeeded in the endeavour!
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Now going back to my original example, I also had a separate checkbox
that when checked checked all the others, and should cancel the
mousedown event applied to those checkboxes. So this is how I went
about doing it using your code:
-- I namespaced the mousedown event (mousedown.ac)
-- I closed the call to the function in a condition:
if (allchecked.attr(checked)==false){
$('#table1').dragCheck('td.mychkbox :checkbox');
}
-- Then I applied an onclick event to the separate comanding
checkbox that unbinds the mousedown event when checked and calls the
function again when unchecked:
allchecked.click(function(){
if (allchecked.attr(checked)==false){
$('#table1').dragCheck('td.mychkbox :checkbox');
}
else {$('#table1').unbind('mousedown.ac')}
});
(allchecked is the variable I stored the checkbox in:
var allchecked = $(input#checkedall) )
And this seems to work just great!
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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 and hold sets no value,
click and drag (mouseover the other checkboxes / cells) set no
value...
On 9 Apr, 14:23, Lwangaman donjohn.f...@gmail.com wrote:
I thought I'd undertake the endeavour of translating into jquery the
neat little click-n-drag checkboxes functionality of cross-
browser.com's X-library. This functionality allows for multiple
checkbox selection or de-selection by simply clicking on one of them
and then dragging the mouse over the others.
I began mentioning this in another post, but I figured that perhaps a
new post with the right title would be better. Rather than re-post all
the code though, here's a reference to the message where the full code
of both the X-library functions and my attempted translation of them
is posted:
http://groups.google.com/group/jquery-en/msg/0f38d747d97cf701
I doesn't quite seem to work though, none of my checkboxes are getting
selected either on click or on drag. Any javascript - jquery experts
have any ideas on what needs to be perfected?
When I run it in Internet Explorer, the debugger gives me this
message:
Cannnot assign to a function result
and it refers to line 56, which should be the one that sets the
selection:
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* $(eccoti).attr(checked) = gCheckedValue;
57 }
58 });
59 });
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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 and hold sets no value,
click and drag (mouseover the other checkboxes / cells) set no
value...
On 9 Apr, 14:23, Lwangaman donjohn.f...@gmail.com wrote:
I thought I'd undertake the endeavour of translating into jquery the
neat little click-n-drag checkboxes functionality of cross-
browser.com's X-library. This functionality allows for multiple
checkbox selection or de-selection by simply clicking on one of them
and then dragging the mouse over the others.
I began mentioning this in another post, but I figured that perhaps a
new post with the right title would be better. Rather than re-post all
the code though, here's a reference to the message where the full code
of both the X-library functions and my attempted translation of them
is posted:
http://groups.google.com/group/jquery-en/msg/0f38d747d97cf701
I doesn't quite seem to work though, none of my checkboxes are getting
selected either on click or on drag. Any javascript - jquery experts
have any ideas on what needs to be perfected?
When I run it in Internet Explorer, the debugger gives me this
message:
Cannnot assign to a function result
and it refers to line 56, which should be the one that sets the
selection:
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* $(eccoti).attr(checked) = gCheckedValue;
57 }
58 });
59 });- Hide quoted text -
- Show quoted text -
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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 and hold sets no value,
click and drag (mouseover the other checkboxes / cells) set no
value...
On 9 Apr, 14:23, Lwangaman donjohn.f...@gmail.com wrote:
I thought I'd undertake the endeavour of translating into jquery the
neat little click-n-drag checkboxes functionality of cross-
browser.com's X-library. This functionality allows for multiple
checkbox selection or de-selection by simply clicking on one of them
and then dragging the mouse over the others.
I began mentioning this in another post, but I figured that perhaps a
new post with the right title
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
'mouseover.dc' is just a namespaced event. It allows you to unbind
only that specific mouseover later by calling $boxes.unbind
('mouseover.dc'). It's a useful way of keeping track of events.
On Apr 10, 4: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 and hold sets no value,
click and drag (mouseover the other checkboxes / cells) set no
value...
On 9 Apr, 14:23, Lwangaman donjohn.f...@gmail.com wrote:
I thought I'd undertake the endeavour of translating into jquery the
neat little
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
So if you have multiple mouseover events binded to the same DOM
element you may selectively unbind them?
On Apr 10, 7:26 pm, Jonathan jdd...@gmail.com wrote:
'mouseover.dc' is just a namespaced event. It allows you to unbind
only that specific mouseover later by calling $boxes.unbind
('mouseover.dc'). It's a useful way of keeping track of events.
On Apr 10, 4: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 and
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Yep. Neat eh.
On Apr 10, 4:54 pm, jay jay.ab...@gmail.com wrote:
So if you have multiple mouseover events binded to the same DOM
element you may selectively unbind them?
On Apr 10, 7:26 pm, Jonathan jdd...@gmail.com wrote:
'mouseover.dc' is just a namespaced event. It allows you to unbind
only that specific mouseover later by calling $boxes.unbind
('mouseover.dc'). It's a useful way of keeping track of events.
On Apr 10, 4: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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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
[jQuery] Re: Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
Ok I resolved the cannot assign to a function result problem by
putting the value assignment into a function(){}:
48 $(td.mychkbox).each(
49function(){
50 $(this).bind(
51mouseover,
52function(){
53 if (gCheckedValue != null){
54var eccomi = this;
55var 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 and hold sets no value,
click and drag (mouseover the other checkboxes / cells) set no
value...
On 9 Apr, 14:23, Lwangaman donjohn.f...@gmail.com wrote:
I thought I'd undertake the endeavour of translating into jquery the
neat little click-n-drag checkboxes functionality of cross-
browser.com's X-library. This functionality allows for multiple
checkbox selection or de-selection by simply clicking on one of them
and then dragging the mouse over the others.
I began mentioning this in another post, but I figured that perhaps a
new post with the right title would be better. Rather than re-post all
the code though, here's a reference to the message where the full code
of both the X-library functions and my attempted translation of them
is posted:
http://groups.google.com/group/jquery-en/msg/0f38d747d97cf701
I doesn't quite seem to work though, none of my checkboxes are getting
selected either on click or on drag. Any javascript - jquery experts
have any ideas on what needs to be perfected?
When I run it in Internet Explorer, the debugger gives me this
message:
Cannnot assign to a function result
and it refers to line 56, which should be the one that sets the
selection:
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* $(eccoti).attr(checked) = gCheckedValue;
57 }
58 });
59 });
