Ответы пользователя по тегу CSS
  • Как реализовать изменение изображения в зависимости от данных введенных в форму?

    @nikfakel
    Веб-разработчик
    Сервер не нужен, тут лучше всего использовть JS + SVG. В SVG рисуем изначальный четырехугольник (просто нужно указать координаты углов четырехугольника), а JS меняет эти координаты в зависимости от веденного в поле значения. Для прямоугольника могу прямо здесь накидать простой скрипт, буквально 6 строчек на jQuery, четырехугольник чуть посложнее.
    Ответ написан
    Комментировать
  • Как изменять вид label зависимости от inputa?

    @nikfakel
    Веб-разработчик
    На событие валидации поставьте проверку класса у input'a

    $(validation)....... function(){
    if($('input').hasClass('valid')){
     $("label[for='" + this.id + "']").addClass("label-valid");
    }
    if($('input').hasClass('invalid')){
     $("label[for='" + this.id + "']").addClass("label-invalid");
    }
    }
    Ответ написан
    Комментировать
  • Как разместить блок поверх owl carusel?

    @nikfakel
    Веб-разработчик
    Ну тут вы вообще у .header и #header стили не указали

    #header {position: relative;}
    .header {position: absolute; z-index:1000; width: 100%; }
    Ответ написан
    Комментировать
  • Как позиционировать элементы по кругу?

    @nikfakel
    Веб-разработчик
    Для начала я бы определил границы применяемости: что, например, будет, если видео будет 1000. Значит сразу показываем только несколько, остальные доступны по ссылке. В таком случае можно вообще расположить 10 картинок, обозначающие видео, по кругу через position: absolute. Но, очевидно, для универа такое не подойдет.

    Пусть тогда нам надо расположить от 6 до 20 картинок по кругу (меньше 6 - круг будет не очень-то круглый, больше 20 - картинки слишком мелкие). В таком случае просто рассчитываем через JS местоположение и указываем его через position:absolute.
    Структура HTML:
    <div id="wrap">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    </div>

    CSS просто чтобы было наглядно сразу посмотреть:
    #wrap {position: absolute; }
    #wrap img {width: 30px; height: 30px; background:#333; position: absolute; }

    и, собственно, сам скрипт на JS и jQuery:
    var num = 20; // Число картинок
    var wrap = 400; // Размер "холста" для расположения картинок
    var radius = 200; // Радиус нашего круга
    
    $(document).ready(function() {
      for (i=0;i<num; i++){
        var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
        var left = wrap + radius * Math.sin(f) + 'px';
        var top = wrap + radius * Math.cos(f) + 'px';
        $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
      }
    });

    Ну и вам, наверно, надо будет еще добавить функцию для определения числа картинок. Ну и при клике на картинку открывается видео (это уже как вы сами решите, можно и модальное окно).
    Ответ написан
    1 комментарий