jquery window.resize無法正常工作

我編寫了一個非常簡單的jquery腳本，將元素正確地放置在網頁上，基本上可以在沒有媒體查詢的情況下響應。現在它工作得很好，但window.resize不會在document.ready上觸發，它在窗口上工作時調整它的大小。任何幫助將不勝感激。把鏈接到頁面底部jquery window.resize無法正常工作

// JavaScript Document 
$(document).ready(PlaceContents); 
$(window).ready(PlaceContents); 
$(window).on('resize',PlaceContents); 

function PlaceContents() {     

     var Wheight = $(document).height(); 
     var Wwidth = $(document).width(); 
     var contentPos = Wwidth/4; 
     var contentH = Wheight/5; 


     //adjust menubar height 
     $('#menubar').height(Wheight); 

     //center main content 
     $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'}); 


};

http://www.mobileapplicationlabs.com/goldentreehotels/

來源

2014-12-02 Anando

'基本上使它不響應爲什麼你會想這樣做，媒體queries'？媒體查詢是爲此目的而發明的。 Javascript不應該成爲UI修正的柺杖。 – 2014-12-02 10:23:26

我認爲這也是jQuery衝突 – 2014-12-02 10:25:33

@Rory McCrossan縱向排列正確，即使它的內聯塊。嘗試，因爲如果你看到設計的右側內容框需要垂直對齊，即使它的內聯塊。嘗試噸的東西，但沒有工作。垂直對齊：中間一直是個問題。這是jquery使用 – Anando 2014-12-02 10:49:18

希望這是你在找什麼。

window.addEventListener('resize', function() { 
    PlaceContents(); 
}, false);

來源

2014-12-02 10:26:35

你應該做這個回調：

$(document).ready(function(){ 
 
\t PlaceContents(); 
 
}); 
 

 

 
function PlaceContents() {     
 
     var Wheight = $(document).height(); 
 
     var Wwidth = $(document).width(); 
 
     var contentPos = Wwidth/4; 
 
     var contentH = Wheight/5; 
 

 

 
     //adjust menubar height 
 
     $('#menubar').height(Wheight); 
 

 
     //center main content 
 
     $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'}); 
 

 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="maincontent" method="POST"> 
 
     <input type="submit" value="menubar" name="menubar" id="menubar"> 
 
</form>

來源

2014-12-02 10:29:26

你可以用下面的函數

$(window).bind("load resize", function() { 
    PlaceContents(); 
});

希望這會幫助你。

來源

2014-12-02 10:29:43

那麼你可以寫相同的代碼是這樣的：一旦頁面已經被加載，也對調整事件

大小調整功能將運行。

祝你好運:)

$(document).ready(function(){ 
    $(window).resize(function(){  
     var Wheight = $(window).height(); 
     var Wwidth = $(window).width(); 
     var contentPos = Wwidth/4; 
     var contentH = Wheight/5; 
     //adjust menubar height 
     $('#menubar').height(Wheight); 
     //center main content 
     $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});  
    }).resize(); 
});

來源

2014-12-02 10:35:06 Awesomestvi

不幸的原因之一。任何其他想法？ – Anando 2014-12-02 10:48:46

我相信你需要一個結構，就像我爲我的網站所做的一樣：請看看http://www.redpeppermedia.in/ – Awesomestvi 2014-12-02 14:39:10

是的，我這樣做是一個不錯的網站，但我可以看看你的jQuery ？ – Anando 2014-12-16 12:50:21

試試這個代碼：

$(document).ready(function(){ 
    $(window).resize(function(){  
     var Wheight = $(window).height(); 
     var Wwidth = $(window).width(); 
     var contentPos = Wwidth/4; 
     var contentH = Wheight/5; 
     //adjust menubar height 
     $('#menubar').height(Wheight); 
     //center main content 
    $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});  
    }); 
});

來源

2014-12-02 10:46:57

jquery window.resize無法正常工作

回答

相關問題