Используем prototype и scriptaculous эффекты для того, чтобы показать посетителю насколько надёжен его пароль. За основу взят скрипт Password Meter, который в оригинале можно скачать здесь: geekwisdom.com/js/passwordmeter.js. Добавляем немного эффектов и функциональности с помощью CSS, Javascript а так же наших любимых библиотек Prototype и Scriptaculous.

(далее…)

Еще один способ спрятать свой e-mail адрес от ботов. Вместо того, чтобы писать адрес напрямую, мы может писать его на лету используя javascript. А с Prototype это становится еще легче. Немножко HTML:

Мой е-майл: <span class="email_here"></span>.

И немножко Prototype:

$$('.email_here').each( function(e) {
  e.update('kovshenin'+'@'+'live.com').observe('click', function() { window.location = 'mailto:kovshenin'+'@'+'live.com'; }).setStyle({cursor:'pointer'});
	});

Заметьте, что используется конкатенация - это для того, чтобы боты не украли ваш е-майл прямо из javascript файла. Вставьте этот кусок кода на событие onload элемента body, и боты больше никогда не доберутся до вашего адреса!

(далее…)

Очень интересное решение отражения изображением с использованием библиотек Prototype и Scriptaculous. Преимущества:

• Никакого Flash
• Никакого CSS
• Cross-browser
• Пред-загрузка изображения перед эффектом

Как подключить:

<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js?load=builder" type="text/javascript"></script>
<script src="javascript/reflection.js" type="text/javascript"></script>

Рисуем картинку:

<div id="holder">
<img src="image.jpg"/>
</div>

И применяем эффект:

<script type="text/javascript">
  new Reflect3D('holder');
</script>

Библиотеку можно скачать здесь: Prototype Reflection.

Скачать Prototype
Скачать Scriptaculous

(далее…)

Люди часто бродят по вашему сайту по одному и тому же маршруту. Когда мы знаем примерный маршрут посетителя - мы можем оптимизировать нашу страницу таким образом, чтобы пользователь меньше всего времени проводил в ожидании загрузки следующей страницы. Это можно сделать с помощью пред-загрузки (preloading) ссылок. Ниже приведен небольшой скрипт на библиотеки prototype, который пройдет по всем ссылкам вашей страницы, и если обнаружит значение “load” в свойстве rel - подгружает ссылку в скрытом фрейме (iframe).

1
2
3
4
5
6
7
8
9
10

document.observe('dom:loaded', function() {
$$('a').each(function(e) {
		if(e.getAttribute('rel') == 'load') {
			p_sHref = e.getAttribute('href');
			if(/^#/.match(p_sHref) ||  p_sHref == '' || !p_sHref) return;
			l_oIframe = new Element('iframe', {src:p_sHref} ).hide();
			document.body.appendChild(l_oIframe);
		}
	});
});

То есть, чтобы заранее подгрузить определенную ссылку, используем свойство rel:

<a href = "http://blog.kovshenin.com/bio" rel="load">Текст ссылки</a>

Хотелось бы услышить ваше мнение ;)

(далее…)