JavaScript

Ранее я писал как делать всплывающие фотки на сайтах. Но вот почему то по тому принципу на Укозовском сайте у меня работать не захотело. Но ничего я сделал по другому.
В моем случае мне нужно было что бы все фотографии которые находятся в теле статьи и которые были уменьшены но есть ссылка на большую фотографию, увеличивались с эффектом.
А реализовать это элементарно. Нужно для начала скачать вот этот архивчик ТЫЦ
С него берем файл jquery.lightbox.js и lightbox.css.
Дальше прописываем стиль:

Подключать нужно между тегами хеад
А вот скрипт нужно подключать после БОДИ, иначе не пашет. Почему не знаю.

Дальше указываем скрипту какие ссылки преображать:

Припустим вам нужно что бы форма срабатывала только при нажатии кнопки.
У меня задача была такова что бы отправить сообщение нужно было разблокировать форму, то есть как в новых телефонах, или яблокофонах от куда эта технология пошла. Другими словами вы тяните бегунок с левого угла в правый и появляется кнопочка отправить.
Это реализовали. Но вот при тестировании оказалось что если ввести какие то данные в input и нажать ентер срабатывало событие submit.
Вот и пришлось выдумывать как заблокировать ентер, в принципе решение не особо сложное.
Нужно в форму прописать антиентер
<form  id="theForm" onsubmit="return false;">
А кнопку сделать не submit, а button, а на нее повесить код:

в инпуте вставить класс class="buttom"
<input type="button" value='Отправить' class="buttom">
Ну вот как то так.

Решил написать как делаются эффекты всплывающих фотографий при клике.
Все секреты и технологи я думаю смысла нет рассказывать, если захотите сами поковыряете файлы и думаю разберетесь.
А используется плагин так:
Для начала скачайте архив с скриптами, либо от сюда http://leandrovieira.com/projects/jquery/lightbox/ , это сайт разработчиков, либо от сюда (ТЫЦ)
Потом подключаем на страничку, сначала в хедер

Скрипты:

Стиль:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Теперь еще нужно указать каким картинкам присваивать эффект

Как вы знаете в Интернет експлоере есть такая неприятная штука как если вы укажете фиксированную ширину select например в 50 пикселей, то и выпадающие свойства будут такого же размера, когда как в остальных браузерах выпадающие свойства растягиваются на ширину самого длинного option. То есть в ИЕ у вас всё обрежится, что не есть красиво.

Выглядит это примерно так:

А в других браузерах так:

К сожалению как полностью сделать идентичные я не знаю, но знаю как сделать что бы поля не резались. Выглядеть будет так:

Делается следующим образом. Для начала скриптец:

Считаю использование прелоадера для не флешевых сайтов бесполезным, человек должен видеть то что загружается, если даже сайт большой, но я зашел посмотреть например контакты, смысл мне ждать пару минут пока загрузятся, все баннера, текст и картинки, но иногда заказчики хотят такую технологию.
Велосипед я не изобретал, это решение предложил Гайя Кесслер на своем блоге http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Пример можете посмотреть вот здесь ТЫЦ
Довольно любопытное кстати решение. Его вполне можно переделать под свои нужны, дизайн и тд.
Сами скрипты скачать можно здесь ТЫЦ

Подключение простенькое:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Тут все вроде понятно без обьяснений.

Я думаю что многие сталкивались с проблемой когда при соблюдении стандартов (<!DOCTYPE ), нужно растянуть таблицу или див на весь экран браузера, ну это можно побороть с помощью цсс, но вот когда в этом диве есть вложение тут уже тяжелее. И тут на помощь приходит jquery.
Обрисую мою ситуацию. Была у меня табличка в одной из ячеек был див который нужно было тянуть по все высоте этой ячейки. И сделал я это вот так:

left_menu - это тот див который нужно тянуть.
left_td - эта ячейка в которой находится див который нужно тянуть
То есть логика такая, мы берем высоту ячейки и просто присваиваем её диву.

Если вам нужно что бы просто див или таблица была на весь экран то это можно сделать так:

А заставить элементарно нужно рядышком где вы прописываете теги или классы в которых должен преображаться шрифт, прописать следующее:

Cufon – библиотека написанная на java script. Ее предназначение очень простое – использование нестандартных шрифтов на html страницах в независимости от того, установлен ли этот шрифт на клиентской машине.

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

Ну и расскажу как сделать красивый шрифт.
Сначала нужно сгенерировать этот шрифт.

Я думаю что многие сталкивались с проблемой не поддержки в ИЕ прозрачной пнг. Есть много костылей которые дают возможность размещать пнг картинки с прозрачным фоном. Но они не дают возможность размещать такую картинку в качестве фона тобиш бекграунда, или размещать альты и титлы на них. Так вот я предлаюгаю вашему вниманию чудесный плагин или лучше сказать библиотеку, которая это все поможет починить. Но пнгешками не стоит злоупотреблять, все же не у всех пользователей сверхзвуковой интернет :)

Для начала вам нужно скачать вот это pngFix.zip
Второй шаг. Вам нужно закачать файлы (их берем с архива который скачали выше, это jquery-latest.pack.js и jquery.pngFix.js) на сервер или к тому файлу в котором будут использоваться пнг. Ну или прописать полный путь к библиотеке. Ну и соответствено в том файле где будет использоваться пнг нужно подключить библиотеки.