Плавный скроллинг
Понадобилось мне сделать плавный скролл при переходе по якорю.
Нашел готовый скрипт, в принцип действия не вникал – главное для меня что работает
И подключаем:
<script type="text/javascript" src="ahreflight.js"></script>
Редирект, скрипт редиректа
Наиболее внятный скрипт редиректа
<script language="JavaScript1.1″ type="text/javascript">
setTimeout(‘location.replace("http://www.fixblog.ru")’, ‘3000′);
</script>
<noscript>
<meta http-equiv="Refresh" content="3; URL=http://www.fixblog.ru">
</noscript>
Все это конечно же в <head>. При включенном ява скрипте произойдет редирект на fixblog.ru через 3000 миллисекунд, что равно 3 секундам, при отключенном – тоже самое через три секунды.
Прозрачный PNG в IE 6
Достигается на самом деле довольно-таки легко. Берем прозрачный png, берем следующий код:
<script type="text/javascript">
function fixPNG(element)
{
//Если браузер IE версии 5.5-6
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;
if (element.tagName==’IMG’) //Если текущий элемент картинка (тэг IMG)
{
if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
{
src = element.src;
element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
}
}
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
if (src)
{
src = src[1]; //берем из значения свойства background-шmage только адрес картинки
element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
}
}
//если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" + src + "‘,sizingMethod=’scale’)";
}
}
</script>
Вставляем ПЕРЕД следующим html:
<div style=”background: url(some.png) no-repeat;” class=”someclass”><a href=”#”>Ссылка</a></div>
Или таким, если png вставляется не бекграундом:
<div class=”someclass”><img src=”some.png” /></div>
Остается добавить в css следющее:
.someclass {
filter:expression(fixPNG(this));
}
Все, теперь png во всех браузерах прозрачная!
Остается добавить – что если сверху png присутствуют какие-либо ссылки, или интерактивные поля (формы и т.п.), то они будут ниже картинки и не кликабельны, решается это просто, добавляется объекту, который нужно поставить выше position: relative;
На данном примере это выглядит так:
.someclass a {
position: relative;
}
Замена слоев, или как поменять DIV местами
Небольшой FAQ по теме:
Q: Что это?
A: Имеем такую конструкцию:
Слой 1
Some text
Слой 2
В итоге это будет выглядеть так:
Слой 1
Some text
Слой 2
После небольших махинаций с ява скриптом, это будет выглядеть так:
Слой 2
Some text
Слой 1
При этом код останется прежним. Можно это сделать и позиционированием, но с условием, что мы не знаем какой height у Some Text – это сделать не получится.
Q: В каких случаях применять?
A: Например баннеры. Допустим, есть баннер в шапке, баннер в правой колонке и баннер в подвале. Загружаются они по мере загрузки страницы, что немного тормозит всю загрузку. Мы же, путем подмены слоев, сначала загрузим страницу, а потом уже выскочат все баннеры одновременно.
И так, код:
a
b
Вот и все. Последнее, что надо знать – скрипт меняет содержимое слоев, учтите это, применяя стили для содержимого.