• Как починить background-position в :hover для элемента с фоном заданным в атрибуте style?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    А в теге есть возможность исправить? Там надо написать не короткой записью, а полной. Т.е.
    <div style="background-image: url('img/bulb.png'); background-repeat: no-repeat;"></div>

    Все дело в том, что при записи коротким способом браузер сам все дописывает, что Вы не указали, а инлайн-стили, которые Вы пишете в теге, перекрывают те, что в файле css.
    Ответ написан
    Комментировать
  • Лучшие образцы форм-анкет, которые вы знаете?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Тут, я говорю как пользователь, который сам ненавидит заполнять формы, скорее важен подход, а не сама форма. Например, первым делом запросите имя и почту. Ок, никаких сложностей.
    Потом выведите товары (привожу в пример вариант с магазином подарков) и напишите:
    Спасибо вам за регистрацию! К сожалению, на основании только вашего имени мы можем предложить только популярные товары среди наших покупателей. Поделитесь с нами другими данными и мы сможем найти что-нибудь еще.
    Я понимаю, что звучит слегка по-идиотски, и предложения надо сделать короче, но суть в том, что надо подходить к вопросу с точки зрения эмоциональной.
    Пока что на эту тему я читал только Аарон Уолтер, Эмоциональный веб-дизайн. Книга понравилась, но короткая. Приведен пример с dropbox, который, чтобы его пиарили в соцсетях (что в определенной степени тоже бесит) создал некое подобие игры, подключи друзей и коллег - получи больше места. Лично я собрал все возможное место :) В общем - эмоциональный подход - это первый вариант.

    Второй - посмотрите на соцсети, например ВКонтакте. Как они заставляют заполнять профиль? Думаю, ответ в заинтересованности. Но вот сможете ли Вы в магазине подарков заинтересовать кого-то просидеть лишние 10-20 минут за заполнением профиля... сложно сказать.
    Ответ написан
    Комментировать
  • Как сделать выпадающее меню как Яндексе?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    $('.more').click(function(){
      var menu = $('.menu');
      if (menu.css('display') == 'none') {
        menu.fadeIn(300);
      }
      else {
        menu.fadeOut(100);
      }
    });

    Пример:
    codepen.io/iiil/pen/HEDeI
    Ответ написан
    Комментировать
  • Что учить после освоения азов HTML и CSS?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Вам надо просто научиться пользоваться поиском. Я на самом деле не в настроении шутить и ругаться, так что воспринимайте всерьез. Например, Ваш вопрос задавался в разных интерпретациях сотню раз, и там были прекрасные ответы по тому, с чего стоит начинать. Присылались ссылки на деревья обучения, вроде этого (уже не вспомню, кто прислал).
    Смотрите на дерево - если что непонятно - читайте, гуглите, ищите на тостере и хабре. Учитесь пользоваться поиском, без него никак.
    Ответ написан
    Комментировать
  • Как начать делать сайт для организации по заданной идее, если у тебя нет опыта?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Да все на самом деле просто. Смотрите на сайты других компаний и делайте себе такое же.
    1. Про юзабилити общие понятия Веб-Дизайн: книга Стива Круга или "не заставляйте меня думать!" (да, она старая)
    2. Кирсанов, Веб-дизайн (да, и она старая)
    3. html/css - или используйте фреймворк, или смотрите как сделано в нем, например в бутстрап
    4. Сразу озаботьтесь вопросом адаптивности, потому что подход: ну мне бы хоть пока по-простому сделать - неверный
    А так, вопрос Ваш слишком общий, Вы на этапы разбейте и начинайте с поиска. Не изобретайте велосипед, задавайтесь почаще вопросом - почему на сайтах делают именно так, а не вопросом - а чем мой вариант хуже.
    Ответ написан
    1 комментарий
  • Jquery: Найти текст на странице и, если присутствует, то выполнить условие. Как такое реализовать?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Подозреваю, что оба варианта не работали без указания селектора внутри body.
    Вот наглядный пример codepen.io/iiil/pen/HruxF , скорее всего скрипт Вы поместили перед закрывающим тегом body, как делает тот же codepen, а значит слово пирожок в тексте тега body присутствует, что наглядно демонстрирует алерт :)
    Ответ написан
    Комментировать
  • Как сделать внутренний отступ между элементами li?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Ваш вопрос должен звучать так:
    Как мне распределить элементы списка в одну линию на равные расстояния. Список помещен в контейнер с фиксированной шириной. Количество элементов списка не определено.

    Ответ Вам дал @m1skam
    Дополню, что для этого сейчас существует flexbox. Рекомендую познакомиться с ним.
    Ответ написан
    Комментировать
  • Какие проблемы могут возникнуть при регистрации домена в зоне .club?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    1. Какие проблемы - навалится куча обдолбанных танцоров и будет плясать. Какие плюсы - будет сразу понятно, что это клуб. Доменная зона новая, так что проблемы все те же - не все сходу поймут, что это доменная зона.
    2. Находят ли поисковики - почему нет?
    3. Техническая разница состоит в том, что это разные доменные зоны. Одна типа для коммерческих организаций (отсюда и название, на самом деле сейчас там кого угодно можно найти). Вторая - для всяческих клубов, в т.ч. клубов книжных, музыкальных.
    Как не вспомнить
    Педрильный клуб любителей пощекотать очко
    Ответ написан
    Комментировать
  • Как сделать доступные/недопступные даты в поле типа date html?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    <input type="date" min = "2014-12-01" max = "2014-12-20" step = "4"/>

    Соответственно с 1 по 20 с шагом 4. Но у Вас первая дата 1 число, так что след. только 5 получается.
    Если список не через определенный интервал, то советую использовать jquery datepicker, тем более тип date пока мало кем поддерживается.
    Ответ написан
  • Как на сайте риализовать изменение background при скроллинке страницы?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    upd2:
    codepen.io/iiil/pen/eaEnp
    Примерно вот так, картинки кинете в одну папку, назовите как в примере: back1, back2 и т.д.
    Используется jquery плагин mousewheel
    При прокрутке он определяет дельту, и если она меньше нуля (крутим вниз), то присваивает бэкграунду следующую картинку, в красный блок я вывел это число. Если воспользуетесь просмотром кода, то увидите, как меняется свойство background-image. После того, как картинки заканчиваются - начинается скролл как обычно. Если надо реализовывать и прямую, и обратную прокрутку - то допишите сами или жду коммерческого предложения, так как идею я наглядно показал, думаю что сами допилите. Как я уже говорил - картинки надо предзагрузить. Иначе путь-то будет меняться, но загружаться картинки не будут успевать. И даже в этом случае, учитывая объем картинок, боюсь будет тупить.

    upd:
    1. Для того, чтобы картинки успевали меняться - Вам их необходимо предзагрузить. С сотней картинок определенно будут проблемы.
    2. Не совсем понятно, сначала при скролле должны меняться только картинки, а страница оставаться статичной? И только после того, как картинки закончатся - начинаться скролл? По крайней мере именно так я понял из вопроса.
    3. Какой размер и характер картинок? Может быть подойдет спрайтовая анимация?

    Совсем другое дело
    Все Ваши ответы уйдут в пустоту. Призываю не отвечать данному товарищу, пока он не отреагирует на предыдущие вопросы.
    В большинстве вопросов есть правильные ответы. На месте модераторов я бы за такое банил.
    Iewedw7.png
    Ответ написан
  • Как лучше оптимизировать JavaScript код?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Используете ли Вы на сайте jquery? Код можно существенно сократить, используя, например, data-атрибуты.
    Ответ написан
  • Какие интерактивные лекции по программированию вы можете посоветовать?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Учитывая конкретику Вашего вопроса, наиболее логичным ответом будет: «Попробуйте что-нибудь поискать в интернете».
    Ответ написан
    Комментировать
  • Как проверить точку в секторе круга между двух углов?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Ок
    У нас есть окружность с известным радиусом, на ней есть два угла, образующих сектор между ними

    Серьезно? у Вас углы на окружности? Как вообще соотносятся цифры слева с картинкой справа?
    Как понял я: есть два не совпадающих отрезка, с началом в начале координат и концами на окружности. Между отрезками образуется сектор (их образуется два, к Вашему сведению, так что определитесь какой именно сектор мы ищем - больший или меньший, какой из равных, если два сектора равны). Вам известны полярные координаты концов этих отрезков. Если Вы не знаете что такое полярные координаты, то на минуточку - Вы в интернете - беретесь решать такую задачу - потрудитесь выяснить! Не ждите, что Вам тут объяснят школьную геометрию!
    Далее, зная координаты отрезков в полярной системе координат (ПСК) и координаты точки в декартовой (прямоугольной) системе координат (ДСК)- или переводите первые во вторые, или наоборот. Советую использовать ПСК. Получаете значение радиуса и угла. Радиус уже может дать ответ, так как если радиус больше радиуса окружности, то точке вне окружности. Получив угол - сравниваете значение - оно должно лежать между двумя углами.
    Если не знаете, как перевести ДСК в ПСК - см. выше, у Вас в руках все знания мира.
    Ответ написан
  • Как сделать вывод div в нужном месте после клика по ссылке ?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    <div id="block-links" class="bar">
        <a id="close" href="#" title="Закрыть">X</a> Молодец!
    </div>

    $(document).ready(function() {
      $('#open-close').show();
      $('#block-links').hide();
    
      $('#open-close').click(function(event) {
        event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
        $('#block-links').show();
      });
      $('#close').click(function(event) {
        event.preventDefault();
        $('#block-links').hide();
      });
    });
    Ответ написан
    2 комментария
  • Как сделать затемненный фон css?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Самая первая строчка закомменчена неправильно, забыли слеш. Поэтому весь класс overlay не работает. Проверил на сайте - то же самое. chelyabinsk.izet.ru/testovik/111.css
    Кстати, не называйте файлы одними цифрами, начните с буквы.
    /* Форимируем слой затемнения фона */
    .overlay {
        background-color: rgba(0, 0, 0, 0.7);
        bottom: 0;
        cursor: default;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        visibility: hidden;
        z-index: 1;
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
    }
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    /* Позиционирум медиа-элементы внутри окна */
    .is-image {
      width: 100%;
      display: inline-block;
      height: auto;
      margin: auto;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    embed, iframe {
      width: 100%;
      min-width: 320px;
      max-width: 600px;
     
      margin: auto;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    /* Формируем и позиционируем всплывающее окно */
    .popup { 
        min-width: 320px;
        max-width: 600px;
        width: 600px;
        margin: auto;
        background-color: #fff;
        border: 3px solid #fff;
        display: block;
        left: 0; right: 0;
        opacity: 0;
        padding: 15px;
        position: fixed;
        font-size: 14px;
        top: 0;
        visibility: hidden;
        z-index: 10;
    /* Скругление углов окна  */	
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    /* Тень блока окна  */	
        -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    /* Устанавливаем эффект перехода появления окна */ 
        -webkit-transition: opacity .5s, top .5s;
        -moz-transition: opacity .5s, top .5s;
        -ms-transition: opacity .5s, top .5s;
        -o-transition: opacity .5s, top .5s;
        transition: opacity .5s, top .5s;
    }
    /* Устанавливаем позицию появления окна */ 
    .overlay:target+.popup {
        top: 42%;
        opacity: 1;
        visibility: visible;
    }
    /* Оформляем и позицонируем кнопку закрытия */
    .close {
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid #ccc;
        height: 24px;
        line-height: 24px;
        position: absolute;
        right: -13px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;padding: 0;
        top: -15px;
        width: 24px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        font-size: 14px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    }
    .close:hover {
        background-color: rgba(64, 128, 128, 0.8);
    }
    .popup p, .popup div {
        margin-bottom: 10px;
    }

    И присвойте z-index как написано ниже, чтобы окно под хедер не залезало.
    .overlay:target + .popup {
        opacity: 1;
        top: 42%;
        visibility: visible;
        z-index: 999;
    }
    Ответ написан
  • Какая должна быть структура сайта на bootstrap 3 ?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Это слишком общий вопрос. Подсказки Вам следующие:
    1. Если решили использовать фреймворк, то используйте его по максимуму или берите из него только то, что нужно, например, только сетку. Бутстрап это позволяет делать
    2. Нет ничего плохого в том, что Вы пишете свои классы. Верстать используя только стандартные классы бутстрап можно, но разве что в админках или веб-приложениях, где дизайн не главное
    3. Структура сайта зависит от его направленности и многих других факторов
    Ответ написан
    Комментировать
  • Как активировать и деактивировать кнопку с помощью js ?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Вот пример codepen.io/iiil/pen/rJtdk

    html
    <button class="btn">1</button>
    <button class="btn disabled" disabled>2</button>
    <button class="btn disabled" disabled>3</button>

    js
    var buttons = $(".btn");
    buttons.eq(0).click(function() {
       buttons.filter(".disabled").removeClass("disabled").attr('disabled',false);
       $(this).addClass("disabled").attr('disabled',true);  
    });

    Код @LuckyTrue только сделает кнопки выглядящими неактивными.
    Ответ написан
    1 комментарий