Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts

    [jQuery] MouseDown and Up when toggle-ing

    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.

    Code:
    $("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.

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Woow, a lot of dust in this thread...

    (bump)

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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).
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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
    Code:
    .checklist label {
    	background: url('images/checkbox.png') 0 0 no-repeat;
    }
    and stuff like

    Code:
    .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.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    fishbaitfood (11-14-2011)

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks venegal, I totally forgot that .checklist label {} has the upperhand in these css rules. Thanks for pointing this out.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?
    Last edited by fishbaitfood; 11-14-2011 at 07:46 PM.

  • #8
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    fishbaitfood (11-14-2011)

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks a lot, venegal.
    Hardcoding the unchecked class seems obvious, now you hinted me that out.

    Sorry for the hassle, and again many thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •