Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите поправить код, определения высоты блоков и их сравнения (https://javascript.ru/forum/jquery/78783-pomogite-popravit-kod-opredeleniya-vysoty-blokov-i-ikh-sravneniya.html)

ozoro 05.11.2019 03:08
Помогите поправить код, определения высоты блоков и их сравнения
 
Задача сравнивать ВЫСОТУ блоков у которых 
display:inline-block; width:50%
ПРИ РАЗНОЙ ШИРИНЕ ОКНА БРАУЗЕРА, и если один блок становится больше на величину, например 100px, то делать display:block; width:100% добавляя класс. При этом списки ul li в первом блоке (верхнем) должны распределяться в 2-е колонки. Если блоки при определенной ширине окна браузера становяться высотой с допустимым значением, то удалять класс с правилами display:block; width:100% и в первом блоке списки делать в одну колонку, то есть возвращать блоки в display:inline-block; width:50%.
Использую такую библиотеку JS. Репозиторий github.

При определенных условиях все работает правильно. НО!!!

При некоторых размерах ширины окна классы начитают добавляться и удаляться до бесконечности. То есть блоки по очереди становятся то display:inline-block; width:50%, то display:block; width:100%.

Заметил, что когда блоки находятся с классом с правилами display:inline-block; width:50% и разница в высоте не превышает допустимое значение, то высота каждого блока определяется правильно один раз, как при ресайзе, так и при перезагрузке страницы, изменяется тоже один раз при изменении высоты блока.

НО когда блоки становятся display:block; width:100%, то высота блока определяется дважды.

То есть:
1. определяется высота которая была бы при данной ширине окна, если бы блоки ниходились display:inline-block; width:50%
2. определяется высота которая была бы при данной ширине окна, если бы блоки ниходились display:block; width:100%

В консоле, при выводе туда ширины ОДНОГО из блоков, это выглядит следующим образом:
Высота Первого блока: 2371
Высота Первого блока: 1216


Я так понимаю здесь и зарыта собака, поэтому думаю, надо определять при любых условиях ВЫСОТУ только блока, который был бы display:inline-block; width:50%, то есть значение которое выводится первым (в примере из консоли которое первое сверху).

Помогите поправить код, чтобы выдавалось только первое значение при любой ширине окна браузера.

Заранее, благодарю!

<!DOCTYPE html>
<html lang="ru">
<html>
    <head>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0;padding:0}
#item-1 {
  background-color: yellow;
}
#item-2 {
  background-color: red;
}
.item{
display:inline-block;
width:49.5%;
vertical-align: top
}
.item h3 {   
    text-align: center;
}
.item.cs3{
display:block;
width:100%;
}
.cs1, .cs2 {
 padding: 20px;
text-align: left;
font-size: 30px;
}
.cs1 li, .cs2 li { margin-top: 25px }
.cs1 li:first-child{ margin-top: 0 }
.item h3{ margin: 0 }
.column-list {
	padding: 0 10px;
	/*outline: 1px solid #000;*/
	list-style-position: inside;
	   -moz-column-count: 1;
	-webkit-column-count: 1;
			column-count: 1;
			-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
               -moz-column-gap: 20px; /* Firefox */
                    column-gap: 20px;
}
.column-list.cs4 {
	   -moz-column-count: 2;
	-webkit-column-count: 2;
			column-count: 2;
}
.column-list li ul, .column-list li {
	-webkit-column-break-inside: avoid;
			  page-break-inside: avoid;
				   break-inside: avoid;
}

</style>		
</head>
<body>

<div class="item">
<div class="cs1">
	<div id="item-1" class="item-for-resize-tracking">
		<h3>Заголовок первого блока</h3>		
        <ul class="column-list">		
            <li> Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1</li>
            <li>Пункт #2</li>
            <li>Пункт #3</li>
            <li>Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4</li>
            <li>Пункт #5</li>
            <li>Пункт #6</li>
            <li>Пункт #7
            <ul>
                <li>Пункт #7.1</li>
                <li>Пункт #7.2</li>
                <li>Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3</li>
                <li>Пункт #7.4</li>
                <li>Пункт #7.5</li>
            </ul>
            </li>
            <li>Пункт #8
            <ul>
                <li>Пункт #8.1  Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1</li>
                <li>Пункт #8.2</li>
                <li>Пункт #8.3</li>
            </ul>
            </li>
            <li>Пункт #9</li>
            <li>Пункт #10</li>
            <li>Пункт #11  Пункт #11 Пункт #11 Пункт #11 Пункт #11
            <ul>
                <li>Пункт #11.1</li>
                <li>Пункт #11.2</li>
                <li>Пункт #11.3</li>
                <li>Пункт #11.4</li>
                <li>Пункт #11.5</li>
                <li>Пункт #11.6</li>
            </ul>
            </li>
            <li>Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12</li>
            <li>Пункт #13</li>
            <li>Пункт #14</li>
            <li>Пункт #15</li>
            <li>Пункт #16</li>
            <li>Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14</li>
            <li>Пункт #15</li>
            <li>Пункт #16</li>			
        </ul>		
	</div>
</div>
</div>

<div class="item">
<div class="cs2">
	<div id="item-2" class="item-for-resize-tracking">
	<h3>Заголовок второго блока</h3>				
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
<p>Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст Текст  Текст  Текст  Текст  Текст </p>
	</div>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://test8880.000webhostapp.com/src/js/ResizeSensor.js"></script>
<script>
const items = document.querySelectorAll('.item-for-resize-tracking');
const itemSizes = {};
const sizeChanges = {};

// Setup ResizeSensor on target item
items.forEach(item => {
  sizeChanges[item.id] = false;
  new ResizeSensor(item, function(e) {
    itemSizes[item.id] = e;
    sizeChanges[item.id] = true;
    if (!Object.values(sizeChanges).some(a => !a)) {
      compareSizes();
      Object.keys(sizeChanges).forEach(f => sizeChanges[f] = false);
    }
  });
});

function compareSizes() {
  const size1 = itemSizes['item-1'];
  const size2 = itemSizes['item-2'];
  if (size1 && size2) {
 
var 
	d = 200,
	dif = Math.abs(size1.height-size2.height),
	cz = 1;

		//console.log('Ширина окна: ' + window.innerWidth);
		//console.log(size1);
		//console.log('Разница высоты: ' + dif);
		console.log('Высота Первого блока: ' + size1.height);
		//console.log('Высота Второго блока: ' + size2.height);


	if (dif > d){	
		sz = 2;
		$(".item").addClass("cs3");
		$(".column-list").addClass("cs4");
		//console.log("Классы ДОБАВЛЕНЫ, sz = " + sz + " Разница: " + dif);
	} else {	
		sz = 1;
		$(".item").removeClass("cs3");
		$(".column-list").removeClass("cs4");	
		//console.log("Классы УДАЛЕНЫ, sz = " + sz + " Разница: " + dif);	
	}
  }
}
</script>	
</body>
</html>

ozoro 06.11.2019 16:20
Неужели проблема нерешаемая?

ksa 07.11.2019 11:34
Цитата:
Сообщение от ozoro (Сообщение 514987)
Неужели проблема нерешаемая?
У меня сегодня сантехник (!) поменял шланги на кухне к смесителю и поставил тройник на трубу... Прикрутил к тому тройнику шланг, а к шлангу кран...
Потратил на это не более часа, взял с меня 1200р. И отправился на следующий вызов. А ведь он не тратил время на получение высшего образования.
Смекаешь? ;)

laimas 07.11.2019 12:16
Цитата:
Сообщение от ksa
У меня сегодня сантехник (!) поменял шланги на кухне к смесителю ...
взял с меня 1200р
А самому?

ozoro 07.11.2019 18:10
Цитата:
У меня сегодня сантехник (!)...
Смекаешь? ;)
Это ты к чему?

рони 07.11.2019 18:55
ozoro,
ваше описание, несмотря на подробности, слабо помогает понять проблему, а значит мало кто будет расходовать время на решение. думаю что и раздел работа вам ничем не поможет.

ozoro 08.11.2019 01:56
рони,
Вот записал видео с экрана на яндекс диске, в котором объяснил что мне нужно и в чем проблема.

Думаю, теперь будет понятно. Не ругайте, немного путаюсь в терминах, я далеко не программист, делаю потихоньку сайт для себя и узнаю что-то новое.

Прошу помочь!

Заранее, благодарю!

ksa 08.11.2019 07:17
Цитата:
Сообщение от laimas
А самому?
В следующий раз позову тебя... :D
Машины ты тоже ремонтируешь? Авторемонтеры так же по 1000-1500р за раз берут, не меньше...

Ты и в магазин наверное за харчами не ходишь? Все сам растишь и производишь?

ksa 08.11.2019 07:18
Цитата:
Сообщение от ozoro
Это ты к чему?
Значит не смекнул... :(

Платить нужно людям за решение твоих проблем. Разве это так сложно понять?

laimas 08.11.2019 07:35
Цитата:
Сообщение от ksa
Ты и в магазин наверное за харчами не ходишь? Все сам растишь и производишь?
Ну само собой, под каждой кроватью грядка. Другой контекст у темы, а то бы ответил по теме. :)


Часовой пояс GMT +3, время: 07:38.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице