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无法正常工作

回答

相关问题