I want to make div content resizable, but the div itself to stay the same size. This should happen when the user scrolls. I have this function:

var zoomable = document.getElementById('zoomable'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.style.transform = 'scale(' + zX + ')';
    e.preventDefault();
    return;
});

This works but only with the div itself. In this div I have multiple small draggable tables with .foo class and I want to resize them without changing parents size. I have also tried this:

var zoomable = document.getElementsByClassName('foo'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.each(function(){ 
        $(this).style.transform = 'scale(' + zX + ')'; 
    })
    e.preventDefault();
    return;
});

But is does not work either. Is there a way to resize content but not the div?

EDIT: Here is jsfiddle: / It's not exactly my project (Because it's too plex), but the idea is the same. I want to make #zoomable div to stay the same size and its content (paragraphs in this case) to be resizable.

I want to make div content resizable, but the div itself to stay the same size. This should happen when the user scrolls. I have this function:

var zoomable = document.getElementById('zoomable'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.style.transform = 'scale(' + zX + ')';
    e.preventDefault();
    return;
});

This works but only with the div itself. In this div I have multiple small draggable tables with .foo class and I want to resize them without changing parents size. I have also tried this:

var zoomable = document.getElementsByClassName('foo'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.each(function(){ 
        $(this).style.transform = 'scale(' + zX + ')'; 
    })
    e.preventDefault();
    return;
});

But is does not work either. Is there a way to resize content but not the div?

EDIT: Here is jsfiddle: https://jsfiddle/vaxobasilidze/ba2n9a61/ It's not exactly my project (Because it's too plex), but the idea is the same. I want to make #zoomable div to stay the same size and its content (paragraphs in this case) to be resizable.

• javascript
• jquery
• html
• css
• resize

Share Improve this question Follow edited Nov 27, 2017 at 9:24 Vaxo Basilidze asked Nov 27, 2017 at 8:53 Vaxo BasilidzeVaxo Basilidze 1,0571616 silver badges3737 bronze badges 4

• Please create a working fiddle. – dom_ahdigital Commented Nov 27, 2017 at 8:56
• @dom_ahdigital I've added jsfiddle. If you could help me with this, I would be really glad. – Vaxo Basilidze Commented Nov 27, 2017 at 9:11
• @VaxoBasilidze I've made fiddle for you in my answer is that what you want ? – Zvezdas1989 Commented Nov 27, 2017 at 9:34
• What browser are you using to test this? In everyone's fiddles I see no resizing or animation whatsoever. – dom_ahdigital Commented Nov 27, 2017 at 9:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I've adjusted your fiddle to work. I think this is what you wanted. You need to target your content to make this work like your description.

var content = document.getElementById('zoomable').getElementsByTagName('p');
var zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    for (var i = 0; i<content.length; i++) {
         content[i].style.transform = 'scale(' + zX + ')';
        }

    e.preventDefault();
    return;
});

https://jsfiddle/Karadjordje1389/z254o87v/