Блог

Я пытаюсь определить ширину окна с помощью базовой функции, однако функция не обновляется при изменении размера.

По сути, это форма регистрации по электронной почте, которая анимируется с холста при наведении курсора мыши.

Я не хочу, чтобы событие запускалось, когда экран меньше 768 пикселей.

код

 (function ($) {

    var config = {};

    $(document).ready(function () {

        config.window = $(window);

        // Resize
        $(window).on("resize", function () {
            resizeWindow();
        }).trigger("resize");

        if ( config.wWidth > 768 ) {
            buildCanvas();
        }

        // EMail Signup
        var $container = $('.email-signup__wrap'),
            $cHeight = $('.email-signup').outerHeight();

        function buildCanvas() {

            $('.email-signup__wrap').on('mouseenter mouseleave', function(e) {

                e.preventDefault();
                var $this = $(this);
                $container.toggleClass('active');

                if ($container.hasClass('active')) {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });

                } else {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            });
        }

        function resizeWindow() {
            config.wWidth = config.window.width();
            config.wHeight = config.window.height();
        }

    });

}(jQuery));
  

 function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});
  

Это приведет к запуску вашего обработчика изменения размера при изменении размера окна и готовности документа. Конечно, вы можете прикрепить свой обработчик изменения размера за пределами обработчика готовности документа, если хотите .trigger(‘resize’) для запуска при загрузке страницы вместо этого.

ОБНОВЛЕНИЕ: Вот еще один вариант, если вы не хотите использовать какие-либо другие сторонние библиотеки.

Этот метод добавляет определенный класс к вашему целевому элементу, поэтому у вас есть преимущество в управлении стилем только с помощью CSS (и избегании встроенного стиля).

Это также гарантирует, что класс добавляется или удаляется только при срабатывании фактической пороговой точки, а не при каждом изменении размера. Оно сработает только в одной пороговой точке: когда высота изменяется с <= 818 на > 819 или наоборот, а не несколько раз в пределах каждого региона. Это не связано с каким-либо изменением ширины.

 function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 amp;amp; $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});
  

В качестве примера, у вас может быть следующее в качестве некоторых ваших правил CSS:

 .footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}
  

Это может решить вашу проблему:

 var window_width = 0;
var window_height = 0;

$(document).ready(function(){
        // Calculate the default window width and height
        calculateWindowDimensions();

        // Call the buildCanvas function
        buildCanvas();

        // Calculate the window dimensions on window resize
        $(window).resize(function(){
            calculateWindowDimensions();
            // Call the buildCanvas function
            buildCanvas();
        });
});

function buildCanvas() {
    var $container = $('.email-signup__wrap'),
        $cHeight = $('.email-signup').outerHeight();
    if(window_width > 768){
        // EMail Signup

        $('.email-signup__wrap').on('mouseenter mouseleave', function(e) {
            e.preventDefault();
            var $this = $(this);
            $container.toggleClass('active');
            if ($container.hasClass('active')) {
                TweenMax.to($container, .4, {
                    ease: Power2.easeOut,
                    css:{
                        overflow: 'visible',
                        position: 'absolute',
                        top: -$cHeight
                    }
                });
            } else {
                TweenMax.to($container, .4, {
                    ease: Power2.easeOut,
                    css:{
                        position: 'relative',
                        top: 0
                    },
                    onComplete: hide
                });
                function hide(){
                    $container.css('overflow', 'hidden');
                }
                $("div.mce_inline_error").remove();
            }
        });
    } else {
        // ....
    }
    return false;
}

function calculateWindowDimensions() {
    window_width = $(window).width();
    window_height = $(window).height();
}
  

Вам нужно использовать $(document).ready() или (function($){ . Не имеет смысла использовать оба.

Прежде всего, это не очень хорошая практика проверки разрешения экрана с помощью JavaScript, для этого у вас есть медиа-запросы CSS.

Любое устройство с шириной экрана 768 пикселей и ниже, скорее всего, будет сенсорным устройством, у которого на самом деле нет события наведения, это событие щелчка.

Это, как говорится,

 if ( config.wWidth > 768 ) {
    buildCanvas();
} 
  

Этот фрагмент кода должен находиться внутри функции ‘resize’, поскольку, будучи автономным, оператор if запускается при загрузке только один раз при загрузке страницы. Метод ‘On’ не имеет свойства ‘resize’, используйте ‘.resize()’. Также нет необходимости в создании функции ‘resizeWindow’, поскольку вы запускаете ее только один раз, и это не делает ваш код более понятным.

Вы можете решить это самостоятельно, попробуйте отладить его в Chrome или Firefox, нажмите F12, чтобы запустить отладчик.
Кстати, в Chrome / Firefox вы также можете использовать следующий код для печати журнала в консоль отладчика:

 console.log("I am here ...");