nSite

По ходу работы потребовалось сделать красивый скроллинг по спецпредложениям на первой странице сайта www.avktea.ru

Задача была после изучения статьи «Настраиваем внешний вид скроллбара» и соответственно установкой скриптов:

1. jQuery
2. Mouse Wheel Extension
3. jScrollPane

Результат меня очень порадовал. Получилось даже лучше, чем дизайнер в макете нарисовал.

Новая инициатива от Google. Теперь на серверах Google будут размещаться все популярные javascript-библиотеки. Больше не придётся думать о кэшинге, gzip-е, хостинге, трффике и тд. Сейчас объявлено о размещении Prototype, Script.aculo.us, jQuery, Dojo и MooTools.

Можно подключить нужный скрипт напрямую, например:

HTML:

1. <script src=»http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js»></script>

или можно использовать гугловскую библиотеку для подгружения нужных скриптов. Например:

HTML:

1. <script src=»http://www.google.com/jsapi» type=»text/javascript»></script>
2. <script type=»text/javascript»>
3. google.load(«jquery», «1.2.3″);
4. google.load(«prototype», «1.6″);
5. google.load(«scriptaculous», «1.8.1″);
6. google.load(«mootools», «1.11″);
7. google.load(«dojo», «1.1.1″);
8. </script>

Можно задавать нужную версию как параметр, а так же запрашивать несжатую версию библиотеки:

HTML:

1. <script src=»http://www.google.com/jsapi» type=»text/javascript»></script>
2. <script type=»text/javascript»>
3. google.load(«jquery», «1.2.3″, {uncompressed:true});
4. </script>

Идея очень простая, но эффективная. Вот маркап:

<a href=’#'>Заголовок ссылки <span>Подсказка</span></a>

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

  a {
	z-index:10;
  }
  a:hover {
	position:relative;
	z-index:100;
  }
  a span {
	display:none;
  }
  a:hover span {
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
  }

Span мы спрячем, и покажем только когда мышка будет над ссылкой. Тогда сработает цсс селектор a:hover span. Также мы позиционируем a:hover релативно, а a:hover span абсолютно.

Источник.

В результате интересной дискуссии на Хабре был предложено очень полезное решение установки css-стилей для верхних и нижних индексов (тэги <sup> и <sub>)

sup { vertical-align: baseline; position: relative; top: -0.4em; }
sub { vertical-align: baseline; position: relative; bottom: -0.4em; }

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

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

http://developer.yahoo.com/yui/imageloader/
http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin