X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Изменение разра input при нажатии, Раздвигиющиеся поля
Сергуня
Сергуня
Topic Starter сообщение 28.5.2012, 15:00; Ответить: Сергуня
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 284
Регистрация: 13.4.2008
Из: Подгорица
Поблагодарили: 48 раз
Репутация:   11  


Примеры того, что мне нужно: поля поиска на _vk.com или _zagruzka-plus.ws


--------------------
-1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
c0ns0l3
сообщение 28.5.2012, 17:44; Ответить: c0ns0l3
Сообщение #2


Новичок
*

Группа: Viewer
Сообщений: 6
Регистрация: 27.5.2012
Поблагодарили: 3 раза
Репутация:   1  


Требование 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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергуня
Сергуня
Topic Starter сообщение 28.5.2012, 17:53; Ответить: Сергуня
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 284
Регистрация: 13.4.2008
Из: Подгорица
Поблагодарили: 48 раз
Репутация:   11  


Библиотека подключается СУК автоматически. Приведу вам код, также, мой код:

<!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
c0ns0l3
сообщение 28.5.2012, 18:32; Ответить: c0ns0l3
Сообщение #4


Новичок
*

Группа: Viewer
Сообщений: 6
Регистрация: 27.5.2012
Поблагодарили: 3 раза
Репутация:   1  


Я незнаю "что" у тебя подключает библотеку, но данный пример кода, который ты опубликовал - работать небудет т.к. нету библиотеки.
Дай ссылку на сайт, или конечный сгенерированный html код.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергуня
Сергуня
Topic Starter сообщение 28.5.2012, 18:38; Ответить: Сергуня
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 284
Регистрация: 13.4.2008
Из: Подгорица
Поблагодарили: 48 раз
Репутация:   11  


<!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
c0ns0l3
сообщение 28.5.2012, 19:14; Ответить: c0ns0l3
Сообщение #6


Новичок
*

Группа: Viewer
Сообщений: 6
Регистрация: 27.5.2012
Поблагодарили: 3 раза
Репутация:   1  


Оно работает.
Но у Вас ошибка в иерархии 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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергуня
Сергуня
Topic Starter сообщение 28.5.2012, 20:08; Ответить: Сергуня
Сообщение #7


Бывалый
****

Группа: User
Сообщений: 284
Регистрация: 13.4.2008
Из: Подгорица
Поблагодарили: 48 раз
Репутация:   11  


Да, уже разобрался. Спасибо вам.

Кстати, возможно ли добавить в данный скрипт эффекты? Чтобы изменение размера происходило плавнее?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Переносится ли вес и тИЦ от входящих ссылок при 301 редиректе
11 Bel_Ami 2883 Вчера, 20:50
автор: alexandrrr
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОшибка при создании шаблона страницы ВП
Нет картинок
5 semarg 689 9.12.2017, 15:36
автор: Nell
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
61 inkon 13963 7.12.2017, 20:28
автор: inkon
Горячая тема (нет новых ответов) Apple признала: Экран iPhone X отказывает при температуре ниже нуля
46 Astralis 3343 26.11.2017, 1:35
автор: Стэнли
Открытая тема (нет новых ответов) Оформление внешних ссылок при помощи CSS
Каким образом можно оформить стилями внешние ссылки сайта
7 komarik_vlad 869 25.10.2017, 9:30
автор: x64


 



RSS Текстовая версия Сейчас: 12.12.2017, 22:05
Дизайн