So I'm working on customizing my wordpress-based website and I was trying to make the website's layout fit and stay in place when the browser is being resized.
所以我正在定制我的基于wordpress的网站,我尝试着让网站的布局变得合适,并且在浏览器被调整的时候保持原状。
I am doing that by using jQuery:
我用的是jQuery
jQuery(window).resize(function(){[Code to be executed on resize]});
Basically, as soon as I add that part to my file and I resize the browser this error turns up on chrome's console:
基本上,只要我把那个部分添加到我的文件中,我调整浏览器的大小,这个错误就会出现在chrome的控制台上:
Uncaught TypeError: Cannot set property 'w' of undefined jquery.ba-resize.min.js?ver=3.4.2:11
未被捕获的TypeError:不能设置未定义的jquery.b - resize.l .js的属性'w' . =3.4.2:11。
Now I am unsure what it means or what I might missing/forgetting/doing wrong but I am fairly sure this is what's causing malfunctions to my resizing scripts at the moment.
现在我不确定这是什么意思,或者我可能遗漏了什么/忘记了/做错了什么,但我很确定这是导致我现在的调整脚本错误的原因。
2 个解决方案
#1
2
You should binding the resize event after the document is ready to make sure the resize plugin is already loaded.
您应该在文档准备好以确保已经加载了resize插件之后,对resize事件进行绑定。
#2
1
This is not an answer, but just an observation:
这不是一个答案,而是一个观察:
window object has its own resize event, so there is no need to use that jquery plugin.
window对象有自己的resize事件,所以不需要使用jquery插件。
adding a resize event listener would have served:
添加一个resize事件监听器将会服务:
window.addEventListener("resize",function(){[code here]});
Note: the plugin is for binding resize events to objects other than window object.
注意:这个插件是用来将事件的大小绑定到对象以外的对象。
Worth checking:
值得检查:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize
EDIT:
编辑:
window.onload = function() {
//this will block the horizontal scroll bar from appearing.
document.body.style.overflowX = 'hidden';
//the width will be adjusted at the initial page load.
document.getElementById("rsize").style.width = (window.innerWidth - 15);
window.addEventListener('resize', function() {
document.getElementById("rsize").style.width = (window.innerWidth - 15);
});
};
Note: the end result depends on how you are implementing it, how the elements are styled.
注意:最终的结果取决于您如何实现它,元素是如何设计的。
i hope it helps.
我希望它有帮助。
#1
2
You should binding the resize event after the document is ready to make sure the resize plugin is already loaded.
您应该在文档准备好以确保已经加载了resize插件之后,对resize事件进行绑定。
#2
1
This is not an answer, but just an observation:
这不是一个答案,而是一个观察:
window object has its own resize event, so there is no need to use that jquery plugin.
window对象有自己的resize事件,所以不需要使用jquery插件。
adding a resize event listener would have served:
添加一个resize事件监听器将会服务:
window.addEventListener("resize",function(){[code here]});
Note: the plugin is for binding resize events to objects other than window object.
注意:这个插件是用来将事件的大小绑定到对象以外的对象。
Worth checking:
值得检查:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize
EDIT:
编辑:
window.onload = function() {
//this will block the horizontal scroll bar from appearing.
document.body.style.overflowX = 'hidden';
//the width will be adjusted at the initial page load.
document.getElementById("rsize").style.width = (window.innerWidth - 15);
window.addEventListener('resize', function() {
document.getElementById("rsize").style.width = (window.innerWidth - 15);
});
};
Note: the end result depends on how you are implementing it, how the elements are styled.
注意:最终的结果取决于您如何实现它,元素是如何设计的。
i hope it helps.
我希望它有帮助。