I have 2 divs, one positioned absolutely right: 0 and the other relatively positioned center screen. When the window's width is too small, they overlap. How can I invoke a javascript function when this happens?
我有两个div,一个位于绝对右侧:0和另一个相对定位的*屏幕。当窗口的宽度太小时,它们会重叠。发生这种情况时如何调用javascript函数?
Thanks. Mike
Edited to make clearer.
编辑以使更清楚。
3 个解决方案
#1
To check for overlapping div's you might wanna do a check once the page is loaded, and whenever the window is resized:
要检查重叠的div,您可能希望在加载页面后进行检查,并且每当窗口调整大小时:
window.onload = checkOverlap;
window.onresize = checkOverlap;
And then use some offset-checking:
然后使用一些偏移检查:
function checkOverlap() {
var centerBox = document.getElementById('centerDiv');
var rightBox = document.getElementById('rightDiv');
console.log("centerbox offset left: " + centerBox.offsetLeft);
console.log("centerbox width: " + centerBox.offsetWidth);
console.log("rightbox offset left: " + rightBox.offsetLeft);
if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
centerBox.style.display = "inline-block";
} else {
centerBox.style.display = "block";
}
}
You might wanna do some more checks in the function, e.g. to see if the box is already displayed inline, and such. But that should give you a good place to start.
您可能想要在函数中进行更多检查,例如看看盒子是否已经内嵌显示,等等。但那应该会给你一个好的起点。
edit: added some diagnostics and fixed error
编辑:添加了一些诊断和修复错误
#2
Part 1:
Do it like this:
像这样做:
<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>
...
<div id="example"> ... </div>
#3
document.getElementById('div_id').style.display = 'inline-block'
document.getElementById('div_id').offsetWidth
gives us width of div
document.getElementById('div_id')。offsetWidth给出了div的宽度
offsetHeight, offsetLeft, offsetTop
are useful also.
offsetHeight,offsetLeft,offsetTop也很有用。
#1
To check for overlapping div's you might wanna do a check once the page is loaded, and whenever the window is resized:
要检查重叠的div,您可能希望在加载页面后进行检查,并且每当窗口调整大小时:
window.onload = checkOverlap;
window.onresize = checkOverlap;
And then use some offset-checking:
然后使用一些偏移检查:
function checkOverlap() {
var centerBox = document.getElementById('centerDiv');
var rightBox = document.getElementById('rightDiv');
console.log("centerbox offset left: " + centerBox.offsetLeft);
console.log("centerbox width: " + centerBox.offsetWidth);
console.log("rightbox offset left: " + rightBox.offsetLeft);
if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
centerBox.style.display = "inline-block";
} else {
centerBox.style.display = "block";
}
}
You might wanna do some more checks in the function, e.g. to see if the box is already displayed inline, and such. But that should give you a good place to start.
您可能想要在函数中进行更多检查,例如看看盒子是否已经内嵌显示,等等。但那应该会给你一个好的起点。
edit: added some diagnostics and fixed error
编辑:添加了一些诊断和修复错误
#2
Part 1:
Do it like this:
像这样做:
<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>
...
<div id="example"> ... </div>
#3
document.getElementById('div_id').style.display = 'inline-block'
document.getElementById('div_id').offsetWidth
gives us width of div
document.getElementById('div_id')。offsetWidth给出了div的宽度
offsetHeight, offsetLeft, offsetTop
are useful also.
offsetHeight,offsetLeft,offsetTop也很有用。