Javascript.RU

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

Постоянное изменение размера
Надо, чтобы размер инпута менялся в зависимости от размеров его div-a. div - динамический и зависит от размеров окна.
Пробовал прописать
window.resize=win();

где win - функция, приравнивающая длину инпута к длине дива. Но при из менении размеа окна инпут отстается прежним. Как это сделать ?
Ответить с цитированием
  #2 (permalink)  
Старый 24.01.2019, 10:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,724

https://jsfiddle.net/c2wjmuxp/3/
<div class="field-wrapper" id="target">
	<input type="text" class="full-width"/>
</div>
<div>
	<input type="range" min="0" step="1" max="100" value="100" id="control">
</div>
<style>
*{
	box-sizing:border-box;
}
.field-wrapper{
	padding:10px;
	background:#EEE;
}
.full-width{
	display:block;
	width:100%;
	padding:10px 20px;
}</style>
<script>
var target=document.querySelector('#target');
document.querySelector('#control').addEventListener('input',function(){
	target.style.width=this.value+'%';
});
</script>

Последний раз редактировалось Nexus, 24.01.2019 в 10:15.
Ответить с цитированием
  #3 (permalink)  
Старый 24.01.2019, 10:28
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,752

Сообщение от Alehana
Пробовал прописать
window.resize=win();
Событие - resize, назначение обработчика события - onresize.
В назначении обработчика указывается не запуск функции, а ссылка на нее.
соответственно, нужно
window.onresize=win;

Читайте Введение в браузерные события
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2019, 10:44
Интересующийся
Отправить личное сообщение для Alehana Посмотреть профиль Найти все сообщения от Alehana
 
Регистрация: 22.01.2019
Сообщений: 22

window.onresize=win();
window.onload=win();


не помогает. Вначале срабатывает дважды, как будто сработало событие при запускеб а помом - всё. Менял размер браузера - ничего не происходит.
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2019, 10:59
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,752

Alehana,
Внимательно прочитайте пост 7 и документацию по ссылке в посте
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2019, 19:45
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,538

Alehana,
Почему размер инпута через css не задать в процентах???
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Постоянное изменение размера квадрата при клике biflee Элементы интерфейса 5 10.01.2019 15:26
Изменение размера и перемещение элементов Nupster Элементы интерфейса 2 12.08.2014 19:38
Изменение размера окна FoxTrix Общие вопросы Javascript 8 01.08.2012 04:26
Как отследить изменение размера браузера? br102 ExtJS 9 22.11.2010 16:10
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12