Задать вопрос
  • Как реализовать запуск видео на сайте по клику видео YouTube/Vimeo на bootstrap?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    запрос к ИИ
    684a8caf7556e327947901.png

    Ответ:
    Вот готовое решение для открытия модального окна с YouTube видео по клику на кнопку:
    <button id="play" data-source="https://www.youtube.com/embed/dQw4w9WgXcQ">Play</button>
    
    <div id="modal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <iframe id="youtube-video" width="560" height="315" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    
    <style>
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      .modal.show {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .modal-content {
        position: relative;
        background-color: #fefefe;
        padding: 20px;
        border-radius: 8px;
        max-width: 800px;
        width: 90%;
      }
      
      .close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 28px;
        font-weight: bold;
        color: #aaa;
        cursor: pointer;
      }
      
      .close:hover {
        color: #000;
      }
      
      iframe {
        width: 100%;
        aspect-ratio: 16/9;
      }
    </style>
    
    <script>
      const playButton = document.getElementById('play');
      const modal = document.getElementById('modal');
      const closeButton = document.querySelector('.close');
      const iframe = document.getElementById('youtube-video');
      
      playButton.addEventListener('click', () => {
        const videoUrl = playButton.getAttribute('data-source');
        iframe.src = videoUrl + '?autoplay=1';
        modal.classList.add('show');
      });
      
      closeButton.addEventListener('click', () => {
        modal.classList.remove('show');
        iframe.src = '';
      });
      
      // Закрытие модального окна при клике вне его
      window.addEventListener('click', (event) => {
        if (event.target === modal) {
          modal.classList.remove('show');
          iframe.src = '';
        }
      });
    </script>


    Этот код включает:

    1. Кнопку Play с атрибутом data-source, содержащим ссылку на YouTube видео
    2. Модальное окно с iframe для встраивания видео
    3. Стили для:
      • Затемненного фона
      • Центрированного модального окна
      • Кнопки закрытия
      • Адаптивного видео (сохраняет соотношение сторон 16:9)


    4. JavaScript для:
      • Открытия модального окна по клику
      • Вставки видео в iframe с автовоспроизведением
      • Закрытия модального окна
      • Остановки видео при закрытии




    Вы можете изменить ссылку в data-source на нужное вам YouTube видео. Для получения embed-ссылки на YouTube нажмите "Поделиться" → "Встроить" и скопируйте URL из атрибута src iframe.
    Ответ написан
    Комментировать
  • Как сделать динамический роутинг в магазине на laravel?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    public function product($slug)
        {
            $product = Product::where('slug', $slug)->firstOrFail();


    Здесь должно быть два параметра - категория и продукт.
    Первым идет категория.
    Вы ищете продукт, но в условие попадает слаг категории, запись не находится, и выбивает 404

    То, что имя параметра метода совпадает с именем параметра в роуте, ничего вам не дает, потому что вы не используете биндинг.

    Route::get('/{category:slug}/{product:slug}',[\App\Http\Controllers\ProductController::class,'product'])
        ->name('product');
    
    public function product(Category $category, Product $product)
        {
            return view('product.index', [
                'product' => $product,
                'cat_slug' => $category->slug,
            ]);
        }
    Ответ написан
    1 комментарий
  • PHP Fatal error: Call to a member function getDisklist() on null in?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Исходя из этих строчек
    $this->load->model('extension/ajaxfilterdiskov');
    $res = $this->model_ajax_filter_diskov->getDisklist($query);

    и текста ошибки, можно сказать что ваша модель не загрузилась.Либо вы "нарушили схему" =)
    Возможно нужно так:
    $this->model_ajaxfilterdiskov
    Ответ написан
    2 комментария
  • Как вычислить размер шрифта для блока div с заданным размером?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    велосипед не мой. вроде работает.

    Ответ написан
    1 комментарий
  • Как убрать index.php из ссылок?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    1. У ларавел по умолчанию включен самодостаточный файл .htaccess, в котором обычно ничего особо менять не требуется.

    2. У ларавел отличная документация. Там есть ответы на большинство простых вопросов. И конечно же там есть пример конфигурации для столь популярного сервера, как nginx https://laravel.com/docs/12.x/deployment#server-co...
    Ответ написан
  • Почему не срабатывает удаление класса?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    <button class="btn-chapter" data-chapter="1">Глава 1</button>
    <button class="btn-chapter" data-chapter="2">Глава 2</button>
    <button class="btn-chapter" data-chapter="3">Глава 3</button>
    <button class="btn-chapter" data-chapter="4">Глава 4</button>
    <button class="btn-chapter" data-chapter="5">Глава 5</button>
    
    <div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
    <div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
    <div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
    <div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
    <div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>


    .chapter {
      display: none;
    }
    .chapter.is-open {
      display: block;
    }


    document.addEventListener('DOMContentLoaded', function() {
    
      const allChapters = document.querySelectorAll('.chapter');
    
      const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
      const openChapterById = id => document.getElementById(id).classList.add('is-open');;
    
      document.querySelectorAll('.btn-chapter').forEach(btn => {
        btn.addEventListener('click', () => {
          closeAllChapters();
          openChapterById(`chapter-${btn.dataset.chapter}`);
        });
      });
    
    });
    Ответ написан
    Комментировать
  • Почему svg с серой полосой по середине?

    delphinpro
    @delphinpro
    frontend developer
    Сначала написал ответ, думая, что вы с фигмой работаете.
    В фотошопе хз что делать.
    Но ведь вы всегда можете открыть экспортированную иконку в иллюстраторе и убрать лишнее.
    Ответ написан
    Комментировать
  • Как удалить весь текст кроме ссылок?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Текст структурирован, поэтому всё просто.
    Если файл небольшой, можно сразу целиком прочитать и разбить в массив по строкам.
    Если большой, то читать построчно.
    Далее в цикле проверяем каждую строку. Если в строке есть подстрока https, то делаем замену подстроки "URL: " на "" и сохраняем то, что осталось - искомая ссылка. Если подстрока https отсутствует, то ничего не делаем и переходим к обработке следующей строки.
    Ответ написан
    Комментировать
  • Как правильно работать с background?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Без обрезки никак. Сами должны понимать. Если пропорции экрана отличаются от пропорций изображения, то обрезка будет по-любому.

    Если это какой-то абстрактный фон, то без разницы. Берем несколько картинок разного размера (чтобы на мобилах не грузить лишнего) и подключаем их через медиа-запросы.

    Если на фоне есть какой-то объект, то желательно, чтобы он был в центре (из-за обрезки по краям) и нужны два варианта изображения - вертикальное и горизонтальное. Так же через медиазапросы (portrait/landscape) подменяем. Плюс несколько размеров (2-3) под разрешение экранов, с учетом ретины - 2х.

    Размер файла должен быть минимальным, это очевидно. Также очевидно, что точный желательный размер вам никто не скажет. Для уменьшения веса файла используйте конвертацию в webp формат.
    Ответ написан
    Комментировать
  • Как в верстке сделать уши у контейнера?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Проще всего не запихивать все блоки в один общий контейнер, а прописывать каждому блоку внутри свой отдельный.
    И тут появляется много вариантов. вот один из них. https://codepen.io/delphinpro/pen/bNGPwyN



    или так https://codepen.io/delphinpro/pen/dPyBpEq

    Ответ написан
    Комментировать
  • После запуска в github - page выдает ошибку 404, отображается только главная страница- index.html, как заставить работать остальные html страницы?

    delphinpro
    @delphinpro
    frontend developer
    гитхаб пэйджес только для статических сайтов. Чисто html. Там нет серверных языков, в том числе питона. Вам нужен нормальный хостинг с поддержкой python.
    Ответ написан
    Комментировать
  • Как по клику скопировать текст из div (не textarea) в textarea?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    <button data-id="XXX1" class="copy-button">Copy</button>
    <div id="XXX1"></div>
    <button data-id="XXX2" class="copy-button">Copy</button>
    <div id="XXX2"></div>
    <button data-id="XXX3" class="copy-button">Copy</button>
    <div id="XXX3"></div>
    
    <textarea id="textarea-el"></textarea>


    document.querySelectorAll('.copy-button').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = btn.dataset.id;
        const text = document.getElementById(id).textContent;
      
        document.getElementById('textarea-el').value = text;
      });
    });
    Ответ написан
    5 комментариев
  • Как получить id от button?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Здесь вы вроде бы правильно обновляете картинку только у нужного товара по его айди

    $query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");


    Но откуда ID то берется?

    Передавайте идентификатор вместе с картинкой
    <form method="post" enctype="multipart/form-data">
      <label for="tovar_full">Изображение товара</label> 
      <input type="hidden" name="id" value=" тут айди товара, к которому нужно прикрепить картинку " />
      <input type="file" name="filename" size="10" />
      <input type="submit"  value="Загрузить" />
    </form>


    и на сервере соответственно

    $names = "https://smm-services.ru/admin/";
    $id = $_POST['id']; // получить ID из формы
    $query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");


    PS
    Нельзя вставлять данные в запрос напрямую полученные от пользователя. Узнайте, что такое sql-инъекции и как от них защищаться.
    Ответ написан
  • Растягиваются колонки таблицы, при table { width: 100%} и col: { width: 200px }, как исправить это поведение?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Чтобы таблица слушалась установки ширины для колонок, то ей нужно выставить фиксированный лэйаут

    table {
      table-layout: fixed;
    }


    Но там кажется остальная доступная ширина будет поровну распределяться между всеми колонками, у которых ширина явно не задана.
    Ответ написан
    Комментировать
  • Почему не находит модель по параметру маршрута?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    Route::get('{agreement:uuid}', 'showFile');

    uuid - название вашего поля в модели с этим идентификатором
    Ответ написан
  • Почему видеофайл не доступен напрямую в браузере?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Всё дело в токене. Без него телега блокирует доступ к файлу. Но работает он только в пределах сессии в телеграме. Это если попроще объяснить.
    Ответ написан
    1 комментарий
  • Проблема с генерацией svg в пакете laravel-erd?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    вы генерируете файл laravel-erd.svg, а пытаетесь открыть файл o.svg. Логично, что такого не существует.
    Ответ написан
    2 комментария
  • Как расчитать ширину элемента .content?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ширина явно указана в стилях - 120px. Так как установлен box-sizing: border-box; то padding в расчет ширины не берем. Итог = 120px.
    Ответ написан
    1 комментарий
  • Как правильно вывести меню html css по колоннам?

    delphinpro
    @delphinpro
    frontend developer
    .navbar-footer-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-template-areas: "i1 c2 c3"
                           "i2 c2 c3"
                           "i3 c2 c3"
                           "i4 c2 c3";
    }
    .navbar-footer-list > li:nth-child(1) { grid-area: i1; }
    .navbar-footer-list > li:nth-child(2) { grid-area: i2; }
    .navbar-footer-list > li:nth-child(3) { grid-area: i3; }
    .navbar-footer-list > li:nth-child(4) { grid-area: i4; }
    .navbar-footer-list > li:nth-child(5) { grid-area: c2; }
    .navbar-footer-list > li:nth-child(6) { grid-area: c3; }
    Ответ написан
    Комментировать
  • Как в .htaccess перенаправлять запросы в index.php при отсутствии папки или файла?

    delphinpro
    @delphinpro
    frontend developer
    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.php [L]
    </IfModule>

    В index.php смотреть на $_SERVER['REQUEST_URI']
    Ответ написан
    Комментировать