Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.

Демо можно посмотреть тут или тут http://jsfiddle.net/x404/K5enj/, или промотайте эту страницу ниже.

 

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы вверх при нажатии на кнопку прокрутки.

 

Итак начнем:

Подробнее

Компания Google объявила о скором прекращении поддержки браузера Internet Explorer 8. В соответствии с планом, объявленном год назад, нормальная работа Gmail, Google Docs и других сервисов Google гарантируется только в современных браузерах. К таким относятся:

 

  • – Google Chrome;
  • – Firefox (последняя и предыдущая версия);
  • – Internet Explorer (последняя и предыдущая версия);
  • – Safari (последняя и предыдущая версия).

 

Поскольку 26 октября состоится официальный релиз Internet Explorer 10, то с этого дня восьмая версия IE автоматически переходит в разряд «устаревших». Поддержка IE8 продлится до 15 ноября, после чего все пользователи этого браузера при заходе на Youtube или другие сервисы Google увидят рекомендацию обновить браузер.

Подробнее

Когда возникает задача, что на сайте нужно использговать нестандартный шрифт, то можно пойти несколькими путями:

1. font-face метод  – для этого достаточно в CSS написать (данный метод не поддерживается в браузерах IE). Хотя метод достаточно распространненный, когда вы готовы закрыть глаза на невозможность отображения в Internet Explorer

@font-face {
  font-family:'Hagin Caps Medium';
  font-style:normal;
  font-weight:400;
  src:local('Hagin Caps Medium'), local('HaginCapsMedium'), url('HaginCapsMedium.otf') format('opentype');
}

 

2. Нарезать картинок с заголовками из jpg и вставлять вместо текста картинки.

 

3. sIFR – наиболее употребляемый на сегодняшний день, но его недостаток – требует наличия Flash-плагина. Хотя в нынешнее время это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.

 

4. Typeface.js

 

5. Cufon – cегодня это самый новый метод, который является достойной альтернативой sIFR и показывает превосходные результаты, который и будет рассмотрен.

Подробнее

Для нормальных браузеров помещаем текст/картинку в контейнер, для контейнера задаём:

display:table-cell;
vertical-align:middle;

для ie7 контейнеру задаем display:block
 

А для самого элемента, который нужно выровнять:

display:block;
margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) + 'px');

Подробнее

Хак – это специальная css-конструкция, которую одни браузеры понимают, а другие игнорируют. Использование хаков, как правило, говорит о непрофессиональности верстальщика. Но бывают встречаются случаи, когда все-таки без хаков не обойтись и их использование является единственным случаем избавления от проблем.

 

Если есть возможность избежать использования хаков, то лучше их не использовать. А для исправления ошибок в Internet Explorer лучше использовать отдельный файл, который можно подлкючить с помощью условных комментариев (векторов версий).

Подробнее

Свойства CSS позволяют изменить вид курсора для элементов веб-страниц: для изображений, текста, блоков, ссылок и пр.

Вид и CSS-код приведены в таблице ниже. Курсор меняет свою форму в зависимости от того, на какую строку таблицы навели мышкой.

 

Вид Значение Пример (наведите курсор на ячейку) Браузер
  auto Браузер самостоятельно определяет вид курсора Все
default style="cursor: default;" Все
pointer style="cursor: pointer;" Все
crosshair style="cursor: crosshair;" Все
text style="cursor: text;" Все
wait style="cursor: wait;" Все
help style="cursor: help;" Все
  inherit Значение наследуется от родительского элемента Все
move style="cursor: move;" Все
e-resize style="cursor: e-resize;" Все
ne-resize style="cursor: ne-resize;" Все
nw-resize style="cursor: nw-resize;" Все
n-resize style="cursor: n-resize;" Все
se-resize style="cursor: se-resize;" Все
sw-resize style="cursor: sw-resize;" Все
s-resize style="cursor: s-resize;" Все
w-resize style="cursor: w-resize;" Все
progress style="cursor: progress;" Все
col-resize style="cursor: col-resize;" IE, Moz, Webkit
not-allowed style="cursor: not-allowed;" IE, Moz, Webkit
row-resize style="cursor: row-resize;" IE, Moz, Webkit
vertical-text style="cursor: vertical-text;" IE, Moz, Webkit
url(uri) style="cursor: url(mycursor.cur), cursor_type;" IE, Moz
Webkit — ошибка с точкой привязки
Opera — применит стандартное значение
all-scroll style="cursor: all-scroll;" IE
Moz, Webkit — аналогичен «move»
no-drop style="cursor: no-drop;" IE
Moz, Webkit — аналогичен «not-allowed»

 

Разбирая сайты для Галереи HTML5 и отвечая на вопросы читателей на сайте Доктор HTML5, я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.

Подробнее

putty

Если у вас есть возможность использовать ssh-доступ для работы с хостингом, то лучше этим воспользоваться. Из явных преимуществ – это возможность заливать файлы на сервер с другого сервера минуя свой компьютер (когда 100мб архив переносится с одного хоста на другой – это ощутимое преимущество), заархивировать или распаковать архив прямо на сервере, если такой возможности нет в панели управления хоста, мгновенно удалять файлы и выставлять быстро права (chmod) папкам и файлам (рекурсивно).

Одна из программ по работе с ssh – это putty. Официальный сайт, где можно найти последнюю версию программы, http://putty.org.ru/

putty

1. Копирование файлов с сервера на сервер посредством ssh:

wget http://домен/категория/название файла

Подробнее