加載jquery調用調整大小窗口

我想中心在我的頁面上使用jquery的div和核心代碼工作正常，它調整頁面調整大小時div的中心。不過，我需要調整大小以便加載，所以我在自定義代碼之後立即調用$(window).reize();，但出於某種原因，它只在調整頁面大小時才起作用，而不是頁面加載時才起作用。加載jquery調用調整大小窗口

下面是代碼：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 

    <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>TEST PAGE</title> 
     <link rel="stylesheet" type="text/css" href="style.css" > 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    </head> 

    <script> 

     $(window).resize(function() 
         { 

     $('.mainContent').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.mainContent').outerWidth())/2, 
      top: ($(window).height() - $('.mainContent').outerHeight())/2 
     }); 

     }); 

     // To initially run the function: 
     $(window).resize(); 

    </script> 

    <body> 

     <div class="mainContent"> 
     This is a test 

     </div> 


    </body> 

</html>

來源

2014-06-10 jskrwyk

我認爲你的src屬性有問題。如果你試圖引用一個在線腳本只需將你的src替換爲（https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js）然後你就可以繼續使用ready.I嘗試你的代碼，它工作正常爲了我。

來源

2014-06-12 12:22:50

是的，這是答案。 jQuery沒有加載正確。這很奇怪，因爲這行代碼是直接從谷歌的CDN頁面爲jQuery獲取的（複製和粘貼）。 – jskrwyk

使用ready 設置你的代碼$(document).ready

$(document).ready(function(){ 

$(window).resize(function() 
         { 

     $('.mainContent').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.mainContent').outerWidth())/2, 
      top: ($(window).height() - $('.mainContent').outerHeight())/2 
     }); 

     }); 

     // To initially run the function: 
     $(window).resize(); 

});

來源

2014-06-10 04:39:29

現在即使陌生人可以工作，但只能在加載時垂直居中，但當您調整頁面大小時，則會垂直和水平居中。 – jskrwyk

你可以只觸發調整大小像下面結束之後：

$(window).resize(function() 
         { 

     $('.mainContent').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.mainContent').outerWidth())/2, 
      top: ($(window).height() - $('.mainContent').outerHeight())/2 
     }); 

     }).resize();

來源

2014-06-10 04:47:38

似乎不起作用。 – jskrwyk

你確定你準備好了嗎？ –

是的，它似乎並不想在頁面加載時執行此操作。 – jskrwyk

將腳本放在body標籤中，然後繼續使用ready函數並檢查它是否正常工作？

來源

2014-06-10 05:14:46

當放在身體內時，標籤的結果與下面相同。適用於調整大小但未加載的情況。 – jskrwyk

加載jquery調用調整大小窗口

回答

相關問題