12.10.2016, 17:37
|
|
Аспирант
|
|
Регистрация: 26.10.2015
Сообщений: 97
|
|
|
Отследить, что один элемент перекрыт другим
Здравствуйте
На странице есть фиксированный див и таблица. В ячейках строк находятся ссылки, которые через onclick добавляют текст в див. Див при этом увеличивается по высоте и перекрывает часть таблицы.
Как можно отследить, что строка tr из которой кликнули, стала перекрыта дивом? и вывести например, после этого алерт
Пожалуйста, помогите, вот пример
<style type="text/css">
tr {height:50px;}
</style>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:300px; background-color:#ccc;"><span id="sp" style='line-height:50px;'>Товар </span></div>
<table id="tab" style="width:300px;" border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 6</a></td><td>Lexus</td></tr>
</table>
|
|
12.10.2016, 17:57
|
 |
Профессор
|
|
Регистрация: 21.11.2015
Сообщений: 440
|
|
|
rodiony4,
Походу косяк в условии или в реализации - див всегда перекрывает только первую строку
|
|
12.10.2016, 18:00
|
|
Профессор
|
|
Регистрация: 21.11.2015
Сообщений: 440
|
|
|
rodiony4,
Наверно там в онклике разные line-height будут. 100, 150, 200 и тд
И если это так то надо делить line-height который задается в after на 50 - и получишь номер строки
|
|
12.10.2016, 18:16
|
|
Аспирант
|
|
Регистрация: 26.10.2015
Сообщений: 97
|
|
|
Coriolan161, это только пример, без разницы, перекрывает див первую строку или нет. И line-height также, только для того чтобы изменить в примере высоту дива (на сайте line-height не будет)
Нужно отследить только ту перекрытую tr строку, из которой был сделан клик
Последний раз редактировалось rodiony4, 12.10.2016 в 19:42.
|
|
13.10.2016, 10:38
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
rodiony4,
<!DOCTYPE html
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
tr {height:50px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:310px; background-color:#ccc;"><span id="sp" style='line-height:50px; '>Товар </span></div>
<table id="tab" style="width:300px; " border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 6</a></td><td>Lexus</td></tr>
</table>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 13.10.2016 в 12:03.
|
|
13.10.2016, 22:43
|
|
Аспирант
|
|
Регистрация: 26.10.2015
Сообщений: 97
|
|
Dilettante_Pro, на примере ваш онклик работает, а на сайте нет
пример я привел упрощенный, на сайте див фиксируется, когда достигнет верха экрана, а также в этом диве вложенная таблица, куда вставляется текст
вот пример, максимально приближенный к странице сайта, посмотрите?
див #sidebar - фиксируется когда достигнет верха экрана, в нем таблица в которую вставляется текст
ваше условие в онклик изменил на:
if($(this).offset().top < parseInt($('#sidebar').css('height'))) alert('Накрыло');
|
|
14.10.2016, 00:33
|
|
Аспирант
|
|
Регистрация: 26.10.2015
Сообщений: 97
|
|
или так, чтобы не пихать в каждую строку онклик с условием
<script type="text/javascript">
$('#sf tr').click(function(){
if($(this).offset().top < parseInt($('#sidebar').css('height'))){
alert('Накрыло');
};
});
</script>
но все равно грабли с дивом #sidebar - вложенная в него таблица, в которую вставляется текст и позиция fixed, которую он получает вверху экрана
пАмАгите
Последний раз редактировалось rodiony4, 14.10.2016 в 00:42.
|
|
14.10.2016, 11:58
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
А вот так?
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
tr {height:50px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
$('#tab tr').on('click', function () {
$('#fix').css('height', '100px');
if (($(this).offset().top + tab.getBoundingClientRect().top) < parseInt($('#fix').css('height'))) alert('Накрыло');
})
})
</script>
</head>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:310px; height:50px; background-color:#ccc;"><span id="sp" >Товар </span>
<button onclick="$('#fix').css('height', '50px');" >Свернуть</button>
</div>
<table id="tab" style="width:300px; " border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" >наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 6</a></td><td>Lexus</td></tr>
</table>
</body>
</html>
|
|
14.10.2016, 18:31
|
|
Аспирант
|
|
Регистрация: 26.10.2015
Сообщений: 97
|
|
Dilettante_Pro, нет, на сайте другая html разметка. Например, у дива нет высоты и в него вложена таблица
этот пример, максимально приближенный к странице сайта, я уже показывал
вот почти тоже самое, но попроще
ваш код не хочет работать по двум неизвестным мне причинам:
1) это вложенная таблица в диве #sidebar
2) это мой код js, который задает позицию fixed диву #sidebar, когда он касается верха экрана
<div id="table_wrap">
<!-- див с позицией fixed у верха экрана -->
<div id="sidebar" style="width:300px; background-color:#ccc;">
<table class="tab_decode" id="tab_decode" style="width: 100%;" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Марка и модель а/м:</td>
<td id="marka_decode"></td>
</tr>
<tr>
<td>Тип стекла:</td>
<td id="typeGlass_decode"></td>
</tr>
</table>
</div>
<!-- /див с позицией fixed у верха экрана -->
<table id="sf" style="width:300px;" border="1" cellspacing="0" cellpadding="0">
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 1</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 2</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">>наименование 5</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 6</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 7</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 8</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 9</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 10</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 11</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 12</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 15</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 14</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 15</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 16</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 17</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 18</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 19</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 20</a></td><td>Daewoo</td></tr>
</table>
</div>
<script type="text/javascript">
// отследить, что строка tr из которой кликнули, стала перекрыта дивом #sidebar
// эта функция не работает из за таблицы в диве #sidebar и кода для его фиксации у верха экрана, который ниже
$('#sf tr').click(function(){
if($(this).offset().top < parseInt($('#sidebar').css('height'))){
alert('Накрыло');
};
});
//шапка таблицы (#sidebar) получает позицию fixed у верха экрана только в том случае,
//если контейнер #table_wrap будет больше по высоте окна браузера, в противном случае - static
if ($('#sidebar').length) {
var tableSF_elem = $('#sf');
var heightTableWrap = $('#table_wrap').height();
var heightTable_Sf = tableSF_elem.height();
var topPos = $('#sidebar').offset().top;
$(window).scroll(function() {
var newcss = (topPos < $(window).scrollTop() &&
(heightTableWrap - ( heightTable_Sf - tableSF_elem.height() )) >=
$(window).height()) ? {
position: 'fixed',
top: 0
} : {
position: 'static'
};
$('#sidebar').css(newcss)
})
}
</script>
|
|
14.10.2016, 18:57
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
rodiony4,
обратите внимание, что в моем примере в пост9 уже другая проверка:
if (($(this).offset().top + tab.getBoundingClientRect().top) < parseInt($('#fix').css('height'))) alert('Накрыло');
Остальное - в понедельник (если вы не решите проблему раньше)
|
|
|
|
