У jQuery есть событие resize(), но оно работает только с окном.
jQuery(window).resize(function() { /* What ever */ });
Это отлично работает! Но когда я хочу добавить событие в элемент div, оно не работает.
Например
jQuery('div').resize(function() { /* What ever */ });
Я хочу начать обратный вызов, когда размер элемента div изменился. Я не хочу запускать событие изменяемого размера - просто событие, чтобы проверить, изменился ли размер элемента div.
Есть ли решение для этого?
DIV не запускает событие resize, поэтому вы не сможете делать то, что вы закодировали, но можете посмотреть мониторинг свойств DOM.
Если вы действительно работаете с чем-то вроде resizables, и это единственный способ изменения размера div, тогда ваш плагин изменения размера, вероятно, будет реализовывать собственный обратный вызов.
Меня интересовал только триггер, когда была изменена ширина элемента (я не забочусь о высоте), поэтому я создал событие jquery, которое делает именно это, используя невидимый элемент iframe.
$.event.special.widthChanged = {
remove: function() {
$(this).children('iframe.width-changed').remove();
},
add: function () {
var elm = $(this);
var iframe = elm.children('iframe.width-changed');
if (!iframe.length) {
iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
}
var oldWidth = elm.width();
function elmResized() {
var width = elm.width();
if (oldWidth != width) {
elm.trigger('widthChanged', [width, oldWidth]);
oldWidth = width;
}
}
var timer = 0;
var ielm = iframe[0];
(ielm.contentWindow || ielm).onresize = function() {
clearTimeout(timer);
timer = setTimeout(elmResized, 20);
};
}
}
Для этого требуется следующее css:
iframe.width-changed {
width: 100%;
display: block;
border: 0;
height: 0;
margin: 0;
}
Вы можете увидеть его в действии здесь widthChanged fiddle
// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})
(function ($) {
$.fn.sizeChanged = function (handleFunction) {
var element = this;
var lastWidth = element.width();
var lastHeight = element.height();
setInterval(function () {
if (lastWidth === element.width()&&lastHeight === element.height())
return;
if (typeof (handleFunction) == 'function') {
handleFunction({ width: lastWidth, height: lastHeight },
{ width: element.width(), height: element.height() });
lastWidth = element.width();
lastHeight = element.height();
}
}, 100);
return element;
};
}(jQuery));
что об этом:
divH = divW = 0;
jQuery(document).ready(function(){
divW = jQuery("div").width();
divH = jQuery("div").height();
});
function checkResize(){
var w = jQuery("div").width();
var h = jQuery("div").height();
if (w != divW || h != divH) {
/*what ever*/
divH = h;
divW = w;
}
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);
BTW Я предлагаю вам добавить id в div и изменить $( "div" ) на $( "# yourid" ), он будет быстрее, и он не сломается, когда позже вы добавите другие divs
Я создал плагин jquery jquery.resize, использующий resizeObserver, если он поддерживается, или решение, основанное на событии прокрутки marcj/css-element-query, без setTimeout/setInterval.
Вы используете только
jQuery('div').on('resize', function() { /* What ever */ });
или как плагин для изменения размера
jQuery('div').resizer(function() { /* What ever */ });
Я создал это для терминала jQuery и извлек в отдельные пакеты repo и npm, но в то же время я переключился на скрытый iframe, потому что у меня были проблемы с изменением размера, если элемент был внутри iframe. Я могу обновить плагин соответственно. Вы можете посмотреть плагин изменения размера на основе iframe в исходном коде терминала jQuery.
РЕДАКТИРОВАТЬ: новая версия использует iframe и изменяет размер объекта окна, потому что предыдущие решения не работали, когда страница была внутри iframe.
Существует очень приятный, простой в использовании, легкий (использует встроенные браузерные события для обнаружения) плагин для базового JavaScript и для jQuery, который был выпущен в этом году. Он отлично работает:
Поддерживается только окно да, но вы можете использовать для него плагин: http://benalman.com/projects/jquery-resize-plugin/
Для интеграции с Google Maps я искал способ обнаружить, когда div изменился по размеру. Поскольку карты Google всегда требуют правильных размеров, например. ширины и высоты для правильной рендеринга.
Решение, с которым я столкнулся, - это делегирование события, в моем случае щелчок на вкладке. Конечно, это может быть изменение размера окна, идея остается прежней:
if (parent.is(':visible')) {
w = parent.outerWidth(false);
h = w * mapRatio /*9/16*/;
this.map.css({ width: w, height: h });
} else {
this.map.closest('.tab').one('click', function() {
this.activate();
}.bind(this));
}
this.map в этом случае это моя карта div.
Поскольку мой родитель невидим при загрузке, вычисленная ширина и высота равны 0 или не совпадают.
Используя .bind(this), я могу делегировать выполнение script (this.activate) событию (click).
Теперь я уверен, что то же самое относится к событиям изменения размера.
$(window).one('resize', function() {
this.div.css({ /*whatever*/ });
}.bind(this));
Надеюсь, это поможет кому угодно!
Просто попробуйте этот func (он может работать не только для div):
function resized(elem, func = function(){}, args = []){
elem = jQuery(elem);
func = func.bind(elem);
var h = -1, w = -1;
setInterval(function(){
if (elem.height() != h || elem.width() != w){
h = elem.height();
w = elem.width();
func.apply(null, args);
}
}, 100);
}
Вы можете использовать его так:
resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){
console.log(a);
console.log(this); //for accessing the jQuery element you passed
}, /*callback arguments in array*/ ['I\'m the first arg named "a"!']);
UPDATE: Вы также можете использовать более прогрессивный наблюдатель (он может работать для любых объектов, а не только элементов DOM):
function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){
func = func.bind(elem);
var currentVal = {call: {}, std: {}};
$.each(propsToBeChanged, (property, needCall)=>{
needCall = needCall ? 'call' : 'std';
currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false
});
setInterval(function(){
$.each(propsToBeChanged, (property, needCall)=>{
try{
var currVal = needCall ? elem[property]() : elem[property];
} catch (e){ // elem[property] is not a function anymore
var currVal = elem[property];
needCall = false;
propsToBeChanged[property] = false;
}
needCall = needCall ? 'call' : 'std';
if (currVal !== currentVal[needCall][property]){
currentVal[needCall][property] = currVal;
func.apply(null, args);
}
});
}, interval);
}
Просто попробуйте:
var b = '2',
a = {foo: 'bar', ext: ()=>{return b}};
changed(a, {
// prop name || do eval like a function?
foo: false,
ext: true
}, ()=>{console.log('changed')})
Он будет "изменяться" каждый раз при изменении b, a.foo или a.ext непосредственно
Вы можете изменить свой текст или контент или атрибут в зависимости от размера экрана: HTML:
<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>
Javascript:
<script>
const changeText = document.querySelector('.change');
function resize() {
if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
changeText.textContent="FAQ";
} else {
changeText.textContent="Frequently Asked Questions (FAQ)";
}
}
window.onresize = resize;
</script>
Если вы просто хотите изменить размер самого div, вам нужно указать это в стиле css. Вам необходимо добавить переполнение и изменить размер свойства.
Ниже мой фрагмент кода