markup-javascript.com » jQuery

Запрет выделения текста с помощью jQuery

Алексей — Fri, 14 May 2010 14:59:47 +0000

На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время 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 – возврат выделения

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

Masonry – динамический layout

Алексей — Sun, 21 Mar 2010 13:10:51 +0000

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

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

Я упоминал выше о моей модификации, теперь подробнее :), я изменил всего-лишь одну строчку, и на мой взгляд плагин от этого только выиграл. Для наглядности эффекта поресайзете окно браузера.

Моя модификация, а вот еще страничка с живым примером.

Параметры плагина для инициализации:

$('#wrapper').masonry({
singleMode: false,
// Этот параметр ставится в true, если все ваши блоки имеют одинаковую ширину
columnWidth: 240,
// Ширина колонки в вашей сетке, параметр по умолчанию - ширина первого блока
itemSelector: '.box:visible',
// Селектор блоков
resizeable: true,
// Перестройка сетки блоков при ресайзе окна
appendedContent: $('.new_content'),
// Объект элемента который вставляется в сетку динамически
saveOptions: true,
// Этот параметр сохраняет параметры инициализации первого вызова
}, function() {}
// callback.
);

Моя версия скрипта

Скролящийся блок

Алексей — Sun, 10 Jan 2010 10:03:51 +0000

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

Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.

Требования для работы плагина:

HTML/CSS

Как всегда свои плагины я стараюсь сделать наиболее универсальными, чем меньше они зависят от HTML/CSS кода – тем лучше, поэтому для данного плагина определенных требований при верстке нет!

javaScript:

В роли главного объекта $(‘#sidebar’) выступает непосредственно скролящийся элемент, а теперь детальнее о параметрах:

holder – селектор обертки (родителя) скроляшегося элемента, главный параметр, т.к. указывает в каком элементе будет скролиться блок;
topDif – отступ элемента от верхней части экрана;
bottomDif – отступ элемента от нижней части экрана;
toEl – если вы хотите что бы блок скролился в обертке до определенного элемента, то в данном праметре вам нужно указать селектор этого элемента;
cssTop – изменяющееся свойство при скроле (marginTop или top);
duration – время анимации.

Для наглядности хочу продемонстрировать еще пару примеров: пример 2, пример 3.

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

@font-face вместо Cufon

Алексей — Fri, 27 Nov 2009 13:39:46 +0000

Использование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие 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, достаточно лишь инициализировать их в данном условии.

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

Обновился плагин для слайдшоу

Алексей — Fri, 30 Oct 2009 13:32:28 +0000

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

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

Обновления в плагине:

Самый главный апдейт в коде – это оптимизация, 70% кода было переписано заново. Сказывается опыт работы в этой отрасли… смотря на многие свои старые плагины – хочется большинство переделать.
Новый код уменшился в размере с 5.5 КБ до 3.5 КБ, и за счет новых параметров увеличился до 5 КБ, за счет нового алгоритма – уменьшена нагрузка на браузер.

Еще несколько мелких апдейтов и фиксов:

Пофикшен баг связанный с паузой и переключением на следующий/предыдущий слайд
Пофикшены баги связанные с несуществующими ссылками
Изменено название параметра с numElementLink на numElement
Добавлен параметр noCicle – для не циклического переключения
Добавлен параметр disableClass – клас на prev/next, работает в связке с noCicle

Детальнее по плагину вы можете почитать в обновленном посте

Прокрутка списка объектов по событию mousemove

Алексей — Sun, 19 Jul 2009 13:52:06 +0000

Лето, жара… хочется отдыхать и купаться, но никак не писать интересные статьи :) поэтому опять я пишу с небольшим перерывом. Долго думал – чем же Вас порадовать на этот раз, “валидация форм” – большая статья (напишу позже разбив на пару частей :), “AJAX upload файлов” – хмм.. интересно, но нужен хороший пример (будет позже :), “как сделать свой JS фреймверк” – наверное будет цикл нескольких статей и начну точно не сегодня :)))

Вот так я долго не решался… но на днях у одного из моих коллег было задание сделать карусель, которая бы вращалась при перемещении мышки, причем по бокам были ПНГ затенения… похардкодив немного он конечно же сделал :))) Но у меня тоже были наработки по этому направлению, и я решил на выходных усовершенствовать свой плагин, чтобы он работал в любых условиях :)

Плагин – mouseGallerySlide

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

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

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

Как всегда опишу только нужную структуру HTML и CSS необходимые для работы плагина… все остальные эффекты это дело вашего воображения.

HTML:

CSS:

.scrollGallery {
width:480px;
height:60px;
overflow:hidden;
position:relative;
}
.scrollGallery ul {
padding:0;
margin:0;
position:relative;
list-style:none;
width:31999px;
}
.scrollGallery ul li {
float:left;
}

Для правильной работы плагина нам необходимо:
- объект-родитель с заданными размерами блока и overflow, position:relative ставится для IE, чтобы внутренние объекты не вылазили за границы
- двигающейся элемент, в нашем примере это UL с большоооой шириной… :)
- ну и флотнутые элементы галереи (li)

JavaScript:

В примере для этого плагина я воспользовался нестандартной инициализацией скрипта $(window).bind(‘load’, function(){…}), вместо $(document).ready(function(){…}), все из-за того, что такие браузеры как Chrome и Safari не правильно считают параметры блоков пока не загрузились картинки, это можно также поправить захордкодив ширину LI или задав размеры картинкам через атрибуты width и height… тут можно поступать как кому угодно.

Параметры плагина:

scrollElParent – селектор двигающегося элемента
scrollEl – селектор слайдов

Простой пример:

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

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

Динамические блоки на jQuery

Алексей — Sun, 21 Jun 2009 15:36:32 +0000

В каждом втором моем проекте, где нужно делать различные эффекты на 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">></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:

opener – селектор элемента при событии на котором выдвигается блок (default: ‘a’)
changeStyle – стиль изменяемый у родительского блока (default: ‘left’)
setParam – параметр стиля, до которого будет происходит изменение от начального, заданного в css (default: 0)
event – событие при которым будет выдвигаться блок, событие “move” будет выдвигать блок при помощи мышки (default: ‘click’)
duration – время анимации. На событие “move” не распространяется (default: 500)

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