Наткнулся на подводный камень. Может подскажете как реализовать. Есть необходимость - в рамках адаптивной верстки менять родительский блок для определенного контента..а конкретнее (при больших разрешениях а 1600-1900) у сайта есть 2 сайд бара (левый и правый). но если разрешение меньше 1500 то правый сайдбар переходи в левый... реализовано на js.. проверяем разрешение экрана если разрешение меньше 1500 проводим операцию перемещения контента в другой блок (innerHTML). Но. ведь на больших мониторах пользователи могут менять размер окна браузера.. тоже нужно учитывать: реализовал следующим образом.. стоит функция window.onresize ........ срабатывает если пользователь меняет размер окна. но.. для корректного отображения данных нужна перезагрузка браузера.... - то есть... то есть наша задача просто отловить сигнал и если размер менялся перегружаем - а там справится с данными первый алгоритм.. - все работает все отлично (на десктопах..) И вот тут появился появился подводный камень. на все (на всех) смартфонах, мобильных устройствах.. (разрешения 320-1024).. постоянно срабатывает функция window.onresize... у меня нет мобильного интернета сам глянуть это происходит не могу.. но судя по показаниям веб веб-визора это происходит когда пользователь делает прокрутку экрана вниз...... (для пользователя это не сильно заметно- сайт работает быстро и при перезагрузке попадает в нужную точку страницы, но происходит бешеная накрутка показов.. средний показатель 20 перезагрузок в 1 минуту..(ну так оно и получается - на чтение экрана в телефоне уходит секунды 2-3+- и юзер крутит вниз и оно срабатывает ... ))... я пределал временный костыль первый алгоритм JS проверяет разрешение экрана (окна браузера) и если оно меньше 1024 то window.onresize уже не включается (простые условия иф). И вот опять - казалось бы все устроило. но есть один неприятный момент: НА ПК: 1 ) пользователь может уменьшить размер до 1000 по ширине или меньше а потом увеличить 2) с начало открыть у маленькоv окне а потом увеличить. то есть.. переход контента с правого сайдбара в левый переходит отлично... а переход обратно не знаю как отлавливать сигнал когда это нужно делать... что то вот уже 2 недель бьюсь ничего толкового не придумали.. может кому удастся подскать.. - алгоритмы сами не нужны, (но не откажусь если будут и скажу второе спасибо) но мне бы что - тут можно попробовать ???? Конечно лучше 1 раз увидеть проблему, я мог описать непонятно вот пациент https://anonado.ru (уменьшите ширину окна браузера на 1000pх потом увеличьте до 1400 или больше (у кого разрешения такого нет боюсь вы не поймете)) и увидите косяк..(если нажмете - перегрузить браузер- оно все станет на свои места - но нужно чтобы оно как то само.... .).. И.Отдельное спасибо тем кто подумал но ничего не придумал!
ой ( + вопрос 1a)) а подскажите, где взять такую же кнопочку моргающую, как на аватарке - я тоже такую себе хочу
да эт гифка небось какая-нить )) вломы лезть в инспектор -) --- Добавлено --- ...не вломы)) это оказалась не гифка, а весьма такой навороченный CSS )))))))) --- Добавлено --- Ну, вообще, такие вещи принято делать на CSS Я бы сделал с помощью flex Но сейчас вроде еще какая-то grid появилась (сам с ней пока не работал, не в теме)
@Roman __construct там в блоке аватарки прописан класс этого маркера - надо слазить css посмотреть, что там.. щас работы оч. много на досуге. .. .. . . плохо если гифка - мне такой цвет не подходит.... И - если да обрати внимание какая интересная реализация - круг когда "тает" - налезает на конец блока за черту... делать просто версткой - оно того не стоит. (очень громоздкий будет). код нахлабучивать.. а вот JQ может легко... в общем - цель есть - вопрос лишь во времени!... но это мелочи. первый вопрос важнее. вопросов куча и все технически сложные.. будем потихоньку это.... того .... по порядку
я тебе набросал на CSS как это можно сделать, ибо JS используют для таких вещей только если не остается другого выхода)) ну, типа бест практис и всё такое прочее)): Код (CSS): <!doctype html> <html lang="ru"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { width: 100%; display: flex; flex-wrap: wrap; } .one { background-color: aqua; width: 20%; } .two { background-color: blue; width: 60%; } .three { background-color: crimson; width: 20%; } div { min-height: 200px; } @media (max-width: 800px) { .two { width: 80%; } } </style> </head> <body> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </body> </html>
@Roman __construct, признаться не совсем понял...вижу что .two меняет параметр ширины........ просто смена параметров никак не катит... там казалось бы есть возможность float.right изменить на float.left... - но происходит наложение блоков друг на друга... вот потому и js что ничего не придумали - мне этот вариант подсказали идея а сам алгоритм мой .... я с начало долго лазил спрашивал может ли во эта "команда" @media (max-width: **00px) давать сигнал JS чтобы не проверять кодом ширину (вот работает то что надо - без перезагрузки) Но ответа не нашел и и надела костылей ..... вот пока работает как говорится что и так сойдет (по веб визору смотрю - вроде все нормально.... ) Но все равно надо думать как заделать этот бах пусть даже костылем.... - тото и оно что костылем не знаю как.... есть идеи но они очень громоздкие все.. надо проверять, потом переменные хранить временно, потом их удалять .... ох.. а тут же других задач полно.... (вот щас подниму вопросик еще один .....)
А ты это в браузере хоть открыл? Смотрел как оно работает? Соответветственно точка перехода 800px по ширине - можешь поменять на любую другую. Этот код делает ровно то что тебе нужно и без всякого джаваскрипта.
или я что то не понял или ты вот кусочек моего css Код (Text): @media screen and (max-width: 1390px){ .content { padding: 0 10px 0 340px; } .right-sidebar { width: 0px; margin:0 0 0 0; paddind:0 0 0 0; } .img550{ width:50%; float:left; margin:0 15px 10px 0; } и таких точек у меня несколько но не хватило знаний умений реализовать такими средствами нужную мне задачу.
Ок, если ты будешь так продолжать - у тебя есть все шансы стать Елисеевым Но мы поступим иначе вот примерный алгоритм: 1. Скопируй код который я разместил выше в локальный файл с расширением .html и открой его в любом браузере. 2. Подвигай окно браузера туда-сюда изменяя его ширину в диапазоне от 500 до 1000px 3. Ведут ли себя блоки таким образом, который тебе нужен? 4. Если да - задавай вопросы по коду. 5. Если нет - расскажи что именно в их поведении не устраивает? Хорошо?