markup-javascript.com » Методики http://markup-javascript.com Блог web-технолога Tue, 15 Mar 2011 13:35:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Запрет выделения текста с помощью jQuery http://markup-javascript.com/2010/05/14/zapret-vydeleniya-teksta-s-pomoshhyu-jquery/ http://markup-javascript.com/2010/05/14/zapret-vydeleniya-teksta-s-pomoshhyu-jquery/#comments Fri, 14 May 2010 14:59:47 +0000 Алексей http://markup-javascript.com/?p=713 На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время javascript. А чаще в проектах где приходится крутить слайдеры, кастомные скролы, drag&drop. Т.к. здесь активно участвуют события нажатия и перетаскивание которые также выделяют текст на сайте… хотя это не требовалось. Поэтому я часто пользуюсь данными функциями…

jQuery.fn.extend({
    disableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() { return false; };
                    this.unselectable = "on";
                    jQuery(this).css('-moz-user-select', 'none');
            });
    },
    enableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() {};
                    this.unselectable = "off";
                    jQuery(this).css('-moz-user-select', 'auto');
            });
    }
});

// кроссбраузерный вызов
$(document).ready(function(){
    $('body *').disableSelection();
});

$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.

  • disableSelection – запрет выделения
  • enableSelection – возврат выделения

Ничего нового я в этой статье не открыл, а просто хотел поделится функциями с вами, т.к. до определенного момента вечно искал что-то подобное в инете.

]]> http://markup-javascript.com/2010/05/14/zapret-vydeleniya-teksta-s-pomoshhyu-jquery/feed/ 21 @font-face вместо Cufon http://markup-javascript.com/2009/11/27/font-face-vmesto-cufon/ http://markup-javascript.com/2009/11/27/font-face-vmesto-cufon/#comments Fri, 27 Nov 2009 13:39:46 +0000 Алексей http://markup-javascript.com/?p=629 Использование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие JS библиотеки как sIFR , typeface и Cufon. В них есть как множество плюсов так и минусов… также можно задаться вопросом, что из этого списка лучше использовать для своего проекта, и я вам скажу, что лучше использовать @font-face и отображать шрифт как обычный текст.

Но как всегда есть браузеры ;) которые это свойство не поддерживают и нечего не остаётся как использовать вышеперечисленные библиотеки. Сегодня я хочу познакомить вас с методикой как, используя нестандартный шрифт, разграничить методы отображения шрифтов между этими браузерами.

Для этой цели я воспользуюсь jquery-fontavailable. Данный плагин позволяет определить поддержку нестандартного фонта браузером, даже если он подключен с помощью @font-face. Итак сразу покажу пример, в старых браузерах у вас отобразится шрифт сгенерированный cufon_ом, а в тех где поддерживается @font-face – будет текст.

Пример работы скрипта:

Стандартный плагин jquery-fontavailable работает иногда не корректно, поэтому я его немного усовершенствовал. Моя версия этого плагина выглядит так (копирайты я оставил, т.к. изменил всего две строчки):

/* fontAvailable jQuery Plugin, v1.1
 *
 * Copyright (c) 2009, Howard Rauscher
 * Licensed under the MIT License
 */
 
(function($) {
    var element;
   
    $.fontAvailable = function(fontName) {
        var width, height;
       
        // prepare element, and append to DOM
        if(!element) {
            element = $( document.createElement( 'span' ))
                .css( 'visibility', 'hidden' )
                .css( 'position', 'absolute' )
                .css( 'top', '-10000px' )
                .css( 'left', '-10000px' )
                .html( 'abcdefghijklmnopqrstuvwxyz' )
                .appendTo( document.body );
        }
       
        // get the width/height of element after applying a fake font
        var __FAKEFONT__ = element.parent().css('font-family');
        width = element
            .css('font-family', __FAKEFONT__)
            .width();
        height = element.height();
        // set test font
        element.css('font-family', fontName);
        return (width !== element.width() || height !== element.height()) && navigator.appVersion.indexOf('Chrome') == -1;
    }
})(jQuery);

Удивительно, но Google Chrome не поддерживает свойство @font-face из-за соображений безопасности. Но это можно обойти выключив в командной строке –enable-remote-fonts. Но все же, я сделал что бы в модифицированной версии шрифт в Chrome куфонился.

Что нужно для работы данного метода.

CSS код:

@font-face {
    font-family: "KB Zero";
    src:url("../fonts/zero.ttf");
}
html, body{
    font-family:Arial, Helvetica, sans-serif;
}
p {
    font:bold 16px "KB Zero";
}

В css коде мы с помощью @font-face объявляем font-family и указываем путь к файлу шрифта. Для body указывается стандарный web шрифт, это нужно для работы скрипта. Ну и применяем шрифт к тегу P. HTML код я показывать не буду т.к. там у меня находится только одно предложение завернутое в тег P.

JavaScript код:

$(document).ready(function(){
    if(!$.fontAvailable('KB Zero')) {
        Cufon.replace('p', {fontFamily: 'KB Zero'});
    }
});

Исходя из того, что пример был построен на базе Cufon, я не буду рассказывать как его подключить, это можно посмотреть сдесь.

Логика подключения fontAvailable выглядит элементарно…
$.fontAvailable(‘KB Zero’)- возвращает булеву переменную после проверки на поддержку браузером данного шрифта, а значит нам нужно инициализировать плагин в условии, и если шрифт не поддерживается – будет отрабатывать Cufon

Вместе с этим плагином можно использовать и sIFR с typeface, достаточно лишь инициализировать их в данном условии.

Скачать пример

]]> http://markup-javascript.com/2009/11/27/font-face-vmesto-cufon/feed/ 11 Растягивающаяся textarea http://markup-javascript.com/2009/07/05/rastyagivayushhayasya-textarea/ http://markup-javascript.com/2009/07/05/rastyagivayushhayasya-textarea/#comments Sun, 05 Jul 2009 12:30:53 +0000 Алексей http://markup-javascript.com/?p=507 Недавно наткнулся на интересную идею – как растягивать текстовое поле (textarea) в зависимости от контента в нем. Идея очень проста, поэтому не могу не поделится ее с вами.

Но раскрою карты не стразу, сначала расскажу как я это делал раньше и укажу проблемы которые при этом всплывают, может вы делали также, и теперь ошибок не повторите.

Способ №1: считать количество символов в тестовом поле… но проблема была с переводами строк, размером и типом шрифта, короче метод хардкодный.

Способ №2: тоже узнал недавно, изначально показалось прикольным методом… вставить HTML элемент одинаковой ширины с текстовым полем и при изменении в textarea вставлять контент в этот элемент, смотреть его высоту и соответственно менять высоту у текстового поля, все хорошо да только нужно свойство white-space:pre для отображения в этом элементе перевода строки, но из-за этого длинные строки в элементе не переносятся, поэтому высота не корректна.

Ну а теперь новый метод: очень простой, даже обидно, почему я раньше не догадался… При вводе текста в textarea смотреть его текущую высоту и высоту скролящей области, если она больше, то добавлять к атрибуту rows единичку.

Пример работы нового метода:

Вы можете открыть пример в новом окне.

Код примера:

function flexibleTextarea()
{
    // инициализация объекта
    var _txt = document.getElementById('textarea');
    var _minRows = 3; // минимальное количество строк
   
    if (_txt) {
        // функция расчета строк
        function setRows() {
            _txt.rows = _minRows; // минимальное количество строк
            // цикл проверки вместимости контента
            do {
                if (_txt.clientHeight != _txt.scrollHeight) _txt.rows += 1;
            } while (_txt.clientHeight < _txt.scrollHeight);
        }
        // инициализация функции
        setRows();
        _txt.rows = _minRows;
       
        // пересчет строк в зависимости от набранного контента
        _txt.onkeyup = function(){
            setRows();
        }
    }
}
if (window.addEventListener)
    window.addEventListener("load", flexibleTextarea, false);
else if (window.attachEvent)
    window.attachEvent("onload", flexibleTextarea);

Данный код не является полноценным скриптом при ресайзе textarea, а показывает лишь метод растягивания. Но скрипт можно использовать и доработать под свои нужды… В примере textarea увеличивается и уменьшается в зависимости от контента.

]]> http://markup-javascript.com/2009/07/05/rastyagivayushhayasya-textarea/feed/ 9 Кроссбраузерный mousewheel, обработка события скролинга http://markup-javascript.com/2009/05/24/krossbrauzernyj-mousewheel-obrabotka-sobytiya-skrolinga/ http://markup-javascript.com/2009/05/24/krossbrauzernyj-mousewheel-obrabotka-sobytiya-skrolinga/#comments Sun, 24 May 2009 14:23:46 +0000 Алексей http://markup-javascript.com/?p=415 Недавно наткнулся на маленькую проблемку, в одном из последних проектов нужно было прикрепить событие mousewheel, причем код должен был быть написан без сторонних фреймверков. Когда попытался повесить функцию на onmousewheel, убедился, что она работает по разному в некоторых браузерах, а в иных и вовсе не работает.

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

Основной код функции:

// Основная Функция mousewheel
function wheel(event){
        var delta = 0;
        if (!event) event = window.event; // Событие IE.
        // Установим кроссбраузерную delta
        if (event.wheelDelta) {
                // IE, Opera, safari, chrome - кратность дельта равна 120
                delta = event.wheelDelta/120;
        } else if (event.detail) {
                // Mozilla, кратность дельта равна 3
                delta = -event.detail/3;
        }
        // Вспомогательня функция обработки mousewheel
        if (delta && typeof handle == 'function') {
                handle(delta);
                // Отменим текущее событие - событие поумолчанию (скролинг окна).
                if (event.preventDefault)
                        event.preventDefault();
                event.returnValue = false; // для IE
        }
}

// Инициализация события mousewheel
if (window.addEventListener) // mozilla, safari, chrome
    window.addEventListener('DOMMouseScroll', wheel, false);
// IE, Opera.
window.onmousewheel = document.onmousewheel = wheel;

Функция wheel в коде является основной, но внутри себя она имеет не менее важную функцию handle, которая выполняет основные действия на странице в зависимости от полученной переменной delta. Пока handle является виртуальной функцией, но в зависимости от нужных нам действий мы будем присваивать ей реальные.

Теперь рассмотрим как же применить эти функции в примерах.

Пример 1: изменение ширины элемента с помощью колесика мышки

Вы можете открыть пример в новом окне.

function initScript()
{
    var _container = document.getElementById('main-container');
    var _el = document.getElementById('element');
    var _elWidth = 250;
    // Инициализация вспомогательной функции
    _container.onmouseover = function(){
       handle = over;
    };
    // Удаление вспомогательной функции
    _container.onmouseout = function(){
       handle = null;
    }
     
    function over(delta) {
       // получаем delta из основной функции и по результатам
       // выполняем соответствующие действия,
       // в нашем примере изменяем ширину       
       if (delta > 0) _elWidth += 5;
       else _elWidth -= 5;
           
        if (_elWidth < 0) _elWidth = 0; // минимальная ширина
        if (_elWidth > 500) _elWidth = 500; // максимальная ширина
        _el.style.width = _elWidth+'px';
    }
}
if (window.addEventListener)
    window.addEventListener("load", initScript, false);
else if (window.attachEvent)
    window.attachEvent("onload", initScript);

Пример 2: изменение размера шрифта

Вы можете открыть пример в новом окне.

function initScript()
{
    var _container = document.getElementById('main-container');
    var _elFontSize = 12;
    // Инициализация вспомогательной функции
    _container.onmouseover = function(){
       handle = over;
    };
    // Удаление вспомогательной функции
    _container.onmouseout = function(){
       handle = null;
    }
     
    function over(delta) {
       // получаем delta из основной функции и по результатам
       // выполняем соответствующие действия,
       // в нашем примере изменяем размер шрифта      
       if (delta > 0) _elFontSize++;
       else _elFontSize--;
           
        if (_elFontSize < 8) _elFontSize = 8; // минимальный размер шрифта
        if (_elFontSize > 50) _elFontSize = 50; // максимальный размер шрифта
        _container.style.fontSize = _elFontSize+'px';
    }
}
if (window.addEventListener)
    window.addEventListener("load", initScript, false);
else if (window.attachEvent)
    window.attachEvent("onload", initScript);

Скачать примеры

UPD: по замечаниям комментаторов ссылка на на основную идею

]]> http://markup-javascript.com/2009/05/24/krossbrauzernyj-mousewheel-obrabotka-sobytiya-skrolinga/feed/ 24 Парсинг XML файла с помощью jQuery http://markup-javascript.com/2009/04/05/parsing-xml-fajla-s-pomoshhyu-jquery/ http://markup-javascript.com/2009/04/05/parsing-xml-fajla-s-pomoshhyu-jquery/#comments Sun, 05 Apr 2009 15:28:21 +0000 Алексей http://markup-javascript.com/?p=294 Этой статьей хочу начать рубрику “Методики” в которой буду рассказывать о своем опыте при решении различных задач.

Часто, в проектах, стоит задача формирования HTML кода документа из стороннего файла с помощью AJAX, и зачастую данные в этих файлах хранятся в XML. Поэтому сегодня хочу рассказать как сделать парсинг XML документа с помощью jQuery.

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

Часть которая происходит на сервере я описывать не буду, т.к. не являюсь хорошим специалистом в серверных языках и базах данных. Но все же представить себе сценарий могу – сервер принимает данные ввода текста и по определенному алгоритму выбирает из базы данных соответствующие результаты, после чего формирует XML документ.

Для окончательного осознания того, что мы должны сделать – рассмотрим окончательный вариант нашего скрипта. Введите текст в текстовое поле. Т.к. кода для серверной части у меня нет я создал статический XML файл который будет выводится в HTML.

Результат который мы должны получить:

Вы можете открыть пример в новом окне или скачать локальную версию.

Структура HTML документа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Парсинг XML с помощью jQuery</title>
        <link rel="stylesheet" type="text/css" href="css/all.css" />
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.main.js"></script>
    </head>
    <body>
        <form action="inc/result.xml">
            <div id="main-container">
                <input type="text" id="textArea" />
                <ul id="resultHolder">
                    <li><a href="#">&nbsp;</a></li>
                </ul>
            </div>
        </form>
    </body>
</html>

Для примера нам понадобится текстовое поля для запроса от пользователя и элемент вывода результата, в данном случае это список.

Структура XML документа:

<?xml version="1.0" encoding="utf-8"?>
<result>
    <item>markup-javascript.com</item>
    <item>markup</item>
    <item>javascript</item>
    <item>jQuery</item>
    <item>mootools</item>
    <item>prototype</item>
    <item>XHTML</item>
    <item>CSS</item>
    <item>XML</item>
</result>

Структуру я выбрал наиболее простую для понимания и обработки JSом. В теге <result> находится список результата.

Самая интересная часть :) Разрабатываем JavaScript код:

Для оптимальной работы скрипта создадим ссылки на объекты и добавим событие к текстовому полю.
Адрес для отправки запроса серверу возьмем из атрибута action тега form.

$(document).ready(function(){
    // объявляем ссылки на объекты текстового поля и результата
    var _textArea = $('#textArea');
    var _resultHolder = $('#resultHolder');
    var _resultEl = $('a',_resultHolder);
   
    // найдем адрес для запроса к серверу
    var _url = _textArea.parents('form').attr('action');

    // добавляем событие на изменение текста
    _textArea.keypress(function(){
        // функция отрабатываемая при нажатии клавиш
       
    });
});

При печатании текста в текстовом поле будет происходить отправка набранных символов на сервер, при помощи стандартных функций ajax запросов для jQyery.

$.ajax({
    url: _url, // адрес полученный в атрибуте action
    dataType:'xml', // тип данных
    success: function(xmlData){
       // при позитивном результате запроса в переменной xmlData хранится наш XML документ
    }
});

Но не все так гладко, на этом моменте как всегда вмешивается Internet Explorer. В переменной xmlData IE не может распознать XML объекты. Тогда, для правильной работы скрипта, мы должны модифицировать код.
В параметре dataType для IE зададим строковый тип данных, а полученный результат при помощи ActiveX преобразуем в XML документ. В итоге AJAX запрос будет выглядеть так:

$.ajax({
    url: _url,
    dataType: (jQuery.browser.msie) ? 'text' : 'xml', // проверка IE и выбор типа данных
    success: function(xmlData){
        var data;
        if ( typeof xmlData == 'string') {
            // если это IE то создаем ActiveX объект и приобразуем строковую переменную в XML
            data = new ActiveXObject( 'Microsoft.XMLDOM');
            data.async = false;
            data.loadXML( xmlData);
        } else {
            data = xmlData;
        }

    }
});

На данном шаге мы получаем вполне кроссбраузерный код для получение XML данных, теперь дело осталось за малым – получить данные из XML и сгенерировать HTML код. Для этого в функцию success AJAX запроса добавим следующий код:

// генерация HTML кода
var _result = '';
$('item',data).each(function(i, _item){
// из каждого тега item выберем текстовую переменную
// и добавим к общему результату сформировав список.
    _result += '<li><a href="#">'+$(_item).text()+'</a></li>';
});
// вывод данных пользователю
_resultHolder.html(_result).slideDown(300);

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

Окончательный вид функции:

$(document).ready(function(){
    // объявляем объекты текстового поля и результата
    var _textArea = $('#textArea');
    var _resultHolder = $('#resultHolder');
    var _resultEl = $('a',_resultHolder);
   
    // найдем адрес для запроса к серверу
    var _url = _textArea.parents('form').attr('action');

    // добавляем событие на изменение текста
    _textArea.keypress(function(){
        // формируем AJAX запрос
        $.ajax({
            url: _url,
            dataType: (jQuery.browser.msie) ? 'text' : 'xml', // проверка IE и выбор типа данных
            success: function(xmlData){
                var data;
                if ( typeof xmlData == 'string') {
                    // если это IE то создаем ActiveX объект и приобразуем строковую переменную в XML
                    data = new ActiveXObject( 'Microsoft.XMLDOM');
                    data.async = false;
                    data.loadXML( xmlData);
                } else {
                    data = xmlData;
                }
            // генерация HTML кода
            var _result = '';
            $('item',data).each(function(i, _item){
                _result += '<li><a href="#">'+$(_item).text()+'</a></li>';
            });
            _resultHolder.html(_result).slideDown(300);
            }
        });
    });
    // выбор результата
    _resultEl.live('click',function(){
        _textArea.val($(this).text());
        _resultHolder.slideUp(300);
        return false;
    });
});

Надеюсь данная статья поможет Вам в реализации ваших проектов. И хотелось бы услышать от вас вопросы, в реализации различных задач, наиболее интересные будут рассмотрены в этом блоге.

]]> http://markup-javascript.com/2009/04/05/parsing-xml-fajla-s-pomoshhyu-jquery/feed/ 18