[jQuery] MouseDown and Up when toggle-ing

[fishbaitfood]

Hi all,

I have working toggle labels for adding/removing table rows.
These labels have a sprite checkbox background, which holds 4 different states:
- unchecked
- unchecked-highlight
- checked
- checked-highlight

These states need to appear when pressing and releasing a label, so mousedown and mouseup.
However, with the code below, there is no background change at all.
I've used classes for the different background-positions.

$("ul.checklist label").mousedown(function() {
	if ($(this).hasClass("checked")) {
		$(this).removeClass("checked").addClass("checked-highlight");
	}
	else if ($(this).hasClass("unchecked")) {
		$(this).removeClass("unchecked").addClass("unchecked-highlight");
	}
});

$("ul.checklist label").mouseup(function() {
	if ($(this).hasClass("checked-highlight")) {
		$(this).removeClass("checked-highlight").addClass("checked");
	}
	else if ($(this).hasClass("unchecked-highlight")) {
		$(this).removeClass("unchecked-highlight").addClass("unchecked");
	}
});

$("ul.checklist label").toggle(
	function() {
		$(this).removeClass("unchecked").addClass("checked");
		$(this).prev().attr("checked", true);
	}, function() {
		$(this).removeClass("checked").addClass("unchecked");
		$(this).prev().attr("checked", false);
	}
);

How do I make the mousedown and mouseup functions work?

Thanks already.

[fishbaitfood]

Woow, a lot of dust in this thread...

(bump)

[venegal]

Looks like you misunderstand what the toggle method does: http://api.jquery.com/toggle/

Also, since this depends on your HTML and CSS to work, it would be easier if you showed a live example, once you've replaced that toggle thing with something that works. I suppose all you need is a mousedown and a click handler, with the mousedown going from (un)checked to (un)checked-highlight, and the click going from checked-highlight to unchecked (and from unchecked-highlight to checked).

[fishbaitfood]

Hey venegal, thanks.

Here's a live demo. http://gigifrituur.be/checklist_demo/
The html and css should be fine, and toggle works, it's just the mousedown and mouseup that doesn't work.

[venegal]

I was wrong about the toggle — jQuery provides two toggle methods, and I thought of the other one.

Everything Javascript-related seems to be in order. This is a pure CSS issue:

You have

.checklist label {
	background: url('images/checkbox.png') 0 0 no-repeat;
}

and stuff like

.unchecked {
	background-position: 0 0;
}

in there. You were apparently hoping that the .unchecked styles would overwrite the .checklist label styles, which they won't, because the .checklist label selector is more specific than the .unchecked selector.

So, either make those other selectors more specific, like .checklist label.unchecked, or add an !important to their styles.

[fishbaitfood]

Thanks venegal, I totally forgot that .checklist label {} has the upperhand in these css rules. Thanks for pointing this out.

[fishbaitfood]

Hmm, one more thing though, venegal, if you don't mind.

The first time when toggle is used, there is no unchecked-highlight background. This is the only issue, because after the first time, toggle registers everything inside.
Is there an alternative for toggle, so it will also register the first "click", instead of only "activating" it?
Why is toggle made this way? What's the purpose for not handling it the first time?

[venegal]

This has nothing to do with the toggle method — first of all, the toggle method internally uses a click event, which won't fire before mouseup, so naturally it won't do anything on mousedown (which is when the highlighting is supposed to happen). And secondly, the functions you're passing to the toggle method don't have anything to do with the "highlight" classes anyway.

The problem is your mousedown handler: It will only add the class "unchecked-highlight", if the element already has the class "unchecked". In the very beginning, those elements simply don't have that class. So, either add those "unchecked" classes to your HTML, or add them programmatically before any toggling action takes place.

[fishbaitfood]

Thanks a lot, venegal.
Hardcoding the unchecked class seems obvious, now you hinted me that out.

Sorry for the hassle, and again many thanks.