• В чем разница написания таких событий клика у jquery?

    @IoannGrozny
    Front-end разработчик
    1. Делегирование события. Необходим, когда у вас имеются динамические манипуляции с контентом. Такие конструкции, как правило, более производительны, т.к. событие навешивается один раз на родительский элемент. Может не сработать, если у вас прерывается всплытие(об этом забывать нельзя):
    <body>
        <div class='no-bubble'>
            <p class='click-target'></p>
        </div>
    </body>

    // клик по .click-target не сработает никогда!
    $('body').on('click','.click-target', function(){
        // do something...
    });
    $('body').on('click','.no-bubble', function(e){
        e.stopPropagation();
    });

    2 и 3 работают аналогично друг другу, но за небольшим исключением:
    $('#id').click();
    // не равносильно:
    $('#id').on('click');
    // а работает как:
    $('#id').trigger('click');
    // т.е. не навешивает обработчик клика, а эмулирует клик по объекту.

    А кроме того, 1 и 2 варианты позволяют делать так:
    $('id').on('click mouseover mouseout', function(e) {
       if (e.type === 'click') {
            // обработать клик...
       } else if (e.type === 'mouseover') {
           // ну принцип понятен, да?..
       }
    });
    Ответ написан
    2 комментария
  • Нужно разобраться с плеером jplayer, как сделать кнопки качество видео?

    @IoannGrozny
    Front-end разработчик
    2) Начну со второго вопроса. Ресурсов на русском дать не могу. Но суть работы следующая: если браузер не поддерживает воспроизведение средствами HTML5, то подтягивается фоллбэк на AS. На работу ваших скинов это никак не влияет, от этого зависит только то, как браузер воспроизводит сам контент. Все ваши контролы будут работать, так что подключайте тот swf файл, который поставляется с плагином и больше об этом не думайте.

    1) Ну а теперь первый вопрос, самое, так сказать, вкусное. Кратко, можно. Подробнее:
    Шаг 1. Создайте сам контрол:
    <select class='quality'>
        <option value='медиа объект - качество 240'>240</option>
        <option value='медиа объект - качество 360'>360</option>
        <option value='медиа объект - качество 480'>480</option>
        <option value='медиа объект - качество 720'>720</option>
    </select>

    Шаг 2. Сама смена качества видео:
    // подразумеваю, что переменная player - ваш плеер;
    $('.quality').on('change', function() {
        var currentTime = player.data("jPlayer").status.currentTime, //сохраняем текущее время
              media = $(this).val(); // сохраняем значение выбранной опции
        
        player.jPlayer('setMedia', media); // меняем медиа объект;
        player.jPlayer('play', currentTime); // запускаем плеер с того места, где остановилось проигрывание в предыдущем качестве
    });
    Ответ написан
    Комментировать
  • Как сделать так, чтобы шапка на сайте не обрезалась?

    @IoannGrozny
    Front-end разработчик
    У вас бэкграунд шапки повешен на внешний элемент. У шапки фиксированная ширина, а у бэкграунда нет. Вообще, свёрстано всё ужасно, все элементы разной ширины, при сжатии окна по ширине элементы начинают расползаться. Например, у вас на скриншоте очень выпирает область контента. Я могу порекомендовать вот что:
    html, body {
        min-width: 1010px;
    }
    Ответ написан
  • Как бы сделать так, чтобы по по клику на элемент язык менялся с eng на ru и обратно(toogle), использую data-value атрибут для хранения?

    @IoannGrozny
    Front-end разработчик
    У вас всё работает, но вы только устанавливаете английский язык, на русский вы его уже не меняете.
    я бы реализовал это сменой класса у элемента. Вот так, например.
    Ответ написан
    Комментировать
  • Fullcalendar проблема с датами или так задумано?

    @IoannGrozny
    Front-end разработчик
    Я думаю, так задумано, чтоб явно показать что 'Long Event' продлится 9.09.2014 весь день(т.е. до 00:00 10.09.2014). в противовес этому вы можете написать допустим:
    {
        start: '2014-09-07T8:00:00',
        end: '2014-09-09T17:30:00'
    }

    И заметьте, что 9.09 в 17:30 события уже не будет, это и есть понятие "включительно".
    Ответ написан
  • Как удалить динамически созданный элемент jquery?

    @IoannGrozny
    Front-end разработчик
    Во-первых, если вы создаёте множество динамических элементов, не используйте в них id и не ссылайтесь на них по id. Селектор по id выбирает только первый элемент из списка, потому что такой элемент должен быть один.
    Во-вторых, метод .click() не работает с динамически добавленными элементами. Поэтому событие вешается только на тот элемент, который уже был на странице. Навешивайте обработчик события методом .on() на элемент html. Это проделегирует обработчик на все элементы, указанные в качестве контекста, включая те, что были созданы динамически.
    Суммируем:
    <span class="addField add">
        <i class="icon"></i>Добавить
    </span>
    <div class="inputs">
        <div>
            <input type="file" name="dynamic[]" class="field" > 
            <span class="remove">Удалить</span>
        </div>
    </div>

    $(document).ready(function () {
        $('html').on('click','.add',function () {
            $('<div><input type="file" class="field" name="dynamic[]" /><span class="remove">Удалить</span></div> ').fadeIn('slow').appendTo('.inputs');                                
        });
        $('html').on('click','.remove', function () {                               
            $(this).parent().remove();    
        });
    });
    Ответ написан
    Комментировать
  • Как правильно преобразовать web шрифт?

    @IoannGrozny
    Front-end разработчик
    Если символа в принципе нет в наборе шрифта(как в вашем случае), он не появится ни при каких настройках. Точно также вам не удастся получить кириллические символы из шрифта, который поддерживает только латиницу. Либо откажитесь от буквы «ё» на сайте(такой текст поймет любой человек), либо смените шрифт.
    Ответ написан
    Комментировать
  • Как можно генерировать CSS-спрайты?

    @IoannGrozny
    Front-end разработчик
    Да, конечно. Есть хорошие решения, которые генерируют спрайты. Также в виде grunt- и gulp-плагинов.
    Мне нравится вот это: https://github.com/Ensighten/spritesmith
    Ответ написан
  • Можно ли использовать несколько одинаковых @media в css файле ?

    @IoannGrozny
    Front-end разработчик
    вы можете писать медиа хоть для каждого блока в отдельности. но это скорее всего будет медленно работать. я в работе обычно пишу медиа-запросы для каждого блока, а потом с помощью grunt сливаю их в один.
    Ответ написан
    Комментировать
  • Почему тормозит css анимация при загрузки конента во фрейме?

    @IoannGrozny
    Front-end разработчик
    попробуйте добавить к анимированному блоку следующее свойство:
    transform: translatez(0);
    Это свойство принудительно включает аппаратное ускорение графики. Но не уверен, что это панацея.
    Ответ написан
    Комментировать
  • Как сделать правильно установки href?

    @IoannGrozny
    Front-end разработчик
    $(function() {
    		$('.left-img-thumb').each(function() {
                            // ошибка в следующей строке
    			$('.left-img-thumb').unwrap().wrap('<a class="rewrd" target="_blank"></a>');
    				var urlImg = $(this).attr('src');
    				var nameImg = /\/(\d+)\.(?:\w{1,5})$/.exec(urlImg);
    				var j = nameImg[1];
    				var link = 'http://www.anastasiadate.com/pages/lady/profile/profilepreview.aspx?LadyID=' + j;
                                    // и в этой
    				$('.rewrd').attr('href', link);
    		});
    });


    Вот так верно:
    $(function() {
    		$('.left-img-thumb').each(function() {
                              // так верно
    			$(this).unwrap().wrap('<a class="rewrd" target="_blank"></a>');
    				var urlImg = $(this).attr('src');
    				var nameImg = /\/(\d+)\.(?:\w{1,5})$/.exec(urlImg);
    				var j = nameImg[1];
    				var link = 'http://www.anastasiadate.com/pages/lady/profile/profilepreview.aspx?LadyID=' + j;
                                    // так будет работать, что-то я это пропустил:
    				$(this).closest('.rewrd').attr('href', link);
    		});
    });

    В вашем варианте последний атрибут применяется ко всем элементам с классом 'left-img-thumb', а ссылка в каждой итерации применяется ко всем элементам '.rewrd', а не к конкретной ссылке.
    Ответ написан
    7 комментариев
  • Можно ли-то заставить работать autoplay на ios?

    @IoannGrozny
    Front-end разработчик
    Я думаю, что так получится:
    $(window).load(function() {
        var video = document.getElementById('/*element id*/');
    
        video.play();
    });
    Ответ написан
  • Как запретить iphone оформлять синим телефон?

    @IoannGrozny
    Front-end разработчик
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    Ответ написан
    1 комментарий
  • Как лучше на CSS реализовать такую штуку?

    @IoannGrozny
    Front-end разработчик
    Одним CSS никак. Либо делать таблицу и выделять столбцы с помощью JS, либо делать отдельные блоки и выравнивать ячейки с помощью JS. Так или иначе, но JavaScript задействовать придётся. Ещё можно сделать фиксированные отдельные блоки, где все части блока будут иметь строго заданную высоту.
    Ответ написан
  • Как сделать выборку объекта от определенного родителя с помощью nth-child и SCSS?

    @IoannGrozny
    Front-end разработчик
    ААА, я догнал. Проблема не в SASS, проблема в механике работы CSS. В таком случае, я вам помогу. Перебирать нужно селекторы, которые лежат на одном уровне друг с другом. Вот так:
    @for $i from 1 to 5
        li:nth-child(#{i}) .icon {
            some: rule;
        }
    Ответ написан
    Комментировать
  • Почему не работают медиа запросы либо css?

    @IoannGrozny
    Front-end разработчик
    Вопрос, а зачем вы дублируете медиа-запрос в теге link?
    Исходя из вашего кода у меня 2 варианта:
    1) Ваш монитор имеет разрешение более 1600 пикселей по ширине (ваш тег link не будет подгружать css для таких мониторов);
    2) Неправильное значение атрибута href в теге линк (css лежит по другому адресу и не подгружается вовсе).
    Я склоняюсь к первому варианту.
    Ответ написан
  • Как организовать плавное изменение position top ?

    @IoannGrozny
    Front-end разработчик
    jsfiddle.net/s1bf5bdL

    a) Transition прекрасно работает. Просто необходимо указывать анимируемое свойство во всех состояниях:
    .wrap .someclass {
        transition: all .5s ease;
        top: 150px;
    }
    .wrap:hover .someclass {
        top: 0;
    }

    b) Чтобы получился круг, вам нужно указать border-radius: 50% для квадрата:
    .circle {
        width: 25px;
        height: 25px;
        line-height: 25px; // центрируем текст по вертикали;
        text-align: center; // и по горизонтали;
        border-radius: 50%;
    }
    Ответ написан
    Комментировать
  • Есть ли в природе обширная книга по front end разработке?

    @IoannGrozny
    Front-end разработчик
    От А до Я - нету. Это бы получился многотомник покруче БСЭ или Полного собрания сочинений В.И.Ленина. Современный фронтэнд - огромнейшее поле. HTML, CSS, JS, JS библиотеки, JS фреймворки, CSS фреймворки, HTML-препроцессоры, CSS-препроцессоры, MVC фреймворки, SVG, HTML5 API, разметка шаблонов для разных серверных языков (Java,ASP,..), CMS, JS плагины, task-менеджеры, микроразметка и многое другое. При этом фронтэнд может выводиться на огромной массе устройств - от компьютеров и мобильных телефонов, до холодильников и телевизоров. А теперь помножьте это на огромное количество несовместимостей и специфичных багов, которые исправляются кучей хаков, фоллбеков и полифиллов. В одной книжке это точно не уместить. Постигайте всё на практике, спрашивайте здесь и на stackoverflow, читайте тематические форумы. В книгах только основы, без которых не обойтись.
    Ответ написан
    3 комментария
  • Отдельный сайт под мобильник или адаптивный?

    @IoannGrozny
    Front-end разработчик
    Я считаю, что для высокопосещаемых ресурсов глупо делать один адаптивный сайт. Лучше сделать разделение по устройствам и использовать редиректы. Так и код получится более чистый и расширяемый. Сайт будет проще оттестировать, проще дебажить, дешевле поддерживать. Он не будет перегружен кучей ненужных скриптов и стилей, будет быстрее работать.
    Полностью адаптивный дизайн подходит для небольших блогов, лэндингов, лёгких визиток. В данном случае, я порекомендовал бы частичную адаптивность: к примеру мобильная версия и десктоп-планшет, либо десктопная и мобайл-планшет.
    Ответ написан
    Комментировать
  • Как и откуда сделать подгрузку регионов / городов / стран / улиц с логической связью?

    @IoannGrozny
    Front-end разработчик
    Возможно вам подойдёт Google Address API? Автодополнение как в гуглокартах.
    https://developers.google.com/places/
    Ответ написан
    Комментировать