CODEWITHSUNDEEP
javascripthtmlcss
George
George

Reputation: 23

JavaScript - Trying to resize image size with mouse wheel

I'm a beginner in JavaScript and I'm trying to resize the image size by scrolling the mouse wheel. I run this in Chrome.

This code only resizes its height but not its width; I've tried working it out on paper by substituting numbers into img1.height and img1.width and it works but not when I run the code.

HTML

<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/7/73/HDRI_Sample_Scene_Balls_(Auto_Exposure).jpg" style="position:absolute; transition: 1s all">

JAVASCRIPT --- wrong code, not working, only height changes

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;

    img1.height = img1.height + e.deltaY;
    img1.width = img1.height / slope;
}

function init() {
    window.onwheel = changeSize;
}

window.onload = init;

With the same HTML code, the code below works but I don't understand why copying the new height to a variable and using that variable instead of the image height works.

JAVASCRIPT --- correct code, working, both height and width changes

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    var change = img1.height + e.deltaY;

    img1.height = change;
    img1.width = change / slope;
}

function init() {
  window.onwheel = changeSize;
}

window.onload = init;

Thanks for the answers.

Upvotes: 2

Views: 3689

Answers (3)

Andrii Bugai
Andrii Bugai

Reputation: 156

img1.height = img1.height + e.deltaY;
img1.width = img1.height / slope;

In this code above there is an attempt to assign a value to image height and to read it immediately. The problem is that image properties are set asynchronously. In order to read the height value, that is previously assigned, you should wait for an onload event, like this:

img1.height = img1.height + e.deltaY;
img1.onload = function() {
    img1.width = img1.height / slope;
}

Upvotes: 1

shubham agrawal
shubham agrawal

Reputation: 3541

In this code Non working:

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;

    img1.height = img1.height + e.deltaY;
    img1.width = img1.height / slope;
}

function init() {
    window.onwheel = changeSize;
}

window.onload = init;

If we add alert like this:

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    img1.height = img1.height + e.deltaY;
    alert(img1.height);
    img1.width = img1.height / slope;
}

function init() {
    window.onwheel = changeSize;
}

window.onload = init;
<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/7/73/HDRI_Sample_Scene_Balls_(Auto_Exposure).jpg" style="position:absolute; transition: 1s all">

Now we see that the code starts to work as expected.But the point to notice is that the value of alert is the previous image height not the updated one even it is written after img1.height = img1.height + e.deltaY;.Since the img1.height value does not update until the code ends this is happening.The alert box takes the focus away from the current window and when we close it again switches to current window thats why code works in case of alert

In this code Working:

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    var change = img1.height + e.deltaY;

    img1.height = change;
    img1.width = change / slope;
}

function init() {
  window.onwheel = changeSize;
}

window.onload = init;

In this code img1.height as well as img1.width depends on a variable value change.Since the value of variable updates during the runtime of the function it changes the height and width of image.

Now the point to see is that:

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    var change = img1.height + e.deltaY;
    img1.height = change;
    alert(img1.height);
    img1.width = change / slope;
}
function init() {
  window.onwheel = changeSize;
}

window.onload = init;
<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/7/73/HDRI_Sample_Scene_Balls_(Auto_Exposure).jpg" style="position:absolute; transition: 1s all">

If we alert in this code also it shows the previous height of the image.

Therefore I conclude that the height and width of the image changes after the end of the function and since in first code the width depends on updating the height so it does not changes

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28417

Specify only one dimension in the markup / css, and change that via the wheel event. Image will resize keeping the aspect ratio intact.

Try it in the snippet below:

var image = document.getElementById('image');
image.addEventListener('wheel', function(e) {
  this.width += Math.floor(e.deltaY);
  e.preventDefault();
});
img { 
  position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%, -50%);
  transition: all 0.2s linear;
}
<img id="image" src="//placehold.it/240x120/33d/fff">

Upvotes: 0

Related Questions