| it_tech | 27.05.2012 23: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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </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> </td>
</tr>
<tr>
<td> </td>
<td >
<div id="layer0">
111
</div>
</td>
<td> </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>
|
Цитата:
сделайте и объедините два скриншота как сейчас и как в идеале |
|
Цитата:
|
нужно чтобы 111 был и выпадающий список был всегда поверх всех элементов таблицы
|
it_tech,
Поставьте в конец за таблицей <div style="width:100%">111</div> А из текущего места уберите |
а у тя чёт выпадает ? решил посмотреть , а с твоего кода ничего работать у меня не хочет.
|
Deff у меня элементы в таблице и мне нужно
чтобы выпадающий список был поверх любых элементов в таблице. frant32 вот исходник темы http://www.andymatthews.net/read/201...-now-available http://www.andymatthews.net/code/aut.../callback.html но нужно чтобы выпадающий список был поверх любых элементов таблицы |
it_tech,
Сделайте скриншот с приведенных ссылок и ткните стрелкой - что поднять |
скриншот есть в архиве http://www.onlinedisk.ru/file/883617/
|
|
после нажатия нужно чтобы список был поверх элементов таблицы
|
it_tech,
 Я не смог посмотреть с указанного URL Скриншот разглядел из поста 11 А по какой ссылке на Вашем сайте подобное - чот не увидел соответствия .... |
Deff скриншот пример что нужно сделать (соответствия в кодах нет)
|
то что в скриншоте находится в таблице
|
при нажатии "а" появляется список который должен быть поверх элементов таблицы
|
для выпадающего списка применяется
http://www.andymatthews.net/read/201...-now-available http://www.andymatthews.net/code/aut.../callback.html но он по умолчанию сдвигает элементы в таблице, а нужно чтобы список был поверх элементов в таблице |
it_tech,
У обрамляющего элемента всего всплывающего блока, дабы не влиял на остальное - должно быть прописано positin:absolute; a чтобы был поверх всего остального и z-index:XXX |
я ставлю positin:absolute; и z-index:999
но это не работает |
it_tech,
Вы можете дать ссылку на текущую пробу - ? |
|
файл с таблицей и выпадающим списком callback.html
|
it_tech,
У меня нет своего сервера , поэтому я могу посмотреть лишь Вашу страницу, если укажете действующую ссылку Запуская указанный файл с рабочки я вижу только это => http://uploads.ru/?v=5zro6.png |
сервер и не нужен, все пускается локально
еще раз ссылка http://www.onlinedisk.ru/file/883617/ |
в http://uploads.ru/?v=5zro6.png нажмите а в поле = появится список
|
it_tech,
Я пытался и с Оперы и с Мозиллы и с Гугол Хрома ... У меня ничего не нажимается :no: Запускаю, как Вы сказали => callback.html |
| Часовой пояс GMT +3, время: 18:12. |