How to keep div size constant on zoom in and zoom out?

Question

take a look at this slider on this website, and press CTRL + + or CTRL + - (zoom in, zoom out) and you'll understand what I mean.

How is that possible, keep the same size for the slider and its content when we zoom the page.

I guess it uses any jQuery/JavaScript script, I'm not sure. Thank you.

You can check which Javascipt event is fired during zooming if there is any ofcourse. — Kamen Stoykov, Jun 26 '13 at 15:50
You could also use percentage values which are not affected by zooming — Carlos Bergen, Jun 26 '13 at 15:52
CarlosBergenDyck's advice doesn't work, keeping in mind that images have their own resolution. — , Jun 26 '13 at 15:57
@IrinelIovu which carousel plugin is that? Maybe it have its own `resize`-method? — yckart, Jun 26 '13 at 16:01
@yckart it is using https://github.com/richardscarrott/jquery-ui-carousel — Robert McKee, Jun 26 '13 at 16:35
@IrinelIovu The scroller you use has its own `refresh`-method: https://github.com/richardscarrott/jquery-ui-carousel#refresh-rs-carouselcarouselrefresh I updated my answer: http://stackoverflow.com/a/17324937/1250044 — yckart, Jun 26 '13 at 16:42

yckart · Answer 1 · 2013-06-26T16:42:02.370

0

You can simply recalculate the slider-dimensions with an event-handler, like this:

$(document).on('keydown', function(e){
    if(e.ctrlKey) {

        if(e.which === 187) {
            // zoom-in, +
        }

        if(e.which === 189) {
            // zoom-out, -
        }

    }
});

Update

I noted that you can simply you the resize-event, to check if the window-size is changed:

$(window).on('resize', function(){
    alert(true)
});

http://fiddle.jshell.net/aZagW/1/

Update2

The scroller you use has its own refresh-method:

Refreshes carousel based on new state. The carousel can be made responsive by calling this method on the windows resize event.

https://github.com/richardscarrott/jquery-ui-carousel#refresh-rs-carouselcarouselrefresh

edited Jun 26 '13 at 16:42

answered Jun 26 '13 at 15:57

yckart

32,460
9
122
129

1

That only covers zooming in and out with the keyboard, not the mouse. – Reinstate Monica Cellio Jun 26 '13 at 15:57
That wouldn't work well enough at all, think about, there are many different screen resolutions. – Jun 26 '13 at 16:00
@IrinelIovu See my [comment](http://stackoverflow.com/questions/17324742/how-to-keep-div-size-constant-on-zoom-in-and-zoom-out/17324937#comment25130233_17324742). – yckart Jun 26 '13 at 16:02
@yckart I did, but, how to keep the size constant? That's my real question. http://jsfiddle.net/9RPdL/ – Jun 26 '13 at 16:09

score 0 · Answer 2 · answered Jun 26 '13 at 16:06

you can try something like this

window.onresize = function()
{
    var elementWidth = window.innerWidth
    var element = document.getElementById('element')
    element.style.width = parseInt(elementWidth)/2 // for example if you want it always be half of page 
}

How to keep div size constant on zoom in and zoom out?

2 Answers2