admin管理员组文章数量:1022997
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
2 Answers
Reset to default 1You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});
I have updated your jsfiddle here where you can see it working.
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
window.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
If someone still interested
You can use ResizeObserver
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('Width', entry.contentRect.width)
}
console.log("Size changed");
});
const divEl = document.getElementById('el');
resizeObserver.observe(divEl);<div id="el">Some Element</div>before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
2 Answers
Reset to default 1You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});
I have updated your jsfiddle here where you can see it working.
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
window.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
If someone still interested
You can use ResizeObserver
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('Width', entry.contentRect.width)
}
console.log("Size changed");
});
const divEl = document.getElementById('el');
resizeObserver.observe(divEl);<div id="el">Some Element</div>本文标签：
版权声明：本文标题：javascript - How to use "object.addEventListener("resize", myScript)" for a div element? - S 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745592406a2157967.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论