Question

I work on a climate model and I display it on a map grid. I have to use a large grid : 39×60.

So I have to manage 2340 <div> with jQuery. I want to use a jQuery slider to zoom in / out with this :

$("#zoom_slider").slider({
        orientation: "vertical",
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            $('.case').css('width', function(index) {
                return index * ui.value;
            });

            $('.case').css('height', function(index) {
                return index * ui.value;
            });
        }
    });

Each cell is built as this example :

<div id="c13_53" class="case line_13 col_53" style="width: 17px; height: 17px; top: 216px; left: 937px;"></div>

But firefox crashes when the function is executed.

Is there a way to fix this problem ?

Answer 1

Was it your intention to set each one larger by what index it has? That will mean no matter which way the slider goes they will get bigger, much bigger. Better to store a reference value I think.

//Size in pixels.
var originalSize = 20,
    cases = $('.case');

 stop: function(_, ui) {
        var size = ui.val * originalSize;
        cases.css({width: size + 'px', height: size + 'px'});
    }

Used stop as per Jacobs suggestion.
This will at least make it more efficient, as to whether it stops crashing, no idea.