Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   z-index и table (https://javascript.ru/forum/dom-window/28628-z-index-i-table.html)

it_tech 27.05.2012 13:01

z-index и table
 
есть код (в конце сообщения)
нужно чтобы выпадающий
<input type="text" id="searchField" placeholder="Categories">
не сдвигал элемент таблицы 111, а появлялся поверх
как правильно сделать?




<!DOCTYPE html>
<html>
<head>
	<title>jQM Autocomplete</title>
	<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
	<meta name="viewport" content="width=device-width" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	<script src="jqm.autoComplete-1.3.js"></script>


<style>
   #layer0,#layer1 {   position:relative; } 
   #layer0 { z-index: 0; }
   #layer1 { z-index: 99999; }
 
  </style>
  
</head>

<body>

	<div data-role="page" id="mainPage">
   	<div data-role="content">
 
			 
		<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>		
    
     <div id="layer1">
    <input type="text" id="searchField" placeholder="Categories">
	<ul id="suggestions" data-role="listview" data-inset="true"></ul>
  
    </div>
                
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td >
    
     <div id="layer0">
    111
     </div>
        
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

			 
  
		</div>

	</div>

	<script>

		$("#mainPage").bind("pageshow", function(e) {

			var availableTags = ['24', 'about me', 'Adobe', 'AIR', 'AJAX', 'Android', 'Apple', 'Aptana', 'autoComplete', 'Bflex-BFusion', 'Blackberry Playbook', 'Blog Housekeeping', 'c25k', 'CFConversations', 'CFinNC', 'cfObjective', 'CFUnited', 'Clients', 'ColdFusion', 'ColdFusion Builder', 'Cooking and Recipes', 'CSS', 'D2WC', 'dribbbleCFC', 'Eclipse', 'Ember.js', 'Emile', 'ExtendScript', 'Family', 'Fireworks', 'Flash', 'Flex', 'foursquareCFC', 'From a former designer', 'Giveaways', 'Goba', 'Hardware', 'Illustrator', 'instagramCFC', 'iPhone', 'JavaScript', 'job openings', 'jobs', 'jQuery', 'jQuery Mobile', 'jQuery Mobile Boilerplate', 'kloutCFC', 'Lost', 'MAX', 'mobile', 'Movies and Reviews', 'ncfug', 'openExchangeRateCFC', 'Palm Pre', 'pastebinCFC', 'PhoneGap', 'Photoshop', 'picasaCFC', 'podcast', 'presentations', 'projects', 'reading', 'regular expressions', 'RIAUnleashed', 'Shrinkadoo', 'shrinkURL', 'SQL', 'swipeButton', 'technology', 'textCounter', 'the internet', 'ThemeRoller', 'tumblrCFC', 'Undelivrnator', 'video', 'Wallpapers', 'web development', 'Whiskerino', 'XCode and Interface Builder', 'XUIJS'];

			$("#searchField").autocomplete({
				target: $('#suggestions'),
				source: availableTags,
				callback: function(e) {
					var $a = $(e.currentTarget);
					$('#searchField').val($a.text());
					$("#searchField").autocomplete('clear');
				},
				link: 'target.html?term=',
				minLength: 1
			});
		});
	</script>

</body>
</html>

Deff 27.05.2012 15:26

Цитата:

Сообщение от it_tech
<input type="text" id="searchField" placeholder="Categories">
не сдвигал элемент таблицы 111, а появлялся поверх

Ничо не понятно - эти элементы вообще в разных строках таблицы -
сделайте и объедините два скриншота
как сейчас и как в идеале

it_tech 27.05.2012 17:23

http://www.onlinedisk.ru/file/883617/

dmitriymar 27.05.2012 17:27

Цитата:

Сообщение от it_tech
нужно чтобы выпадающий
<input type="text" id="searchField" placeholder="Categories">
не сдвигал элемент таблицы 111, а появлялся поверх
как правильно сделать?

убрать его из таблицы

it_tech 27.05.2012 17:53

нужно чтобы 111 был и выпадающий список был всегда поверх всех элементов таблицы

Deff 27.05.2012 19:11

it_tech,
Поставьте в конец за таблицей
<div style="width:100%">111</div>
А из текущего места уберите

frant32 27.05.2012 20:02

а у тя чёт выпадает ? решил посмотреть , а с твоего кода ничего работать у меня не хочет.

it_tech 27.05.2012 20:32

Deff у меня элементы в таблице и мне нужно
чтобы выпадающий список был поверх любых элементов в таблице.

frant32 вот исходник темы
http://www.andymatthews.net/read/201...-now-available

http://www.andymatthews.net/code/aut.../callback.html

но нужно чтобы выпадающий список был поверх любых элементов таблицы

Deff 27.05.2012 20:55

it_tech,
Сделайте скриншот с приведенных ссылок и ткните стрелкой - что поднять

it_tech 27.05.2012 21:49

скриншот есть в архиве http://www.onlinedisk.ru/file/883617/

it_tech 27.05.2012 22:01


it_tech 27.05.2012 22:02

после нажатия нужно чтобы список был поверх элементов таблицы

Deff 27.05.2012 22:10

it_tech,
Вы можете воткнуть ссылку на изображение в сообщение - кнопочка

Я не смог посмотреть с указанного URL

Скриншот разглядел из поста 11
А по какой ссылке на Вашем сайте подобное - чот не увидел соответствия ....

it_tech 28.05.2012 12:04

Deff скриншот пример что нужно сделать (соответствия в кодах нет)

it_tech 28.05.2012 12:05

то что в скриншоте находится в таблице

it_tech 28.05.2012 12:05

при нажатии "а" появляется список который должен быть поверх элементов таблицы

it_tech 28.05.2012 12:06

для выпадающего списка применяется
http://www.andymatthews.net/read/201...-now-available

http://www.andymatthews.net/code/aut.../callback.html

но он по умолчанию сдвигает элементы в таблице, а нужно чтобы список был поверх элементов в таблице

Deff 28.05.2012 14:04

it_tech,
У обрамляющего элемента всего всплывающего блока, дабы не влиял на остальное - должно быть прописано
positin:absolute; a чтобы был поверх всего остального и z-index:XXX

it_tech 28.05.2012 14:40

я ставлю positin:absolute; и z-index:999
но это не работает

Deff 28.05.2012 14:45

it_tech,
Вы можете дать ссылку на текущую пробу - ?

it_tech 28.05.2012 23:47

http://www.onlinedisk.ru/file/883617/

it_tech 28.05.2012 23:50

файл с таблицей и выпадающим списком callback.html

Deff 28.05.2012 23:57

it_tech,
У меня нет своего сервера , поэтому я могу посмотреть лишь Вашу страницу, если укажете действующую ссылку
Запуская указанный файл с рабочки я вижу только это =>

http://uploads.ru/?v=5zro6.png

it_tech 29.05.2012 12:43

сервер и не нужен, все пускается локально
еще раз ссылка http://www.onlinedisk.ru/file/883617/

it_tech 29.05.2012 12:44

в http://uploads.ru/?v=5zro6.png нажмите а в поле = появится список

Deff 29.05.2012 13:14

it_tech,
Я пытался и с Оперы и с Мозиллы и с Гугол Хрома ... У меня ничего не нажимается :no:

Запускаю, как Вы сказали => callback.html


Часовой пояс GMT +3, время: 19:41.