• Почему событие hover мешает на мобильном?

    @RMate
    Можно и нужно реализовать на css. что-то вроде
    .menu .child-block{
        display:none;
    }
    .menu:hover .child-block{
        display:block;
    }


    Конкретно по вашей проблеме - можно определять телефон это, либо нет, после чего подменять событие hover на событие click на тачскринах. Но проще и правильнее действовать первым вариантом
    Ответ написан
    2 комментария
  • Как получить raw-содержимое тега html?

    Zarinov
    @Zarinov Автор вопроса
    Решено:
    1. получать содержимое нужно через .html() или .innetHTML
    2. после исправляю закрывашку одиночных тегов регекспом .replace(/<((meta|img|link|br|hr|input|area|param|col|base).*?)>/g, '<$1 />')

    Спасибо за ценные советы.
    Ответ написан
    1 комментарий
  • Как создать слайд, который показывает скрытые кнопки?

    sh3mahan
    @sh3mahan
    что-то вроде веб-разработчика
    Есть несколько вариантов:
    Использовать .show() – api.jquery.com/show
    Или использовать . toggleClass() – api.jquery.com/toggleclass

    Вариант с .toggleClass():
    https://codepen.io/sh3mahan/pen/maLajQ
    Понажимай на карточки
    Ответ написан
    1 комментарий
  • Как получить JSON-массив с кодом статуса после запроса к БД?

    @DanKud
    Добавьте динамический блок возле кнопки для отображения статуса. Например добавьте возле кнопки <span class="status"></span> и допишите в AJAX-запрос:

    .....
    function myAJAX() {
        $.ajax({
            url : "add_to_cart.php",
            type : "GET",
            data : { "count" : $('#col').val() },
            dataType: 'json', /* сразу же даем понять в запросе, что принимаем JSON, чтобы не декодировать отдельно */
            success : function(data) {
                console.log(data);
                $('.status').html(data.message); /* добавляем текст статуса в элемент .status */
            }
        });
    }

    Ну и на счет PHP-кода он у вас конечно во многих местах крайне невалидный. Перепишите для начала хотя бы так:

    require_once("db.php"); 
    
    /* во-первых для чего вы везде делаете вывод данных через echo если у вас это будет
    просто скрипт, который должен отдавать статус добавления товара в JSON-формате */
    
    header('Content-Type: application/json'); /* даем понять в заголовках, что тип данных у нас JSON */
    
    if (mysqli_connect_errno()) {
        $arr = array('message' => 'Error');
        echo json_encode($arr);
        exit(); /* отдаем ошибку подключения к базе данных и завершаем выполнение скрипта */   
    }
    
    /* принимать для записи в базу данных значения из $_GET без дополнительной фильтрации небезопасно
    проще говоря так делать нельзя, хоть это конечно и будет работать */
    $count = (is_numeric($_GET['count'])) ? intval($_GET['count']) : false; /* проверяем если нам отправили не число, а строку, то возвращаем false, если число то обязательно округляем до целого */
    if (!$count) { /* соответственно если нам отправили некорректное значением то отдаем ошибку и завершаем выполнение скрипта */  
        $arr('message' => 'Error');
        echo json_encode($arr);
        exit();
    }
    $user_ip = $_SERVER['REMOTE_ADDR'];
    $date = date('Y-m-d H:i:s');
    
    $sql = "INSERT INTO `orders` (`order_id`, `order_date`, `ip`, `product_count`) VALUES (NULL, '$date', '$user_ip', '$count')";
    /* не используйте в массиве значения ключей с пробелами: status code => status_code */
    if (mysqli_query($conn, $sql)) {
        $arr = array('status_code' => 1, 'message' => 'Item added to cart');
    } else {
        $arr = array('status_code' => 0, 'message' => 'Error');
    }
    echo json_encode($arr);
    Ответ написан
    3 комментария
  • Как исправить проблемы высоты при скролинге до последней якорной ссылки?

    RAX7
    @RAX7
    Как вариант: проверять если прокручено до конца документа, то делать последний блок активным.
    https://jsfiddle.net/8agLhn3t/
    Ответ написан
    Комментировать
  • Как сделать меняющийся video background?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. В чем проблема из двух сделать одно длинное видео с вашим красивым переходом? Или Вам надо поизвращаться?
    2. Сделайте N блоков поверх друг друга(через position: absolute и z-index). Каждый блок имеет свое видео. Когда первое видео заканчивается плавно анимируйте этот слой в opacity: 0(в jq это через .hide() делается), а следующий за ним в opacity: 1(в jq .show())
    3. Хочется быть крутым? Делайте через canvas(pixi.js). Переход сделать через displacement map
    Ответ написан
    Комментировать
  • Возможно ли реализовать двунаправленный градиент в качестве background?

    0xD34F
    @0xD34F Куратор тега CSS
    Можно сделать через css, с использование image-mask, как-то так.

    Или svg - ну, тоже маску используем. Например.
    Ответ написан
    Комментировать
  • Как правильно сравнивать с помощью регулярного выражения в JS?

    spnq
    @spnq
    Frontend Developer
    У JS в прототипе регулярок как раз для этого есть метод test.
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Пример:
    (/[()\_\-\+\s]/).test(symbol)
    В скобках перед .test лежит регулярка, их можно обозначать по разному (https://developer.mozilla.org/ru/docs/Web/JavaScri...
    symbol это некая строка. На выход будет true или false в зависимости от соответсвия.

    Плюс в HTML5 есть атрибут pattern (https://www.w3schools.com/tags/att_input_pattern.asp), он сюда в принципе подойдет.
    Или можно повестить проверку на ивент oninput, но вопрос был про регулярки на js, так что reg.test(str) будет правильнее.
    Ответ написан
    Комментировать
  • Как выглядит современный процесс верстки?

    @coderxx
    keep calm and learn js
    Не уверен что начинающим верстальщикам нужно заморачивать себе голову всем этим ужосом:) Но может кому-то и пригодится:
    - создаю новый проект на базе немного допиленного Optimized4HTML (можно копировать папку руками, можно сохранить в PhpStorm как темплейт, второе разумеется удобнее). Проект имеет следующую структуру:
    5c13ab56a03e8108817224.png
    - открываю его в PHPStorm, через командную строку устанавливаю пакеты и запускаю вотчер со следующей конфигурацией:
    5c13ad0d5c912921297608.png
    (таким образом отслеживаются изменения в файлах index.html, *.scss, common.js, а так же релодится браузер; в процессе верстки просто перескакиваем на виртуальный рабочий стол с открытым сайтом и сразу видим изменения, а если есть второй монитор то вообще песня). Кстати, перечень пакетов ннада?
    5c13ae2b57082880473288.png
    - из плюшек emmet и sass обязательно, в качестве таскранера - gulp.
    - макеты у меня в .sketch, так же кто не пробовал советую попробовать Figma, получите практически скетч в браузере. Adobe Photoshop не люблю. Adobe XD не пробовал, но осуждаю. Здесь наверное больше дело вкуса и реалий, в которых вы работаете (например, в каком формате получаете макеты, какая ОС на рабочем компе).
    Вроде все просто. Что непонятно - спрашивайте, отвечу.

    UPD. Optimized4HTML недавно перешел на Gulp 4, советую попробовать. Учтите, что Gulp 4 не имеет обратной совместимости с галпфайлами предыдущей версии, так как немного изменился синтаксис.
    Ответ написан
    9 комментариев
  • Где развернуть большой проект node.js?

    Deissh
    @Deissh
    I like Python, Node.JS, Go, pain, bugs and my cat.
    Все зависит от местоположения целевой аудитории вашего приложения, если это конечно веб приложения.
    А так есть Digital Ocean, позволяющий за 5$ запустить дроплет с 25 Гб на SSD с предустановленым Node.JS 8.10. Еще есть AWS, GCP, Yandex Cloud и т.д.
    Ответ написан
    2 комментария
  • Зачем дублировать style="background" и img?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Через css проще спозиционировать за счёт background-size и background-position, а img нужен, чтобы поисковики проиндексировали картинку.
    Ответ написан
    1 комментарий
  • Есть ли у вас похожие проекты?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать?

    1. Рисуете все эти дуги, точки и иконки в SVG.
    2. Дуги и точки анимируете с помощью transform:rotate и keyframes (поворот от 0 до 1turn, в этом нет ничего сильно замороченного, но оставлю пример для изучения), каждой ставите свое время полного оборота по вкусу.
    3. Иконки винды, ведра и айоси подвергаете извороту "туда-обратно" (как в этом примере). Обертку крутите в одну сторону, а иконку в другую - будет выглядеть, как будто они летают по кругу.
    Ответ написан
    Комментировать
  • Аккордеон JQuery должен срабатывать только при нажатии на кнопку а не весь блок?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Решение лежит в плоскости JQUERY, зачем Вы html привели?
    Я думаю проще взять другой аккордеон, например:
    https://getbootstrap.com/docs/4.0/components/collapse/
    Или самому написать, там 20 строк кода.
    Ответ написан
    Комментировать