Modify javascript to trigger on :checked instead of :hover — hoverizr

Question

I am trying to change hoverizr (jQuery plugin) so that it's triggered on :checked instead of on :hover. The author of hoverizr said that it can easily be done, but he has no time to write it, and I am unexperienced with JavaScript.

I have asked a similar question on stackoverflow, but that was concerning an image swap script, and hoverizr uses canvas to create image effects

I need the hover functionality to be swapped for a :checked of a hidden radio button. You can see what I mean on my website. I use :checked radio boxes and pseudo classes for filtering on my site. When the images are filtered, I want the images to appear colored. That is where hoverizr comes in.

Basically I need to bind a checked event instead a hover event. There is a small stackoverflow post that touches on that BUT, this post is on checkboxes, and I need to use radio buttons.

So, here is the JavaScript for hoverizr (the hover event is at the bottom of the code)

can't you use .click() with a and check its current state before deciding which action should be carried out? — CBusBus, Mar 21 '12 at 01:38
So onclick() and if :checked, then trigger event? Sounds good but I don't know how to write that out. — davecave, Mar 21 '12 at 01:50
Isn't it now triggering on click instead of hover? Sorry I fail to understand your problem :( — Andreas Wong, Mar 21 '12 at 01:57
@andreas my site is triggering on click, but it is not implementing hoverizr. Hoverizr would allow me to color the image instead just changing the opacity. — davecave, Mar 21 '12 at 02:22
Ok so just let me confirm this, instead of changing the opacity, you want your images to be colored, and onclick event? — Andreas Wong, Mar 21 '12 at 02:27
@andreas Yes, for example, after clicking "web" a couple of the thumbnails (that I specify) will change from black and white to color. — davecave, Mar 21 '12 at 05:44

Greg Pettit · Answer 1 · 2012-03-21T03:13:07.420

Both checkboxes and radio buttons are input types. As such, you can listen for change events on them:

Sample fiddle: http://jsfiddle.net/kbHSD/1/

HTML:

<div>A sample div</div>

<input type="checkbox" name="checkbox"/><label for="checkbox">Some checkbox</label><br/>
<input type="radio" name="radio" value="enable"/>Enable green!<br/>

CSS: div {background-color: gray; width: 200px; height: 200px}

JS:

var theDiv = $('div');
$('input').change(function() {
    if (this.checked) {
        theDiv.css('background-color', 'lime');
    } else {
        theDiv.css('background-color', 'gray');
    }
});

To modify hoverizr directly shouldn't be too hard, but you need to remember two things:

the 'hover' event rolls two events together: mouseenter and mouseleave. Your logic only needs to listen for the change event, so your conditions will be evaluated and nested differently.
you need to decide in advance how you want the radio buttons to behave. If they're a "turn on once and that's it" type of thing (as per my example), easy enough. Otherwise you will have to add logic to determine what to do based on the value of the selected radio.

[added] FWIW, if you listen for click instead of change, you'll get the same net results.

score 0 · Answer 2 · answered Mar 21 '12 at 01:59

0

Quick example as commented above.

var rb = document.createElement("input")
document.body.appendChild(rb)
rb.type = "radio"
rb.id = "sample"
rb.onclick = function()
{
    if(this.checked)
    //Do your thing, remember to toggle values
}

answered Mar 21 '12 at 01:59

CBusBus

2,321
1
18
26

Modify javascript to trigger on :checked instead of :hover — hoverizr

2 Answers2