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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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


--------------------
Верска макетов.
-1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
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


Поблагодарили: (1)
Сергуня
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергуня
Сергуня
Topic Starter сообщение 28.5.2012, 17:53; Ответить: Сергуня
Сообщение #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
c0ns0l3
сообщение 28.5.2012, 18:32; Ответить: c0ns0l3
Сообщение #4


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


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


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


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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
 7 stu999 1757 31.3.2024, 11:19
автор: stu999
Открытая тема (нет новых ответов) Получил странную ссылку при линкбилдинге
Как поведет себя поиск при обнаружении странной ссылке?
 10 r0mZet 2205 24.10.2022, 19:23
автор: Wachowski
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
 65 inkon 30393 19.7.2022, 13:41
автор: Funoman
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
 71 VIMstat 78504 21.6.2022, 9:38
автор: VIMstat
Открытая тема (нет новых ответов) Отображение нужного блока при клике.
 0 bhtml 1672 10.7.2020, 15:18
автор: -bhtml-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 6:17

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet