調整事件未觸發

-1

我試圖使用基本函數來檢測窗口寬度，但是，該函數並未在調整大小上進行更新。調整事件未觸發

它基本上是一個電子郵件註冊表單，可以從鼠標懸停時的畫布動畫化。

我不希望事件在屏幕小於768px時觸發。

CODE

(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));

來源

2014-07-02 Sam Holguin

爲什麼你把'$（文件）。就緒內的JS功能（） '？這可能是一個問題。 –

請提供一個JSFiddle，以便我們可以查看您的代碼。 –

你可以儘可能地標記我:)這太緊急了，不用擔心。我會檢查現在Wissam –

這可能會解決您的問題：

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($){。使用兩者都沒有意義。

來源

2014-07-02 08:37:00

仍然沒有運氣。這太瘋狂了......令人沮喪！就像我說的，我用過這種技術無數次 –

問題是config.wWidth沒有更新調整大小 –

我編輯代碼 –

function myResizeFunction() { 
    ... 
} 

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

這將導致您的調整大小處理程序觸發窗口調整大小和文檔就緒。當然，如果你想讓.trigger（'resize'）在頁面加載時運行，你可以將你的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 && $('.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; 
}

來源

2014-07-02 08:49:08

對我來說不起作用 –

試試看這裏[link]（http://jsfiddle.net/CoryDanielson/LAF4G/） –

所有這不是一個好的做法檢查屏幕分辨率使用JavaScript你對CSS媒體查詢的第一這個。

屏幕寬度768px及以下的任何設備都可能是觸控設備，實際上並沒有懸停事件，這是一個點擊事件。

話雖這麼說，

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

這個代碼的和平應該是一個「調整大小」功能中的if語句負載觸發只有當頁面加載它們曾是獨立的。 'On'方法沒有'resize'屬性，使用'.resize（）'。另外，不需要創建'resizeWindow'函數，因爲您只需觸發一次，並且不會使代碼更清晰。

來源

2014-07-02 10:27:34 YaroslavS120

我會讓你補償並讓你知道。感謝您的輸入 –

我理解您在媒體查詢上的觀點，但是我想停止更小的瀏覽器窗口的JavaScript。我有一個老闆，完美就是一切，我說它會在手機上很好不會飛 –

@media screen and（max-width：768px）{#yourCanvasContainer {display：none！important; }} – YaroslavS120

你可以自己解決它，嘗試在Chrome或Firefox中調試它，按F12，啓動調試器。
順便說一句，在鍍鉻/ Firefox中，您也可以使用下面的代碼來打印日誌到控制檯的調試器：

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

來源

2014-07-02 10:31:21

調整事件未觸發

回答

相關問題