Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2015, 17:38
Аватар для Tixter
Новичок на форуме
Отправить личное сообщение для Tixter Посмотреть профиль Найти все сообщения от Tixter
 
Регистрация: 15.04.2015
Сообщений: 2

Сделать активным div при активации в нем input
Приветствую, друзья.
Всю жизнь ваял страницы без динамических элементов, но времена меняются - придется учить js.

Дано:
Есть страница с первым уроком курса. А в сайдбаре большой блок с надписью "Урок 2: название_урока". При наведении туда мышкой (hover) на месте блока появляется верхний блок с текстом: "уроки 2-5 можете получить в рассылке" и формой подписки (все это до наведения просто было прозрачным).
Проблема в том, что как только мышку уводишь - снова открывается нижний блок. Так должно быть только если форма неактивна. А если человек начал вводить что-то - форма (и весь верхний блок) уже не должна исчезать.

Подскажите, какие варианты можно применить для таких целей?

Последний раз редактировалось Tixter, 15.04.2015 в 17:42.
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2015, 18:02
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<html>
<head>

<style>

 .form {
     display:none;
  }

  .menu {
     list-style: none
  }

   .menu li {
       float: left;
       width: 200px;
       border: 1px solid #000
    }

    .form {
        display: none;
     }

     .menu li:hover .form {
        display: block
     }

</style>

</head>
<body>

<header>
<ul class="menu">
  <li>item1
    <div class="form">
       <input type="text" placeholder="1" />
    </div>
  </li>
  <li>
    item2
   <div class="form">
       <input type="text" placeholder="2" />
    </div>
  </li>
</ul>
</header>

</body>
<html>
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2015, 18:04
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Без кода сложно что-то подсказать. Как вариант: проверять есть ли фокус на поле, если есть, то ничего не делать.
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2015, 18:12
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>content</title>
    <style>
    form:hover input {
      display: block;
    }
    form {
      border: 1px solid;
    }
    input {
      display: none;
    }
    input:focus {
      display: block;
    }


    </style>
  </head>
  <body>
    <form action="">
      <div>Заголовок</div>
      <input placeholder="текст">
    </form>
  </body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 15.04.2015, 18:14
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

tsigel,
у меня твой код в последнем FF не работает, инпут в фокусе скрывается есть курсор отвести.
Ответить с цитированием
  #6 (permalink)  
Старый 15.04.2015, 18:23
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Safort,
да, надо было на фокус повесить блок
Ответить с цитированием
  #7 (permalink)  
Старый 15.04.2015, 22:21
Аватар для Tixter
Новичок на форуме
Отправить личное сообщение для Tixter Посмотреть профиль Найти все сообщения от Tixter
 
Регистрация: 15.04.2015
Сообщений: 2

Примерный набросок того, что нужно.
На месте красного фона будет изображение "Урок 2: бла-бла-бла". При наведении появляется форма, которая не должна исчезать, если в нее что-то вводится.

Пробовал делать через opacity (в примере).
Еще пробовал весь этот блок делать сразу form (без внешнего div), в нее фоном вставлять нужную картинку (вместо красного фона), а внутрь form класть скрытый div с полями ввода и кнопкой.
В обоих случаях ума не хватило.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style  type="text/css">
.main {
  width: 900px;
  margin: 0px auto;
}
.video {
  width: 560px;
  height: 415px;
  background-color: #eeeeee;
}
.subscribe {
  width: 320px;
  height: 415px;
  float: right;
  margin-left: 20px;
  background-color: red;
}
p {
  margin: 0px;
  color: white;
}
form {
  opacity: 0;
  display: block;
  width: 320px;
  height: 415px;
  background-color: #111111;
}
form:hover{
  opacity: 1;
}
.email {
  display: block;
  width: 238px;
  height: 40px;
  padding: 0px 15px;
  margin: 10px auto;
  border:1px solid #aaaaaa;
}
.submit {
  display: block;
  width: 268px;
  height: 43px;
  margin: 10px auto;
  border:1px solid #6c6f8e;
  background-color: #6c6f8e;
  color:#ffffff;
}
</style>
</head>
<body>

<div class="main">
<div class="subscribe">
  <form>
  <p>Здесь текст или список на всю длину блока до формы внизу</p>
    <input type="text" class="email" placeholder="Введите email" />
    <input type="submit" class="submit" value="Подписаться" />
  </form>
</div>  
<div class="video">Здесь видео</div>
</div><!-- .main -->

</body></html>


Если способ не найдется - сделаю на jQuery (палочка выручалочка для таких как я), но подключать всю библиотеку ради одной крошечной функции очень не хочется.

Последний раз редактировалось Tixter, 15.04.2015 в 22:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Как сделать? Выделение текста в div при нажатии на ссылку Olena Элементы интерфейса 3 01.03.2015 19:01
Смена класса у отдельного div при нажатии на ссылку Maxim-Ra Элементы интерфейса 6 15.02.2015 12:20
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera, input file, div tabindex autosoft Events/DOM/Window 31 04.07.2012 02:45