Ротатор изображений вокруг оси на jQuery #
Сразу и не придумать где такое можно применить...
ДЕМО он же офф.сайт откуда можно скачать либу
ДЕМО он же офф.сайт откуда можно скачать либу
Блоки-колонки одинаковой высоты #
Может и писал, а может и нет, не помню, но сталкиваются веб-дизигнеры с этим часто.Использование свойства display: table Метод 1
Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов. Этот метод не работает в браузерах IE7 и ниже. (опять ИЕ выебнулся)
Использование javascript Метод 2
Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.
Искусственные колонки Метод 3
Очень простая реализация. Этот метод можно использовать только для макетов/колонок фиксированной ширины.
Использование раздельных блоков с фоном Метод 4 Метод 4.1
Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает. Этот способ в деталях описан здесь
Выпадающее окошко на jquery #
За выпадение отвечает:
$(function(){
$('#contacts_opener').click(function(){
$('#contacts_block').css('display', 'block');
$('#contacts_block').animate({top: 100}, 400, 'swing');
});
$('#contacts_closer').click(function(){
$('#contacts_block').animate({top: -500}, 400, 'swing', function(){$('#contacts_block').css('display', 'none')});
});
$('#select_quest').click(function(){
$('#physic_addr').hide();
$('#virtual_addr').fadeIn();
});
$('#select_addr').click(function(){
$('#virtual_addr').hide();
$('#physic_addr').fadeIn();
});
$('.otz_pic').hover(function(){
$(this).css('border','1px solid #e07824');
}, function(){
$(this).css('border','1px solid #cccccc');
});
setInterval('tr()', 150);
setInterval('photos()', 800);
});
$('#contacts_opener').click(function(){
$('#contacts_block').css('display', 'block');
$('#contacts_block').animate({top: 100}, 400, 'swing');
});
$('#contacts_closer').click(function(){
$('#contacts_block').animate({top: -500}, 400, 'swing', function(){$('#contacts_block').css('display', 'none')});
});
$('#select_quest').click(function(){
$('#physic_addr').hide();
$('#virtual_addr').fadeIn();
});
$('#select_addr').click(function(){
$('#virtual_addr').hide();
$('#physic_addr').fadeIn();
});
$('.otz_pic').hover(function(){
$(this).css('border','1px solid #e07824');
}, function(){
$(this).css('border','1px solid #cccccc');
});
setInterval('tr()', 150);
setInterval('photos()', 800);
});
Демо | Скачать
Фиксированное затухающее меню на jquery #
Когда вы начинаете скролить страницу, меню становится прозрачным, смотрите демку.
Демо | Скачать
Тень для блока кроссбраузерно с помощью CSS #
Cпособ кроссбраузерной реализации css-свойства box-shadow.для обычных браузеров
div {
background: green; /* обязательно для ie */
-webkit-box-shadow: 0px 0px 15px #222;
-moz-box-shadow: 0px 0px 15px #222;
box-shadow: 0px 0px 15px #222;
}
background: green; /* обязательно для ie */
-webkit-box-shadow: 0px 0px 15px #222;
-moz-box-shadow: 0px 0px 15px #222;
box-shadow: 0px 0px 15px #222;
}
Суть реализации свойства box-shadow для ie сводится к четырёхкратному применению фильтра shadow с разными значениями direction. Таким образом тень начинает обрамлять весь контур контейнера.
для ИЕ
Несколько нюансов, на которые стоит обратить внимание:
Тень, при использовании фильтра получается темнее, поэтому, чтобы добиться идентичности, нужно поиграться с параметрами color и strength
IE увеличивает размеры блока на ширину тени, а так как для каждой стороны у нас по сути две тени, то и увеличение размеров становится двоекратным. Т.е. в конце нам нужно относительно сместить блок влево и вверх по формуле left = top = -(strength*2)
IE6 и IE7 требуют hasLayout, поэтому для них ставим zoom: 1 (или ширину, высоту и другие свойства, которые присваивают hasLayout)
Для блока обязательно нужно задавать фон, иначе фильтр будет применяться к дочерним элементам
IE увеличивает размеры блока на ширину тени, а так как для каждой стороны у нас по сути две тени, то и увеличение размеров становится двоекратным. Т.е. в конце нам нужно относительно сместить блок влево и вверх по формуле left = top = -(strength*2)
IE6 и IE7 требуют hasLayout, поэтому для них ставим zoom: 1 (или ширину, высоту и другие свойства, которые присваивают hasLayout)
Для блока обязательно нужно задавать фон, иначе фильтр будет применяться к дочерним элементам
Минусы:
Фильтры — это всегда лишние тормоза
IE выключает сглаживание текста внутри блока с фильтрами
Тень в IE по форме отличается от тени в других браузерах (более квадратная)
Внутри таким образом оформленного блока перестаёт работать alphaImageLoader (возможно и другие фильтры тоже — не проверял)
IE выключает сглаживание текста внутри блока с фильтрами
Тень в IE по форме отличается от тени в других браузерах (более квадратная)
Внутри таким образом оформленного блока перестаёт работать alphaImageLoader (возможно и другие фильтры тоже — не проверял)
взято с хабра
Демо
