jQuery imgAreaSelect hide/show?

Question

I've been trying to hide and show the imgAreaSelect selection box depending on whether a checkbox is checked or not.

I've tried:

    var ias = $('#photo').imgAreaSelect({ instance: true });
    ias.setOptions({ show: false });

but it doesn't seem to do anything.

I have had to resort to:

    $('div.imgareaselect-selection').hide();
    $('div.imgareaselect-border1').hide();
    $('div.imgareaselect-border2').hide();
    $('div.imgareaselect-border3').hide();
    $('div.imgareaselect-border4').hide();
    $('div.imgareaselect-handle').hide();
    $('div.imgareaselect-outer').hide();

but it seems a little cumbersome and I'm sure there must be a better way.

Answer 1

I never used imgAreaSelect myself, but in the docs there is no option show present, but one named hide. Did you try this?

var ias = $('#photo').imgAreaSelect({ instance: true });
ias.setOptions({ hide: true });
ias.update();

As BBonifield points out, it seems like you have to call update() after changing options.

Alternatively you could use:

$('div[class^=imgareaselect-]').hide();

This selects all divs which have a class that begins with "imageareaselect-" and hides them.

Answer 2

You need to update the instance after you change the options - http://odyniec.net/projects/imgareaselect/usage.html#api-methods . Although in truth, I'm not sure if you should be using { hide: true } or {show: false}.

var ias = $('#photo').imgAreaSelect({ instance: true });
ias.setOptions({ hide: true });
ias.update();