#8 ActiveBox - Верстка сайта с нуля для начинающих | jQuery
Вставка
- Опубліковано 7 чер 2019
- В этом видео поработаем с jQuery и сделаем плавный скролл к элементам, мобильное меню и слайдер slick.js
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Материалы урока: files.brainscloud.ru/file/act...
Слайдер: kenwheeler.github.io/slick/
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css
Самое сложное в просмотре твоих уроков - это не забыть отвлечься, что бы поставить лайк и написать комментарий
Спасибо, ВСЕ осилил. Во время уроков даже с учетом того что все делал под копирку, все равно у меня были ошибки в основном это банальная невнимательность ) Еще раз спасибо, продолжай вести канал, не забрасывай его
Присоединяюсь к вышесказанному
Было бы круто, вёрстку магазина видеть. Спасибо
13:50 мобильная менюшка
17:50 Jquery for nav
23:07 Sllider
Смотрю этот плейлист в 2021 году - очень интересно и информативно! Отдельное спасибо за подробные объяснения и примеры разных ситуаций, которые могут попасться на практике! 8-ое видео на одном дыхании смотрю и успешно повторяю!😀
Спасибо вам, вы очень круто объясняете, а когда возникают проблемы моментально додумываете решение. Настоящий профессионал в своем деле.
Ты красавчик , самые полезные уроки из всего рунета по верстке. Спасибо тебе большое, только продолжай!
Дошел до финиша)) огромное спасибо за Вашу работу) Курс топчик) Теперь берусь за mojo и сайт-портфолио (т.к они в свободном доступе) после них однозначно приобрету курс "сайт для транспортной компании". Ещё раз спасибо за Ваш труд!!)
лайк
даешь больше JS!
Круто! Сколько не пробовала научится верстке, но лишь по твоим урокам смогла понять саму её суть и то, как всё это работает. Спасибо большое! Смотрю, что первое видео 105 тыс. просмотров, а последнее около 7 тыс. просмотров. До конца дошел не каждый. Но я уже почти у финала!
как успехи?
С JS конечно мало что понял но за урок спасибо
Согласен. Изучаю ванильный JS, там много сложностей, а тут еще и jquery сразу, тяжко)
@@yurikosenko4833 как успехи?
10Q=)
Это действительно толковые уроки, на которых ты практикуясь, понимаешь что, как, зачем и почему!)
Большой респект автору за его труды!!!
Супер! Спасибо за ваши уроки!
0:50 время от начала видео, ты так смешно сказал слово "Меню", я прям улыбнулся). Ну просто очень забавно это звучит. А видео уроки реально классные, тебе бы преподавателем работать)) я бы с радостью поучился)
дак он вроде как и работает преподавателем, только онлайн)
Отлично! Спасибо большое!
пересмотрел этот курс еще раз. Прикольное разъяснение по jQuery
Спасибо за курс, добавлю в закладки как шпаргалку.
Большое спасибо за отличный урок!
Отличный курс, а этот урок наилучший, спасибо!
Спасибо за годноту! Даже мне - тестировщику всё предельно ясно и всё получается!
Ну как всегда... Только лучший контент, без соплей и воды.
Всё круто!!! Огромное спасибо!!!
Спасибо за курс!
Всем у кого возникают проблемы с тем или иным пунктом по JS, перепроверьте АААбсолютно все что вы дописывали в код.
Расскажу на своем примере:
я был уверен что у меня все написано четко и все-равно не работал Скролл --- оказалось я в html написал DATE-scroll вместо DATA-scroll. Визуально строчные "e" и "a" не сильно различаются поэтому долго не мог найти в чем дело.
+ не получалось прикрутить Слайдер, он у меня растягивал блок во все стороны, а второй слайд вообще был за пределами страницы, все перепроверил 10 раз....
оказалось забыл подключить слайдер в CSS(((
Спасибо за Ваш труд!
Очень полезно и понятно.
Побольше бы уроков такого формата и еще курс по javascript было бы вообще супер!
Всё очень круто! Спасибо!
Спасибо за годный контент!!!
Пишу комментарии редко, и это тот самый случай) очень круто объясняешь, замечательные уроки!) у тебя хороший голос и дикция) спасибо тебе огромное, ты очень здорово помогаешь, продолжай в том же духе!))))
+++
Очень круто!
спасибо за отличные уроки!
Контент годный!) Хотелось бы увидеть от вас сайт под ключ на каком-нибудь modx, wordpress. Отдельное спасибо за разжёвку JS.
есть у него под ключ видос на вордпрес, вроде раньше чем актив бокс) и вышли видосы по ДЖС
Привет курс понравился .Продолжай дальше
Спасибо за уроки!
Огромное спасибо за уроки! Делаю все буква в букву, но с "прыжками на слайдере" так и не справилась. При перезагрузке все равно прогружается второй отзыв на долю секнды его видно. Раз пять все переписывала ((( Наверное, все же что-то поменялось в js. Буду искать ответа. Но не это главное, главно, что я - человек, который никогда не занимался програмированием, а 27 лет работавший юристом, с легкостью понимаю все о чем идет речь, сама делаю сайт, меняю стили и т.д.! Вы талан обьяснения! Огромное спасибо за ваш труд! Процветания! И... надеюсь, вы уже в нормальной для процветания стране ;)
спасибо! скролл не работал с jquery подключонного локально - писал, что не имеет анимате.... подключил jq с гоогла- всё заработало.
У меня тоже скрол не работает с jquery подключонного локально и подключил и анимате не имеет подключил jq с гоогла тоже не работает.
Здравствуйте! Благодарю за видео!
на 29:05 про "прыжок" slidera при перезагрузке страницы
Спасибо!
спасибо за урок!) всё работает!
вродебы как интерпретатор запоминает весь js код по этому неважно где ставить removeClass navToggle . но я новичок, могу ошибаться. пишите почитаю
Все отлично даже в 22-ом году! За исключением момента с слайдером. Делаю ровно так, как Дмитрий с самого первого урока, но после подключения слайдера отзыв падает под картинку, да еще и коряво. Сами отзывы никак не получилось сделать слайдером. Они отображаются столбиком один за другим. Либо какие-то правила для js изменились, либо у меня коряво получилось что-то, хоть и делал один-в-один.
просто у тебя коряво получилось...
Дим здорово! Респект и важуха, начинал изучить веб 2 года назад с твоих уроков. Только вот насколько актуально в 2019 говорить о jquery? Было бы круто, если бы не jquery, а vue.js например
Спасибо! Курс годный) Хотелось бы немного видео о wordpress. Было бы очень интересно)
Спасибо большое!
Спасибо за ваши уроки, с меня лайк. К моменту на 22:20. Сам только учусь, поправьте меня если я не прав, из-за того что весь код расположен в $(function() {...}); для переменных создаётся область видимости на уровне функции, поэтому все работало.
Чуть более развернуто: В js есть 'поднятие переменных', те объявление переменной let nav, которая используется в функциях-обработчиках, условно поднимается на 2 строку кода и успешно захватывается в функции обработчики выше и ниже, в виде ссылки с первоначальным значением undefined, ошибки не происходит из-за того, что переменная не была использована в замыкании до того, как была инициализирована верным значением.
Вообще о 'поднятии переменных' видел инфо только касательно var, но похоже для let логика та же, разница только в области видимости.
Чтобы картинка в reviews-ах не обрезалась можно так дописать в css:
.slick-list { overflow: visible !important; }
Добавил, спасибо! Но почему-то при переключении отзыва, сначала появляется обрезанная картинка, а потом уже увеличивается до полного размера, не знаете в чем причина? Как бы срабатывает сначала режим hidden, а потом включается visible...
Почему у блока features id придается контейнеру, а в остальных блоках div'у? Только сейчас обратил внимание
Привет. Почему ты просто не передаешm id нужных блоков в атрибут href? В чем плюс использования js?
Да, тоже жду ответ
скорей всего чтобы задать скорость (плавность) прокрутки через JS
Отличный урок , шпаргалка добавлена себе. А можно все что связано с jq повторить в нативном js ? Хотелось бы посмотреть ваше объяснение. Спасибо
22:15 - @BrainsCloud, у тебя все работает (когда переменные объявлены после функции) потому, что запуск функции происходит по браузерному событию, а события срабатывают, т. к. макротаски, в самом конце (см. как работает eventloop). т. е. сначала срабатывает все тело скрипта, включая обычные функции, потом браузер начинает слушать события. Таким образом запуск функции идет в самом конце, после объявления всех переменных. Поправьте меня, знатоки, если я не прав.
22:50 почему может не убираться класс show при скролле? все писал,как в видео.
Еще для плавного скрола можно использовать css, scroll-behavior:smooth
крутой препод)
Дмитрий очень не хотел делать эти кружочки )))))
почему когда я дублирую reviews__item Для создания слайдов, второй отзыв просто пояляется под первым, и ничего не могу с эти поделать.
видимо команды для слайдов не применяются, хотя я все повторял как на видео.
+++
Почему-то height: auto; не поправил ситуацию в слайдере. Пришлось задавать в медиа свои height для разных устройств. Причем так, чтобы ничего не прыгало во время загрузки. В конце на видео видно, как происходит прыжок с 1 экрана сайта на текущий. У меня так же. Можно ли это как-то исправить?
П.С. Спасибо за этот курс (по-другому назвать не могу). Прекрасно скрасил карантинные будни!:)
Это божественно!!
Дмитрий, Спасибо вам за ваши труды! Подскажите пожалуйста, как сделать, что бы слайдер прокручивался автоматически?
Пожалуйста. В документации есть, почитайте. autoplay: true
@@BrainsCloud Спасибо!
Привет, а как можно реализовать несколько видов слайдера? В макете вначале страницы используются один вид стрелочек и навигации по слайдеру, а в конце лендинга уже другие стрелки и отсутствует навигация (dots)
точно так же, только для другого элемента инициализируете slick с настройками, а через цсс меняете внешний вид стрелок/кнопок
С fade: true слайдеру не нужно скрывать вылезающее (overflow: hidden), т.к слайдиться будет простой заменой одного элемента на другой, вместо привычного скролла, так что можно смело делать так:
.slick-list {
overflow: visible !important;
}
При этом важно еще убрать overflow: hidden у reviews__slider, оставить только фиксированную высоту (слайдер при этом не начинает прыгать)
оставить фикс высоту? А если блоки будут разного размера?
@@user-or1hy4xz8u Уже не помню что было в проекте, поэтому не смогу помочь, извини
псих, в хорошом смысле слова, как так научится верстать?
like1!!!
12:20 можно вызывать функцию до того, как прописал эту функцию?
Неlp😭, после того как шапку сделала, ничего не стало работать( бургер меню не открывается, слайде не убирается, так и есть 2е картинки. Как будто JS не работает вообще (
100 раз все точки запятые и буквы проверила( может от того что я в хроме делаю, что то не срабатывает и не подключается, не пойму(
16:29 в этом моменте подумал что у меня комп потух хД
подскажите плиз видео и таймлайн, где верстали бургер кнопку
Замучился подключать jquery + slick на Webpack, но я это сделал, все в этом вебпаке немного по-другому)
помогите с проблемой: "expected an identifier and instead saw 'let'", не могу никак решить
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
console.log(elementOffset);
выдает такую ошибку:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement. (app.js:29)
at HTMLAnchorElement.dispatch (jquery.min.js:2)
at HTMLAnchorElement.v.handle (jquery.min.js:2)
с чем может быть связано и как починить?
У меня такая же проблема(
Нашли решение?
Точно такая же проблема
у меня была такая проблема, дело было в том что я написал этот скрипт как бы внутри предедущего сурипта.
обротите внимание где заканчивается прошлый скрипт. этот скрипт должет быть только внутри главного скрипта function.
или где то не правильно id прописали.
Я не знаю ответишь ты или нет, но у меня несколько вопросов. Почему везде let и нигде не используешь const? Ведь многие переменные не меняются. А еще почему ты всегда передаешь обычную функцию, вместо анонимной (() => {}). Буду благодарен, если ответишь. Разницы как бы особо и нет, но всё же сейчас так в основном пишут вроде) Спасибо
у автора много косяков, увы, но это хороший стимул к самообучению и гуглению!
9:00 проблема появилась.
У меня работает навигация, но шапка не перемещаеться сомною. Как исправить? До этого шапка перемещалась.
Сделал все как на видео, все работает, кроме reviews, текст под которыми все равно скрыт под фото((( Помогите пожалуйста
Дмитрий спасибо огромное за курс!!!
Делал сначала MOGO застрял на JS - отложил.
Перешел на этот курс, все очень доступно, но застрял на слайдере, подскажите пожалуйста на сентябрь 2022 урок по слайдеру актуален, или что то изменилось?? Или я просто криворук!!??
вроде ничего не менялось
@@BrainsCloud Не подключается слайдер через HTTPS, скачал на ноут стационарный файл slick.min.js теперь пытаюсь настроить по уроку!
Переделал весь код под JS. Это не просто.
подскажите пожалуйста что делать если меня на телефоне не работает? Нажимаю на кнопки в меню они вниз не делают
Дмитрий, а если все работает нужна ли функция checkScroll?
У меня тоже такая ситуация
Это просто перестраховка и демонстрация возможностей джаваскрипта) Функция не обязательна
Подскажите пожалуйста почему у меня arrows: folse не скрывает кнопку. Буду очень благодарен.
false
в reviews у меня на пк и на телефоне бывали слишком большие отступы, оказалось .
slick-slide {
height: 100%;
}
просто пришлось поменять на значение "auto"
когда мы создавали li) что-то не видел)
Пожалуйста сделайте видео урок слайдер на Jquery, или быть может такое видео уже есть то скиньте ссылку на него в комментарии, спасибо уроки просто супер,качественный контент.
в этом уроке есть слайдер
BrainsCloud хотелось бы слайдер на jquery.
На 23 минуте ошибка в логике) Когда мы нажимаем на бургер, тогда сразу появляется переменная nav и класс show. Соответственно когда мы нажимаем на элемент [data-scroll] то переменная nav уже 100% существует с классом show, т.к. без них мы просто элементы меню бы не увидели) . Выносить переменную было не обязательно)))
у автора много косяков, увы, но это хороший стимул к самообучению и гуглению!
Почему со слайдером вообще ничего не получается? Может библиотека не подключилась? Из-за чего она может не подключиться?
У меня было из-за банальной невнимательности, я диву rewiewsSlider присвоила класс в место id. Проверьте код.
@@user-gw8mc4ng6h спасибо огромное, я уже весь код перечитал и если бы не ваш комментарий то хз что бы делал)
@@HISTEL Здорово, очень рада, что вам помогло) Удачи в дальнейшей вёрстке)
Скачал вашу вёрстку. Консоль показывает у вас 11 ошибок с JQ, и горизонтальный скролл. У меня тоже горизонтальный скролл есть, при любой ширине экрана.
1
Правильно что шапку переделали, а то она при перезагрузке страницы в браузере Firefox пропадала)
это конечно хорошо но зачем для простого такого скрола джаваскрипт? это все элементарно ж в html есть...
а плавность и анимация?
Спасибо большое за уроки! Очень крутые.
Если есть возможность, помогите, пожалуйста, у меня, почему-то, в строке "let elementOffset = $(elementId).offset().top;" проблема, в IDE все норм, ошибок не выдает, а когда в браузере начинаю проверять в консоли появляется сообщение об ошибке: app.js:29 Uncaught TypeError: Cannot read property 'top' of undefined
перепроверил код, вроде все так же как у вас в уроке, попробовал загуглить, какие решения нашел в интернетах не помогают..не понимаю в чем проблема(
подозреваю, что ты не туда прописал ссылки в html (не здесь href="#", а здесь data-scroll="#NAME")
У меня тоже также было, оказалось ошибка в:
let elementId = $(this).data('scroll');
Слово Id написал как ID
Мб не у меня одного такая пробелма ? Подключил слайдер , сделал всё, как делал Дмитрий, но функции слайдера не работают
let slider = $("reviewsSlider");
slider.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
arrows:false
Ничего из этого не работает при этом в консоли нет ошибок. Шо делать....
чего-то у меня не с новой строки 15:40
ай ай
где ж его искать ошибку
Знаю что поздно наверняка, но те у кого такая же проблема возникла, проверьте, делали ли вы в десктопной версии .nav { display: flex; }, у меня не было, поэтому я дописала там вверху свойство, а в медиа запросе только flex-direction: column;
Записался на курсы по фронт энд, хожу в офис слушаю уроки и т.д. но тут знаний получаю в 10 раз больше! У меня появился вопрос по скролу, в чём смысл писать его через JS если в HTML есть якорные сылки?
плавность, анимации
@@BrainsCloud точно, спасибо
ну это же возможно всё сделать только при помощи html и css?
возможно, но выйдет криво, сложно и некрасиво. неужели не хочется учить Js?
@@osayo3324 ну я так считаю, что нужно стремится к простоте. Ну а вообще изучая JS конечно вижу много возможностей
Ошибка CCS2: 1, статус 400, где это искать?
Олеся здравствуйте. Исправили ошибку?
jQuery не умеет работать со стрелковыми функциями?( const checkScroll = (scrollPos, heightIntro) => {
}
А нельзя сделать так(чтобы автоматически выравнивать наше перемещение по ссылке):
let headerFH = $("#header.fixed").height();
if(headerFH == undefined){
header.addClass("fixed");
headerFH = $("#header.fixed").height();
header.removeClass("fixed");
}
$("html, body").animate({
scrollTop:elementOffset - headerFH
}, 700);
Error: parsing error: Unexpected token header
Дим привет. Знаю, ты не обязан отвечать, но я уже 3 часа не могу понять в чем дело. Я уже сделал ДОМ дерево слайдера 1 в 1 как у тебя, но чертов слайдер исчезает вверху и появляется внизу и наоборот. В итоге у меня двойная высота слайдера и ширина, так как внизу он появляется на позиции - 1170 pх. Я уже хз шо робить. Буду благодарен за хелп....
Dextersium попробуйте этот вопрос задать в нашем телеграмм чате - htmlbase
@@BrainsCloud спасибо , задам там
Тоже потратил очень много времени и всё чего добился -- второй блок просто исчезает, будто покрывается под другим. В элементе кода первому придаётся opacity 0, но на его место второй не появляется. До того как скрывали элементы уходящие за пределы блока, он также был где-то внизу слева. Вам удалось решить эту проблему?
@@iliavasileff решил, напишите мне вечером, скину вам кусок кода
@@dsim2632 хорошо! Благодарю за столь быстрый ответ!
12 мин
Печально видеть когда верстальщик в какой-то момент забивает на макет и делает по принципу «и так сойдет». Это я про обрезанную каринку в блоке отзывов и точки. В реальном проекте на этапе дизайн-надзора по этому блоку прилетели бы правки от меня))
скроллинга нет никакого) пролистываю страницу, жму download или еще что из этого ряда и перенаправляет в самый верх страницы))) получился скроллинг наоборот)
называется для начинающих, но jquery тут не особо простой в уроке.
Я вообще не понял. тупо повторял
Здраствуйте уважаемый Дмитрий Валак!
Я вот что подумал, если вы бы вместо jQ использовали "якоря" в html что бы изменилось?
С уважением к вам от меня.
а плавность как сделать? smooth в css плохо еще работает и хз когда норм будет...
@@user-or1hy4xz8u я не писал в css я писал в js так
попробуй)
$(function() {
// Smooth scroll
$("[data-scroll]").on('click', function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
});
Спасибо!
Спасибо!