markup-javascript.com » HTML http://markup-javascript.com Блог web-технолога Tue, 15 Mar 2011 13:35:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Растягивающаяся 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 Динамические блоки на jQuery http://markup-javascript.com/2009/06/21/dinamicheskie-bloki-na-jquery/ http://markup-javascript.com/2009/06/21/dinamicheskie-bloki-na-jquery/#comments Sun, 21 Jun 2009 15:36:32 +0000 Алексей http://markup-javascript.com/?p=479 В каждом втором моем проекте, где нужно делать различные эффекты на JavaScript, встречаются различные блоки, которые выдвигаются, выезжают или их нужно вытягивать мышкой. Эффекты такого рода очень просто получить с помощью продвинутых фреймверков, но темнемение на разработку таких маленьких скриптов в сумме уходит много времени. Во всяком случае мне было постоянно лень написать что-то универсальное до сегодняшнего момента, и в каждом проекте я делал эти минискрипты. Но т.к. время – деньги, а времени как и денег вечно не хватает – представляю вам первую версию моего плагина dynamicBlocks.

Пример динамических блоков:

Пример может работать немного некорректно в iframe (если двигая блок убрать мышку из области iframe). Нормальную работу вы можете посмотреть открыв пример в новом окне.

Детальнее по плагину:

Пример хорошо демонстрирует возможности плагина и дополнительных объяснений функционала думаю не требуется. Исходя из этого приступим сразу к описанию параметров плагина и необходимого для работы html и css кода.

HTML/CSS

Т.к. по сути эффекты плагина очень просты, то код и стили к нему тоже будут элементарными. Основа всех выезжающих блоков это изменение таких параметров как left, right, bottom, top, margin-left, margin-right и т.п. Значит для эффекта нам нужен главный блок (родитель) для которого мы будем изменять эти параметры и элемент внутри него, который будет вызывать событие эффекта.

HTML код блоков в примере:

<div id="leftBlock">
    <div class="content">
        Текстовое поле выдвигающегося блока...
    </div>
    <a href="#" class="opener">&gt;</a>
</div>
<div id="topBlock">
    <div class="content">
        Текстовое поле выдвигающегося блока...
    </div>
    <a href="#" class="opener">Open</a>
</div>

CSS:

#leftBlock {
    width:200px;
    top:0;
    left:-180px;
}
#topBlock {
    position:absolute;
    width:200px;
    height:150px;
    top:-130px;
    left:215px;
}

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

JS:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dynamicBlocks.js"></script>
<script type="text/javascript">
    $('#leftBlock').dynamicBlocks({
        opener:'a.opener',
        event:'move'
    });
    $('#topBlock').dynamicBlocks({
        opener:'a.opener',
        changeStyle:'top',
        setParam:'0',
        event:'click',
        duration:300
    });
</script>
  • opener – селектор элемента при событии на котором выдвигается блок (default: ‘a’)
  • changeStyle – стиль изменяемый у родительского блока (default: ‘left’)
  • setParam – параметр стиля, до которого будет происходит изменение от начального, заданного в css (default: 0)
  • event – событие при которым будет выдвигаться блок, событие “move” будет выдвигать блок при помощи мышки (default: ‘click’)
  • duration – время анимации. На событие “move” не распространяется (default: 500)

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

Скачать плагин

]]> http://markup-javascript.com/2009/06/21/dinamicheskie-bloki-na-jquery/feed/ 8 Cufon – имплементация нестандартных шрифтов http://markup-javascript.com/2009/05/10/cufon-implementaciya-nestandartnyx-shriftov/ http://markup-javascript.com/2009/05/10/cufon-implementaciya-nestandartnyx-shriftov/#comments Sun, 10 May 2009 09:36:00 +0000 Алексей http://markup-javascript.com/?p=394 Открыл недавно для себя интересную библиотеку для имплементации нестандартных шрифтов на сайт, которая очень удобна и легка в обращении.

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

Итак, чтоб не быть голословным рассмотрим первый пример:


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

Итак, как он работает

Cufon имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата.

Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript.

Как инициализировать Cufon

Шаг 1 – скачать последнюю версию библиотеки

На официальном сайте рекомендуется использовать YUI-compressed версию cufón. Потому, что для апдейта версии нужно будет всего лишь обновить cufon-yui.js

Шаг 2 – конвертировать шрифт

Для конвертации шрифта в нужный формат можно воспользоваться генератором на официальном сайте, или скачать локальную версию. К сгенерированному файлу добавляется число 400 – это соответствует нормальному шрифту, если шрифт жирный добавляется 600.

Шаг 3 – подключение JS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
        <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
            Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
        </script>
    </head>
    <body>
        <h1>This text will be shown in Frutiger LT Std.</h1>
        <h2>This text will be shown in Myriad Pro.</h2>
    </body>
</html>

Еще несколько примеров для затравки

А теперь ложка дегтя в эту бочку меда

  • Текст замещенный с помощью Cufon выделить нельзя, т.к. используется тег canvas
  • При инициализации в селекторе указывается конкретный тег

Второй пункт было бы для меня решающим в выборе между sIFR и Cufon в сторону sIFR, если бы не приятное нюанс. Если у вас установлена хоть один из фреймверков типа jQuery, MooTools или Prototype на сайте, то Cufon начинает понимать контекстные селекторы типа “#content h1″ и т.п.

Итог

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

]]> http://markup-javascript.com/2009/05/10/cufon-implementaciya-nestandartnyx-shriftov/feed/ 29 Дропдаун, выпадающее меню с эффектами на jQuery http://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/ http://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/#comments Sun, 26 Apr 2009 11:03:39 +0000 Алексей http://markup-javascript.com/?p=371 Хочу познакомить Вас с первой версией моего плагина для выпадающего меню. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.

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

Пример №1 выпадающего меню (slide эффект):


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

Рассмотрим детальнее структуру HTML и CSS кода для примера. Я опущу элементы которые не важны для выпадающего меню и отвечают за вид навигации и выделю лишь те которые нужны для плагина.

HTML код:

<ul id="nav">
    <li>
        <a href="#">Навигация</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </li>
       ...
    <li>
        <a href="#">Ссылки</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
            </ul>
        </div>
    </li>
</ul>

Для выпадающего списка нам нужен родитель для манипулирования высотой объекта, это нужно для slide эффекта, с fade эффектом его можно не вставлять.

CSS код:

#nav li {
    position:relative;
}
#nav li div {
    position:absolute;
    top:15px;
    left:-9999px;
}
#nav li.hover div {left:0;}

Для родительского элемента лучше не задавать никаких стилей кроме позиционирования относительно родителя. И самое главное на что хочу обратить Ваше внимание, для скрытия вложенного списка я использую left:-9999px; а не display:none, т.к. при display:none JavaScript не может адекватно определить текущие параметры элемента – высоту и т.п. В общем в примере стили очень просты, задается лишь положение вложенного элемента, конечно же вы можете определять дополнительные свойства соответствующие вашему дизайну.

Теперь детальнее по плагину:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dropDown.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('ul#nav').NavDropDown({
            duration:300,
            hoverElement:'li',
            hoverClass:'hover',
            dropHolder:'div',
            showEffect:'slide' // slide, fade, slide&fade
        });                
    });
</script>

Детальнее по параметрам:

Показанные параметры являются параметрами по умолчанию.

  • duration – время анимации в миллисекундах (300 = 0.3сек)
  • hoverElement – элемент на который будет ставится класс “hover”.
  • hoverClass – название класса для элемента при ховере
  • dropHolder – селектор элемента родителя для вложенного списка
  • showEffect – эффект выпадения вложенного списка (slide, fade, slide&fade)

Рассмотрим еще несколько примеров:

slide&fade эффект

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:500,
        showEffect:'slide&fade'
    });                
});

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

fade эффект

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:800,
        showEffect:'fade'
    });                
});

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

Скачать плагин

]]> http://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/feed/ 60 JavaScript библиотека для работы с изображениями http://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/ http://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/#comments Sun, 22 Mar 2009 10:16:35 +0000 Алексей http://markup-javascript.com/?p=188 Последнее время очень модна тенденция web 2.0, и поэтому очень часто слышу пожелания заказчиков максимально приблизить к этому стандарту дизайн и функционал web-сайта.

web 2.0 привнес в жизнь верстальщиков как много интересных решений, так и много каверзных нюансов.

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

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

Библиотека имеет около десятка js плагинов для различных эффектов, наиболее интересные я покажу в примерах.

  1. cvi-shiftzoom
    shiftzoom – плагин добавляющий к изображению функционал зумирования.
  2. cvi-busi
    busy – плагин добавления и удаление индикатора загрузки.
  3. cvi-sphere
    sphere – плагин для отображения эффекта сферы.
  4. cvi-corner
    corner – плагин позволяет добавить эффекты закругленных углов, внутреннею и внешнею тень.
  5. cvi-glossy
    glossy – плагин позволяет добиться эффекта стекла с отражением света, а также тень и закругление углов.
  6. cvi-instant
    instant – плагин добавляет рамку, позволяет делать наклоны изображения и подписи.
  7. cvi-bevel
    bevel – этот плагин очень похож на glossy, но в нем можно менять цвета теней и вид внутренней рамки.
  8. cvi-slided
    slided – название плагина говорит само за себя, он добавляет рамку в виде слайда, ее можно настраивать изменяя цвет, тень и положение слайда.
  9. cvi-filmed
    filmed – плагин добавляет рамку стилизованную под кадр фильма, цвет и положения рамки настраиваются.
  10. cvi-mapper
    mapper – плагин используя поле ссылок изображения (image map), добавляет эффект подсветки поля.
  11. cvi-curl
    curl – если вы хотите добавить эффект завернутого уголка, этот плагин для Вас.
  12. cvi-edge
    edge – текстурная рамка.
  13. cvi-reflex
    reflex – плагин добавляет эффект отражения, размеры и прозрачность настраиваются.
  14. cvi-loupe
    loupe – Лупа для изображения.

По плагину можно отметить:

Начну сразу с минуса, т.к. он существенен – библиотека является платной для сайтов приносящих какую либо прибыль. Стоимость использования одного из плагинов для одного доменного имени начинается от 20 евро.

Сайты не имеющие прибыли библиотекой могут пользоваться бесплатно. Детальнее по этому поводу можно почитать в лицензии продукта.

Теперь по плюсам:

  • Хорошая кроссбраузерность (Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+)
  • Минимум для инициализации (подключить плагин, указать нужный класс в изображении)
  • Отличная документация (англ.)

Примеры:

Отражение (reflex):

<!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>reflex</title>
    <link rel="stylesheet" type="text/css" href="css/all.css" />
    <script type="text/javascript" src="js/reflex.js"></script>
</head>
<body>
    <ul class="items">
        <li><a href="#"><img src="images/left.jpg" class="reflex iopacity75" alt="" /></a></li>
        <li><a href="#"><img src="images/none.jpg" class="reflex iopacity75 iborder2 icoloreeeeee idistance4" alt="" /></a></li>
        <li><a href="#"><img src="images/right.jpg" class="reflex iopacity20 itiltnone iheight20" alt="" /></a></li>
    </ul>
</body>
</html>

Открыть пример в новом окне

Glossy:

<!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>glossy</title>
    <link rel="stylesheet" type="text/css" href="css/all.css" />
    <script type="text/javascript" src="js/glossy.js"></script>
</head>
<body>
    <ul class="items">
        <li><a href="#"><img src="images/left.jpg" class="glossy" alt="" /></a></li>
        <li><a href="#"><img src="images/none.jpg" class="glossy iradius40" alt="" /></a></li>
        <li><a href="#"><img src="images/right.jpg" class="glossy noshadow" alt="" /></a></li>
    </ul>
</body>
</html>

Открыть пример в новом окне

]]> http://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/feed/ 6 Табслайдер http://markup-javascript.com/2009/02/27/tabslajder/ http://markup-javascript.com/2009/02/27/tabslajder/#comments Thu, 26 Feb 2009 22:32:16 +0000 Алексей http://markup-javascript.com/?p=141 Табслайдер – является одним из самых распространенных плагинов, есть множество вариантов
написания этого плагина. Наиболее часто для этого используется “Coda-Slider“, он хорошо отлажен, багов в работе я не замечал, вообщем хороший плагин, но есть минус из-за которого я написал свой, а именно он генерирует половину HTML кода сам, что очень затрудняет установку под конкретный дизайн.

Пример №1


Открыть пример в новом окне

Требования HTML/CSS верстки для плагина

Жестких требований к структуре HTML кода нет, есть некоторые обязательные свойства в CSS.

HTML код (рекомендованый к плагину)

<div id="tabs">
    <ul class="tabset">
        <li><a href="#" class="active">Таб 1</a></li>
        <li><a href="#">Таб 2</a></li>
        <li><a href="#">Таб 3</a></li>
        <li><a href="#">Таб 4</a></li>
    </ul>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <div class="tab-holder">
        <ul>
            <li>
                <img src="images/pic01-small.jpg" alt="" />
                <p>
                    Lorem ipsum dolor sit amet, consectetuer ...
                    dolore magna aliquam erat volutpat. ...
                    lobortis nisl ut aliquip ex ea commodo ...
                </p>
            </li>
            ......
            <li>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing ...
                    dolore magna aliquam erat volutpat. Ut wisi ...
                    lobortis nisl ut aliquip ex ea commodo consequat. ...
                </p>
            </li>
        </ul>
    </div>
</div>

Соответственно для этого кода я применил такие CSS свойства:

Выделю только обязательные свойства

#tabs {
    position:relative;
    overflow:hidden;
}
#tabs ul {
    width:9999px;
}
.tab-holder {
    width:540px;
    overflow:hidden;
}
.tab-holder li {
    width:520px;
    padding:10px;
    float:left;
}

Что из этого можно заметить.

Для #tabs установлено свойство position:relative;, а сделано это из-за того что в IE6 есть баг – когда внутри у какого-нибудь элемента есть position:relative; то overflow:hidden; не помогает, не обрезает контент внутри обертки, соответственно это помогает избежать этого бага.

Для UL ширина ставится длинной, что бы слайд элементы выстраивались друг за другом.
И для того что б слайд-элементы слайдились корректно ширина обертки (.tab-holder) должна быть равной слайд-элементу (.tab-holder li)

Теперь подробнее по JS

Подключаем JavaScript

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlide.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tabs').tabSlide({
            btPrev: 'a.prev',
            btNext: 'a.next',
            tabs: 'ul.tabset a',
            holderList: 'div',
            scrollElParent: 'ul',
            scrollEl: 'li',
            duration: 1000,
            autoSlide: false,
            startAfterClick: false,
            otherLinks:false,
            animateContentHeight:false
        });
    });
</script>

Детальнее по параметрам:

  • btNext- селектор для кнопки ‘Next’
  • btPrev- селектор для кнопки ‘Previos’
  • tabs- селектор табов
  • holderList- селектор обертки для слайд-элементов
  • scrollElParent- селектор родителя слайд-элементов
  • scrollEl- селектор слайд-элементов
  • duration- время прокрутки в миллисекундах
  • autoSlide- параметр по умолчанию false, но можно указать
    миллисекунды для автоматической прокрутки
  • startAfterClick- параметр для возобновления автослайда через некоторое время после клика на табы и стрелочки
  • otherLinks- селектор для ссылок, которые тоже могут переключат табы (в href ссылки нужно указать номер таба, например #3)
  • animateContentHeight- true для плавного изменения высоты таба

Пример с автослайдом:

Открыть пример в новом окне

Скачать плагин

Change log:

Последние изменения в плагине

]]> http://markup-javascript.com/2009/02/27/tabslajder/feed/ 19