Количество делений вписывается в окно браузера с изменением размера - PullRequest
Новая
       5

Количество делений вписывается в окно браузера с изменением размера

1 голос
/ 11 октября 2019

Вот этот код: https://jsfiddle.net/qw3fp7sk/

Код отображает на странице делители того же размера, а количество делений соответствует фактическому размеру страницы без прокрутки.

Я хочу изменить количество делений на странице на лету, когда я изменяю размер окна браузера. Номер div должен соответствовать размеру окна без прокрутки.

В настоящее время номер div изменяется после изменения размера страницы только при нажатии кнопки Run в jsfiddle.

Вот фрагмент кода, то естьне работает: 

   $(window).on('resize', function() {

        // define global width and height variables
        var width = new jqUpdateSize().width;
        var height = new jqUpdateSize().height;

        // define div numbers to actual screen width (on one line)
        var lastw = '';
        for (var i = divwidthCalc; i < width; i+=divwidthCalc) {
        lastw++;
        }

        // define div numbers to actual screen height (on one row)
        var lasth = '';
        for (var i = divheightCalc; i < height; i+=divheightCalc) {
        lasth++;
        }

        // define the max div numbers
        var numDivMaxOnPage = lastw * lasth;

        //alert(numDivMaxOnPage);

        setGridDimensions(numDivMaxOnPage);


    });

Заранее благодарю за помощь.

1 Ответ

0 голосов
/ 11 октября 2019

Проблема с вашей переменной numDivMaxOnPage. Он определяет два раза. 

// divs w, h, margin
    // you can modify these datas
    var divborder = 5;
    var divwidth = 100;
    var divheight = 100;
    // calculating the values to define max div on lines and on rows
    var divwidthCalc = divwidth+(divborder*2);
    var divheightCalc = divheight+(divborder*2);

    var numDivMaxOnPage = null;


  function setGridDimensions(n) {
        var html ='';
        for (var i = 0; i < numDivMaxOnPage; i++) {
        html += '<div class="row">' + (i+1);
        html += '</div>';
        }
        $(document.body).html(html);

         // div size css
        $('.row').css({'width': divwidth + 'px', 'height' : divheight + 'px', 'border-width' : divborder + 'px'});
    };

    calculate();

    // not working function...
    $(window).on('resize', function() {

        calculate();


    });

  function calculate() {
        var width = $(window).width();
        var height = $(window).height();

        // define div numbers to actual screen width (on one line)
        var lastw = '';
        for (var i = divwidthCalc; i < width; i+=divwidthCalc) {
        lastw++;
        }

        // define div numbers to actual screen height (on one row)
        var lasth = '';
        for (var i = divheightCalc; i < height; i+=divheightCalc) {
        lasth++;
        }

        // define the max div numbers
        numDivMaxOnPage = lastw * lasth;

    // run function
        setGridDimensions(numDivMaxOnPage);

  }

https://jsfiddle.net/ne05rftp/1/

...