Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.08.2014, 21:23   #1
Skyrazor
Пользователь
 
Аватар для Skyrazor
 
Регистрация: 31.05.2009
Сообщений: 22
По умолчанию Автоматическая ширина расширяющегося инпута

В шапке сайта (состоит из div) у меня кроме прочего присутствует div с выводом даты и времени (например 26 АВГУСТА 2014, ВТОРНИК. 20:19) и div с таким инпутом формы поиска:

Код HTML:
<input type="text" name="story" onkeydown="if(event.keyCode == 13) $('#form_search').submit();" 
onfocus="$(this).animate({width:{swidth1}}, 0);document.getElementById('button').style.display='none';" 
onblur="if (!$(this).val()) $(this).animate({width:{swidth}}, 0);document.getElementById('button').style.display='';" 
placeholder="Поиск.." style="width:{swidth}px;" />
Инпут с фиксированным размером {swidth} удлиняется до {swidth1}, когда в него попадает курсор и укорачивается обратно, когда его там нет. Дело в том, что инпут изначально маловат и неудобен для ввода, поэтому сделано с удлинением. Параметры ширины {swidth} и {swidth1} передаются от php переменной, которая рассчитана была мной в пикселях в зависимости от месяца и дня недели, т.к. div меняет ширину (май "короче" сентября, среда "короче" понедельника).

Рассчитанная мною ширина инпута более менее одинаково смотрится во всех браузерах на ПК при разрешении 1280х1024. Но на более высоких разрешениях форма также фиксированного размера и в шапке появляется свободное место.Кроме того, сегодня обновился Chrome и теперь в нём по умолчанию включён DirectWrite - шрифт стал уже и снова образовалась пустота.

Так вот вопрос: можно ли как-то задать ширину инпута, чтобы он занимал всё оставшееся место в шапке, и также увеличивался и уменьшался (на фиксированное количество пикселей, точнее на 52)? Я попробовал задать изначальную ширину инпута в width: auto; - это работает, но ещё нужно установить ширину при удлинении инпута и обратном его укорочении.
Skyrazor вне форума Ответить с цитированием
Старый 26.08.2014, 22:28   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

я правильно понял, ты за юзера решаешь что и сколько ему вводить?
т.е. если сейчас май, а ввести я могу только май... зачем мне это вводить?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 27.08.2014, 00:22   #3
Skyrazor
Пользователь
 
Аватар для Skyrazor
 
Регистрация: 31.05.2009
Сообщений: 22
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
я правильно понял, ты за юзера решаешь что и сколько ему вводить?
т.е. если сейчас май, а ввести я могу только май... зачем мне это вводить?
Я имел в виду блок с датой, когда упоминал месяцы. См. вложение 1: в зависимости от длины блока с датой, устанавливалась большая или меньшая длина инпута. Но из-за различия в отображении одного и того шрифта в разных браузерах (вложение 2) и разных разрешений экранов у юзеров, мне нужно избавиться от этой зависимости.
Изображения
Тип файла: png Безымянный.png (2.5 Кб, 46 просмотров)
Тип файла: png Безымянный2.png (2.9 Кб, 47 просмотров)
Skyrazor вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Очистка инпута MedwedoS JavaScript, Ajax 10 03.07.2014 18:24
стилевое оформление инпута маГГ85 JavaScript, Ajax 4 28.02.2012 10:26
Автоматическая ширина блока CloudStrife21 HTML и CSS 0 20.11.2011 18:33
Рамка инпута в FF 6.0 (glow) Che Guevara HTML и CSS 1 02.11.2011 12:48
Как поменять тип инпута? denisov JavaScript, Ajax 1 10.04.2010 00:12