За последние 24 часа нас посетил 5771 программист и 619 роботов. Сейчас ищет 121 программист ...

Смена родительского Блока (адаптивная верстка)

Тема в разделе "HTML и CSS", создана пользователем anadonam, 10 янв 2020.

  1. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    Наткнулся на подводный камень.
    Может подскажете как реализовать.

    Есть необходимость - в рамках адаптивной верстки менять родительский блок для определенного контента..а конкретнее (при больших разрешениях а 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 или больше (у кого разрешения такого нет боюсь вы не поймете)) и увидите косяк..(если нажмете - перегрузить браузер- оно все станет на свои места - но нужно чтобы оно как то само.... .)..

    И.Отдельное спасибо тем кто подумал но ничего не придумал!

     
  2. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    ой ( + вопрос 1a))
    а подскажите, где взять такую же кнопочку моргающую,
    как на аватарке
    - я тоже такую себе хочу :)
    images.png
     
  3. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    да эт гифка небось какая-нить ))

    вломы лезть в инспектор -)
    --- Добавлено ---
    ...не вломы)) это оказалась не гифка, а весьма такой навороченный CSS ))))))))
    --- Добавлено ---
    Ну, вообще, такие вещи принято делать на CSS

    Я бы сделал с помощью flex

    Но сейчас вроде еще какая-то grid появилась (сам с ней пока не работал, не в теме)
     
  4. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    @Roman __construct там в блоке аватарки прописан класс этого маркера - надо слазить css посмотреть, что там.. щас работы оч. много на досуге. .. .. . .
    плохо если гифка - мне такой цвет не подходит....

    И - если да обрати внимание какая интересная реализация - круг когда "тает" - налезает на конец блока за черту... делать просто версткой - оно того не стоит. (очень громоздкий будет). код нахлабучивать.. а вот JQ может легко...

    в общем - цель есть - вопрос лишь во времени!... :)
    но это мелочи. первый вопрос важнее.
    вопросов куча и все технически сложные..
    будем потихоньку это.... того .... по порядку
     
  5. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    я тебе набросал на CSS как это можно сделать, ибо JS используют для таких вещей только если не остается другого выхода)) ну, типа бест практис и всё такое прочее)):

    Код (CSS):
    1. <!doctype html>
    2. <html lang="ru">
    3.  
    4. <head>
    5.     <meta charset="utf-8" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     <style>
    8.         .container {
    9.             width: 100%;
    10.             display: flex;
    11.             flex-wrap: wrap;
    12.         }
    13.      
    14.         .one {
    15.             background-color: aqua;
    16.             width: 20%;
    17.         }
    18.      
    19.         .two {
    20.             background-color: blue;
    21.             width: 60%;
    22.         }
    23.      
    24.         .three {
    25.             background-color: crimson;
    26.             width: 20%;
    27.         }
    28.      
    29.         div {
    30.             min-height: 200px;
    31.         }
    32.      
    33.         @media (max-width: 800px) {
    34.             .two {
    35.                 width: 80%;
    36.             }
    37.         }
    38.     </style>
    39. </head>
    40.  
    41. <body>
    42.     <div class="container">
    43.         <div class="one"></div>
    44.         <div class="two"></div>
    45.         <div class="three"></div>
    46.     </div>
    47. </body>
    48.  
    49. </html>
     
  6. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    @Roman __construct, признаться не совсем понял...вижу что .two меняет параметр ширины........

    просто смена параметров никак не катит...
    там казалось бы есть возможность float.right изменить на float.left... - но происходит наложение блоков друг на друга...

    вот потому и js что ничего не придумали - мне этот вариант подсказали идея а сам алгоритм мой ....

    я с начало долго лазил спрашивал может ли во эта "команда" @media (max-width: **00px) давать сигнал JS чтобы не проверять кодом ширину (вот работает то что надо - без перезагрузки) Но ответа не нашел и и надела костылей ..... вот пока работает как говорится что и так сойдет (по веб визору смотрю - вроде все нормально.... ) Но все равно надо думать как заделать этот бах пусть даже костылем.... - тото и оно что костылем не знаю как....

    есть идеи но они очень громоздкие все.. надо проверять, потом переменные хранить временно, потом их удалять .... ох..
    а тут же других задач полно.... (вот щас подниму вопросик еще один .....)
     
    #6 anadonam, 11 янв 2020
    Последнее редактирование: 11 янв 2020
  7. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    594
    Симпатии:
    85
    открой для себя мир display:flex
     
  8. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    Не слышал. спасибо.
    вечером погуглю по итогам прочтения отпишусь....
     
  9. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    А ты это в браузере хоть открыл? Смотрел как оно работает? :)

    Соответветственно точка перехода 800px по ширине - можешь поменять на любую другую.

    Этот код делает ровно то что тебе нужно и без всякого джаваскрипта.
     
  10. anadonam

    anadonam Новичок

    С нами с:
    10 янв 2020
    Сообщения:
    34
    Симпатии:
    1
    Адрес:
    Воронеж
    или я что то не понял или ты
    вот кусочек моего css
    Код (Text):
    1. @media screen and (max-width: 1390px){
    2. .content {
    3. padding: 0 10px 0 340px;
    4. }
    5.  
    6. .right-sidebar {
    7. width: 0px;
    8. margin:0 0 0 0;
    9. paddind:0 0 0 0;
    10. }
    11.  
    12. .img550{
    13. width:50%;
    14. float:left;
    15. margin:0 15px 10px 0;
    16. }
    и таких точек у меня несколько
    но не хватило знаний умений реализовать такими средствами нужную мне задачу.
     
  11. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    Ок, если ты будешь так продолжать - у тебя есть все шансы стать Елисеевым :D

    Но мы поступим иначе :) вот примерный алгоритм:

    1. Скопируй код который я разместил выше в локальный файл с расширением .html и открой его в любом браузере.

    2. Подвигай окно браузера туда-сюда изменяя его ширину в диапазоне от 500 до 1000px

    3. Ведут ли себя блоки таким образом, который тебе нужен?

    4. Если да - задавай вопросы по коду.

    5. Если нет - расскажи что именно в их поведении не устраивает?

    Хорошо?