Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2019, 03:08
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

Помогите поправить код, определения высоты блоков и их сравнения
Задача сравнивать ВЫСОТУ блоков у которых
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, 23.11.2019 в 00:52.
Ответить с цитированием
  #2 (permalink)  
Старый 06.11.2019, 16:20
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

Неужели проблема нерешаемая?
Ответить с цитированием
  #3 (permalink)  
Старый 07.11.2019, 11:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ozoro Посмотреть сообщение
Неужели проблема нерешаемая?
У меня сегодня сантехник (!) поменял шланги на кухне к смесителю и поставил тройник на трубу... Прикрутил к тому тройнику шланг, а к шлангу кран...
Потратил на это не более часа, взял с меня 1200р. И отправился на следующий вызов. А ведь он не тратил время на получение высшего образования.
Смекаешь?
Ответить с цитированием
  #4 (permalink)  
Старый 07.11.2019, 12:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от ksa
У меня сегодня сантехник (!) поменял шланги на кухне к смесителю ...
взял с меня 1200р
А самому?
Ответить с цитированием
  #5 (permalink)  
Старый 07.11.2019, 18:10
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

Цитата:
У меня сегодня сантехник (!)...
Смекаешь?
Это ты к чему?
Ответить с цитированием
  #6 (permalink)  
Старый 07.11.2019, 18:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ozoro,
ваше описание, несмотря на подробности, слабо помогает понять проблему, а значит мало кто будет расходовать время на решение. думаю что и раздел работа вам ничем не поможет.
Ответить с цитированием
  #7 (permalink)  
Старый 08.11.2019, 01:56
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

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

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

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

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

Последний раз редактировалось ozoro, 08.11.2019 в 02:00.
Ответить с цитированием
  #8 (permalink)  
Старый 08.11.2019, 07:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

Ты и в магазин наверное за харчами не ходишь? Все сам растишь и производишь?
Ответить с цитированием
  #9 (permalink)  
Старый 08.11.2019, 07:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ozoro
Это ты к чему?
Значит не смекнул...

Платить нужно людям за решение твоих проблем. Разве это так сложно понять?
Ответить с цитированием
  #10 (permalink)  
Старый 08.11.2019, 07:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Последний раз редактировалось laimas, 08.11.2019 в 07:57.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите дописать код модального окна Sergeyaleksandrovich68 (X)HTML/CSS 1 04.08.2017 08:54
Помогите дописать код SkyRewir Общие вопросы Javascript 3 25.07.2017 10:27
Помогите переписать этот код на Prototype Mitrandir Prototype & script.aculo.us 3 10.11.2016 17:30
Помогите исправить код слайдшоу. 47rus Общие вопросы Javascript 0 20.03.2016 18:43
Помогите код оптимизировать. Suharik Events/DOM/Window 2 27.05.2010 11:59