Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2013, 11:05
Интересующийся
Отправить личное сообщение для Vitaliy88 Посмотреть профиль Найти все сообщения от Vitaliy88
 
Регистрация: 22.11.2012
Сообщений: 12

jquery resize для div (а не только для window)
HELP ME!!!
Есть в JQUERY такая функция - resize:
пример её использования:
$(window).resize(function(){
alert('Размеры окна браузера изменены.');
}); - т.е если колёсиком изменить размер окна, то выведется сообщение.

Как сделать, чтобы тот же эффект получался при изменении размера любого блока, например так:
$('#blockdiv').resize(function(){
alert('Размеры окна браузера изменены.');

Похоже что resize применим только к элементу window, но наверняка есть способ для применения к другим элементам. Только как?
Подскажите, очень горит!
Ответить с цитированием
  #2 (permalink)  
Старый 19.01.2013, 11:42
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Погуглить слабо?
http://kurilka.co.ua/archives/jquery-resize-textarea/
Ответить с цитированием
  #3 (permalink)  
Старый 19.01.2013, 14:50
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Serg_pnz, глаза разуй.
Vitaliy88, к сожалению нет такого. И вроде бы и не планируется. Как вариант решения - MutationObserver + MutationEvent (устарел) - с их помощью можно отследить изменение атрибута style. Подходит естественно только когда размеры элемента меняются путем установки style.width и style.height ...
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2013, 14:51
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Йопт...
Ответить с цитированием
  #5 (permalink)  
Старый 19.01.2013, 16:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vitaliy88, А кто меняет размер блока и почему?
(Возможно проще решать задачу с иного конца ?)
Ну или:

Таймер
<div  id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;"></div>

<script type="text/javascript">
var width="200px";
var height="100px";
setInterval (function (){
  var w=document.getElementById("Test").style.width;
  var h=document.getElementById("Test").style.height;
if(h!=height||width!=w){alert('Размеры div #Test изменены.');
  width=w;
  height=h;
}
},200);

setTimeout(function(){
  document.getElementById("Test").style.width='100px';
},3000)
</script>


Можно еще засунуть пустой фрейм с position:absolute
<div  id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;">
<iframe id="frame0" name="frame0" width=100% height=100% style="position:absolute;z-index:-1"></iframe>
Тут контент
</div>
<script type="text/javascript">
frame0.onresize = function(){
  alert('Размеры div #Test изменены.');
};
setTimeout(function(){
  document.getElementById("Test").style.width='100px';
},3000)
</script>

И отслеживать событие window.onresize внутри фрейма

Последний раз редактировалось Deff, 20.01.2013 в 02:14.
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2013, 05:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Deff, спасибо за идею с iframe - это гениально )

Сообщение от Deff
А кто меняет размер блока и почему?
Согласен, обычно блок меняется скриптом, и тогда если это наш скрипт, то проблема в кривости нашего приложения. Но не всегда скрипт наш, тогда ниче не поделаешь.
Более того, у элемента может быть указано css-свойство resize: both и тогда изменение размеров может инициировать юзер, а не скрипт.
В DOM3 Events спецификации сказано, что браузер может слать это событие не только для defaultView. Вообще, тут налицо пробелы в спецификации, и помоему это никого не волнует.

Serg_pnz, какие же мы нежные и ранимые ..

Последний раз редактировалось danik.js, 20.01.2013 в 05:21.
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2013, 10:29
Новичок на форуме
Отправить личное сообщение для smat Посмотреть профиль Найти все сообщения от smat
 
Регистрация: 07.08.2013
Сообщений: 6

Vitaliy88, у Бена Алмана есть решение этого вопроса - посмотрите тут:
http://benalman.com/code/projects/jq...amples/resize/

Последний раз редактировалось smat, 07.08.2013 в 10:38.
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2013, 12:45
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

smat, ты опоздал. Deff уже предлагал таймер. Таймер - это самый кривой костыль который можно использовать.
Ответить с цитированием
  #9 (permalink)  
Старый 07.08.2013, 13:57
Новичок на форуме
Отправить личное сообщение для smat Посмотреть профиль Найти все сообщения от smat
 
Регистрация: 07.08.2013
Сообщений: 6

Сообщение от danik.js Посмотреть сообщение
smat, ты опоздал. Deff уже предлагал таймер. Таймер - это самый кривой костыль который можно использовать.
Я не опоздал - был поставлен конкретный вопрос, и человек ждал на него конкретный ответ.
Deff пытался решить проблему с другого бока, но это может не подойти в других случаях.
А вот решение от Бена Алмана как раз и отвечает на поставленный вопрос.
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2013, 14:08
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

К слову в WebKit есть один неприятный глюк. Выражается он в том что при изменении элемента с resize:both юзером (растягивая ресайзер) MutationObserver не реагирует на изменение свойства style (хотя оно изменяется). В других браузерах с этим проблем нет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery для загрузки страницы в <div> Dr.Holerik jQuery 12 11.10.2016 17:36
Как подключить JQUery при разработке расширения для OPERA? Romingood jQuery 1 24.10.2012 10:25
jQuery поменять CSS цвет для текста при наведении мышью (.text:hover) JooZ jQuery 16 15.11.2010 18:56
Не работает AppendChild для div, причём только в IE _Kpot_ Internet Explorer 5 12.02.2009 09:55
JS'ом поменять textDecoration только для случаев link и visited lancer Элементы интерфейса 3 05.04.2008 19:51