Web 2.0 неожиданно возродил технологию под названием XMLHttpRequest, появившуюся еще в 2000 году. Эта технология позволяет обращаться к серверу без перезагрузки текущей страницы. На данный момент можно считать, что все современные браузеры реализуют эту технологию в объеме, достаточном для безболезненного ее использования. В новой реинкарнации триумвират XMLHttpRequest, JavaScript и DOM называется AJAX.
Метод animate является основой большинства, если не всех, эффектов jQuery и плагинов. Например, jQuery предлагает следующие методы для показа и скрытия элементов:
Ключевой функцией, на которой базируются все остальные, является функция animate:
Read the rest of this entry »
Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно…
Read the rest of this entry »
Или как их еще называют – баблы.
Итак, перед нами очередная очень распространенная задача — по клику на эскиз изображения (который фактически является ссылкой) красиво развернуть оригинальную картинку. Красиво — это в нашем случае что-то отличное от target="_blank" и с каким-нибудь «вау-эффектом».
Все скрипты, выполняющие данную задачу принято называть лайтбоксами (lightbox). В поисках неплохих решений, мною были запытаны более двух десятков скриптов, но в результате в копилку были включены только нижеследующие.
Скрипт представляет собой плагин к jQuery.
Возможности:
* Подгоняет размеры изображений под разрешение монитора;
* Пририсовывает тень к всплывающему окошку;
* Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
* Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
* Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.
Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):
* непосредственно jquery.fancybox-1.0.0.js – 12 Кб
* сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
* дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
* CSS – около 4 Кб
* изображения – 17 Кб
Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:
/* обязательно */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
/* опционально */
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
/* цепляем CSS */
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">
2. Берем подопытную картинку:
<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:
<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>
3. Инициализируем плагин:
$(document).ready(function() {
$("p#test1 a").fancybox();
});
Готово. В данном случае по щелчку на изображение появится всплывающее окошко с оригиналом изображения. Все параметры окна будут по умолчанию Но вы можете использовать дополнительные опции при вызове плагина, например:
$(document).ready(function() {
$("p#test2 a").fancybox({
‘hideOnContentClick’: true
});
});
Параметр ‘hideOnContentClick’: true — делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .
Тема 301 редиректа постоянно обсуждается в различных SEO-форумах, да и каждая поисковая система в своей системе помощи имеет специальные разделы. Пока разбирался я нашел перечисленные ниже варианты организации редиректа, часть из которых опробовал у себя.
Read the rest of this entry »
Чтобы подставить свою 404 страницу, вместо той что предлагает CMS/Сервер, достаточно прописать в htaccess следующее:
ErrorDocument 404 /errors/404.html
Небольшой обзор известных мне скриптов для подсветки синтактиса в textarea в реальном времени и его последующего редактирования.
Read the rest of this entry »
Сказание о TinyMCE
Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, "портативностью", ассоциативностью, и при всё при этом – относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW – W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.