Снова небольшой туториал по jQuery (не надоело еще?) по изменению размеров изображения в зависимости от размеров окна браузера. Правильнее сказать, это не изменение размеров, а подгрузка изображение большего или меньшего размера. Кстати, Last.Fm использует данный прием на страницах артистов.

1. Нужный кусок HTML-кода

  

(Type words here)

Главное, что тут понадобится – это класс .fluidimage

2. Теперь нужный CSS

body { text-align:center; }
img { float: rightright; margin: 0px 10px 10px 10px;}
#content { width:70%; margin: 0px auto; text-align: left; }

Для удобства восприятия опущены всякие графические стили и “украшательства” и приведены только действительно нужные в данном случае.

3. Изменения изображения с помощью jQuery

Этот скрипт содержит функцию, которая меняет изображения в зависимости от размеров окна. Если ширина браузера менее 700пикс., используется уменьшенная картинка, в остальных случаях – полноразмерная. Функция запускается при первой загрузке страницы и в при любом изменении размеров окна браузера.
Можно пойти дальше и ресайзить одну картинку в процентном соотношении от размера окна, но тут есть риск получить некачественное и размытое изображение.

Демо туториала
Скачать скрипт

Оригинал статьи: #.

Этот туториал поможет быстро и достаточно легко создать с помощью jQuery вот такой красивый слайдер.

1. Создайте HTML-страницу.

post: 

2. Создайте CSS-файл.

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

3. Скопируйте и вставьте этот код в вашу станицу после основного HTML-кода перед закрывающим BODY-тэгом. Вы можете легко изменить заголовок и описание – поменяйте команду “client” для заголовка и команду “desc” для описания.

4. Скачайте файлы jquery.js и scripts.js и вставьте ссылки на них в секции HEAD.

Демо примера.
Файловый архив.
Оригинал статьи.

Перевод небольшого туториала, который поможет вам стилить формы так, как вам нравится, независимо от браузера.
1. Берем форму по умолчанию. Любой браузер отображает (рендерит) ее так, как ему вздумается.
Было:

2. Качаем jQuery-плагин.

3. Добавляем в страницу следующий код:
В заголовок:

//required

В тело страницы код формы:

Name: 

Ну и наконец, вызов плагина:

Стало:

Если перейти по ссылке в оригинал туториала, можно обратить внимание на эффекты цвета и событий при клике и наведении мышкой.

Работает в т.ч. и в IE6, Safari 2+ и FF 2+.