Страница 2 из 3 < 1 2 3 >
Показывать 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)

Malleys 08.11.2019 09:52
Здравствуйте, ozoro!

Вы задали очень правильный и грамотный вопрос, на который я вам отвечу.

Вот ваш основной алгоритм. Вы измеряете высоты 1-ого и 2-ого блоков, вычисляете разницу, и если она оказывается больше, чем 200 пикселей, то элементы выстраиваются стопкой, а иначе столбиками.

Потом, при изменении размеров окна, у вас опять повторяется тот же самый алгоритм, но, обратите внимание, что блоки могут быть выстроены стопкой, и соответственно вы вычисляете не те высоты! Вы ведь хотите сравнивать высоты блоков, которые выстроены столбиками.

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

Код, я привожу ниже.

«Текст Текст Текст» можно генерировать при помощи скрипта.

При каждом изменении размеров окна, в консоль выводятся высоты блоков и разница их высот, это можно удалить.

Можно сразу посмотреть результат в отдельной вкладке... https://charm-launch.glitch.me/columns.html
<!DOCTYPE html>
<html lang="ru">
<html>

<head>
	<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: gold; }
		#item-2 { background-color: crimson; }

		.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;
			list-style-position: inside;
			   -moz-column-count: 1;
			-webkit-column-count: 1;
			        column-count: 1;
			-webkit-column-gap: 20px;
			   -moz-column-gap: 20px;
			        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">
				<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">
				<h3>Заголовок второго блока</h3>
				<script>
					document.write(new Array(10).join("<p>" + new Array(41).join("Текст ") + "</p>"))
				</script>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>

		const item1 = document.getElementById("item-1");
		const item2 = document.getElementById("item-2");
		const MAX_HEIGHT_DIFF = 200;

		function resizeHandler() {
			$(".item").removeClass("cs3");
			$(".column-list").removeClass("cs4");

			const Δh = Math.abs(item1.offsetHeight - item2.offsetHeight);
			console.log(`
				h₁ = %s
				h₂ = %s
				Δh = %s
			`, item1.offsetHeight, item2.offsetHeight, Δh);

			if (Δh > MAX_HEIGHT_DIFF) {
				$(".item").addClass("cs3");
				$(".column-list").addClass("cs4");
			}
		}

		resizeHandler();
		addEventListener("resize", resizeHandler);

	</script>
</body>

</html>


ksa, рони, laimas, какая речь может идти о трубах в кроватях и сантехниках, когда это тема про вычисление разности высот? Просто вы, должно быть Δh не осилили, бывает! laimas, лучше расскажите (или снимите жаркое кино) про идентификаторы?
Цитата:
Сообщение от ozoro
Неужели проблема нерешаемая?
Решаемая, смотри выше!

laimas 08.11.2019 10:28
Цитата:
Сообщение от Malleys
лучше расскажите (или снимите жаркое кино) про идентификаторы
Какая может быть речь о кино, когда тема о разности высот?
Я вообще и не собирался чего-то здесь осиливать, но коли вы киноман, хорошо, как только Брюс Уиллис даст согласие сниматься у меня, так сразу и начну. ;)

Примечание: Мужик в доме должен быть мужиком, а не оленем, а не отличать трубы от гибкой подводки, ну это позор для него.

ozoro 08.11.2019 19:07
Malleys,
Благодарю, то что мне было нужно!

Часть кода не понял, так как нигде не видел таких записей или не обращал внимания, но работает так как мне надо.

Malleys, можешь пояснить вот это:
const Δh = Math.abs(item1.offsetHeight - item2.offsetHeight); // что означает треугольник перед h и как такой треугольник набрать на клавиатуре?

	console.log(`
	     h₁ = %s // что это означает? и как h или другую букву с такой маленькой цыфрой набрать на клавиатуре?
	     h₂ = %s
	     Δh = %s
	`, item1.offsetHeight, item2.offsetHeight, Δh); // это, я понимаю, выводятся по порядку заначения переменных указанных в апострофах?



Копирую и вставляю в notepad++ и у меня вместо маленьких цифр получаются квадратики, а вернее квадратная рамка.



Копирую этот код с квадратиками и всавляю сюда (код выше в настоящем сообщении, который прошу разъяснить) эти кадратики опять становяться маленькими цифрами? Магия какая-то:blink: :)

Почему так получается?

laimas 09.11.2019 07:49
Цитата:
Сообщение от ozoro
Копирую и вставляю в notepad++
Вставьте в Word, будет нормально. Не партесь, замените на простое, ведь разницы нет как вы переменные назовете.

Malleys 09.11.2019 15:30
Цитата:
Сообщение от ozoro
это, я понимаю, выводятся по порядку значения переменных указанных в апострофах?
Да, для форматирования вы можете использовать подстановочные символы с дополнительными параметрами, подробнее смотрите на developer.mozilla.org!

Цитата:
Сообщение от ozoro
Копирую и вставляю в notepad++ и у меня вместо маленьких цифр получаются квадратики, а вернее квадратная рамка.
Вы можете сохранить, оно будет работать, просто у вас в редакторе используется шрифт, в котором нет таких символов. Поэтому вы не видите начертание символа, но компьютер знает, какой там символ. Используйте качественный шрифт, в котором прорисованы эти символы, например, Fira Code, Menlo, Pragmata Pro, Ubuntu Mono или DejaVu Sans Mono. Я использую шрифт Fira Code в редакторе кода Visual Studio Code.

Вот так этот фрагмент кода выглядит в редакторе кода Visual Studio Code с поддержкой тысяч расширении для удобной разработки (шрифт Fira Code)



Также вы можете установить себе Sublime Text, есть встроенный пакетный менеджер с расширениями для множества языков программирования (шрифт Menlo, но это всё настраиваемое, включая цветовые темы)



Также вас может заинтересовать редактор Brackets со встроенным сервером и редактированием вживую HTML и CSS. (шрифт Operator Mono, но в нём не все символы есть, на рисунке видно, что ∆ взято из другого шрифта, в настройках можно указать множественные шрифты)



Автодополнение, подсказки, проверка типов, синтаксиса, автоматизация сборки, встроенная консоль, упрощённая работа с git, автоформатирование кода (от тех кто мучался в notepad++), подсветка синтаксиса и многое другое доступно в современных редакторах на всех платформах.

Ссылки на упомянутые программы для тех, кто программирует...
Цитата:
Сообщение от ozoro
Копирую этот код с квадратиками и вставляю сюда (код выше в настоящем сообщении, который прошу разъяснить) эти квадратики опять становятся маленькими цифрами?
Это не магия, это значит, что в том редакторе используется шрифт, в котором не прорисован нужный символ, поэтому он отображается как квадратик (missing glyph). Когда вы копируете текст, то в буфер обмена помещается не картинка с экрана, а данные, представляющие этот текст.

Цитата:
Сообщение от ozoro
что означает треугольник перед h
Это греческая буква дельта, которая является общепринятым математическим обозначением изменения или различия между значениями переменных. Вы можете ещё больше узнать о применении этого символа на wikipedia.org!

Цитата:
Сообщение от ozoro
треугольник перед h… как такой треугольник набрать на клавиатуре?
Если вы используете английскую раскладку, то вы можете нажать ⌥J (т. е. Option+J), получается символ «∆»! Также этот и другие символы можно выбрать из палитры символов Shift+Cmd+Пробел
Возможно вам будет интересно посмотреть видео на эту тему...
https://youtu.be/xGS6b7uPEcg?t=31
https://youtu.be/boZA85IcDZQ?t=20

Цитата:
Сообщение от laimas
Вставьте в Word, будет нормально.
Ужас!

laimas 09.11.2019 15:32
Цитата:
Сообщение от Malleys
Ужас!
Куда ужаснее выпендриваться, предлагая всякую хрень в качестве имен, потом предлагая к ним обширные инструкции. Кроме вас на форуме этой хренью никто не страдает.

Malleys 09.11.2019 15:48
Т. е. печатать код в Word это для вас нормально? Установил я Brackets, значит страдаю! С вами всё понятно!

laimas 09.11.2019 15:53
Цитата:
Сообщение от Malleys
Т. е. печатать код в Word это для вас нормально?
Не нормально не в Word, который, к сожалению, пришлось упоминать, а маяться дурью. Ведь даже ежик понимает, что код предлагаемый будет копироваться и вставляться во что угодно, которое вместо вашей красоты будет отображать шлак. Так что ваши "изыски" в этом плане чистый выпендрежь.

Malleys 09.11.2019 17:43
Цитата:
Сообщение от laimas
Ведь даже ежик понимает, что код предлагаемый будет копироваться и вставляться во что угодно, которое вместо вашей красоты будет отображать шлак.
Очевидно нужно использовать обновлённую ОС с нормальной поддержкой Unicode. В windows 10 есть такие проблемы? Почему такие проблемы?

Помню у mp3-файлов в проигрывателе на mac и на телефоне всё нормально отображались названия русских песен, а на windows 7 что-то «крякозябры»! Так что это не моя проблема! А ещё там было windows-949 и windows-1251, которые нужно разгадывать на windows 10 (имена файлов стали «крякозябрами»). Красота!

laimas 09.11.2019 17:50
Цитата:
Сообщение от Malleys
Так что это не моя проблема!
И не моя, а ваша, вам же приходится к своему коду прилагать инструкции. А думать, что все используют ту же платформу и инструменты, что и вы, это самонадеянность, а заставлять это делать, это уже хамство. ;)


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