Помощник
|
Изменение разра input при нажатии, Раздвигиющиеся поля |
Сергуня
|
Сообщение
#1
|
||
|
|
||
|
|||
c0ns0l3 |
28.5.2012, 17:44;
Ответить: c0ns0l3
Сообщение
#2
|
|
Требование jQuery;
<script type="text/javascript"> $(document).ready(function(){ $('#term').bind('focus blur',function(){ $(this).toggleClass('full_height'); }) }); </script> Добавление или убирание класса 'full_height' (фокус/блар соответственно) у елемента с ID #term <input id="term"/> Как описать CSS уже для этого класса - решать Вам. В ПМ писать права пока неимею, поэтому отвечаю тут-же. : Сергуня, вы наверняка забыли загрузить библиотеку jQuery. Поэтому в ответ на Ваше ПМ - кидаю полный код страницы. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="c0ns0l3" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>Untitled 1</title> </head> <script type="text/javascript"> $(document).ready(function(){ $('#term').bind('focus blur',function(){ $(this).toggleClass('full_height'); }) }); </script> <style type="text/css"> <!-- #term.full { } --> </style> <body> <input id="term"/> </body> </html> Сообщение отредактировал c0ns0l3 - 28.5.2012, 17:47 |
|
|
Сергуня
|
Сообщение
#3
|
|
Библиотека подключается СУК автоматически. Приведу вам код, также, мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> $(document).ready(function(){ $('#term').bind('focus blur',function(){ $(this).toggleClass('full_height'); }) }); </script> </head> <body> <div class="search_block"> <form method="get" action="/index.php"> <input name="do" value="search" type="hidden"> <input name="subaction" value="search" type="hidden"> <input autocomplete="off" id="term" x-webkit-speech="" speech="" onwebkitspeechchange="this.form.submit();" class="input-text" name="story" placeholder="Найдётся всё" value="" type="text"> <input class="ser-button" alt="Найти" style="position: absolute; top: 2px; right: 2px; z-index: 105; cursor: pointer;" title="Найти" value="" type="submit"> </form> </div> </body> </html> Ткните, пожалуйста, меня носом в проблему. -------------------- |
|
|
c0ns0l3 |
28.5.2012, 18:32;
Ответить: c0ns0l3
Сообщение
#4
|
|
Я незнаю "что" у тебя подключает библотеку, но данный пример кода, который ты опубликовал - работать небудет т.к. нету библиотеки.
Дай ссылку на сайт, или конечный сгенерированный html код. |
|
|
Сергуня
|
Сообщение
#5
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="c0ns0l3" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>Untitled 1</title> </head> <script type="text/javascript"> $(document).ready(function(){ $('#term').bind('focus blur',function(){ $(this).toggleClass('full_height'); }) }); </script> <style type="text/css"> <!-- #term {float:right;position:relative;background:#fff;opacity:0.6;width:150px;height:20px;} .full_height {float:right;position:relative;background:#fff;opacity:0.6;width:350px;height:20px;margin:3px 3px 0px 0px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease} --> </style> <body> <input id="term"/> </body> </html> Чисто для примера взял ваш код, создал страницу и протестил. Работает, но параметр width не учитывает. Т.е. поле может принять другой вид при нажатии, но его размеры остаются прежние. -------------------- |
|
|
c0ns0l3 |
28.5.2012, 19:14;
Ответить: c0ns0l3
Сообщение
#6
|
|
Оно работает.
Но у Вас ошибка в иерархии CSS. Итак.. замечания: 1) пишите нормальный CSS, в строчку просто не читаемо. 2) зачем вы повторно присваиваете float, position, height, opacity? 3) анимация CSS3? конечно каждому свое, но ничего что ни каждый браузер понимает CSS3 так же как и border-radius(особенно в нем будет проблема, он даст свой margin и в каждом браузере будет смотреться по своему)? 4) итак, ваша самая главная ошибка, которую вы можете наблюдать в любом дебагере, будь то FireBug или даже консоль Chrome - все СТИЛИ которые ВЫ присвоили через css селектор CLASS - перекрыты стилями из правил, прописанных для ID! Почему? Потому, что есть порядок значимости: - !important - element - tag[::pseudo] - id - class и селектор ID стоит выше чем CLASS. Именно поэтому вы и не видите своих изменений по ширине, только маргин и бордер! Попробуйте использовать width:350px !important; тогда это правило станет более весомым и вы его сможете лицезреть. И вообще, советую почитать литературу по CSS селектором - много чего интересного сможете почерпнуть для себя. Сообщение отредактировал c0ns0l3 - 28.5.2012, 19:16 |
|
|
Сергуня
|
Сообщение
#7
|
|
|
Да, уже разобрался. Спасибо вам.
Кстати, возможно ли добавить в данный скрипт эффекты? Чтобы изменение размера происходило плавнее?
-------------------- |
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ. Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п |
7 | stu999 | 1758 | 31.3.2024, 11:19 автор: stu999 |
|
Получил странную ссылку при линкбилдинге Как поведет себя поиск при обнаружении странной ссылке? |
10 | r0mZet | 2206 | 24.10.2022, 19:23 автор: Wachowski |
|
300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе! | 65 | inkon | 30394 | 19.7.2022, 13:41 автор: Funoman |
|
тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе. Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО |
71 | VIMstat | 78504 | 21.6.2022, 9:38 автор: VIMstat |
|
Отображение нужного блока при клике. | 0 | bhtml | 1672 | 10.7.2020, 15:18 автор: -bhtml- |
Текстовая версия | Сейчас: 25.4.2024, 10:15 |