• Можно сделать такой mixin для scss?

    Elwen
    @Elwen
    Можете. Но для сокращения итогового css, я бы добавила в миксин if, что бы выводились только те значения, которые нужны:
    @mixin position($position, $top, $right, $bottom, $left){
      position: $position;
      @if($top!=null){
        top: $top;
      }
      @if($right!=null){
        right: $right;
      }
      @if($bottom!=null){
        bottom: $bottom;
      }
      @if ($left!=null){
        left: $left;
      }
    }

    .block{
      @include position(relative, 20px, null, null, -45px);
    }

    От проверки на 0 отказалась, что бы в крайнем случае можно было задать именно 0.
    Ответ написан
    3 комментария
  • Как поставить после каждого третьего элемента hr?

    alsopub
    @alsopub
    Ну как вариант, если брать только CSS - codepen.io/anon/pen/GZQydd
    Ответ написан
    Комментировать
  • Как копировать письма из gmail в excel в режиме реального времени, по мере их поступления?

    kascor
    @kascor
    Web-программист
    Как вариант, Google Drive + IFTTT
    Ответ написан
    Комментировать
  • Учу JS. Правильно ли я понимаю?

    @IceJOKER
    Web/Android developer
    Если учите JS - учите JS, а не библиотеку jQuery , которая написана на JS.
    После того как выучите хотя бы основы JS, тогда смотрите в сторону jQuery.

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

    learn.javascript.ru - Good Luck
    Ответ написан
    1 комментарий
  • Как сделать смену цвета меню при прокрутке к article?

    Elwen
    @Elwen
    Присвойте каждой ссылке свои стили при активности. Для плавной смены цвета используйте transition, у которого время анимации равно времени прокрутки страницы.
    https://jsfiddle.net/dbxpvhfp/

    Или применяйте к каждой ссылке по клику класс с нужными стилями.
    Ответ написан
    8 комментариев
  • Почему препроцессор ломает кирилицу?

    Odinokun
    @Odinokun
    Поставь кодировку utf-8 в начале scss файла.
    Вот тут про это написано htmlbook.ru/css/charset

    Файл css.map позволяет в отладчике видеть в какой строке scss а не css файла написан код.
    Ответ написан
    Комментировать
  • Есть хорошие примеры использования data-*?

    @yuras666
    Удобнее всего работать с ними через jquery data - это решит проблему совместимости со всеми браузерами.
    https://api.jquery.com/data/
    Например у нас есть кнопки по клику на которые у нас должны открываться попапы:
    <button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>
    <button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>
    <button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>

    Далее, мы можем в js описать только один обработчик:
    $(document).on('click', '[data-open-dialog]', function(){
       showPopupById($(this).data('openDialog'));
    });

    Кроме того, ты можешь хранить в data любой json, приводя пример с тем же попапом, можно хранить данные об объекте и строить из них попап после клика на кнопку.
    Еще пример jquery плагины часто ставят флаг о том, что они уже установлены на элементе, чтобы избежать повторной инициализации. Скажем $('#search-input').autocomplete() при первой инициализации запишет элементу $('#search-input').data('isAutocompleteInstall', true) и инициализирует элемент, а при втором вызове уже не будет инициализироваться по новой. Как-то так, если я верно понял твой вопрос.
    Ответ написан
    5 комментариев
  • Вопрос: *{ что вы тут обычно пишете? }?

    @Abduvohid
    Начинающий Java програмист
    Я тоже использую такой код:
    * {
    	padding: 0;
    	margin: 0;
    	box-sizing: border-box;
    	font-family: "RobotoRegular", Arial, Calibri;
    }

    а иногда вот такой:
    *, *:hover {
    	padding: 0;
    	margin: 0;
    	box-sizing: border-box;
    	font-family: "RobotoRegular", Arial, Calibri;
    	transition: all 0.3s;
    	-webkit-transition: all 0.3s;
    	-o-transition: all 0.3s;
    	-ms-transition: all 0.3s;
    	-moz-transition: all 0.3s;
    }
    Ответ написан
    Комментировать
  • Вопрос: *{ что вы тут обычно пишете? }?

    AppFA
    @AppFA
    Frontend developer at Yandex
    Я в своих проектах использую такое:
    *, :after, :before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    Ответ написан
    1 комментарий
  • Как правильно сделать скрипт?

    Как-то так.
    <div class="ru lang">ru</div>
    <div class="ua lang">ua</div>
    <div class="sl lang">sl</div>

    $('html').on('click','.lang',function() {
    	$('.lang').not(this).addClass('hidden').removeClass('display');
    	$(this).removeClass('hidden').addClass('display');
    });
    Ответ написан
    Комментировать
  • Как сделать заглавный экран лэндинга во всю ширину и высоту?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Достаточно для блока задать:
    block {
    width:100vw;
    height:100vh;
    }
    Ответ написан
    7 комментариев
  • Как генерировать автоматические перьвю исходя из кода?

    myPhotoBrowser.open(index);
    Open Photo Browser on photo with index number equal to "index" parameter. If "index" parameter is not specified, it will be opened on last closed photo.

    Там же всё просто, вам нужно передать индекс кликнутой фотки
    myApp.onPageInit('photos', function (page) {
        var $$thumbs = $$('.ks-pb-popup');
        $$thumbs.on('click', function () {
            var index = $$thumbs.indexOf(this);
            photoBrowserPopup.open(index);
        });
    });

    Для динамической генерации превью
    myApp.onPageInit('photos', function (page) {
        var $$wrapper = $$(page.container).find('.content-block');
        
        photoBrowserPhotos.forEach(function(photo) {
            $$wrapper.append(
                '<a href="#" class="u_img ks-pb-popup">' +
                    '<img src="' + photo.url + '" alt="img"/>' +
                '</a>');
        })
    
        var $$thumbs = $$('.ks-pb-popup');
        $$thumbs.on('click', function () {
            var index = $$thumbs.indexOf(this);
            photoBrowserPopup.open(index);
        });
    });

    А на странице photos пустой <div class="content-block"></div>
    Ответ написан
    3 комментария
  • Как написать php скрипт чтобы он не выполнялся при загрузке страницы?

    svfat
    @svfat
    ☺Нужен VPS? Два месяца бесплатно. Смотри профиль☺
    Надо сделать проверку на POST-метод, оберните код в if:
    if ($_SERVER['REQUEST_METHOD'] == 'POST')
    Ответ написан
    Комментировать
  • Как правильно сделать функцию click?

    neuotq
    @neuotq
    Прокрастинация
    Гм.. как я понял перевод не меняет содержимое блоков, а подставляет другую кнопку, с русским текстом.
    А так как id одинаковый, то второй игнорируется, только первый попавшийся. Так что либо делать по классу, либо учитывать разные id, либо для перевода менять содержимое, либо удалять ноду с другим переводом и переписать обработчик события клик с учетом динамическогл контента.
    Ответ написан
    Комментировать
  • Как правильно сделать функцию click?

    @iShatokhin
    JS developer
    Атрибут id (который "signin") должен быть уникален в пределах узла DOM (а если строго следовать W3C, то во всем документе). Замените на class "signin", или сделайте два разных id и обработчик повесьте так:

    $('#signin-ua, #signin-ru').click(function() {
        $('.body-recruitment.body-index .wrapper').removeClass('hidden');
        $('.body-recruitment.body-index .layer').removeClass('display');
        $('.ads').removeClass('hidden');
    });
    Ответ написан
    Комментировать
  • Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

    mr_T
    @mr_T
    Web-разработчик
    Сам верстаю много, так что попробую дать советы, но это чисто мое мнение, поэтому постарайтесь реагировать на это соответствующе :)

    Сначала по вопросам непосредственно в этом посте:
    1) Заказчик может такое принять, а может и не принять - тут зависит от того, насколько он дотошен, вот и все . В любом случае нужно понимать, что редко бывает так, что заказчик что-то понимает в том, что вы делаете, поэтому его "хотелки" скорее всего будут относится к его субъективному восприятию внешнего вида сайта. Но так же нужно понимать еще и то, что внимание к мелочам дает хороший результат на это восприятие в том числе :)
    2) Лично я делаю так, чтобы в шаблоне просто можно было написать что-то вроде
    <? foreach ($slide in $slides): ?>

    <? endforeach; ?>
    и не париться о том, что произойдет дальше (в разумных пределах, конечно - чаще всего слайды должны быть определенных размеров, но об этом нужно говорить).

    Теперь по вашему коду:
    1) Попробуй использовать sass/less с автопрефиксами, компассами и пр. - очень будет удобно писать стили.
    2) Лично я крайне редко пользуюсь сторонними слайдерами, поскольку они часто используют кучу невнятных классов, дивов, врапперов, иннер-врапперов, аутер-врапперов, контейнеров и т.д., хотя чаще всего достаточно несколько строк в js, задача которых просто давать нужные классы нужным слайдам, и анимации в css - в итоге так даже быстрее, чем настраивать под себя какой-нибудь сторонний jquery слайдер. А если один раз сделать заготовку на будущее, то вообще все за пару минут можно сделать.
    3) Вместо спрайтов во многих случаях лучше использовать шрифтовые иконки (например, с icomoon.io). Например, для значков соц-сетей. Из приятных бонусов - шрифты можно красить в любой цвет и анимировать, а так же они векторные, что позволяет не париться по поводу дисплеев с высокой четкостью. Можно еще svg, но с ними немного сложнее, зато гибко.
    4) Обычно на подобных сайтах лепят фиксированное меню, которое сужается при прокрутке ниже (что, кстати, опять-таки решается css transition'ами и парой строк в js для задания класса типа small).
    5) #link-services feature лучше сделать не section, а article или figure - так будет правильнее семантически. А section'ами лучше сделать #link-services, #link-portfolio и т.п. Почитай на любом ресурсе о семантическом значении html5 тегов, там много интересного можешь найти :)
    6) Я бы как-то выделил элементы формы при фокусе, сделал их поконтрастнее, а то на некоторых экранах текст может сливаться с фоном инпута.
    7) p.section-description лучше сделать без класса вообще, а в css задать общий стиль для всех абзацев, изменяя его в конкретных случаях при необходимости.
    8) Раз уж сайт такой весь из себя анимированный, то что ж вы не сделали анимацию ссылок :) ? Хотя бы на работах в портфолио обязательно нужно это сделать, причем недостаточно просто картинок, нужны как минимум еще заголовки, которые могут, например, всплывать по наведению. Очень красиво получаются в таких моментах анимации transform: scale(...) вместе с opacity.
    9) header и footer не всегда по одному в одном документе, эти элементы могу вкладываться так же и в article или section. Как следствие лучше дать своим body > header и body > footer внятные классы или айдишники, иллюстрирующие их принадлежность ко всей странице, а не к отдельным блокам.
    10) .feature > aside я могу быть не прав, но мне кажется, что это семантически неверно. Aside должен показывать какую-то часть документа, которая помогает ориентироваться в контенте на сайте (например, фильтры, боковое меню). В твоем случае это просто иконка, так что тут лучше обойтись просто div'ом.
    11) По js: у вас какой-то странный блок сверху, где задаются глобальные переменные. Вы там используете jQuery, при этом не помещая код в $(document).ready. Весь код jQuery, связанный с селекторами (как минимум) всегда должен быть внутри ready. Да и какие-то странные конструкции там вроде var buttonAll = $('.works-button')[0], которые потом используются снова как $(buttonAll). Лучше в buttonAll записать строки с селекторами тогда уж, а не использовать jQuery 2 раза для одного и того же. Да и конструкции вроде $('.works-button')[0,1,2,3] довольно опасны. Тут лучше дать каждой кнопке какой-нибудь атрибут типа data-category (или вообще в href писать #category-name), и написать один обработчик для всех этих кнопок, который просто фильтрует работы по значению этого атрибута. Так будет проще в будущем что-то поменять, при этом совершенно не затрагивая код js.

    В общем, как-то так.
    Ответ написан
    4 комментария