Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.11.2019, 09:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,304

Здравствуйте, 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
Неужели проблема нерешаемая?
Решаемая, смотри выше!
Ответить с цитированием
  #12 (permalink)  
Старый 08.11.2019, 10:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,365

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

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

Последний раз редактировалось laimas, 08.11.2019 в 10:37.
Ответить с цитированием
  #13 (permalink)  
Старый 08.11.2019, 19:07
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

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++ и у меня вместо маленьких цифр получаются квадратики, а вернее квадратная рамка.



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

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

Последний раз редактировалось ozoro, 08.11.2019 в 19:18.
Ответить с цитированием
  #14 (permalink)  
Старый 09.11.2019, 07:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,365

Сообщение от ozoro
Копирую и вставляю в notepad++
Вставьте в Word, будет нормально. Не партесь, замените на простое, ведь разницы нет как вы переменные назовете.
Ответить с цитированием
  #15 (permalink)  
Старый 09.11.2019, 15:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,304

Сообщение от 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, будет нормально.
Ужас!
Ответить с цитированием
  #16 (permalink)  
Старый 09.11.2019, 15:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,365

Сообщение от Malleys
Ужас!
Куда ужаснее выпендриваться, предлагая всякую хрень в качестве имен, потом предлагая к ним обширные инструкции. Кроме вас на форуме этой хренью никто не страдает.
Ответить с цитированием
  #17 (permalink)  
Старый 09.11.2019, 15:48
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,304

Т. е. печатать код в Word это для вас нормально? Установил я Brackets, значит страдаю! С вами всё понятно!
Ответить с цитированием
  #18 (permalink)  
Старый 09.11.2019, 15:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,365

Сообщение от Malleys
Т. е. печатать код в Word это для вас нормально?
Не нормально не в Word, который, к сожалению, пришлось упоминать, а маяться дурью. Ведь даже ежик понимает, что код предлагаемый будет копироваться и вставляться во что угодно, которое вместо вашей красоты будет отображать шлак. Так что ваши "изыски" в этом плане чистый выпендрежь.
Ответить с цитированием
  #19 (permalink)  
Старый 09.11.2019, 17:43
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,304

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

Помню у mp3-файлов в проигрывателе на mac и на телефоне всё нормально отображались названия русских песен, а на windows 7 что-то «крякозябры»! Так что это не моя проблема! А ещё там было windows-949 и windows-1251, которые нужно разгадывать на windows 10 (имена файлов стали «крякозябрами»). Красота!
Ответить с цитированием
  #20 (permalink)  
Старый 09.11.2019, 17:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,365

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


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите дописать код модального окна Sergeyaleksandrovich68 (X)HTML/CSS 1 04.08.2017 09:54
Помогите дописать код SkyRewir Общие вопросы Javascript 3 25.07.2017 11: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