[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
[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
[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
[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
[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
[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
[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
[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, 14
[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
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
[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
[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
[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
[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
[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] Endeavour: translating X-Library functionality click-n-drag checkboxes into Jquery
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(
49function(){
50 $(this).bind(
51mouseover,
52function(){
53 if (gCheckedValue != null){
54var eccomi = this;
55var eccoti = $(eccomi).find(input:checkbox);
56* $(eccoti).attr(checked) = gCheckedValue;
57 }
58});
59 });
[jQuery] Re: Translating X-Library functionality into Jquery
I continued this thread in a new thread:
http://groups.google.com/group/jquery-en/browse_thread/thread/956e72c4e071a3de
On 9 Apr, 04:31, Lwangaman donjohn.f...@gmail.com wrote:
Ok now that that has been straightened out, here's my full endeavour:
I'm trying to translate into jquery a useful functionality that I
found in the X-library (http://cross-browser.com/),
and that is multiple checkbox selection by click and drag over them.
(seehttp://cross-browser.com/x/examples/clickndrag_checkboxes.php).
His code is:
/* Defines Click-n-Drag Checkboxes functions*/
var gCheckedValue = null;
function initCheckBoxes(sTblId){
xTableIterate(sTblId,
function(td, isRow) {
if (!isRow) {
if (td.className=='mychkbox'){
var cb = td.getElementsByTagName('input');
if (cb cb[0].type.toLowerCase() == 'checkbox') {
td.checkBoxObj = cb[0];
td.onmousedown = tdOnMouseDown;
td.onmouseover = tdOnMouseOver;
td.onclick = tdOnClick;
}
}
}
}
);
}
function tdOnMouseDown(ev){
if (!mymail.checkedall.checked){
if (this.checkBoxObj) {
gCheckedValue = this.checkBoxObj.checked = !
this.checkBoxObj.checked;
document.onmouseup = docOnMouseUp;
document.onselectstart = docOnSelectStart; // for IE
xPreventDefault(ev); // cancel text selection
}
}
}
function tdOnMouseOver(ev){
if (gCheckedValue != null this.checkBoxObj) {
this.checkBoxObj.checked = gCheckedValue;
}
}
function docOnMouseUp(){
document.onmouseup = null;
document.onselectstart = null;
gCheckedValue = null;
}
function tdOnClick()
{
// Cancel a click on the checkbox itself. Let it bubble up to the TD
return false;
}
function docOnSelectStart(ev)
{
return false; // cancel text selection
}
/* End of Click-n-Drag Checkboxes functions*/
I tried to translate it into jquery like this:
$(td.mychkbox).each(
function(){
$(this).bind(
mousedown,
function(){
if (allchecked.attr(checked)==false){
var eccomi = this;
var eccoti = $(eccomi).find(input:checkbox);
var eccoci = $(eccoti).attr(checked);
gCheckedValue = eccoci = !eccoci;
$(document).mouseup = function(){
$(document).mouseup = null;
$(document).selectstart = null;
gCheckedValue = null;}
$(document).selectstart = function(){return false;} // for
IE
}
});
});
$(td.mychkbox).each(
function(){
$(this).bind(
mouseover,
function(){
if (gCheckedValue != null){
var eccomi = this;
var eccoti = $(eccomi).find(input:checkbox);
$(eccoti).attr(checked) = gCheckedValue;
}
});
});
$(td.mychkbox).each(
function(){
$(this).bind(
click,
function(){
return false;
});
});
Doesn't quite work right though. Clicking on the checkboxes has no
result, dragging over them has no result, it's as though all events
have been canceled. Anyone have any ideas?
On 9 Apr, 03:55, Lwangaman donjohn.f...@gmail.com wrote:
Thanks a lot! That got me going again!
(eccomi was supposed to be itsme, eccoti was supposed to be itsyou, I
overlooked that transliteration that I was doing from italian!)
On 9 Apr, 03:48, Shawn sgro...@open2space.com wrote:
Lwangaman wrote:
alert(itsme.name);
// gives undefined
because a tablecell usually doesn't have a name attribute associated
with it. Remember that your itsme variable is a reference to a DOM
element (not a jQuery element). Which explains
var itsyou = itsme.attr(name);
alert(itsyou);
// gives no results, it actually stops everything from working.
You would need itsyou = $(itsme).attr(name); But even then, if
itsme is a tablecell, the name attribute likely doesn't exist. Maybe
try id instead?
var itsyou = eccomi.find(input:checkbox);
alert(eccoti);
// gives no results, it actually stops everything from working
if eccomi is a DOM element, then this would stop and likely throw an
error ('find' not a property or object)... Try it as
$(eccomi).find(input:checkbox);
The core issue that I can see is understanding the difference between a
DOM object/element and a jQuery object. They are not the same, though
they are often used in a very similar manner.
HTH.
Shawn
[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 });
[jQuery] value of this after many enclosures!
Could someone please help me work out this bit of code, it's driving
me crazy!
I've read here and there that this changes value according to its
level of enclosure, it can refer for example to an object that
triggers an event but then if used in callback it can refer to the
jquery function itself...
Well here's my bit of code that I'm working on.
I have a number of table cells that have checkbox inputs in them; I
have given to the table cells a mychkbox class.
I have another checkbox in a table cell, which when clicked selects
all of the others. I have put this checkbox in the allchecked
variable to simplify the code.
I want the mousedown event of all the mychkbox table cells to
trigger some events when allchecked is NOT checked.
$(td.mychkbox).each( // select all the cells
with class mychkbox
function(){
$(this).bind( // apply the
mousedown event to each one of these
mousedown, // (and here $(this) is
correctly referring to those cells
function(){// because the
mousedown event is triggering correctly
if (allchecked.attr(checked)==false){// only if allchecked
is NOT checked, do such n such
// Now what I need to do here is get the checked state of the
checkbox which is a child of the table cell.
// If I do:
var itsme = this; // this seems to get the
table cell, in fact:
alert(itsme); // gives me [object
HtmlTableCellElement]
// I can't seem to access any of the attributes of the table cell let
alone the children.
alert(itsme.name);// gives undefined
// or:
var itsyou = itsme.attr(name);
alert(itsyou);// gives no results,
it actually stops everything from working
// or:
var itsyou = eccomi.find(input:checkbox);
alert(eccoti);// gives no results,
it actually stops everything from working
}
});
});
Hmmm... I'm stumped, I can't access the child checkbox, much less the
child checkboxes checked value.
Anyone have any ideas?
[jQuery] Re: value of this after many enclosures!
Sorry I see that the comments don't line up well, thought I'd re-write
the code such as to simplify reading the comments:
// select all the cells with class mychkbox :
$(td.mychkbox).each(
// apply the mousedown event to each one of these :
function(){
$(this).bind(
mousedown,
// (and here $(this) is correctly referring to those cells
// because the mousedown event is triggering correctly on all of
them)
function(){
if (allchecked.attr(checked)==false){
// only if allchecked is NOT checked, do such n such.
// Now what I need to do here is get the checked state of the
// checkbox which is a child of the table cell.
// If I do:
var itsme = this;
// this seems to get the table cell, in fact:
alert(itsme);
// gives me [object HtmlTableCellElement]
// But I can't seem to access any of the attributes of the table cell
// let alone the children.
alert(itsme.name);
// gives undefined
// or:
var itsyou = itsme.attr(name);
alert(itsyou);
// gives no results, it actually stops everything from working.
// or:
var itsyou = eccomi.find(input:checkbox);
alert(eccoti);
// gives no results, it actually stops everything from working
}
});
});
Hmmm... I'm stumped, I can't access the child checkbox, much less the
child checkboxes checked value.
Anyone have any ideas?
[jQuery] Re: value of this after many enclosures!
Thanks a lot! That got me going again!
(eccomi was supposed to be itsme, eccoti was supposed to be itsyou, I
overlooked that transliteration that I was doing from italian!)
On 9 Apr, 03:48, Shawn sgro...@open2space.com wrote:
Lwangaman wrote:
alert(itsme.name);
// gives undefined
because a tablecell usually doesn't have a name attribute associated
with it. Remember that your itsme variable is a reference to a DOM
element (not a jQuery element). Which explains
var itsyou = itsme.attr(name);
alert(itsyou);
// gives no results, it actually stops everything from working.
You would need itsyou = $(itsme).attr(name); But even then, if
itsme is a tablecell, the name attribute likely doesn't exist. Maybe
try id instead?
var itsyou = eccomi.find(input:checkbox);
alert(eccoti);
// gives no results, it actually stops everything from working
if eccomi is a DOM element, then this would stop and likely throw an
error ('find' not a property or object)... Try it as
$(eccomi).find(input:checkbox);
The core issue that I can see is understanding the difference between a
DOM object/element and a jQuery object. They are not the same, though
they are often used in a very similar manner.
HTH.
Shawn
[jQuery] Translating X-Library functionality into Jquery
Ok now that that has been straightened out, here's my full endeavour:
I'm trying to translate into jquery a useful functionality that I
found in the X-library (http://cross-browser.com/),
and that is multiple checkbox selection by click and drag over them.
(see http://cross-browser.com/x/examples/clickndrag_checkboxes.php).
His code is:
/* Defines Click-n-Drag Checkboxes functions*/
var gCheckedValue = null;
function initCheckBoxes(sTblId){
xTableIterate(sTblId,
function(td, isRow) {
if (!isRow) {
if (td.className=='mychkbox'){
var cb = td.getElementsByTagName('input');
if (cb cb[0].type.toLowerCase() == 'checkbox') {
td.checkBoxObj = cb[0];
td.onmousedown = tdOnMouseDown;
td.onmouseover = tdOnMouseOver;
td.onclick = tdOnClick;
}
}
}
}
);
}
function tdOnMouseDown(ev){
if (!mymail.checkedall.checked){
if (this.checkBoxObj) {
gCheckedValue = this.checkBoxObj.checked = !
this.checkBoxObj.checked;
document.onmouseup = docOnMouseUp;
document.onselectstart = docOnSelectStart; // for IE
xPreventDefault(ev); // cancel text selection
}
}
}
function tdOnMouseOver(ev){
if (gCheckedValue != null this.checkBoxObj) {
this.checkBoxObj.checked = gCheckedValue;
}
}
function docOnMouseUp(){
document.onmouseup = null;
document.onselectstart = null;
gCheckedValue = null;
}
function tdOnClick()
{
// Cancel a click on the checkbox itself. Let it bubble up to the TD
return false;
}
function docOnSelectStart(ev)
{
return false; // cancel text selection
}
/* End of Click-n-Drag Checkboxes functions*/
I tried to translate it into jquery like this:
$(td.mychkbox).each(
function(){
$(this).bind(
mousedown,
function(){
if (allchecked.attr(checked)==false){
var eccomi = this;
var eccoti = $(eccomi).find(input:checkbox);
var eccoci = $(eccoti).attr(checked);
gCheckedValue = eccoci = !eccoci;
$(document).mouseup = function(){
$(document).mouseup = null;
$(document).selectstart = null;
gCheckedValue = null;}
$(document).selectstart = function(){return false;} // for
IE
}
});
});
$(td.mychkbox).each(
function(){
$(this).bind(
mouseover,
function(){
if (gCheckedValue != null){
var eccomi = this;
var eccoti = $(eccomi).find(input:checkbox);
$(eccoti).attr(checked) = gCheckedValue;
}
});
});
$(td.mychkbox).each(
function(){
$(this).bind(
click,
function(){
return false;
});
});
Doesn't quite work right though. Clicking on the checkboxes has no
result, dragging over them has no result, it's as though all events
have been canceled. Anyone have any ideas?
On 9 Apr, 03:55, Lwangaman donjohn.f...@gmail.com wrote:
Thanks a lot! That got me going again!
(eccomi was supposed to be itsme, eccoti was supposed to be itsyou, I
overlooked that transliteration that I was doing from italian!)
On 9 Apr, 03:48, Shawn sgro...@open2space.com wrote:
Lwangaman wrote:
alert(itsme.name);
// gives undefined
because a tablecell usually doesn't have a name attribute associated
with it. Remember that your itsme variable is a reference to a DOM
element (not a jQuery element). Which explains
var itsyou = itsme.attr(name);
alert(itsyou);
// gives no results, it actually stops everything from working.
You would need itsyou = $(itsme).attr(name); But even then, if
itsme is a tablecell, the name attribute likely doesn't exist. Maybe
try id instead?
var itsyou = eccomi.find(input:checkbox);
alert(eccoti);
// gives no results, it actually stops everything from working
if eccomi is a DOM element, then this would stop and likely throw an
error ('find' not a property or object)... Try it as
$(eccomi).find(input:checkbox);
The core issue that I can see is understanding the difference between a
DOM object/element and a jQuery object. They are not the same, though
they are often used in a very similar manner.
HTH.
Shawn
[jQuery] Valore della proprietà non valido. jquery. js, Riga 12 Carattere 12721
Can anyone help in deciphering this error message? I only get it in
Internet Explorer, it doesn't show up either in Firefox or in Chrome.
Here is the page that it occurs on:
http://johnrdorazio.altervista.org/SitoFlatnukePersonale/?lang=enmod=
The block that uses jquery and that is provoking the error is the one
in the right column of the page News Headlines. I use jquery to
control the css and the mouseover (hover to be precise, talking
jquery) events in the scrollbar on the right, which controls the
direction and the speed of the marquee.
In IE the scrollbar (made up of 7 stacked cells in a nested table)
doesn't even finish rendering. So I suppose that the conflict could be
in there somewhere. Here is my jquery code:
$(document).ready(function(){
// your code here
$(td#upfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:inset inset none inset, border-
width:2px 2px 0px 2px});
$(td.midbuttons).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset none inset, border-
width:0px 2px 0px 2px});
$(td#downfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset inset inset, border-
width:0px 2px 2px 2px});
$(td#upfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
}
)
$(td#upfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
}
)
$(td#upfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
}
)
$(td#stopbutton).hover(
function(){
$(marquee#MENU).trigger(stop);
},
function(){
$(marquee#MENU).trigger(stop);
}
)
$(td#downfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollamount: 1});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 1});
}
)
$(td#downfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 2});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 2});
}
)
$(td#downfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 4});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 4});
}
)
// your code ends here
});
[jQuery] Value of the property not valid. jquery.js, Line 12 Character 12721
BTW the error message, translated into english is:
Value of the property not valid. jquery.js, Line 12 Character 12721
The part of code that is put into evidence is some jquery function:
if(L){J[G]=K}return J[G]},trim:function(E){return(E||).replace(/^\s+|
\s+$/g,)},makeArray:function(G){var E=[];if(G!=null){var F=G.length;
J[G]=K is evidenced with the yellow highlighter. What error could
this be?
On 1 Apr, 12:58, Lwangaman donjohn.f...@gmail.com wrote:
Can anyone help in deciphering this error message? I only get it in
Internet Explorer, it doesn't show up either in Firefox or in Chrome.
Here is the page that it occurs
on:http://johnrdorazio.altervista.org/SitoFlatnukePersonale/?lang=enmod=
The block that uses jquery and that is provoking the error is the one
in the right column of the page News Headlines. I use jquery to
control the css and the mouseover (hover to be precise, talking
jquery) events in the scrollbar on the right, which controls the
direction and the speed of the marquee.
In IE the scrollbar (made up of 7 stacked cells in a nested table)
doesn't even finish rendering. So I suppose that the conflict could be
in there somewhere. Here is my jquery code:
$(document).ready(function(){
// your code here
$(td#upfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:inset inset none inset, border-
width:2px 2px 0px 2px});
$(td.midbuttons).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset none inset, border-
width:0px 2px 0px 2px});
$(td#downfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset inset inset, border-
width:0px 2px 2px 2px});
$(td#upfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
}
)
$(td#upfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
}
)
$(td#upfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
}
)
$(td#stopbutton).hover(
function(){
$(marquee#MENU).trigger(stop);
},
function(){
$(marquee#MENU).trigger(stop);
}
)
$(td#downfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollamount: 1});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 1});
}
)
$(td#downfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 2});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 2});
}
)
$(td#downfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 4});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 4});
}
)
// your code ends here
});
[jQuery] Re: Value of the property not valid. jquery.js, Line 12 Character 12721
Ok I reasoned out that the interpreter rendered the background color
of the first cell and stopped there, so I went to see what the next
css property was supposed to be and it was the border-color. All I did
was capitalize lightblue to LightBlue and lo and behold, I now no
longer get that error message in IE!
On 1 Apr, 13:07, Lwangaman donjohn.f...@gmail.com wrote:
BTW the error message, translated into english is:
Value of the property not valid. jquery.js, Line 12 Character 12721
The part of code that is put into evidence is some jquery function:
if(L){J[G]=K}return J[G]},trim:function(E){return(E||).replace(/^\s+|
\s+$/g,)},makeArray:function(G){var E=[];if(G!=null){var F=G.length;
J[G]=K is evidenced with the yellow highlighter. What error could
this be?
On 1 Apr, 12:58, Lwangaman donjohn.f...@gmail.com wrote:
Can anyone help in deciphering this error message? I only get it in
Internet Explorer, it doesn't show up either in Firefox or in Chrome.
Here is the page that it occurs
on:http://johnrdorazio.altervista.org/SitoFlatnukePersonale/?lang=enmod=
The block that uses jquery and that is provoking the error is the one
in the right column of the page News Headlines. I use jquery to
control the css and the mouseover (hover to be precise, talking
jquery) events in the scrollbar on the right, which controls the
direction and the speed of the marquee.
In IE the scrollbar (made up of 7 stacked cells in a nested table)
doesn't even finish rendering. So I suppose that the conflict could be
in there somewhere. Here is my jquery code:
$(document).ready(function(){
// your code here
$(td#upfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:inset inset none inset, border-
width:2px 2px 0px 2px});
$(td.midbuttons).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset none inset, border-
width:0px 2px 0px 2px});
$(td#downfastestbutton).css({cursor:default, height:14%,
background-color:cyan, text-align:center, border-color:
lightblue, border-style:none inset inset inset, border-
width:0px 2px 2px 2px});
$(td#upfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 4});
}
)
$(td#upfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 2});
}
)
$(td#upfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
},
function(){
$(marquee#MENU).attr({
direction: down, scrollamount: 1});
}
)
$(td#stopbutton).hover(
function(){
$(marquee#MENU).trigger(stop);
},
function(){
$(marquee#MENU).trigger(stop);
}
)
$(td#downfastbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollamount: 1});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 1});
}
)
$(td#downfasterbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 2});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 2});
}
)
$(td#downfastestbutton).hover(
function(){
$(marquee#MENU).trigger(start);
$(#MENU).attr({
direction: up, scrollAmount: 4});
},
function(){
$(#MENU).attr({
direction: up, scrollAmount: 4});
}
)
// your code ends here
});
[jQuery] Re: wrap some tag around group of table rows for hide and show
Well, I didn't wrap my tr's in any tags, I had already read that in
the old thread which now seems to be archived or something. I just
tried the multiple tbody's.
I guess you're right that fadeIn(fast) seems to work, and I have to
use fadeOut(fast) too, otherwise hide(fast) still makes sort of a
glitch as the rows are hidden...
On 14 Mar, 21:06, ricardobeat ricardob...@gmail.com wrote:
You can't wrap any element around trs. Tables can only contain a
tbody/thead/tfoot and TRs, if you insert an element that is not
allowed, it itself will be wrapped by a new TR created by the browser,
and you'll get all kinds of misbehavior. You could insert a new tbody,
but browser handling of them is different.
The problem is that the tbodies are being set to display:block after
the show('fast') call. Changing that to fadeIn('fast') seems to work,
I'm not sure why - both should restore the original display.
cheers,
- ricardo
On Mar 14, 1:47 pm, Lwangaman donjohn.f...@gmail.com wrote:
Ok let's see if this post works... The last couple tries didn't!
I was reading through this year-old thread which I found googling
since I'm doing something similar, perhaps someone could give me a
couple tips.
Here is the page with the example I'm dealing
with:http://johnrdorazio.altervista.org/SitoFlatnukePersonale/index.php?mo...
Clicking on the checkboxes, two rows should appear (which were hidden
from the beginning) in which more information can be inserted (that
otherwise would not be necessary).
The only problem is, it seems to work only in Internet Explorer. In
Firefox the rows wind up appearing at the bottom of the table, and
every time you un-click and re-click some mysterious space begins
accumulating. Not only, but the cells of the two appearing rows don't
line up with the cells of all the other rows of the table, the seem to
want to line up with only the first column which really opens up wide
that first column shifting the whole table over to the right. Google
Chrome presents a similar problem, only the appearing rows don't wind
up at the bottom of the table. They stay where they're supposed to be,
but the cells still don't line up and they shift the whole table, and
un-click re-click still creates that mysterious gap.
At first I was applying JQuery directly to the rows that were
involved, then reading this thread I tried creating different tbody
sections and applying the JQuery to those sections, but the problems
remain. Perhaps it could be a problem of parent-child relationships?
I'm not sure how those work though, if anyone has any thoughts I would
be very grateful.
Here is my code:
script type=text/javascript src=/SitoFlatnukePersonale/include/
javascripts/jquery.js/script
script type=text/javascript
$(document).ready(function(){
$(.showhidesection).hide();
$(#pastoralcounsel).click(function(){
if ($(#pastoralcounsel:checked).val()!=null)
{
$(#represents).show(fast);}
else
{
$(#represents).hide(fast);}
});
$(#i_am_a_catechist).click(function(){
if ($(#i_am_a_catechist:checked).val()!=null)
{
$(#catechizes).show(fast);}
else
{
$(#catechizes).hide(fast);}
});
$(#volunteer).click(function(){
if ($(#volunteer:checked).val()!=null)
{
$(#volunteers).show(fast);}
else
{
$(#volunteers).hide(fast);
}
});
});
/script
table class=sample
tbody class=alwaysshowsection
trtdinput type=checkbox name=pastoralcounsel
id=pastoralcounsel/tdtdlabel for=pastoralcounselCons.
Pastorale/label/td/tr
/tbody
tbody id=represents class=showhidesection
trtd---/tdtdlabel for=i_represent - rappresenta:/label/
td/tr
trtd.../tdtdinput type=text name=i_represent
id=i_represent/td/tr
/tbody
tbody class=alwayshowsection
trtdinput type=checkbox name=i_am_a_catechist
id=i_am_a_catechist/tdtdlabel
for=i_am_a_catechistCatechista/label/td/tr
/tbody
tbody id=catechizes class=showhidesection
trtd---/tdtdlabel for=i_catechize_this_group - del
gruppo:/label/td/tr
trtd.../tdtdselect name=i_catechize_this_group
id=i_catechize_this_groupoptionI^ Anno Comunioni/option/
select/td/tr
/tbody
tbody class=alwaysshowsection
trtdinput type=checkbox name=volunteer id=volunteer/
tdtdlabel for=volunteerVolontario parrocchiale/label/td/
tr
/tbody
tbody id=volunteers class=showhidesection
trtd---/tdtdlabel for=voluntaryservice - servizio:/
label/td/tr
trtd.../tdtdinput type=text name=voluntaryservice
id=voluntaryservice //td/tr
/tbody
/table
[jQuery] wrap some tag around group of table rows for hide and show
Ok let's see if this post works... The last couple tries didn't!
I was reading through this year-old thread which I found googling
since I'm doing something similar, perhaps someone could give me a
couple tips.
Here is the page with the example I'm dealing with:
http://johnrdorazio.altervista.org/SitoFlatnukePersonale/index.php?mod=04_Mia_programmazione/04_Tabelle_con_Jquery
Clicking on the checkboxes, two rows should appear (which were hidden
from the beginning) in which more information can be inserted (that
otherwise would not be necessary).
The only problem is, it seems to work only in Internet Explorer. In
Firefox the rows wind up appearing at the bottom of the table, and
every time you un-click and re-click some mysterious space begins
accumulating. Not only, but the cells of the two appearing rows don't
line up with the cells of all the other rows of the table, the seem to
want to line up with only the first column which really opens up wide
that first column shifting the whole table over to the right. Google
Chrome presents a similar problem, only the appearing rows don't wind
up at the bottom of the table. They stay where they're supposed to be,
but the cells still don't line up and they shift the whole table, and
un-click re-click still creates that mysterious gap.
At first I was applying JQuery directly to the rows that were
involved, then reading this thread I tried creating different tbody
sections and applying the JQuery to those sections, but the problems
remain. Perhaps it could be a problem of parent-child relationships?
I'm not sure how those work though, if anyone has any thoughts I would
be very grateful.
Here is my code:
script type=text/javascript src=/SitoFlatnukePersonale/include/
javascripts/jquery.js/script
script type=text/javascript
$(document).ready(function(){
$(.showhidesection).hide();
$(#pastoralcounsel).click(function(){
if ($(#pastoralcounsel:checked).val()!=null)
{
$(#represents).show(fast);
}
else
{
$(#represents).hide(fast);
}
});
$(#i_am_a_catechist).click(function(){
if ($(#i_am_a_catechist:checked).val()!=null)
{
$(#catechizes).show(fast);
}
else
{
$(#catechizes).hide(fast);
}
});
$(#volunteer).click(function(){
if ($(#volunteer:checked).val()!=null)
{
$(#volunteers).show(fast);
}
else
{
$(#volunteers).hide(fast);
}
});
});
/script
table class=sample
tbody class=alwaysshowsection
trtdinput type=checkbox name=pastoralcounsel
id=pastoralcounsel/tdtdlabel for=pastoralcounselCons.
Pastorale/label/td/tr
/tbody
tbody id=represents class=showhidesection
trtd---/tdtdlabel for=i_represent - rappresenta:/label/
td/tr
trtd.../tdtdinput type=text name=i_represent
id=i_represent/td/tr
/tbody
tbody class=alwayshowsection
trtdinput type=checkbox name=i_am_a_catechist
id=i_am_a_catechist/tdtdlabel
for=i_am_a_catechistCatechista/label/td/tr
/tbody
tbody id=catechizes class=showhidesection
trtd---/tdtdlabel for=i_catechize_this_group - del
gruppo:/label/td/tr
trtd.../tdtdselect name=i_catechize_this_group
id=i_catechize_this_groupoptionI^ Anno Comunioni/option/
select/td/tr
/tbody
tbody class=alwaysshowsection
trtdinput type=checkbox name=volunteer id=volunteer/
tdtdlabel for=volunteerVolontario parrocchiale/label/td/
tr
/tbody
tbody id=volunteers class=showhidesection
trtd---/tdtdlabel for=voluntaryservice - servizio:/
label/td/tr
trtd.../tdtdinput type=text name=voluntaryservice
id=voluntaryservice //td/tr
/tbody
/table
