Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2013, 13:08
Интересующийся
Отправить личное сообщение для kazakn Посмотреть профиль Найти все сообщения от kazakn
 
Регистрация: 28.06.2012
Сообщений: 11

div перекрывает элементы формы
привет всем форумчанам!!
возникла на днях проблема с отображением div'а, он сдвигал текстовые поля когда из "скрытого" состояния переходил в "открытое", но хотелось бы чтобы налаживался поверх, пробовал z-index, но безуспешно, может я что-то неправильно делаю?
если кто сталкивался с такой задачей, помогите ее решить

P.S. код на jquery, но там только две команды: первая изменяет свойства display этого самого div'a, а вторая пишет в него текст введенный в поле...

вот собственно сам код:
<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.inputText
	{
	  position: relative;
	  font-family:verdana;
	  font-size:17pt;
	  text-align: center;
	  background: #ffc;
	  padding: 2 8px;
      border: 2px solid #396;
	  border-radius: 10px 10px 10px 10px;
	  outline: none;
	  z-index:1; /* ???? */
	}

.outDiv
	{
	  position: relative;
	  font-family:verdana;
	  font-size:17pt;
	  background: #ffc;
	  padding: 2 8px; 
	  border-radius: 10px 10px 10px 10px;
	  outline: none;
	  z-index: 8; /* ???? */
	}
</style>
</head>

<body>

<script type="text/javascript">
// функция отображения введенного текста
function input(id, out)
  {
	$("#"+out+"").css("display", "");  // отображаем div
	$("#"+out+"").html($("#"+id+"").val());	// ложим в него текст
  }
</script>

<table>
	<tr>
	 <td>
	  <input type="text" id="autoText" class="inputText" onkeyup="input(this.id, 'outText');" />
	  <div id="outText" class="outDiv" style="display:none;"></div>
	 </td>
	</tr>
	<tr>
	 <td>
	  <input type="text" id="autoText2" class="inputText" />
	 </td>
	</tr>
	<tr>
	 <td>
	  <input type="text" id="autoText3" class="inputText" />
	 </td>
	</tr>
</table>
</body>

</html>
Вложения:
Тип файла: zip main.zip (686 байт, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2013, 13:10
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

у скрытого блока поставьте position: absolute
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2013, 14:56
Интересующийся
Отправить личное сообщение для kazakn Посмотреть профиль Найти все сообщения от kazakn
 
Регистрация: 28.06.2012
Сообщений: 11

спасибо, все получилось
это я пытаюсь реализовать autocmplete на подобие jquery ui
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2013, 15:00
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

удачи, но готовых решений же куча...
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2013, 16:10
Интересующийся
Отправить личное сообщение для kazakn Посмотреть профиль Найти все сообщения от kazakn
 
Регистрация: 28.06.2012
Сообщений: 11

активно пользуюсь готовыми, но есть ситуации, когда нужен свой велосипед
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить элементы в div и обрабатывать события по ним. Возможно? Smith324 Events/DOM/Window 2 15.02.2013 05:18
при изменении размера div элементы съезжают gallyamov jQuery 5 22.08.2012 10:24
найти все элементы формы wcb-falcon Общие вопросы Javascript 6 17.07.2012 18:22
Добавить элементы формы Katik Элементы интерфейса 1 02.03.2012 11:09
PHP и элементы формы faiq Серверные языки и технологии 2 06.12.2009 07:04