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
