• Какое написание class/id селекторов более правильное?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Гуглите БЭМ.

    Вообще, это личное дело каждого кодера.

    Я лично считаю, что лучше использовать подчеркивание для определения единого блока, а тире - для разделения блоков. Например, когда нужно быстро скопировать class или id, мы обычно дважды кликаем по нему в редакторе. Смотрим на реакцию:

    class="klikni_po_mne_dvazhdy"
    class="klikni-po-mne-dvazhdy"


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

    Далее, если имеем вложенность, то отделяем все внутренние элементы с помощью тире, например:
    class="video_player---buttons---play_button"
    Ну тут я нарочно использовал 3 тире подряд, чтобы было нагляднее видно разделение вложенности (про вложенность гуглите БЭМ).
    Ответ написан
    Комментировать
  • Как называется такой принцип верстки?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    если уж совсем быть точным, то
    Адаптивная верстка с использованием параллакс-эффектов.
    Адаптивность - это подстраиваемость под любые разрешения. Бывает резиновой и ступенчатой (или пороговой)
    Параллакс-эффекты - любые эффекты, которые позволяют изменить принцип стандартной прокрутки страницы. Хотя вообще параллакс - это немного другое, но в случае с сайтами, особенно в последнее время, термин используется для любых манипуляций при прокрутке страницы.
    Ответ написан
  • Ваше мнение о видеоуроках Евгения Попова?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Да ладно вам всем его хаить.
    У него были определенные знания и он их раскрыл на том уровне, на котором ими владел.
    Мы смотрели его курс вместе с супругой - она была вообще ламером, а у меня был опыт покруче Поповского.
    Для неё этот курс был полезен. Но я нашел в нём очень много ошибок (со своей-то колокольни) и иногда поправлял Попова, рассказывая супруге об альтернативных, более удобных методах решения той или иной задачи, или рассказывал то, что не освещал Попов.
    Но в целом, она просмотрела курс, почерпнула из него определенные знания и начала читать книгу другого автора. Т.к. в деле программирования одного источника не достаточно. Потом просто сравнила, в чем были недостатки Попова, и в чем недостатки другого источника
    Ответ написан
    2 комментария
  • Какая cms интернет-магазина подойдет?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Любую cms нужно допиливать под данный функционал. Подключать платежные системы и т.п.
    А cms подойдёт любая - главное, чтобы для неё были модули платежных систем.
    Ответ написан
    Комментировать
  • Ссылка на материал в материале?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Тяжело понять всё это без живого примера.
    Ключевая фраза - такая схема работает на другом сайте. Вы сравнивали версии движков? У Joomla 3, особенно в первых версиях (3.0, 3.1, 3.2) очень много глюков. Сам матюкался частенько на неё - но люблю как родную. :)
    Скорее всего дело в конкретной сборке. Обновите джумлу до более свежей версии или скопируйте компоненты menu и content из того проекта, где всё это работает в ваш нерабочий проект.
    Ответ написан
  • Есть ли какой обширный js plugin форм?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    ну сразу приходит на ум jquery.form
    malsup.com/jquery/form
    Ответ написан
    Комментировать
  • Фиксированное меню и якорь?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    1. якорь сделай не на <p>, а создай прямо перед ним <a name="news" class="anchor"></a> - это будет якорем. важно, ничего не размещать внутри этой ссылки.
    2. для ссылок .anchor создаем стили:
    .anchor {
    margin-top: -100px;
    display: inline-block;
    position: relative;
    height: 1px;
    width: 1px;
    }

    где 100px нужно заменить на высоту вашей фиксированной шапки. таким образом якорь будет физически находиться на 100px (или сколько там у вас) выше, чем он должен быть.
    Ответ написан
    3 комментария
  • Как сделать вывод другого html кода в popup для мобильных устройств?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Лучше всего используйте device.js matthewhudson.me/projects/device.js

    Подключите файл device.js на своей странице и скрипт сам определит, что это за устройство (мобильный, планшет или пк, а также поможет узнать ориентацию и систему устройства.
    А дальше просто добавьте скрипт с условием вроде:
    if (device.mobile()) {
      //показать сообщение
    } else {
      //ничего не показывать или показать что-нибудь другое
    }
    Ответ написан
    Комментировать
  • Почему возникает разное отображение в мобильных версиях браузеров chrome и firefox?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    дело в initial scale:
    На сайте Mozzilla dev есть такой код:
    <meta name="viewport" content="width=device-width, initial-scale=1">

    А у вас initial-scale=0.6.

    Не знаю, зачем вы использовали именно это значение, если намеренно, то придётся доверстывать вашу сайт под более узкие ширины. Для начала просто поставьте initial-scale=1.0, а также допишите maximum scale, minimum scale.
    Ответ написан
  • Как уменьшить ширину такого блока?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Это глюк вашего слайдера. Он, видимо, рассчитывает ширину холдера (ul) для превьюшек на основе их ширины, но чего-то не учитывает. Например, не учитывает рамки вокруг фотографий. К тому же, я там в настройках вроде увидел опцию, которая отвечает за ширину превьюшек - если она есть, то попробуйте поменять её.
    А самый простой и быстрый вариант - задать !important свойство в дефолтных стилях: joxi.ru/8AnNnVBsngKxAO - я на скриншоте указал 500px, а вообще советую сделать 100% !important.
    Ответ написан
    Комментировать
  • Как скачать видео с сайта espn?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Вообще, на многих сайтах срабатывает такая схема: www.youtube.com/watch?v=R7cL0kD6HaI - в инструментах для разработчиков в браузере Chrome можно наблюдать и скачивать все данные, которые подключает страница (в том числе и видео, аудио, шрифты, картинки, и все другие файлы).
    Но в данном случае это не работает, т.к. на espn видео загружается в потоковом режиме. Т.е. видео по сути разбито на маленькие кусочки, которые подгружаются по мере просмотра. joxi.ru/Vm6317dS7qJK2Z Такое видео не скачать.
    Единственный выход - включать видео в полноэкранном режиме и делать захват с экрана - к счастью, есть куча программ для захвата экрана (для игр, и т.д.) - но тут всё зависит от размера вашего монитора. Если у вас HD-монитор, сможете захватить HD-видео, иначе размер видео будет ограничен разрешением вашего экрана.
    Ответ написан
    Комментировать
  • Что за атрибут у тега input?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    этот атрибут придумал разработчик. да, это нарушает чистоту кода, но если DOCTYPE у страницы - XHTML или HTML5, то создание своих собственных атрибутов для тегов вполне допустимо.
    Скорее всего разработчик добавил этот вспомогательный атрибут, чтобы передать скрипту какие-то свойства данного инпута. Судя по названию атрибута, на странице используется Виртуальная клавиатура - это окошко, которое всплывает при фокусировке в этом поле. В этом окошке набор всех буков - если, например, человек с ограниченными возможностями или не имеет клавиатуры с кириллицей.
    Ответ написан
    Комментировать
  • Почему в WebStorm не корректно подсвечивается синтаксис jQuery?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    1. проверьте, сколько раз у вас подключается jQuery (должно быть не более одного раза),
    2. проверьте, подключены ли какие-нибудь другие библиотеки, которые могут резервировать $. Подключайте jquery-скрипты с помощью конструкции:
    jQuery(document).ready(function($){
    //здесь уже спокойно пишем всё через $
    });
    Ответ написан
    Комментировать
  • Почему используют class вместо явного id?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    тут несколько моментов:
    1. id имеет очень большой приоритет css. объяснить двумя словами тяжело, но вкратце, если вы задали какие-то свойства для id-селектора #x, что ни пишите в классовом селекторе .y, если он подтягивает стили от id-селектора, то они возьмут верх над классовым селектором. Никакие элементы не должны иметь приоритет над другими. Так удобнее редактировать стили.
    2. Есть неписанные "законы" БЭМ, которых придерживаются опытные разработчики. Существует много всяких философий БЭМ, самая популярная - яндексовская - погуглите. БЭМ позволяет лучше разбираться в коде, работать с препроцессорами и производить более удобные операции при работе в js.
    ...ну есть и еще несколько моментов.

    Главное отличие id от class в том, что стили id нужно задавать для одного элемента, уникального. А class можно применять для нескольких элементов. Даже если при разработке блок один, никогда не угадаешь, возможно придётся добавлять примерно такой же блок где-нибудь еще на странице - в таком случае id дублировать нельзя - ошибка css.

    Вообще, товарищи, используйте id никогда! Class куда удобнее и гибче (хотя бы в том плане, что для одного элемента можно задавать хоть 255 классов одновременно). Придумывались CSS-селекторы в конце 90х годов. Тогда HTML был совершенно на другом уровне, и разработчики смотрели в другую сторону. Им тогда хотелось управлять DOM с помощью JS методом GetElementByID - сейчас этот метод в чистом виде никто не использует. Есть жквери!
    Ответ написан
    6 комментариев
  • Как сделать подсветку синтаксиса языка разметки html в самописном редакторе?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    ну в textarea вообще подсветку не сделаешь.
    все современные WYSIWYG-редакторы сделаны по принципу подмены обычной textarea блоком, в котором можно вставлять разметку (т.е. обычный div) и при фокусе в этом блоке скрипт фокусируется и в textarea. Таким образом, набирая символы, мы их набираем по сути в скрытой textarea и они же дублируются в div, который видим. Ну а в div'е уже можно выделять текст, обводить его любыми span, в том числе теми, которые задают цвет.
    Ответ написан
  • Как в Sublime перестроить одно строчный код CSS?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    лучший вариант - прогнать по стандартным "Поиску и замене"

    Нажимаем Ctrl+H (выводим панель поиска и замены), нажимаем Alt+R (включаем режим регулярных выражений)
    1 этап: ищем ;, заменяем на ;\n
    2 этап: ищем {, заменяем на {\n
    3 этап: ищем }, заменяем на }\n
    Ответ написан
    Комментировать
  • Как начать показ блока при скролле?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    $("#slide01").css("display", "none");
    $(window).scroll(function(){
       if ($("body").scrollTop() > 0) { //если страница прокручена
         $("#slide01").fadeIn(2000); //выводим блок
       } else {//иначе
         $("#slide01").fadeOut(2000); //прячем блок
       }
    });
    Ответ написан
    2 комментария
  • Как в обратном порядке заполнить HTML форму из GET параметров?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    все переменные, которые присутствуют в адресной строке, страница получает в общей переменной $_GET.
    Например, если в URL есть ?question=123&answer=456, то смело в инпутах вписывайте
    <input type="text" name="question" value="<?=$_GET['question'];?>">
    <input type="text" name="answer" value="<?=$_GET['answer'];?>">
    Ответ написан
    2 комментария
  • Веб-студия, помощь?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Здесь работодателя не найдёшь, товарищ! Здесь сидят фрилансеры. Так что твоё завуалированное "резюме" с мыслью "а вдруг кто-нибудь увидит?!" не проканает.
    Ответ написан
    Комментировать
  • Какие существуют Material Design CSS-фреймворки?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Товарищи, ну есть же Гугловский фреймворк https://developers.google.com/web/starter-kit/ - выдержан в традициях material design.
    Ответ написан
    8 комментариев