• HTML Map generator - удобный Онлайн сервис для создания тегов USEMAP и AREA

    HTML Map generator - удобный онлайн сервис для создания тегов USEMAP и AREAПредставляю Вашему вниманию небольшой онлайн сервис для создания тегов USEMAP и AREA  HTML Map generator

    Тем, кто сейчас скажет, что это не сильно актуально и уже давно сделано куча аналогов, отвечу, что делал это не просто так, а для заказчика, а значит необходимость есть. Кроме того применил одну очень интересную фишку я думаю она будет многим интересна. 

  • JavaScript сниппеты

    JavaScript  image.onload срабатывает не всегда

    Из-за кеша событие image.onload срабатывает не всегда. Поэтому после обычной практики назначения обработчика события загрузки, нередко добавляют еще проверку на загруженность фото.

  • php htmlspecialchars эквивалент на javascript

     Самая простая и удобная

    function htmlspecialchars( html){
      var div =  document.createElement('div');
      div.innerText = html;
      return div.innerHTML;
    }
    

    но это работа с дом. Медленно.

    Другой вариант.

    function htmlspecialchars(str) {
     if (typeof(str) == "string") {
      str = str.replace(/&/g, "&"); /* must do & first */
      str = str.replace(/"/g, """);
      str = str.replace(/'/g, "'");
      str = str.replace(/</g, "<");
      str = str.replace(/>/g, ">");
      }
     return str;
     }

    далее

  • Делаем красивый combobox с умным поиском на jQuery

    Сегодня сделаем функциональный combobox с умным поиском. На выходе получим нечто такое

    Умный combobox делаем на jquery

    Одной из главных фич, будет то, что поиск будет вестись не исключением, а сортировкой. При этом, сортировать будем по умному, а не простым сравнением. 

    Обычно, при создании подобных плагинов, делают проверку на совпадение подстрок и тогда возвращают результат. У нас будет плагин, который на слово kazam, вернет в первой строчке KAZAN. 

    Приступим. 

  • Добавляем в jQuery $.browser

    jQuery Browser  В jQuery плагин $.browser устарел, и его удалили. Разработчикам советуют использовать для этих целей специальные инструменты типа Modernizr. Беда в том, что браузеров становится очень и очень много. Следить за всеми ними уже не так важно, новые версии jQuery не поддерживают ie6-7, что правильно. 

      По факту - все проекты, где была обновлена библиотека если они использовали этот модуль перестают работать. Можно начать переписывать весь код, под новую версию, а можно поступить иначе: подключить этот плагин вручную, и тогда старый код не придется менять. Просто подключаем к странице файл с плагином и все работает, как прежде. 

  • Дружим JSLint с Notepad++

    У Notepad++ есть плагин JSLint. Его можно установить из менеджера плагинов (Плагины  -> Plugin Manager ->
    Show Plugin Manager -> JSLint -> Install
    ). Когда я первый раз его установил то не мог нарадоваться. Он позволил мне писать очень красивый код по канонам. Но, радость моя была недолгой. Через пару обновлений NPP, плагин перестал работать. Его автор быстро написал фикс обновление. Я его установил (из плагин менеджера оно недоступно). Но теперь плагин стал глюканатом натрия в кубе. Никакие настройки не позволяли убрать некоторые ошибки. Пример: я исторически привык использовать tab вместо пробелов. Однако сообщество по известной причине (http://www.jslint.com/help.html#new) отвергает табы и использует 4-е пробела. Это их право, вопросов нет. Но я использую табы. И вот этот плагин мне говорит, что я должен использовать пробелы место табов. Это поведение отключается директивой white: true, но эта же директива отвечает и за то, чтобы не было лишних пробелов, к примеру перед переносом строки. Раньше онон мне говорило, что там намешаны пробелы с табами. Теперь либо то либо это. Это к плагину NPP никакого отношения не имеет. Проблема плагина в том, что он очень не чутко реагирует на изменение настроек. Иногда практически не реагирует. Поэтому, вот нашел решение, которое использует связку NodeJS  и JSLint модуль через NppExec плагин.

  • Как обернуть html элемент div блоком на js

    Когда нет надобности подключать jquery к странице, она весит как минимум на 90 кб меньше. Это может быть критично для мобильных версий сайтов.

    Однако, с развитием 3G сетей, это не такая большая проблема. Гораздо серьезнее дела обстоят с производительностью. jQuery - это библиотека для десктопных браузеров, в ней столько кода и всяческих кроссбраузерных проверок и хаков, что любой "чих" будь то поиск элемента, или установка фокуса, вызывает бесконечную плеяду калбяков/проверок/кейсов.

    И я не утрирую. Попробуйте запустить любой метод на jquery в режиме отладки нажимая кнопку вхождения в методы. Уверяю Вас, кликать Вы устанете раньше, чем выйдите наружу.

    Поэтому там, где нет такой необходимости я рекомендую использовать нативный js

    В этом посте я расскажу, как обернуть любой html элемент на странице в собственный блок используя только js.

  • Как получить выделенную часть HTML кода в ckeditor

    При написании плагинов для ckeditor'а, часто возникает задача: необходимо получить выделенную пользователем информацию, а в некоторых случая произвести манипуляцию с ней. Если необходим просто выделенный текст, то тут все просто. У объекта editor есть метод getSelection(), он возвращает объект, который помимо полной информации о выделенном тексте содержит еще метод getSelectedText(). В простейшем случае в плагине это бы выглядело так:

    CKEDITOR.plugins.add('pluginname',{
        init: function(editor){
    	alert(editor.getSelection().getSelectedText())
        }
    });

    Надеюсь Вам понятно, что плагин работать не будет. Это псевдокод. При инициализации плагина, никакой текст не выделен.

    А как же насчет html кода,  для работы необходим именно он.

  • как проверить пересекаются ли два прямоугольника

    Часто при разработке различных интерфейсов возникает задача проверки пересекаются ли два заданных прямоугольника. Решение в данном случае очень простое, однако мной нигде не найденное и поэтому в очередной раз пришлось писать свой велосипед. При этом грабли на которые наступают разработчики одни и те же, а решение выдаваемые гуру на форумах работают лишь в частных случаях и не покрывают все варианты расстановки двух прямоугольников на плоскости. 

    варианты пересечений двух прямоугольников

  • Как сделать autosize textarea - или автоматическое изменение высоты многострочных инпутов

    Автосайз textarea​Казалось бы тривиальная задача: поле, которое бы автоматически меняло свою высоту в зависимости от внутреннего текста. Нечто подобное есть в редакторе, в котором я сейчас пишу этот текст ckeditor. Называется оно здесь autogrow и реализуется отдельным плагином. 

    Да, разумеется и для нативных инпутов есть множество jQuery плагинов, которые выполняют возложенную на них функцию. 

    Так сложилось, что мой блог - это не набор простых решений, типа берете такой плагин, подключаете и у Вас все работает. Нет. Я из тех людей, которых результаты запроса в гугле: "Как объединить два массива в, вызывают по меньшей мере негодование. 

    Плеяда статей и вопросов на stackoverflow, с ответом: $.extend

    У большинства сегодняшних web-developerov, нет ни тени сомнения, что jQuery подключен к любому проекту.

    Я не из таких программистов. Есть такие области, в которых нет и не будет jQuery. К примеру, написание плагинов на другие библиотеки или программы. К примеру плагин на ckeditor, допускает использование лишь API самого редактора, потому, как само оно вести порядка 0.5Mb и библиотека в 0.09Mb будет излишней нагрузкой.

    В таких ситуациях есть два пути: первый, написать все на API библиотеки, и второй сделать все на vanila.js 

    При втором варианте, наш код будет легко портировать на любую другую библиотеку. Все заработает даже вовсе без нее.

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

    Теперь к делу