javascript - Keep zooming (or zooming out) when mouse key is pressed -

javascript - Keep zooming (or zooming out) when mouse key is pressed -

i'm working on project need kind of screen calibration.

this calibration works in way when plus button pressed "credit card" zoomed in , when minus button pressed zoomed out 0.5mm.

everything works fine when button clicked "credit card" zoomed in or zoomed out 0.5mm, need maintain clicking alter zoom further. want zoom constant when mouse key pressed , stop zooming when released.

there javascript code:

var c = document.queryselector('.card'), m = document.queryselector('.m'), p = document.queryselector('.p'), s = document.queryselector('.s'), r = document.queryselector('.r'), w = c.style.width = '54mm'; m.addeventlistener('click', function() { w = c.style.width = parsefloat(w) - 0.5 + 'mm'; }); p.addeventlistener('click', function() { w = c.style.width = parsefloat(w) + 0.5 + 'mm'; }); s.addeventlistener('click', function() { r.innerhtml = 54 / parsefloat(w); });

you can @ jsfiddle see code i'm using now. can help me integration of function in existing code?

you need setup event listeners little bit different. solution - belive it's quite clear:

var c = document.queryselector('.card'), m = document.queryselector('.m'), p = document.queryselector('.p'), s = document.queryselector('.s'), r = document.queryselector('.r'), w = c.style.width = '54mm'; var min = false; var max = false; m.addeventlistener('mousedown', function(event) { min = true; }); m.addeventlistener('mouseup', function(event) { min = false; }); p.addeventlistener('mousedown', function() { max = true; }); p.addeventlistener('mouseup', function() { max = false; }); s.addeventlistener('click', function() { r.innerhtml = 54 / parsefloat(w); }); setinterval(function() { if(min) { w = c.style.width = parsefloat(w) - 0.5 + 'mm'; } }, 100); setinterval(function() { if(max) { w = c.style.width = parsefloat(w) + 0.5 + 'mm'; } },100);

javascript jquery