• Как правильно задавать размеры в мобильной верстке для сайта html css?

    @UndineS
    есть пример разметки HTML под эти стили? Неочевидно по одному только CSS, в каком порядке блоки, сколько там текста, и как они в итоге накладываются друг на друга.
  • Как запомнить значение атрибута data?

    @UndineS
    Вы убрали комментарий, что ссылок может быть много. Вот еще варианты в ответ:
    Придется как-то выделять выбранный вариант.

    Из идей -
    $('.js-join').click(function() {
            let id = $(this).data('id');
            $('.js-join').removeClass('active'); //удаляем у всех ссылок класс active (ранее выбранных)
            $(this).addClass('active'); //добавляем выбранной ссылке класс active
            $.fancybox.open({
                src: '#modal-forum-join'
            });
            $('.js-modal-join').data('id', id);
        });
    $('.js-modal-join').click(function() {
            alert($('.js-join.active').data('id'));
        });


    другой вариант - если есть доступ к коду, формирующему цикл, то можно заменить на (список, в котором необходимо выбрать один вариант), сами круглые кнопки можно скрыть с помощью CSS, лишь бы были видны метки (по клику на выделяется соответствующий элемент списка, это стандартное поведение).

    Пример кода html:
    <input id="rad1" type="radio" name="rad"/><label for="rad1" data-id="1">Radio 1</label>
    <input id="rad2" type="radio" name="rad"/><label for="rad2" data-id="2">Radio 2</label>


    Тогда можно будет узнать, какой элемент выбран, таким селектором:
    alert($('input[type="radio"]:checked+label').data('id')); //получаем id элемента label у выбранного пункта списка


    Получение id непосредственно из тега (атрибут "id", а не "data-id"):
    alert($('input[type="radio"]:checked').attr('id')); //получаем id элемента label у выбранного пункта списка
  • Почему при свайпе карусели slick на десктопе открывается lightbox?

    @UndineS
    Андрей Иванов, я имею в виду просто клик не на картинку, а на черную область или текст. На десктопе Вы видите, куда попадает курсор перед кликом)

    Подозреваю, что реализовать функционал, чтобы клик для свайпа отличался от клика для лайтбокса достаточно сложно.
    Как вариант, вместо смеси лайтбокса со сликом для подобного функционала (слайдер со свайпом + увеличенное изображение) можно использовать два слайдера (см. https://vaden-pro.ru/blog/java-script/slayder-slick пункт "Синхронизирующийся слайдер"): рядом с увеличенным изображением (постоянно показывающимся) идет ряд превью, при выборе другого превью меняется и увеличенное изображение.
  • Slick slider как исправить?

    @UndineS
    скорее всего, кому-то из родительских элементов (с классом "bottom-slick-slider" или выше по дереву) задана небольшая ширина. Слайдер slick использует эту ширину и исходя из нее задает размеры слайдов.

    Проверьте:
    • не задана ли родительским элементам малая ширина (на основном сервере);
    • не была ли назначена большая ширина для корректного отображения в локальной версии.


    Кроме того, могут быть проблемы с заданными в css отступами margin для слайдов - проверьте совпадение/отсутствие этого свойства между сайтами на локальном и основном серверах.
  • Почему при свайпе карусели slick на десктопе открывается lightbox?

    @UndineS
    скорее всего, при свайпе на десктопе первый клик фактически происходит по картинке, и этот клик вызывает открытие окна лайтбокса. Если делать первый клик для свайпа вне картинки или использовать стрелки, то окно лайтбокса не открывается.
  • Почему не работает document.onclick на сдвинутых элементах с Position:absolute?

    @UndineS
    Антон Швец, drag&drop (и фраза "вставляю в контейнер") с большой долей вероятности подразумевают собой, как минимум, изменение положения элемента в DOM-дереве. После этого у элементов могут появляться вышеописанные особенности.
    Возможно, ошибаюсь, так как не знаю реализации Drag&Drop в конкретно данном случае и строю предположения.
  • Как убрать отступы?

    @UndineS
    Jostic, наверное, Вы уже нашли ответ, но на всякий случай напишу:
    стандартное решение - фиксированная ширина (например, width: 1170px) и отступы margin: 0 auto (т.е. 0 по высоте и auto по ширине - такое положение позволяет разместить контейнер посередине страницы, браузер автоматически рассчитывает одинаковые отступы по бокам).

    Также вариант может дополняться условиями на ширину экрана:
    .container {
        width: 1170px; /*стандартная ширина блока container*/
        margin: 0 auto; /*центрируем блок*/
    }
    @media screen and (max-width: 600px) { /*при условии, что ширина экрана не более 600 пикселей*/
        .container {
            width: 480px; /*задаем ширину блока для мобильных, margin не перезаписываем, остается стандартный*/
        }
    }


    сейчас на Вашем сайте примерно это же и реализовано: при клике на элемент с классом "container" в панели разработчика отображено, что он он имеет ширину 1170 пикселей при условии, что ширина экрана не менее 1200 пикселей (@media (min-width: 1200px)).
  • Связи (отношения) между сущностями. Отслеживание связей второго, третьего, n+ уровня. Какие варианты решения?

    @UndineS
    Извините, тогда не очень был понятен вопрос. Попробую угадать, что Вы имели в виду (либо опишите подробнее)... Что-то такое?

    SELECT person.*, domain.*, phone.*, mail.*
    FROM person
    LEFT JOIN person_domain ON person.id=person_domain.person_id
    LEFT JOIN domain ON person_domain.domain_id=domain.id
    LEFT JOIN person_phone ON person.id=person_phone.person_id
    LEFT JOIN phone ON phone.id=person_phone.phone_id
    LEFT JOIN mail ON mail.person_id=person.id AND mail.phone_id=phone.id;


    Такой код позволит связать между собой таблицы "Персонаж", "Телефон" через промежуточные таблицы и добавить к ним таблицу "Почта", связанную условием с Персонажами и Телефонами. Так можно связать сколько угодно таблиц, а также добавлять дополнительные условия в ON и WHERE. Между отдельными сущностями при необходимости возможны промежуточные таблицы.

    Условие связи в почте может быть и, например, таким:
    LEFT JOIN mail ON mail.person_passport=person.passport AND mail.phone_id=phone.id

    т.е. не обязательно привязываться именно по ID.

    Можно строить и более сложные цепочки, например:
    LEFT JOIN mail ON (mail.person=person.name OR mail.person=person.surname) AND mail.phone_id=phone.id

    т.е. сравнение того, что указано в "Почте" о Персонаже, с его именем или фамилией + сравнение по номеру телефона (причем в рамках одной строки будет только тот телефон, какой есть у данного Персонажа, так как выше в запросе была привязка между таблицами "Персонаж" и "Телефон"; строк, где указан Персонаж не со своим Телефоном, не будет). MySQL поддерживает, например, и различные строковые функции (конкатенация, получение подстроки, замена части строки, смена регистра и т.д.) - можно выполнять сравнение и по ним (как и использовать оператор LIKE для сравнения подстроки со строкой, а не только равенство).

    Аналогичным образом можно "наслоить" таблицу "Хостинг", связав ее по желаемым полям.

    Отмечу, что в данном примере начало запроса идет от таблицы "Персонаж" и таблицы связываются через LEFT JOIN - в итоге выборка будет содержать только те почты, где указан Персонаж. Если необходимо выбрать и те почты, где Персонаж не указан - замените LEFT JOIN mail на OUTER JOIN mail. Если наоборот, нужно исключить из выборки Персонажей без Почты - воспользуйтесь INNER JOIN mail.

    Ссылка с описанием подключения через mysql_connect была дана как самый базовый вариант, так как в описании задачи был указан только PHP без каких-либо уточнений. CMS, фреймворки позволяют делать запросы к базе без описания вручную механизма соединения, но итоговый синтаксис PDO очень зависит от конкретной системы.
  • Как убрать отступы?

    @UndineS
    К сожалению, на данный момент ваш сайт недоступен и скрин сделать не смогу, но в целом могу посоветовать - перейдите в режим разработчика (кнопка F12), выберите окошечко с кодом, там кнопкой F3 включите поиск и найдите строку . Выберите эту строку. Справа будут показаны стили CSS, которые сейчас применяются к выделенному элементу. Проверьте, что там отображаются добавленные стили. Для эксперимента можете прямо в браузере добавить новые строчки, но имейте в виду, что они не сохранятся, так можно только посмотреть, как изменения повлияют на верстку.

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

    Насчет необновленного кода - стили CSS могут кэшироваться (отображаться старые). Самый простой способ проверить, как выглядит актуальный вариант - это зайти на страницу в режиме инкогнито ("Меню браузера" - "Новое окно в режиме инкогнито").
  • Как через API Яндекс.Метрики получит данные по отказам?

    @UndineS
    Если страница просматривалась больше 15 секунд, то визит не считается отказом. Данная цифра может быть изменена в настройках счетчика (который размещен на странице сайта) - указана в accurateTrackBounce. По умолчанию (в большинстве случаев) длительность визита, когда он перестает считаться отказом, равна 15 секундам.
    Подробнее о параметрах счетчиков: https://yandex.ru/support/metrika/code/counter-ini...

    параметр запроса metrics=ym:s:bounce позволит получить данные по отказам.
    Как вариант - использовать ym:s:bounceRate - это доля отказов (в процентах). ym:s:bounce - это визиты в штуках.

    Например, запрос с параметрами metrics=ym:s:visits,ym:s:bounce&dimensions=ym:s:trafficSource получает данные по количеству визитов и отказов, сгруппированное по источникам трафика.

    Для подбора параметров рекомендую полистать в документации
    https://tech.yandex.ru/metrika/doc/api2/api_v1/exa... и
    https://tech.yandex.ru/metrika/doc/api2/api_v1/att...