• Как вывести большую исходную картинку из TV параметра в DocLister?

    delphinpro
    @delphinpro
    frontend developer
    Вероятно, картинка ресайзится в сниппете product.dl. Там происходит подготовка данных к выводу.
    Ответ написан
  • Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

    delphinpro
    @delphinpro
    frontend developer
    Кнопка - это отдельный блок
    Поиск - блок

    <header class="header">
        <div class="header__btn">
            <button class="btn">Предложить новость</button>
        </div>
        <div class="header__search search">
            <a class="search__number" href="tel:+73513651711">8 (3513) 65-17-11</a>
            <img class="search__img" src="img/search.svg" alt="">
        </div>
    </header>


    В навигации то же самое
    Кроме того внутри UL могут быть только LI
    OPTION не стилизуются, им не нужен класс

    <div class="nav">
        <ul class="nav__menu menu">
            <li class="menu__item"><a href="">Новости</a></li>
            <li class="menu__item"><a href="">Телепроекты</a></li>
            <li class="menu__item"><a href="">Реклама</a></li>
            <li class="menu__item">
                <select name="">
                    <option value="">Онлайн</option>
                    <option value="1">new</option>
                    <option value="2">new</option>
                </select>
            </li>
            <li class="menu__item"><a href="">Программа передач</a></li>
            <li class="menu__item">
                <select name="">
                    <option value="">Ещё</option>
                    <option value="1">new</option>
                    <option value="2">new</option>
                </select>
            </li>
        </ul>
    
        <div class="nav__contacts contacts"
            <p class="contacts__title">Подписывайтесь на нас:</p>
            <ul class="contacts__list">
                <li class="contacts__item"><img src="img/Facebook - Negative.png" alt=""></li>
                <li class="contacts__item"><img src="img/вк.png" alt=""></li>
                <li class="contacts__item"><img src="img/однокласники.png" alt=""></li>
                <li class="contacts__item"><img src="img/inst.svg" alt=""></li>
                <li class="contacts__item"><img src="img/YouTube - Negative.png" alt=""></li>
            </ul>
        </div>
    </div>


    Подобных имен файлов лучше избегать img/YouTube - Negative.png. Используйте для имен файлов только символы латинского алфавита в нижнем регистре, цифры и символы _-, и ничего другого, включая пробелы.
    Ответ написан
    Комментировать
  • Ошибка с смещением строки, как решить?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Потому что у вас там одна запись
    Ее нужно просто вывести без цикла

    <span class="rules-intro__text">
        <?=$rulesCategoryOne['content']?>
    </span>


    Либо фетчить все строки

    $rulesCategoryAll = $queryCategoryOne->fetch_all();
    // Я не знаю как у вас называется такой метод!!!
    
    
    <?php foreach($rulesCategoryAll as $rule): ?>
    <span class="rules-intro__text">
        <?=$rule['content']?>
    </span>
    <?php endforeach; ?>
    Ответ написан
  • Как сделать вот такой slider?

    delphinpro
    @delphinpro
    frontend developer
    Пишем кастомный слайдер. Нафиг не нужен здесь готовый.

    Все слайды размещаем "стопкой" с помощью грид-раскладки (можно абсолютом, но это хуже)
    Внутри слайда располагаемдва блока - текст и картинка. Текст невидимый, картинка за пределами слайда, в том сотоянии, из которого она будет выходит в состояние маленького размера справа. Блокам с текстом и картинкой задаем свойства плавного перехода (transition).
    Наверху "бутерброда" слой с кнопками управления.

    Дальше определяем три состояния картинки.

    Первое уже определено - это невидимый слайд, текст скрыт (opacity:0), картинка за пределами не видна.

    Второе состояние - "следующий слайд". Здесь текст все еще не виден, а картинка маленькая.

    Третье состояние - "активный слайд". Здесь текст виден и и картинка большая в центре.

    А дальше самое простое – по кликам на кнопки управления нужно просто менять состояния слайдов с помощью навешивания и убирания у них css классов.
    Ответ написан
    Комментировать
  • Как скрыть панель за прозрачной шапкой?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.


    ну тогда такой вариант
    Оборачиваем эту панельку в еще один блок. Этот блок будем позиционировать. Его высота должна быть равной высоте панельки. примерно так

    64772f11cb56a955495944.png

    Красный блок - overflow:hidden
    Зеленый - это ваша панелька выезжающая. Из-за overflow обрезки у родителя она будет выезжать сверху как будто из под прозрачной шапки, но под самой шапкой ее не будет видно.

    Чтобы красный блок не мешался - ему pointer-event:none; А чтобы при этом зеленый был кликабельным, ему – pointer-events: auto (или all)
    Ответ написан
    Комментировать
  • Как сделать так чтобы окно предупреждение о cookie после соглашения больше не показывалось?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    window.onload = () => {
    
      const popUp = document.getElementById('cookiePopup');
    
      function showPopup() {
        popUp.classList.add('show');
        popUp.classList.remove('hide');
      }
    
      function hidePopup() {
        popUp.classList.add('hide');
        popUp.classList.remove('show');
      }
    
      document.getElementById('acceptCookie').addEventListener('click', () => {
        localStorage.setItem('cookieAccepted', '1');
        hidePopup();
      });
    
      if (localStorage.getItem('cookieAccepted') === '1') {
        hidePopup();
      } else {
        showPopup();
      }
    
    };
    Ответ написан
    Комментировать
  • Как сохранять положение прокрутки (скролла) на web страницы, после её закрытия?

    delphinpro
    @delphinpro
    frontend developer
    слушаем onscroll, пишем значение в localStorage
    при загрузке страницы вытаскиваем значение из хранилища и устанавливаем скролл.
    Ответ написан
    Комментировать
  • Как инкапсулировать пользователя на сервере?

    delphinpro
    @delphinpro
    frontend developer
    Абстрактный ответ

    Создаем таблицы в БД
    games
    id | user_id
    bosses
    id | game_id | health | ...

    Всё. Для каждого старта игры создаем игру, привязанную к пользователю по его ID
    Для каждой игры создаем босса, привязанного к игре по ее ID
    Ответ написан
    2 комментария
  • Sourcemaps scss?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    так у вас init и write идут сразу друг за другом

    function css() {
      return src('./src/assets/scss/style.scss', {sourcemaps: true})
        ...
    +   .pipe(sourcemaps.init())
    -   .pipe(sass({sourceComments: 'map'}))
    +   .pipe(sass())
    -   .pipe(sourcemaps.init({loadMaps: true}))
    -   .pipe(sourcemaps.write())
        .pipe(groupCssMediaQueries())
        ...
        .pipe(rename({
          suffix: '.min',
          extname: '.css'
        }))
    +   .pipe(sourcemaps.write('.'))
        .pipe(dest(path.build.css))
        .pipe(browserSync.reload({stream: true}))
    }
    Ответ написан
  • Как создать горизонтальную линию сквозь кнопку?

    delphinpro
    @delphinpro
    frontend developer
    Зачем всё это?
    Посмотрите на картинку иначе: кнопка просто висит поверх линии.

    <hr>
    <button>Наверх</button>
    
    button {
      transform: translateY(-50%);
    }
    Ответ написан
    Комментировать
  • Как правильней будет сверстать такой каталог?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Как сверстать такой каталог?

    Таблицей, и не парится.
    Либо гриды. Флексы здесь вообще плохо вписываются.

    Ответ написан
    2 комментария
  • Как сделать так, чтобы элементы меню появлялись на странице постепенно?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Как-то так можно, если я правильно понял суть анимации.

    <a class="menu">Menu item</a>
    <a class="menu">Menu item</a>
    <a class="menu">Menu item</a>
    <a class="menu">Menu item</a>
    <a class="menu">Menu item</a>


    .menu {
      transform: translateX(-100%);
      opacity: 0;
      transition: all 0.5s ease;
    }
    
    .menu.ready {
      transform: translateX(0);
      opacity: 1;
    }


    const delay = 300;
    [...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
        setTimeout(() => {
            menu.classList.add('ready');
        }, delay * (index + 1))
    });
    Ответ написан
    1 комментарий
  • Можно ли использовать две переменные в switch case?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Это делается так:

    switch (true) {
        case a > b:
            alert(a + b)
            break;
        case a < b:
            alert('Lorem Ipsum terebismum')
            break;
        default:
            alert('Isn"nt number')
            break;
    }
    Ответ написан
    Комментировать
  • Как сделать так, чтоб модальное окно срабатывала только для одного "Универа"?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Университеты вы перебираете в цикле, а переменная modal у вас одна общая на всех. Сделайте отдельную переменную для каждого универа.
    Ответ написан
  • Как сделать, чтобы бордеры не накладывались один на другой?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Так они у вас как раз и не накладываются.
    Может надо наоборот, чтобы накладывались?

    Сместить нижний ряд на один пиксель вверх.
    Второе поле во втором ряду сместить на один пиксель влево.
    В любом не обычном состоянии (ошибка, фокус) помещать поле выше остальных (увеличивать z-index).

    Всё это решается стилями, непонятно, зачем вагон тегов у вопроса.
    Ответ написан
    Комментировать
  • Как из цикла РНР передавать Ajax?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Например так.

    document.querySelectorAll('.element').forEach(el => {
      const id = el.getAttribute('id');
      fetch('https://mysite.com', {
        body: {
          id
        }
      })
      .then(response => response.json())
      .then(response => {
        if (response.status === 'ok') {
          el.style.color = 'green';
        } else {
          el.style.color = 'red';
        }
      })
      .catch(err => {
        console.log(err);
        el.style.color = 'red';
      });
    });


    на сервере

    $id = $_GET['id'];
    // Что-то делаем
    $result = doSomething($id);
    $response = [
      'status' => $result ? 'ok' : 'error'
    ];
    echo json_encode($response);
    die;
    Ответ написан
    Комментировать
  • Как обесцветить часть карты?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    я понимаю, что как в примере я не перебью стили,

    нет, не перебьете.

    Решение вроде очевидное – изначально для всех элементов svg выставить фильтр, а по клику убирать его. У body разумеется убрать фильтр совсем. Иначе никак.
    Ответ написан
    9 комментариев
  • Какую библиотеку посоветуете для горизонтального скролла мышью?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Зачем для этого библиотека?
    https://developer.mozilla.org/en-US/docs/Web/API/E...
    https://learn.javascript.ru/size-and-scroll
    Ловим события mouseup/mousedown/mousemove/wheel и меняем значение скролла у элемента (или его относительную позицию внутри другого элемента).
    Ответ написан
  • Почему не обновляются локальные данные внутри setInterval?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    А - Асинхронность

    jQuery.ajax({ // 1. Выполнится этот код
                url: 'receiveData.php',
                type: 'POST',
                data: {},
                success: function () { 
                     // 3. А уже после окончания запроса выполнится этот код
                     // Именно в это время данные будут получены и сохранены.
                },
                error: function () {
                    console.log('ERROR');
                }
            })
    receiveTxt(); // 2. Потом сразу же выполнится этот код


    Отсюда следует простой вывод. Вызов функции receiveTxt следует перенести в коллбэк success
    Ответ написан
    8 комментариев
  • Почему возникает ошибка 400 при ajax запросе?

    delphinpro
    @delphinpro
    frontend developer
    formData.append('file', $('input[name="file"]')[0].files[0]);
    formData.append('listing_id', listing);
    +formData.append('action', 'send_message_into_chat');
    -var data = {
    -    action: 'send_message_into_chat',
    -    form_data: formData
    -};
    $.ajax({
            url: ajaxurl,
            type: 'POST',
    -        data: data,
    +        data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (r) {
                console.log(r);
            },
        });
    Ответ написан