javascript image cropping problem

Im using this code to select the image area which needs to be cropped.

`function preview(img, selection) { var scaleX = 100 / selection.width; var scaleY = 100 / selection.height;

$('#thumbnail + > img').css({ width: Math.round(scaleX * 354) + 'px', height: Math.round(scaleY * 448) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height); }

$(window).load(function () { $('#thumbnail').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '1:1', onSelectChange: preview });

}); `

This works fine but im using tabs to show different sections. When I click on the next tab I can see the image cropper which i dont want. How can i solve this. Im very new to javascript.

From stackoverflow

• HI, I think you are using a div as the image cropper. If it is the case you can set the div attribute style.display='none' when you click on the other tab.