[jQuery] MouseDown and Up inside Toggle function won't work first time clicked

[fishbaitfood]

Hello there,

 

I have this code:

 

$("#button").toggle(
function() {
	$(this).mousedown(function() {
		$(this).css({
			backgroundPosition: "0 -25px"
		});
	});
	$(this).mouseup(function() {
		$(this).css({
			backgroundPosition: "0 -50px"
		});
	});
	// other actions (won't affect issue)
}, function() {
	$(this).mousedown(function() {
		$(this).css({
			backgroundPosition: "0 -75px"
		});
	});
	$(this).mouseup(function() {
		$(this).css({
			backgroundPosition: "0 0px"
		});
	});
	// other actions (won't affect issue)
}
);

 

And the mouseDown and mouseUp functions ONLY work AFTER the first time I clicked my button.

How do I solve this?

 

Thank you.

 

[nogray]

I think toggle adds a click event to your object and runs either function when the item is clicked. Why don't you just add the mousedown and mouseup events without the toggle.

[fishbaitfood]

Doesn't toggle "count" two different clicks?

Because I need those two different clicks, because my button background-image has 4 different states, so I'm using a sprite image.

And if I put the mousedown and mouseup outside my toggle, I can only have 2 different states.

 

Isn't this possible some way?

 

Do I need to make a function which checks the toggle function state, or something like that?

[fishbaitfood]

But like I've said in my first post, it DOES work like I want it, but only at the second toggle function and further.

So only my first button click won't run the mouse functions inside, after that, it works perfect.

 

So why is my toggle function ignoring them the first time, but not afterwards?

[nogray]

The first click doesn't work because the events aren't added until the first click. Basiclly you're toggle function add events to the button. toggle will add a click event and process either first or second function.

 

Buttons have the following status

normal, mouseover, mousedown and checked or clicked if you want to highlight the clicked button.

 

The best way to show the different status is to changing the class name with each event (e.g. button_normal, button_over, button_down, button_clicked)

 

[fishbaitfood]

If I use classes, that's about the same principle, but doesn't work at all.

 

$("#button").toggle(
function() {
	$(this).mousedown(function() {
		$(this).addClass("unchecked-highlight");
	});
	$(this).mouseup(function() {
		$(this).addClass("checked");
	});
	// other actions (won't affect issue)
}, function() {
	$(this).mousedown(function() {
		$(this).addClass("checked-highlight")
	});
	$(this).mouseup(function() {
		$(this).addClass("unchecked");
	});
	// other actions (won't affect issue)
}
);

 

 

#button {
width: 120px;
height: 35px;
display: block;
background: url('../images/check-sprite.png') no-repeat;
background-position: 0 0;	/* doesn't matter if I remove this */
}
.unchecked {
background-position: 0 0;
}
.unchecked-highlight {
background-position: 0 -25px;
}
.checked {
background-position: 0 -50px;
}
.checked-highlight {
background-position: 0 -50px;
}

 

 

Now the button background doesn't change at all.

 

 

[fishbaitfood]

Can someone give me a solution to this problem?

 

I guess the only way is to check the toggle state with another function? How would I do this?

[fishbaitfood]

Bump.

 

Still having trouble figuring this out. 

[fishbaitfood]

Is there a way to get my 4 button states, according to mouseDown and Up, in each toggle function, to work in a .live('click') function instead?

 

With toggle it's easy to have two functions, so I can have my 4 button states in it.

But with a click function, I only have one function.

 

How could I implement the toggle functionality with 4 button states in one click function?

 

The toggle function in my first post works, but my button states only appear after the first click.

 

[Adam]

As nogray explained before, you're only binding the event handlers once the toggle event is called. As the user clicks the button for the first time, the mouse down/up events are bound. The handlers aren't called because the events have already happened. On the second click the mousedown/up events are called, and then new mousedown/up event handlers bound. On the third click the events already exist, so from that point on it will work as expected.

 

Within your toggle handlers you only need to switch a class name that will alter the look and represent the checked/unchecked state. Separately (outside of your toggle handlers) you need to bind the mousedown/up events to the button, and then you can simply detect which state the button is in with hasClass() and add the right highlight class.

[fishbaitfood]

Thanks for your help, but that only works for two button states as far as I know.

 

The problem is, I have 4 button states. So I need to put 2 class names in each toggle function, which won't work (overrides?).

 

Or am I missing something?

 

The button states are:

- unchecked

- unchecked, highlighted (mousedown)

- checked

- checked, highlighted (mousedown)

 

 

[Adam]

Not tested, but try this:

 

$("#button").mousedown(function() {
    var $this = $(this);
    if ($this.hasClass('checked')) {
        $this.removeClass('checked').addClass('checked-highlight');
    } else if ($this.hasClass('unchecked')) {
        $this.removeClass('unchecked').addClass('unchecked-highlight');
    }
});

$("#button").mouseup(function() {
    var $this = $(this);
    if ($this.hasClass('checked-highlight')) {
        $this.removeClass('checked-highlight').addClass('checked');
    } else if ($this.hasClass('unchecked')) {
        $this.removeClass('unchecked-highlight').addClass('unchecked');
    }
});

$("#button").toggle(
function() {
        $(this).removeClass('unchecked').addClass('checked');
}, function() {
        $(this).removeClass('checked').addClass('unchecked');
}
);

[Adam]

Fixed a typo:

 

$("#button").mouseup(function() {
    var $this = $(this);
    if ($this.hasClass('checked-highlight')) {
        $this.removeClass('checked-highlight').addClass('checked');
    } else if ($this.hasClass('unchecked-highlight')) {
        $this.removeClass('unchecked-highlight').addClass('unchecked');
    }
});

[fishbaitfood]

Aahh, it's so much more obvious when I see it in code! 

 

I'll test it out later this evening.

Many thanks already! 

 

[fishbaitfood]

Hmm, although your code seems to be the right thing, it won't work.

When toggling, no changes are made with the background-positions.

 

And there are no errors in the console log.

[fishbaitfood]

Bump.

[fishbaitfood]

Problem solved.

The CSS checked and unchecked background-position rules were neglected by .checklist label {}, which has the upperhand ofcourse.