Динамический адаптив // Быстрая адаптация сложных объектов на JavaScript

Динамический адаптив - призван помочь верстальщику быстро адаптировать сложные элементы макета. Реализована функция на JavaScript
Динамический адаптив на GitHub: github.com/FreelancerLifeStyl...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

🤟 Ну как вам? 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@priyadewangan7046]

I m still waiting for your make video in English language . please try to do that because you share amazing knowledge. And those things I learn from you

[@FreelancerLifeStyle]

Tnx) I`ll try

[@artembalandin]

Ваня под Олей). Все круто. Спасибо!

[@user-ph4sl9vx3w]

Супер! По полезности для меня на уровне галпа х)

[@user-ph4sl9vx3w]

@@FreelancerLifeStyle Можно предложить тему для следующего видео?) "Как правильно оценивать свой труд фрилансерам"

[@igarok881]

Ахахах, 2:40 на нужном разрешении - Ваня окажется под Олей. Жизнено)

[@FreelancerLifeStyle]

Хех) Это да)

[@MrAlexander88m]

Печалька)))

[@vadikcvirko179]

@@FreelancerLifeStyle куда заносить $ за динамический адаптив

[@FreelancerLifeStyle]

@@vadikcvirko179 ну он в свободном доступе) но если есть желание помочь можно оформить подписку тут www.patreon.com/freelancerlifestyle. Лучше с нового месяца

[@Pro10056Bah]

HTML камасутра для самых маленьких!))) Спасибо за Ваш труд.

[@FreelancerLifeStyle]

Хех) Пожалуйста!

[@user-wy1qd5oi3v]

🤣🤣🤣

[@user-su7kh9kr9q]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@SDV-code]

а это потому что, человек мастер своего дела :) профи / бог вёрстки :)

[@kar1kam1]

порадуемся за Ваню, надеюсь у них с Олей всё будет хорошо на речке

[@FreelancerLifeStyle]

Это да)

[@lera6580]

не думаю, там Аня мельтешит)

[@user-om4bq8uf1s]

@@lera6580 почему? тройничок же))))

[@maliksoltukiev5961]

Как же это удобно и быстро, огромное спасибо, буду во всех проектах использовать. За такое грех не поставить лайк и подписаться.

[@FreelancerLifeStyle]

Спасибо!

[@user-hd3lx8qc7s]

Крутая фишка, часто сталкиваюсь с клонированием отдельных частей кода как в примере на видео. + еще один способ для качественной работы в копилку. Спасибо Фрилансер по жизни 😉

[@FreelancerLifeStyle]

Пожалуйста!

[@antonpolishko1553]

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

[@yaetoya8629]

Спасибо вам большое 😻🙏🏼 Ещё не встречал более понятного и полезного контента как у вас

[@FreelancerLifeStyle]

Спасибо!

[@vladcherkasov3247]

Определенно ЛАЙК!!! КАЧЕСТВО, ПОДАЧА, ЮМОР - всё на высоте! Не понимаю людей у которых рука подымается на этом канале ставить дизлайки. Ну дай Бог им крепкого здоровья и чтоб у них никогда не крутили суставы на указательном пальце правой руки.

[@wic1632]

Ваши ролики всегда подымают настроение!!! Спасибо! Так держать!

[@FreelancerLifeStyle]

Спасибо!

[@777bujhm]

Спасибо за прекрасную сказку)), все круто, ты как всегда несешь только нужную и полезную инфу!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-cz3ut4tm4q]

Огромное спасибо! За подробное демонстрацию, и за просьбу о которой написал буквально на днях по поводу этого видео в комментарии :)

[@user-jz5cd5uu8w]

Добрый день! Благодарю, Женя! Крутой лайфхак очень полезный в работе!Чувствуется большой опыт и количество версий автоматизировать этот процесс! Спасибо, что делишься своими наработками! Успехов, новых достижений, интересных проектов и постоянных заказчиков!👍🤝🙂

[@andreiribac6284]

От души спасибо! Великое дело делаете!

[@k.antonov]

Переживаю за отношения Оли и Вани больше, чем за свои)

[@FreelancerLifeStyle]

Ахаха)

[@moi-nick-zanyat]

особенно когда Аня поехала за Ваней , который поехал к Оле xD прям сантабарбара))

[@bruno_lider7177]

Жень, это ТОП! Спасибо огромное, как раз сейчас это нужно для разработки расписания. Насколько круто проработал рассказ, что так всё понятно и просто, ОДНОЗНАЧНО ЛАЙК!

[@FreelancerLifeStyle]

Спасибо!

[@bruno_lider7177]

@@FreelancerLifeStyle Жень, скажи пожалуйста, можно ли данный скрипт настроить под скроллинг (тоесть при скроллинге на определенное место, обьект вклинивается в какое-то место) или он работает только на ширину?

[@tranedev]

Когда вижу дизлайки под твоими видео, то ощущение, что люди случайно туда нажали, так как контент всегда огонь, спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@user-vk1kb3xj6b]

Очень познавательный урок! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@nikolay7618]

Как всегда классная подача, отличный материал! Очередное спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@juh19855]

ты суперовый учитель! талант! преподносишь материал шикарно!!

[@FreelancerLifeStyle]

Спасибо!

[@st.schultz5871]

Величезное спасибо,подача вообще шикарная и веселая )

[@FreelancerLifeStyle]

Пожалуйста!

[@user-eb5zg9qp4l]

Жека, это нереально круто) спасибо за твои труды)

[@dmitriykurtsev2427]

Очень круто, хочется по больше ваших велосипедов)

[@FreelancerLifeStyle]

Спасибо!

[@arikgevorgyan809]

Это весьма крутая штука, особенно для менюшки сайта😁 Спасибо тебе)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-en4cc9jg5c]

Большущее спасибо! Очень выручило!)))

[@user-hd3lx8qc7s]

Простота подачи - залог успешного преподавания. Сам начинал учить js по Нику Моргану, где все обьясняеться по детски на пальцах, но именно такая подача берет учеников своей простотой. Кажется вроде бы «ну все же так как будто для детей» - а нет! Все сложное становится простым. Продолжайте в том же духе, и успехов вам, Евгений!

[@FreelancerLifeStyle]

Спасибо!

[@krassnow8963]

Ух ты, вот это очень полезно, круто! Обычно такая функция требуется при адаптировании меню сайта, обязательно попробую использовать, спасибо!

[@ealinn]

Это космос!) так круто и так просто) я в восторге!!!

[@FreelancerLifeStyle]

Спасибо!

[@nataanikina549]

Шекспир просто отдыхает.... :)))) Главное, переваривается вся информация хорошо ! Спасибо!

[@dragonbugfrozzen5559]

ТОП! Всегда узнаю что-то новое!

[@FreelancerLifeStyle]

Спасибо!

[@user-in1en4sl9y]

да, дядька хорош. Правда 99% таких задач, занудными(усложнёнными) флексами решаются с order , и вариациями позиционирования. Использование js в вёрстке, дурной тон как бы

[@qwekle456]

Ништяк, лайк!

[@FreelancerLifeStyle]

Спасибо!

[@TatyanaDavidovich]

Только сегодня узнала, что существует день фрилансера и это 14 мая! Жека, с днем фрилансера тебя! И успехов тебе во всем! Видео как всегда топ!🤟

[@FreelancerLifeStyle]

Спасибо большое!

[@user-wf4np1ne2c]

Оригинальная идея для подачи урока)) спасибо!)

[@FreelancerLifeStyle]

Пожалуйста!

[@urydmi]

Давно подписан и смотрю, хотя бэкендер) Отличный канал, отличная подача и монтаж, контент на уровне) спасибо)

[@FreelancerLifeStyle]

Я рад!

[@ozirisdark6449]

После фразы "покажу на примере вот такой вот жизненной ситуации" можно разбирать на цитаты. Лайк!))

[@Valera197615]

Большое спасибо за Вашу работу! Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! Thanks so much for your video! Ďakujem vám veľmi pekne za prácu! Ďakujeme vám za vaše video! Nagyon köszönöm munkáját! Nagyon köszönöm a videót! Dziękuję bardzo za twoją pracę! Dziękuję bardzo za Twój film! Děkuji vám za vaši práci! Děkujeme za vaše video!

[@FreelancerLifeStyle]

Пожалуйста!

[@realisttt]

Огромное спасибо! Очень помогло!

[@bogdankozlovskiy715]

Спасибо за Ваш труд.

[@SDV-code]

так хотел попробовать и наконец-то пригодилось, крутая штука, спасибо :)

[@AlexS-dl7cs]

Как всегда шедеврально ))). Хорошо, что Оля с Ваней квадратики))), а то контент был бы от 18+))). Нужно на Ютуб канале придумать Оскар для преподов по верстке. Женя, ты бы уже был бы Оскароносным преподом)

[@user-oz5qj2dj6v]

Спасибо Евгений. Крутая штука!!!

[@elif.3258]

Какая же это классная штука все таки. И виджет для погоды, и адаптивные изменения размеров текста и прочего, и шпаргалки ваши. Спасибо🥹

[@user-ri1ry7sx6p]

Жека, поздравляем тебя с Днём фрилансера ! Продолжай и дальше радовать нас своими уникальными уроками. Ты войдешь в историю ютуба , как самый топовый канал по IT ! Нас уже 60к ! ! ! , топим до сотки к началу осени )).

[@FreelancerLifeStyle]

Спасибо!

[@const-shish]

Спасибо за качественный контент

[@cameronclass659]

Спасибо. Как раз сейчас понадобился на сайте которую я верстаю

[@user-fh7uq3jy5o]

Женя, как всегда, все круто! Хотелось бы увидеть видео по сайд барам и как их правильно делать

[@annagrigorewa]

Женя, спасибо!

[@FreelancerLifeStyle]

Пожалуйста)

[@stuff5738]

Просто спасибо за то, что ты есть, Жека!

[@Aisponch]

Так то прикольно и удобно, если ты начинающих и мало ещё заком со всем этим. Молодец и большое спасибо

[@KennyBoss]

Ураа Спасибо Женя ты красавчик, удачи тебе

[@user-bb2dl4vp7f]

Спасибо за контент! Учусь верстать по твоим урокам и еще заглядываю в JS. В голове не укладывается сколько нужно еще всего изучить... Знаю, что ты самоучка и учился скрипту изначально неправильно, вроде ты это говорил. У меня тоже возникла идея облегчить себе жизнь адаптивной переброской элементов, посмотрев твой самый первый стрим. Узнал подробнее о современном медиа запросе в JS и современном редактировании документа, я себе написал динамический адаптив на 30* строчек кода. Подобных проблем как в этом видео вроде не возникает. Уверен, у тебя получится! Управление из data вроде самое медленное, поэтому пишу в js: Исходная функция это класс, которая умеет запоминать элементы. Метод: ( "Медиа запрос", "Каким образом вставить", Куда вставить ). Если захочешь так сделать, то возникнет проблема и возможно ты уже столкнулся. "Каким образом вставить" А именно: "afterend" и "afterbegin". Вставляют сначала первый элемент, а затем второй перед первым, в итоге при переброске выстраиваются задом наперед. Решил это так. У объекта есть метод превращающий его в массив. У массива есть метод reverse! Живи! Работай в свободное время!

[@haskvel]

Блин, как всегда круто. Взято на вооружение!

[@FreelancerLifeStyle]

Круть!

[@yatimoha]

2:45 Ваня оказывается под Олей)))

[@FreelancerLifeStyle]

Всякое бывает)

[@Chernogorez]

это уже камасутра ))

[@solomon8540]

@@Chernogorez It-камасутра*

[@daniyaribrayev7370]

Сразу лайк и комментарий!)

[@FreelancerLifeStyle]

Спасибо!

[@igorsazonovi3473]

Спасибо,Жека!!

[@FreelancerLifeStyle]

Пожалуйста!

[@zelenyigor6919]

Спасибо, жирный лайк )

[@FreelancerLifeStyle]

Спасибо!

[@crazybogdancool709]

Круто! Клас! Супер! Дякую за твої старання! ( ;

[@irina-s]

Однозначно лайк!)

[@FreelancerLifeStyle]

Спасибо!

[@user-tk7qv9rv2c]

Спасибо, надо потестить!!!

[@DK-ue5uf]

Переживал за Ваню и Олю больше чем за себя )

[@FreelancerLifeStyle]

Ахахах)

[@aero000]

Ору, в футере написан "Я в подвале :("

[@front-endanimal6359]

я гречка!

[@user-ek4bo5wl6w]

супер! мои вам аплодисменты!!)))

[@urihlanz6181]

Это гениально!

[@user-wy1qd5oi3v]

Вот это круто 👍👍👍

[@FreelancerLifeStyle]

Спасибо!

[@grokhotun]

Жека, привет! Отличный материал, спасибо. Очень много черпаю для себя из твоих мастер-классов, развиваюсь в front-end'е. Хотелось бы узнать, будет ли от тебя верстка многостраничного макета? Необязательно все страницы, 3-4. Хочется увидеть процесс от тебя, как ты все делаешь ) В формате мастер-класса. Желательно чтобы макет был сложненьким!)

[@samdurrant8645]

Лайк за такую качественную подачу и видео. Спасибо! ) P.S. Давно не видел, чтобы хромакей настолько качественно делал своё дело

[@user-wy1qd5oi3v]

Кстати, да ☝️👍

[@FreelancerLifeStyle]

Пожалуйста!

[@dimitriitkach7697]

spasibo za - Динамический адаптив // Быстрая адаптация сложных объектов на JavaScript

[@user-vn1ho3gu5b]

Здорово!!!!!!!

[@FreelancerLifeStyle]

Спасибо!

[@boldureans]

Круто, Жекичь)

[@FreelancerLifeStyle]

Спасибо!

[@nickynicky5493]

Ингредиенты для «Оладьи на кефире "Идеальные"»: Кефир - 0,5 л Яйцо куриное - 1 шт Сахар - 1,5 ст. л. Соль - 1/3 ч. л. Мука пшеничная / Мука (стакан 250 мл = 160 гр) - 2,5 стак. Сода - 0,5 ч. л. Масло растительное (для жарки)

[@AbraKadabra000]

Блестяще!!!

[@kishkish1632]

Оч круто!!!! Пора крутить педали))))

[@FreelancerLifeStyle]

Пора!

[@2011vengertaras]

Пушка бомба

[@ssssheva]

годнота подъехала)))))

[@FreelancerLifeStyle]

Спасибо!

[@user-vn1ho3gu5b]

Динамический адаптив это произведение искусства!!!!

[@FreelancerLifeStyle]

Спасибо!

[@Kuanysh7707]

Супер!

[@FreelancerLifeStyle]

Спасибо!

[@Agasevi4]

Развивайся и нам не давай деградировать! Мне понравилось! Возьму себе на заметку. Я один раз решал такую проблему переносом с помощью позиционирования absolute. Продолжаю следить за каналом, тебя рекомендую своим знакомым.

[@FreelancerLifeStyle]

Спасибо!

[@IgorBobyrev]

Это плохая идея, с абсолютом. Если объект далеко перемещается с исходной позиции, он при ресайзе экрана будет гулять

[@user-qu9yl6bv6m]

Видео топ!!! Полезность: 100% Крутость: 100% Копипаст: снижен до минимума

[@FreelancerLifeStyle]

Спасибо!

[@qAntBcn]

всмысле 100? 100500 же! )

[@maximshevchenko6202]

@@qAntBcn содержимое выйдет за рамки а это не хорошо, так что пусть будет 100% и 100500px размер родителя

[@user-jm7en7vp4h]

Лучший, просто спас

[@andreytarasenko1914]

Очень крутая разработка! Спасибо большое! Планируется ли данная сборка заноситься в npm?

[@krassnow8963]

Очень лайк!

[@WebDev_51]

Жека , зачётно 👍👍👍

[@FreelancerLifeStyle]

Спасибо!

[@andreypolkeyev6595]

Вообще пушка

[@FreelancerLifeStyle]

Спасибо!

[@MegaTesei]

Классный код. Спасибо за ссылку.

[@maincoder_ru]

Жека, привет! Много внедрил в свою работу из твоего примера. Спасибо тебе за твою харизму - ни у кого их моих знакомых и друзей такого отношения к работе нет, как у тебя!!! Не знаю как обратиться к тебе в личку....Поэтому пишу здесь. Как ты относишься к тому, что нужно мотивировать подрастающее поколение? Мой мелкий в свободное от учебы время сидит за сетевыми игрушками. Я своим примером пытаюсь ему донести, что денег и признания он на этом не заработает, но, как известно из психологии, люди послушают только того, кто не ругает их за то, что не убрался в своей комнате🤨. Из-за этого и вопрос и просьба: можешь ли ты выпустить видео, которое смотивирует пацана заниматься нашим общим делом, не тратя драгоценное время жизни на бездумные игры в интернете? Думаю, что многие будут тебе благодарны за это!!!!

[@user-tl5tr6ds3d]

Супер, лайк

[@saglins1294]

Здравствуй! А можешь подсказать, нужно ли будет использовать флекс боксы для работы такого динамического адаптива?

[@user-np9mq5xc7j]

Круто!

[@olezhonnv3215]

Еще как вариант, чтобы индексы не вычислять постоянно, можно в скрипте для всех элементов, которые перемещаются, создать плейсхолдеры - дивчик с дисплей ноне свойством. Поинсертить их в ДОМ дерево там где надо быть элементу по событию. И там куда надо вернуть элемент. Создать их на этапе инициализации и сохранить в свойствах объектов, там где оригинал позишен. Это типа меток для инсертБефоре будет. И не надо по чилдренам туда-сюда бегать. А просто делать инсерт бефоре для плейсхолдера, связанного с элементом, который перемещается. И так же обратно. На сео и верстку плейсхолдеры не повлияют по идее. Они на страницу заинсертятся в скрипте, в хтмл -- их не будет.

[@mishagarkach]

Поставил лайк за мгновение до появления человечка с лайком. Синхронизация :)

[@lera6580]

по сути, недавно сталкивалась с подобными дублями по коду. Без них ну вообще никак не получалось решить вопрос. Конечно, на весь проект всего 2-3 дубля, точно уже не помню, но все равно было ощущение, что этот костыль можно как-то обойти и вот решение. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@xdarkfenixx]

Смеялся в голос во время просмотра! Очень позитивно) касаемо скрипта вопрос-он обновляет/рендерит весь DOM?

[@FreelancerLifeStyle]

Нет только часть

[@user-lt2ku4vv2q]

то чувство когда ты Бета - тестер этого чуда =)

[@FreelancerLifeStyle]

Мало того, идейный вдохновитель)

[@whoisleshalight8514]

Спасибо))

[@romandanik4627]

Привет Жека! Спасибо за видос. Слушай а будут видео про формы связи что б сообщение на почту приходило?

[@kotlancer]

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

[@user-rp4xr6vf2m]

Жека - МЕГАПОЗИТИВ!)))

[@user-lc8kx6le2x]

Жека! Я честно доначу по 2 бакса в месяц на патреоне. Начну зарабатывать на вёрстке - проставлюсь! Спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@olegryazanov5926]

Ахахахахаххаа! "При нужном разрешении Ваня оказывается под Олей"))))))

[@whiterhino752]

Мастер, а как сделать, если например один и тот же объект нужно поменять несколько раз, например сначала скинуть его к оле на 992, а на 768 скинуть к бабушке?