$ (Окна) .resize (); не работает

0

У меня проблема с window.resize. Мой код js/jquery находится здесь

var x = $(window).width();
var y = $(window).height();
var z = $('#card').height();
var a = z + 140; // !!!zmienic gdy zmiana marginesu z gory lub paddingu (100 margin + 20x2 padding)
var b = 1.78 * y;
var c = 1.78 * a;
function updateBodySize(){
    x = $(window).width();
    y = $(window).height();
    z = $('#card').height();
    a = z + 140; // !!!zmienic gdy zmiana marginesu z gory lub paddingu (100 margin + 20x2 padding)
    b = 1.78 * y;
    c = 1.78 * a;
    if (c>b) {
        if (x>c) {
            $('body').css({'background-size': x + 'px auto'});
        }
        else {
            $('body').css({'background-size': 'auto ' + c + 'px'});
        }
        $('body').css({'height': a + 'px'});
    }
    else {
        if (x>b) {
            $('body').css({'background-size': x + 'px auto'});
        }
        else {
            $('body').css({'background-size': 'auto ' + b + 'px'});
        }
        $('body').css({'height': y + 'px'});
    }
}
$(document).ready(updateBodySize()); //kiedy zaladowany
$(window).resize(updateBodySize());  //kiedy zmiana rozmiaru

Комментарии на польском языке, но они не важны. Я хочу запустить функцию updateBodySize при каждом изменении размера браузера, но теперь эта функция запускается только тогда, когда документ готов (так что я знаю, что функция работает правильно) (строка последняя, но одна), и похоже, что последняя строка игнорируется. Неправильно ли эта строка $(window).resize(updateBodySize()); ? Или что-то случилось с моей функцией? Я проверил этот код в Chrome 33.

Теги:

5 ответов

2
Лучший ответ

Кажется, что ваши последние две строки проблемы:

$(document).ready( updateBodySize() );
$(window).resize( updateBodySize() );

Должно быть:

$(document).ready( updateBodySize );
$(window).resize( updateBodySize );

Обратите внимание на удаление () из updateBodySize - ваша цель - передать функцию updateBodySize в .ready и .resize, а не на результат. Вместо этого вы вызываете функцию, то, что вы делаете, передает результат updateBodySize() в функции .ready и .resize:

$(document).ready( null );
$(window).resize( null );

Который, как вы заметили, ничего не делает, кроме того, что updateBodySize() делает сначала (два) раза, когда вы его вызывали. Отбросьте () и он будет рассматриваться как обработчик событий, который вы ожидаете.

PS:

Если вы не используете первый блок

var x = $(window).width();
var y = $(window).height();
var z = $('#card').height();
var a = z + 140;
var b = 1.78 * y;
var c = 1.78 * a;

перед вашим функциональным блоком вы можете отказаться от него, так как вы переопределите эти переменные внутри функции, поэтому он будет вычислять их независимо в любое время, когда он будет вызван.

Поделиться
  • 0
    Спасибо, теперь все работает :) Но мне интересно, почему эта функция работала один раз после загрузки страницы, если я поместил результат в $(document).ready(); , а не функция сама по себе.
  • 0
    Это происходит (на самом деле дважды), когда страница загружается, потому что ваш исходный код вызывал функцию дважды: один раз в .ready( updateBodySize() ) и один раз в .resize( updateBodySize() ) . Каждый из них сначала запускал функцию, а затем передавал результат функции в метод.
Показать ещё 1 комментарий
1

Или вы можете попробовать это:

window.onresize = updateBodySize;

Поделиться
1

Я думаю, вы должны использовать это, потому что, как вы это делаете, функция выполняется, и возвращаемое значение функции задается как функция обратного вызова, которая не будет работать:

$(document).ready(function() {
    updateBodySize();
}); //kiedy zaladowany
$(window).resize(function() {
    updateBodySize();
});  //kiedy zmiana rozmiaru
Поделиться
  • 1
    Вы правы, но вы также можете сделать $(document).ready(updateBodySize); вместо.
0

Попробуй это:

$(function(){updateBodySize();}); //kiedy zaladowany
$(window).resize(function(){updateBodySize();});
Поделиться
0 
$( document ).ready(function() {
  $(window).resize(updateBodySize());
});
Поделиться
  • 0
    Не обязательно! $(window) всегда работает, даже если страница загружена не полностью, так как window определяется перед рендерингом.
  • 0
    В этом нет необходимости, и это также неправильно: как объясняется в утвержденном ответе, передача результата updateBodySize (путем вызова updateBodySize ()) ничего не изменит.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню