jQuery *

столкнулся с нигде не описанным свойством ИЕ7.
вкратце:
Есть HTML код:

<a href="1">ссылка</a>


Есть конструкция Jquery:

$("a").click(function(){
 var a = $(this).attr("href");
});

* This source code was highlighted with Source Code Highlighter.

В ИЕ 7 в переменной «а» будет находится строка

http : // домен/полный/путь/на/сайте/1

Во всех остальных браузерах ФФ, Опера, хром и даже ИЕ8 будет число «1»
В интернете насколько я понимаю ничего подобного не описано…

Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code:

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

Здравствуйте. Сегодняшний топик я хотел написать о том, что механизм анимации в jQuery не эффективен, создает кучу таймеров, каждый из которых работает по отдельности, что приводит к чрезмерно частой перерисовки контента и сильно тормозит браузер, и хотел описать некоторые приемы написания «правильной анимации». В ходе подготовки примеров я понял, что я ошибался. Механизм анимации jQuery действительно не эффективен, создает кучу проблем, но причины этих проблем вовсе не в создании большого количества таймеров, а в нечте совсем другом, и, кажется, я добился замечательных результатов в устранении этих проблем.

Доступен для бесплатной загрузки инструмент jQueryPad, который может значительно облегчить жизнь разработчикам использующим jQuery. Этот инструмент предлагает работу с целевым html, запросами jQuery и результатом запросов в одном окне:



Здесь, нижняя часть с текстом — это встроенный компонент Internet Explorer с результатом работы jQuery и возможностью посмотреть исходный код. jQueryPad так же находит другие установленные браузеры для организации просмотра результата в них. Пример найденных браузеров на скриншоте в блоге автора.

jQueryPad написан на WPF и требует для работы .NET Framework 3.5 Service Pack 1

Почитать анонс jQueryPad можно в блоге автора.
Прямая ссылка на архив с программой.

qTip

qTip — это бесплатный плагин для jQuery для создания подсказок (tooltip). Данный плагин кроссбраузерный, имеет обширные возможности к настройке и содержит множество функций, таких как: закругленные углы без применения изображений, speech bubbles (изображение речи как в комиксах), а так же эффекты — fade (постепенное исчезновение изображения), slide и возможность создания собственных эффектов. Данный плагин уже включает пять готовых тем, но можно создавать свои темы без особых усилий. Кроме того можно создавать окна диалогов, изменять цвет фона подсказки и места, где она отображается.

Скачать | Демо

Тема загрузки файлов без перезагрузки страницы поднималась уже неоднократно. Даже я как-то давно писал про это. В основном рассматривались решения без флэша, но сегодня я хотел бы поговорить про плагин для jquery с использованием флэша, а именно о JQuery Uploadify.

Конечно, можно использовать и другой флэшевский загрузчик SWFUpload, но Uploadify, по моему мнению, на порядок легче и проще, вполне подходит для большинства целей, ну и конечно не забываем, что это плагин для нашего любимого jquery, что избавляет нас от подключения еще каких-либо библиотек ;)

Теперь рассмотрим всё на примере.

Итак, мне понадобилась поддержка событий online/offline в браузерах(напомню, что согласно черновику
html5 они возникают при появлении/исчезновении соединения соответственно). На данный момент Mozilla и
IE8 эти события поддерживают. А это уже немало.

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

Перевод этой статьи

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

Для начала вспомним, что же такое делегирование на следующем примере:

<div id=«container»>
  <a href="" class=«edit»>Edit</a>
  <a href="" class=«delete»>Delete</a>
</div>

<script type=«text/javascript»>
  $('#container').click(function(event) {
    var elem = $(event.target);

    if (elem.hasClass('edit')) {
      console.info('Clicked to edit link');
    }
    else if (elem.hasClass('delete')) {
      console.info('Clicked to delete link');
    }

    return false;
  });
</script>

Совсем недавно во время работы над очередным проектом мне понадобился простенький редактор bb кодов.
Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки Jquery.
Публикую его здесь, может кому нибудь пригодится.

Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».

Пример:

<style type="text/css">
 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</style>

<script type="text/javascript">
 $(function(){
  $('#link-1').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '25%' });
  });
  $('#link-2').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '-25%' });
  });
 });
</script>

<div id="div-1" style="left: -25%;"></div>
<a href="#" id="link-1">Animate to 25%</a>
<a href="#" id="link-2">Animate to -25%</a>

Привет хабр, думаю у некоторых из вас возникала потребность стянуть что нибудь нужное с какова нибудь сайта. Но писать тонны функций, чтобы вытащить фразу, это очень муторно, долго и не продуктивно.
Представляю вашему вниманию phpQuery. Это php вариант известного javascript фраемворка — jQuery.
Автор постарался на славу и портировал почти всё что нам нужно.

• Selectors
• Attributes
  
• Traversing
  
• Manipulation
  
• Ajax
• Events
• Utilities
• Plugin ports

Давайте посмотрим что она умеет.

Мы писали о jQTouch, основанном на jQuery iUI-подобном наборе средств, созданном Давидом Канедою (David Kaneda).

Сегодня они выпустили новую версию, которая улучшает их расширяемую систему нижеследующим:

• Улучшенный переход к 3D-перевороту (improved 3D flip transition)
• События обратного вызова (callback events) для всех переходов между страницами, сильных тычков (swipe events), изменений ориентации
• Прилагаются демонстрации: Часы, To-do, Главное функциональное демо
• Темы: в настоящее время есть темы Apple и jQTouch (серого цвета)

Читайте далее о том, как начать действовать, и об API обратного вызова.

Наверное много кто знает что в jQuery есть набор стандартных событий, таких как Click или MouseDown и прочие, на которые можно повесить обработчики или возбудить с помошью функций click() mousedown() и прочих. Чуть поменьше людей знают, что те-же самые действия можно сделать с помощью функций bind() и trigger():

$(document).bind('click', function(){
  alert('It works!');
});

$(document).trigger('click');

* This source code was highlighted with Source Code Highlighter.

И наверное мало кто знает, что в функциях bind() и trigger() можно использовать свои собственные события. Зачем это нужно, я и хочу рассказать на примере.

Я большой любитель jQuery, но даже я вынужден признать убогость jQueryUI по сравнению например с YUI. Чего стоит только невозможность убрать [x] (кнопка закрыть) стандартными средствами в виджете Dialog. Но YUI тоже был написан не за день и прежде чем он стал таким как мы видем его сейчас к нему было написано множество хаков поэтому я считаю что нет ничего плохого чтобы хачить JUI не лазя в его код.

Как убирать [x] я уже описывал в своем блоге, а сейчас я хочу поговорить о виджете Calendar или как он называется в JUI — Datepicker. Идея приспособить его к календарю WP не нова но вот незадача на Datepicker'e нельзя отмечать даты. То есть вообще нельзя выделить день кроме текущего и выходных. Это большой минус, и сейчас я вам покажу как этот минус превратить в плюс.

По мотивам этого перевода.

На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.



Смотрим демо

Привет, %username%
Как-то раз мне пришлось писать форму для добавления постов в блог. Помимо стандартных полей (название, дата, текст и.т.д.) необходимо было привинтить юзабельную форму добавления тегов.
Т.к. я кодю в jQuery, то и выбор был однозначным.
Вот необходимые задачи, которые я поставил перед собой:

1. Легко в настройке
2. Все теги храняться в одном файле (в кэше)
3. Минимальная нагрузка на сервер и клиента
4. Список тегов — подсказок открывается только для выбранного запроса на определенный тег.

$("html:not(:animated), body:not(:animated)").animate({scrollTop: $(this).position().top});

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

Исправить это можно, если оставить анимацию только у html:
$("html:not(:animated)"+( ! $.browser.opera ? ",body:not(:animated)" : "")).animate({scrollTop: $(this).position().top});
Пример 2

Ввиду недавнего обсуждения скорости работы jQuery.live и благоразумности писать свое собственное делегирование обработчиков событий, решил по полочкам разобрать работу jQuery.live. Т.е. целью данного топика поставлена задача выявления всех особенностей при использовании live-биндера и анализ кода. Без сравнительных характеристик, без приведения оптимальных методов делегирования.

Принцип работы live основан на делегировании обработчиков событий.

Делегирование — паттерн, в основе которого лежат 2 принципа javascript: всплытие событий (event bubbling stage) и возможность определения элемента, отследившего событие.

Тот факт, что делегирование отслеживает исключительно стадию всплытия события, объясняет невозможность обвешивания live-биндеров на события blur, focus, mouseenter, mouseleave, change и submit: все эти события не имеют стадий захвата и всплытия.