Форум

Сергей Ракипов · #1 (**permalink**) 21.06.2020, 15:53

Скажите это нормально или нет

function appearance(){
	let blockHeinght = termsOfUse.getBoundingClientRect().height;
	main.style.transform = "translateY(" + blockHeinght + "px)";
	
	localStorage.setItem("noTranslate","translateY(0)");

}
appearance();

let appearance_2 = function(){
	let blockHeinght = termsOfUse.getBoundingClientRect().height;
	main.style.transform = "translateY(" + blockHeinght + "px)";
	
	localStorage.setItem("noTranslate","translateY(0)");

}
window.addEventListener("resize", appearance_2);

Есть функция которая отодвигает нужный мне элемент.
И я хочу что бы она при это сделала сразу и что бы она следила за размером окна.

И сделал грубо говоря дубль.

Я пробовал load но когда происходит рисайз, там есть задержка не большая, по этому я не использовал.
resize она мгновенно реагирует.

Это дилетантство или нормальная практика?

Белый шум · #2 (**permalink**) 22.06.2020, 05:55

А зачем вам дубль? Функции для того и именуют, чтоб обращаться к ним много раз из разных мест:

window.addEventListener("resize", appearance);
appearance();

Сергей Ракипов · #3 (**permalink**) 22.06.2020, 07:43

Белый шум,
Спасибо не знал что так можно было.

Сергей Ракипов · #4 (**permalink**) 07.07.2020, 06:59

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blok{
width: 480px;
}
#prokrutka{

}
#vniz{

}
</style>
</head>
<body>
<span id="prokrutka"><a href="#">Кнопка</a></span>



<div class="blok">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quasi non quibusdam, voluptates voluptatibus possimus officiis molestiae beatae, odit nulla expedita enim voluptate odio eligendi voluptatum! Ut libero rem, excepturi architecto a eligendi hic magni est itaque velit possimus dicta fugit totam provident illo ducimus corrupti cum necessitatibus sit harum incidunt dignissimos in illum iste? Quaerat architecto sint earum debitis quas, ullam cupiditate, voluptatibus delectus provident laborum doloremque officiis corporis quae magni facilis? Ea, delectus esse consequatur quos corporis unde at architecto. Veniam velit, explicabo, suscipit vitae quibusdam blanditiis corporis quos culpa deserunt sit odit laboriosam animi ullam maxime tempore doloremque facere ipsam dolores, repellat dicta consequuntur aut. Quae labore fuga obcaecati perferendis officiis ex repellendus incidunt dolorum fugit. Blanditiis aspernatur animi odio in ea sit cumque voluptatem alias deserunt libero esse harum unde eveniet repellat, consequatur sunt deleniti enim officiis omnis delectus! Voluptatem accusamus sunt quaerat numquam, iusto rerum! Tempora sit doloremque dolor laudantium. Eius quasi odit dicta itaque fugit in, nam mollitia, vero culpa asperiores placeat! Fugit, iure mollitia reprehenderit ipsa quas impedit minus dolorem. Doloribus, iure odit! Corrupti vero cupiditate amet? Ut, ea consequuntur cupiditate consequatur asperiores velit esse, harum, id provident inventore facere in itaque reiciendis? Rem, quasi. Corrupti fugiat maiores veritatis eaque modi itaque praesentium voluptatem consequuntur molestiae alias repellat, iure dolorem ab, corporis maxime veniam? Commodi culpa magni quasi numquam labore! Odio, sed. Officiis doloribus laborum id nobis eveniet fugiat, voluptatem tenetur molestias aspernatur architecto quas, minima, quis minus beatae. Adipisci labore voluptate quam magni, nam esse harum iure laboriosam recusandae asperiores placeat! Est totam numquam culpa itaque quidem porro laboriosam voluptatem modi facere ab corrupti ratione dolores veritatis adipisci magni, cupiditate necessitatibus id debitis animi quod placeat eius saepe dolorem! Nisi aliquid omnis quis aspernatur dolore dolores, id, necessitatibus provident quae perferendis blanditiis expedita, beatae non quisquam ab consequuntur qui! Ea sequi, dolore autem ratione accusantium illo aperiam incidunt, a culpa nisi adipisci voluptatem delectus velit quia eum at earum, ut reprehenderit explicabo officia quod rem. Eos, eum consectetur nostrum nihil numquam nobis aliquid reprehenderit. Deserunt consequuntur exercitationem error voluptatibus quo odio repellendus consequatur cumque? Tenetur, ullam sit hic assumenda nostrum voluptatum. Eum saepe, fugit assumenda error adipisci aperiam, minima nobis tenetur quas quia animi mollitia, dolore similique magnam? Corporis quo earum repellat maxime omnis ducimus, at nam laborum quod. Minima debitis doloremque laudantium at ipsum iste quibusdam culpa aliquid assumenda. Ducimus pariatur alias ipsa, ut corporis voluptatum amet hic error porro aperiam eligendi sapiente minus animi voluptas, aut iure, iusto ipsam explicabo fuga architecto officia! Distinctio unde modi ab atque beatae enim, odio soluta est harum? Nam omnis beatae quibusdam, voluptatum similique sed quae et minus illum libero, eum iusto consequatur? Repellendus saepe suscipit numquam? Asperiores labore quas sapiente odit, deserunt deleniti, quia eaque quisquam hic quis natus in. Repellendus sit esse, dicta cupiditate consectetur cumque laborum adipisci voluptatem temporibus magni possimus vitae placeat voluptatum, illo blanditiis? Aliquam soluta similique recusandae tempora labore vel suscipit. Est, ducimus sequi corrupti recusandae voluptas omnis non dolorum officia, odit mollitia veritatis pariatur ab voluptate ipsa nemo, optio vel deleniti ut? Aperiam consectetur illum voluptates illo excepturi officia deleniti nihil minus, reiciendis repellat ab aliquid sint adipisci cupiditate laborum perspiciatis molestias ipsam. Accusantium pariatur tenetur explicabo! Doloribus deleniti atque, consequatur eveniet praesentium natus debitis. Quos quibusdam vel nesciunt accusantium inventore facilis, eligendi amet consequuntur temporibus dignissimos dolores! Cumque odio excepturi aperiam tempora nisi labore, aut rem? Sit expedita maiores sapiente dolor placeat sunt accusamus debitis corporis hic, enim est iusto nisi suscipit incidunt adipisci quia pariatur quisquam molestiae dolore doloremque. Sapiente perferendis rerum, esse porro optio debitis laborum inventore quis, repudiandae tenetur aut consequuntur aliquid dicta ipsum perspiciatis ducimus labore! Consequuntur enim, voluptas, temporibus impedit dicta a eaque neque ex delectus explicabo repellendus eligendi unde iste odit non molestias doloribus! Laborum assumenda, numquam, iure rem suscipit nihil architecto ad nobis quo repellendus, accusantium hic commodi maxime. Hic minima aliquid consequatur earum quis nesciunt consequuntur odio aut voluptatibus, accusantium quaerat necessitatibus? Quo, accusamus ea inventore optio quaerat dicta mollitia rerum aperiam aut numquam illum minima laborum tempora cumque ipsam commodi facere unde laboriosam eaque maiores dolorum itaque quidem fugiat ullam. Atque, reprehenderit vero! Assumenda voluptates omnis quos et tempore repellat, nulla sapiente voluptatem corrupti voluptas cupiditate! Explicabo ea, aut mollitia nulla consectetur temporibus officia itaque, eligendi dolores doloribus odio eveniet? Impedit laboriosam dolor similique quae vero, aliquam facilis alias ipsam nihil earum quidem animi necessitatibus quos velit nobis pariatur hic corrupti commodi libero dolores porro. Accusantium beatae odio iure laborum quas quibusdam sint omnis fugiat provident? Illo dignissimos excepturi ea sed, vero explicabo at eum repudiandae corporis? Nisi perferendis quasi nihil recusandae blanditiis molestias. Adipisci ratione quas beatae minus asperiores cupiditate labore commodi culpa iure. Obcaecati alias beatae eos ad eaque sapiente, hic accusamus consequuntur laboriosam harum perferendis facilis quas iusto rem dolore ducimus sint incidunt iure aliquam? Ea beatae reiciendis consectetur quam totam quidem qui officia facilis ab saepe laudantium eligendi excepturi, quisquam perferendis laborum eaque sed, deleniti sit ipsum omnis tempora! Labore impedit odit aspernatur rem iure nulla ut optio illo, quaerat magni porro asperiores neque suscipit, officia enim inventore culpa odio? Labore quasi nemo maxime laborum quo repudiandae error voluptatum aliquam ipsum natus, dolore doloremque vel numquam veniam facilis architecto laboriosam voluptas ratione accusantium earum modi accusamus tempore illum similique? Laboriosam odio voluptatum nulla, recusandae aperiam reiciendis eum libero provident nam quod at similique obcaecati ea maxime non expedita sunt excepturi voluptates. Nesciunt amet exercitationem consequuntur vel tempore illo quod at cum, architecto dignissimos nisi voluptas nulla, ea nobis doloremque rem ipsum cupiditate. Explicabo at libero quibusdam accusantium eligendi laborum laboriosam sapiente magni quas dolorum vero adipisci asperiores, commodi dolore numquam natus, dolores, earum voluptatem enim architecto. Quod nihil a suscipit enim eligendi incidunt repellendus quae quo dolores mollitia dolor laboriosam eum delectus, qui perferendis tenetur architecto laudantium ullam maiores vero blanditiis! Excepturi rem, reiciendis eum laudantium et adipisci architecto quaerat omnis delectus. Enim officia explicabo voluptatum necessitatibus tenetur reprehenderit consequuntur, cumque dolor omnis!`

</div>
<div id="vniz">Низ</div>
<script>
const prokrutka = document.querySelector("#prokrutka");
const vniz = document.querySelector("#vniz");

let prokrutka_vniz = () => {
vniz.scrollIntoView({block: "start", behavior: "smooth"});
console.log(`работает`);
}
prokrutka.addEventListener("click", prokrutka_vniz);
</script>
</body>
</html>

laimas · #5 (**permalink**) 07.07.2020, 07:05

Сообщение от Сергей Ракипов

Сделал для себя удивительное открытие

Что произойдет если щелкнуть по ссылке у которой href="#"?

voraa · #6 (**permalink**) 07.07.2020, 07:29

Я все больше убеждаюсь, что HTML очень многие учат по каким то очень старым учебникам и примерам.
Да, click можно навесить на что угодно, и это что угодно будет работать почти как кнопка. Но есть же хороший элемент button. Почему именно его не использовать как кнопку? Он же именно для этого предназначен.

Кнопка должна быть кнопкой. Правильная кнопка должна не только быть тыкабельная мышью, но и реагировать на клавиатуру. Это реально нужно.
Просто сталкивался с работами, где люди сидят и заполняют базу данных. Там мышью почти не пользуются. Печатая 10 пальцами нет времени мышью кликать. Табы, стрелки, Ентеры...

В современном HTML надо придерживаться семантической составляющей элементов.
Заголовок - <h1-6>, а не жирный span,
Когда что то сделать - <button>
Кудато перейти - <a>

Сергей Ракипов · #7 (**permalink**) 07.07.2020, 14:38

Сообщение от laimas

Что произойдет если щелкнуть по ссылке у которой href="#"?

Тот же результат

Сергей Ракипов · #8 (**permalink**) 07.07.2020, 14:40

Сообщение от voraa

Я все больше убеждаюсь, что HTML очень многие учат по каким то очень старым учебникам и примерам.
Да, click можно навесить на что угодно, и это что угодно будет работать почти как кнопка. Но есть же хороший элемент button. Почему именно его не использовать как кнопку? Он же именно для этого предназначен.

Кнопка должна быть кнопкой. Правильная кнопка должна не только быть тыкабельная мышью, но и реагировать на клавиатуру. Это реально нужно.
Просто сталкивался с работами, где люди сидят и заполняют базу данных. Там мышью почти не пользуются. Печатая 10 пальцами нет времени мышью кликать. Табы, стрелки, Ентеры...

В современном HTML надо придерживаться семантической составляющей элементов.
Заголовок - <h1-6>, а не жирный span,
Когда что то сделать - <button>
Кудато перейти - <a>

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

Сергей Ракипов · #9 (**permalink**) 07.07.2020, 14:52

Не знаю почему но с [b] href="" [b] не работает

voraa · #10 (**permalink**) 07.07.2020, 16:06

Сообщение от Сергей Ракипов

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

А цель то какая?
Сначала сделать плавный роллинг, а потом перейти по ссылке (куда)?
Так не получится. Плавная прокрутка асинхронна. Переход пойдет сразу до ее завершения

Форум

Справочник

Discord чат

Курсы javascript