ФорумПрограммированиеJavaScript → mouseover, blur или что-то в этом роде

mouseover, blur или что-то в этом роде

  • TRIAL

    Сообщения: 988 Репутация: N Группа: Джедаи

    Spritz 23 августа 2011 г. 4:31

    Что-то никак не соображу, как сделать следующую вещь.
    Хочу чтобы как в Контакте, при клике на поле открывалось поле для ввода текста и кнопка отправить, а при клике в любую область сайта эта форма закрывалась и переходила в начальное состояние. В общем как поле для комментов на стене.
    Собственно единственное. что я никак не соображу, как сделать чтоб поле в начальное состояние возвращалось. Можно через mouseover дива, в котором всё это дело находится, но мне это не нравиться. Как я понимаю, при клике в любую область должно определяться не нахожусб ли я в том поле для комментов, и если нет то закрывать его. Но как это сделать я хз :)
    Надеюсь понятно написал что мне нужно )))
    Выручайте :)
    from TRIAL with LOVE
  • Frozzeg

    Сообщения: 5642 Репутация: N Группа: Джедаи

    Spritz 23 августа 2011 г. 4:50, спустя 18 минут 47 секунд

    открывай слой невидимый, на котором будет лежать форма, по клике на этом слое - закрываешь и слой и форму
    You can be anything you want to be. Just turn yourself into anything you think that you could ever be.
  • TRIAL

    Сообщения: 988 Репутация: N Группа: Джедаи

    Spritz 23 августа 2011 г. 5:01, спустя 11 минут 6 секунд

    Как вариант, но мне чет не нравиться :) Щас пытаюсь как-нибудь через parent или closest сделать но не до конца понимаю как они работают.
    В итоге получается, что надо определить, является ли тот объект, на который я кликнул, дочерним моей формы или нет, и если нет соответственно убираем форму.
    Может кто подскажет как такое организовать? 6) Как проверить является ли объект дочерним или нет? :)
    from TRIAL with LOVE
  • TRIAL

    Сообщения: 988 Репутация: N Группа: Джедаи

    Spritz 23 августа 2011 г. 5:50, спустя 48 минут 57 секунд

    Сделал вроде :)
    Если кому интересно выглядит это следующим образом:
    HTML
    <div id=&#39;user_board_div&#39;>
    <textarea name=&#39;user_board&#39; class=&#39;user_wall_textarea&#39;>Оставьте свое сообщение…</textarea><br>
    <p><input type=&#39;submit&#39; name=&#39;send&#39; value=&#39; Написать на стене &#39;></p>
    <input type=&#39;hidden&#39; name=&#39;action&#39; value=&#39;user_board&#39;>
    <input type=&#39;hidden&#39; name=&#39;to&#39; value=&#39;$user_id&#39;>
    </div>

    jQuery
    // Показать форму ответа
    $(function() {
    $(&quot;.user_wall_textarea&quot;)
    .focus(function() {

    $(this).val(&#39;&#39;);
    $(this).removeAttr(&quot;class&quot;);
    $(this).addClass(&quot;user_wall_textarea_a&quot;);

    $(&quot;#user_board_div p&quot;).show();

    });
    });

    $(document)
    .bind(&quot;click&quot;, function (e) {

    if($(e.target).closest(&quot;#user_board_div&quot;).attr(&quot;id&quot;) != &quot;user_board_div&quot;) {

    $(&quot;#user_board_div textarea&quot;).val(&#39;Оставьте свое сообщение…&#39;);
    $(&quot;#user_board_div textarea&quot;).removeAttr(&quot;class&quot;);
    $(&quot;#user_board_div textarea&quot;).addClass(&quot;user_wall_textarea&quot;);

    $(&quot;#user_board_div p&quot;).hide();
    }
    });

    CSS
    .user_wall_textarea {	width: 475px;
    height: 24px;
    padding: 4px;
    font-size: 12px;
    font-style: italic;
    color: #999;
    margin-bottom: 10px; }
    .user_wall_textarea_a { width: 475px;
    height: 66px;
    padding: 4px;
    font-size: 12px;
    margin-bottom: 10px; }
    #user_board_div p { text-align: right;
    display: none; }
    from TRIAL with LOVE
  • Barbos

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 18 августа 2012 г. 15:21, спустя 361 день 9 часов 30 минут

    Жить хорошо, а такие поршни как ты портят воздух

Пожалуйста, авторизуйтесь, чтобы написать комментарий!