Адаптивная функция jQuery не работает, пока размер экрана не изменится - PullRequest
Новая
       7

Адаптивная функция jQuery не работает, пока размер экрана не изменится

0 голосов
/ 21 ноября 2018

Я использую jQuery ниже, чтобы переместить некоторые элементы на моей странице в зависимости от размера экрана пользователя.

У меня проблема в том, что код работает нормально, но только когда вы вручную изменяете размер экрана даже на 1 пиксель, он запускается, но никогда, когда документ загружается?

Есть идеи, куда я ушел?не так? 

jQuery(document).ready(function () {

    /*
     * windowSize
     * call this function to get windowSize any time
    */

    function windowSize() {
        windowHeight = window.innerHeight ? window.innerHeight : 
        $(window).height();
        windowWidth = window.innerWidth ? window.innerWidth : $(window).width();      
    }

    //Init Function of init it wherever you like...
    windowSize();

    // For example, get window size on window resize
    $(window).resize(function() {
        windowSize();
        //console.log("width is :", windowWidth, "Height is :", windowHeight);
        if (windowWidth > 1029) {
            $("#single-related").appendTo("#product-team-shop");
        } 
    });        
});

1 Ответ

0 голосов
/ 21 ноября 2018

Это потому, что событие изменения размера окна запускается только при изменении размера окна.

Если вы хотите выполнить функцию onLoad, вы можете сделать это следующим образом: 

jQuery(document).ready(function () {

  // Function executed once the document is loaded
  windowSize();

  // The function windowSize will execute when the window gets resized
  $(window).resize(function() {
    windowSize();
  });   

  function windowSize() {
    windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    // This will make sure it checks the window size once the document is loaded but also whenever a resizeEvent occurs     
    checkWindowWidth();
  }

  function checkWindowWidth() {
    if (windowWidth > 1029) {
        $("#single-related").appendTo("#product-team-shop");
        console.log('resized width greater than 1029');
    }
  }
});

I 'мы добавили код приложения и консоли в функцию с именем checkWindowWidth.Я выполняю это всякий раз, когда вызывается функция windowSize и всякий раз, когда происходит событие изменения размера.

Поскольку функция windowSize вызывается после загрузки документа, это означает, что функция checkWindowWidth запускается при загрузке документа икогда размер окна изменяется.

...