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

Что такое защита контента сайта

Большинство людей, которые сталкивались с вопросом защиты текстов и картинок сайта, считают, что для защиты контента достаточно отключить контекстное меню (кнопку правой мыши) и выделение текста на сайте, или добавлять к скопированному тексту ссылку на страницу откуда скопирован текст.

Но, к сожалению, все эти способы псевдозащиты абсолютно не защищают контент страницы вашего сайта, и только мешают и раздражают пользователей и разработчиков. Например, многие пользователи любят во время чтения статьи выделять текст который читают (как будто ведут пальцем по печатной странице), а разработчик не может посмотреть исходный код элемента.

Отключение контекстного меню и блокировка выделения текста обладают следующими недостатками:

1. реализованы на JavaScript — отключите JS в браузере и вы сможете пользоваться контекстным меню и выделять текст;
2. код страницы все-равно доступен — горячие клавиши Ctrl+Shift+J в Chrome открывает консоль JS, где вы можете перейти на вкладку «Elements» и легко скопировать текст/сохранить изображение;
3. страницу можно сохранить к себе на компьютер со всем ее текстом и картинками Ctrl+S в помощь.

Дело в том, что когда вы открываете любую страницу в интернете ее содержимое загружается на ваш компьютер, соответственно в любом случае пользователь получает контент который вы ему предоставили на страницах вашего сайта. Казалось бы безвыходная ситуация, ведь все, что бы мы не предоставили пользователю может быть украдено.

Однако, безвыходных ситуаций не бывает, и для того чтобы понять, как защитить контент сайта, давайте разберемся с защитой информации в целом. Защита информации реализуется несколькими способами:

• запрет доступа — доступ к информации полностью закрыт для сторонних пользователей;
• шифрование — информация находится в открытом доступе, но она зашифрована, например при помощи ключа;
• частичный доступ — пользователи могут ознакомиться только с определенной частью информации.

(если какой-то пункт пропустил — пишите в комментариях)

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

Защита текста на сайте

К сожалению, защитить текст на сайте, на сколько я знаю, практически невозможно, и если вы обладаете обратной информацией буду рад если вы поделитесь ею. Как я и говорил ранее, страница загружается к пользователю на компьютер и текст с ней. Единственный вариант защитить текст от копирования — выкладывать его в виде изображений, однако тогда в нем не будет никакого смысла, т.к. поисковый робот не сможет его проиндексировать и будет видеть картинку.

В виду этого, поисковые системы Google и Яндекс пытаются решить проблему определения авторских прав и предлагают по два решения.

Быстрое добавление страниц

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

• Google Search Console;
• Яндекс.Вебмастер;

и вот как это выглядит:

Указание авторства для Google

Поисковая система Google также предлагает подтверждать авторство контента страниц при помощи специальных тегов:

• <meta name=»author» content=»Nikita Spivak«>
• <link rel=»author» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>
• <link rel=»publisher» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>

Бытует мнение что первый тег уже не актуален, но я пока продолжаю его использовать. Author-тег указывает на ссылку страницы автора в Google+, а publisher — это непосредственно страница самого издательства (бизнес-страница), в моем случае, это одна и та же страница.

Добавление оригинальных текстов в Яндекс

Обязательно добавьте свой ресурс в систему Яндекс.Вебмастер и подключите в разделе «Содержимое сайта» сервис «Оригинальные тексты».

Кросспостинг как метод защиты текста

Кросспостинг — умышленное автоматическое, полуавтоматическое или ручное помещение одной и той же статьи, ссылки или темы, в форумы, блоги, либо иной формы сайты или публичные переписки, в том числе и в режиме онлайнового общения (подробнее на Вики).

Как это помогает защитить текст? Вероятность того, что поисковые системы проиндексируют быстрее социальную сеть или другой огромный ресурс, где вы будете размещать ссылки на страницы своего сайта, чем ваш собственный сайт — больше, да и указание даты и времени будет подтверждением вашего авторства.

Защита изображений на сайте

Что касается защиты изображений на страницах сайта, то тут ситуация немного проще ввиду наличия водяных знаков, которые можно наложить на изображения. Однако не все так просто как может на первый взгляд показаться:

• некоторые типы водяных знаков можно безболезненно удалить;
• при наложении водяных знаков сохраняется доступность оригиналов;

поэтому при реализации функционала наложения водяного знака на изображение будьте внимательны и попробуйте выступить в роли злоумышленника чтобы выявить как можно больше слабых мест в функционале с целью их дальнейшего устранения.

Накладывайте сложные водяные знаки, ведь простой можно обрезать, удалить, перекрыть своим водяным знаком. Пример слабого водяного знака и как можно удалить такой водяной знак с изображения я описывал в статье «Водяные знаки на изображениях и как удалить простой водяной знак«.

В случае, если вы загружаете оригинал изображения на сервер и водяной знак накладывается автоматически, при этом копия оригинального изображения сохраняется — убедитесь что директория, в которой хранятся оригиналы изображений не доступна для пользователей.

Например в CMS OpenCart изображения хранятся в корневой папке image, которая содержит два каталога:

• cache;
• data.

В директории data хранятся оригиналы изображений, которые прикреплены к продуктам интернет магазина, а в папке cache находятся копии этих изображений, уменьшенных до используемого на сайте размера и с водяным знаком. При этом файловая структура в директории cache полностью повторяет структуру папки data, а файлы имеют те же названия, что позволяет злоумышленнику скопировать адрес изображения с водяным знаком, например:

http://example.com/image/cache/data/catalog/product-300×800.jpg

и обратиться по адресу:

http://example.com/image/data/catalog/product.jpg

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

Надеюсь данная статья поможет вам защитить ваш контент от копирования, а сайт от падения в выдачах поисковых систем. Если вы знаете еще какие-либо способы защиты контента от его копирования — пишите в комментариях.

Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
	background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

Но данное решение предполагает добавление дополнительных элементов в HTML и в рамках работы над проектом это было не самым хорошим решением, т.к. элементами для обесцвечивания были блок-ссылки с фоном, поэтому я прибег к старому доброму трюку с двумя изображениями:

• оригинальное изображение;
• предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

.directions .direction a.open-modal{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: grayscale(1); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

1. размещаем несколько блок-ссылок с фоном;
2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

Посмотреть в живую | Скачать демо

Подводя итог хочется сказать что остается загадкой для чего Microsoft отключила по-умолчанию фильтры в своем браузере, когда IE только их начал поддерживать, но видимо на это были свои причины. Надеюсь данная статья вам помогла и вы уже поставили лайк и подписались на паблики. Желаю вам поменьше Клиентов-пользователей IE.

Дело в том что при локализации сайта, в некоторых случаях, приходится использовать, например, разные классы стилей оформления для разных языков сайта. Ярким примером такой необходимости является использование изображений, содержащих текст на разных языках, в качестве фона элемента.

Итак, для решения проблемы локализации любого атрибута с помощью JavaScript фреймворка l20n, нам необходимо открыть сам файл скрипта и найти следующие строки:

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

Обратите внимание: в данной статье приводится не минифицированный кусок кода, поэтому при поиске по файлу лучше пользоваться просто тегами или атрибутами. Например: «placeholder», «small» и т.д.

В данном объекте (z) определяются все возможные элементы для локализации их скриптом, а также доступные для обработки атрибуты. Если вам необходимо добавить элемент для локализации, которого нет в списке, достаточно добавить его в массив elements объекта z. Пример добавления элемента для локализации:

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr", "YOUR_ELEMENT"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

Добавление атрибута, если его необходимо локализовать для всех элементов, производится в массив global объекта attributes объекта z, если же вы хотите локализовать атрибут только в определенных элементах, то можете добавить новый массив в attributes, именем которого будет имя тега для локализации, а значением выступает массив имен атрибутов для локализации.

Пример добавления общего атрибута для локализации (атрибут будет локализован для всех элементов страницы):

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label", "class"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

Пример добавления локализации атрибута для определенного элемента (атрибут будет локализован только для указанного элемента):

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"],
        your_element: ["param1", "param2", "etc"]
    }
}

Вот таким простым образом вы можете модифицировать фреймворк l20n для локализации сайта на JavaScript. Данное решение было найдено в достаточно поспешном темпе, и если вы знакомы более красивым и лаконичным решением (без редактирования файла фрейморка), буду рад если поделитесь им в комментариях.

UPD: после того как мы добавили необходимые атрибуты в список разрешенных, их необходимо локализовать в файле локализации. Локализация атрибутов производится следующим образом в файле локализации:

<testimg alt:"Тестовый альт" title:"Тестовый заголовок">
<testp "Текст для параграфа" class:"Локализованный класс">

А в файле html будет выглядеть так:

<img src="image.png" alt="Test alt" title="Test title" data-l10n-id="testimg">
<p class="localized class" data-l10n-id="testp>Text for the paragraph</p>

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

Как правило, сайты с несколькими яыками — это крупные порталы или небольшие сайты-визитки, направленные на представление информации пользователям нескольких стран. Создание нескольких языковых версий для сайтов местного масштаба (городского, областного, масштаба страны) является абсолютно не обоснованной затратой средств и времени.

Сегодня мы рассмотрим один из вариантов создания мультиязычного сайта при помощи JavaScript библиотеки l20n. Данная библиотека позволяет создать мультиязычный сайт используя всего несколько файлов для локализации и собственно саму библиотеку.

Как локализовать сайт с помощью JavaScript

Для локлизации сайта с помощью JavaScript можно использовать библиотеку l20n. Структура файлов данного фреймворка достаточно проста: файл, который необходимо локализовать с подключенным файлом скрипта l20n.js и папка с локализациями. Данный фреймворк от компании Mozilla распространяется бесплатно, и вы можете с ним ознакомится по ссылке http://l20n.org/.

Бибилиотека позволяет не только локализировать ваш сайт, но и сама определяет, какой язык показать пользователю, на основании его настроек на устройстве, с которого произведено посещение.

Интегрировать скрипт в вашу страничку достаточно просто:

1. скачайте библиотеку по ссылке выше;
2. подключите его в файле, который необходимо локализовать;
3. разметьте соответствующим образом файл, который необходимо локализовать;
4. создайте файлы локализации.

Вы можете скачать простой пример локализации странички при помощи фреймворка l20n от Mozilla для трех языков: английский, русский, французский. Данный пример покажет вам наглядно как работает данная библиотека. Внимание: вам необходимо запускать демо на сервере/локальном сервере — при обычном открытии файла index.html браузер выдаст ошибку: XMLHttpRequest cannot load file:///YOUR_PATH/www/locales/browser.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Данный фреймворк очень удобный для создания небольших мультиязычных сайтов, т.к. реализация мультиязычности для крупных проектов зачастую реализуется с помощью PHP, т.к. локализация на JavaScript имеет ряд определенных положительных и негативных характеристик.

Положительные и негативные стороны локализации JavaScript

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

Однако, присутствуют и негативные стороны использования JavaScript как средства для локализации вашего сайта, такие как:

1. По умолчанию, разработчики l20n предлагают оставлять теги для подстановки локализованных строк пустыми, что чревато понижением в поисковой выдаче, т.к. робот не видит текста на вашем сайте, т.к. поисковый робот парсит вашу страницу без JavaScript! Этот огромный недостаток можно с легкостью исправить, просто заполнив теги предпочтительным, преобладающим языком на вашем сайте, как это сделано в примере.
2. Поисковая система не сможет проиндексировать разные версии сайта, и будет видеть только одну версию — версию, которую вы указали в предыдущем пункте. Если реализовать локализацию на php, то можно создать для поисковой системы отдельные каталоги с разными локализациями.
3. На мой взгляд такая реализация мультиязычности не подойдет для больших порталов и крупных сайтов, т.к. она достаточно проста и не функциональна. Необходимо будет прописывать текст для каждой странички отдельно, т.е. такая конструкция позволительна исключительно для сайтов, состоящих из нескольких страниц.

Несмотря на все недостатки данного фреймворка, я тем не менее рекомендую с ним ознакомиться, и использовать в небольших проектах, например лендинг пейдж, промо и т.п. страницах.

В ввиду данных обстоятельств, хочу представить вам свеженький плагин для jQuery — Selection Slider, который позволит вам создать слайдшоу, состоящее из нескольких частей и настроить каждую часть отдельно!

Слайдшоу обладает стандартным набором входных параметров:

• время задержки;
• время анимации;
• автопроигрывание;
• пауза при наведении на селектор.

Основной особенностью слайдшоу является безлимитное количество частей (селекторов), которые вы можете создать в рамках одного слайдера. Каждый селектор может быть настроен отдельно, используя параметры «data-название_опции».

Это первый мой плагин под jQuery, написанный с нуля, в связи с этим слайдшоу достаточно простое, однако обладает гибкими настройками, что позволяет настроить его под ваши нужды. На демо страничке я постарался показать все возможные варианты настройки данного слайдшоу.

Если у вас есть предложения и пожелания по улучшению данного плагина — пишите в комментариях, или воспользуйтесь формой обратной связи в разделе «Контакты».

Надеюсь данный плагин — это то что вы искали и не забывайте ставить лайки, делиться в соц. сетях, писать комментарии — это очень важно для меня. Спасибо

Посмотреть jQuery плагин Selection Slider: Demo livepage

Скачать jQuery плагин Selection Slider: selectionSlider

При создании современного сайта каждый разработчик должен это учитывать! Что такое адаптивный дизайн, резиновая верстка, статика и в чем отличие, в чем преимущества адаптивной верстки, и зачем ее делать? Давайте разбираться!

Сегодня, каждый из бизнесменов и предпринимателей понимает всю ту силу и все те возможности интернета, которые позволяют расширить бизнес и увеличить продажи. За последние несколько лет очень многие перенесли свой бизнес в интернет, частично либо полностью.

Но технологии не стоят на месте, и все больше и больше людей пользуются мобильными устройствами для поиска информации в сети. Люди заходят в социальные сети, ищут информацию о событиях города, о местах, покупают товары, и все это пользуясь мобильными гаджетами!

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

Статический дизайн сайта — это самая простая, с точки зрения разработки версия верстки. Все элементы вне зависимости от разрешения экрана устройства, размера окна браузера будут расположены в одном и том же месте без сдвигов или изменений.

Такой сайт безболезненно откроется на любом устройстве, будет работать корректно, но не все элементы управления (ссылки, кнопки) будут удобны для взаимодействия пользователем. Такой сайт необходимо «зумить» (увеличивать/уменьшать масштаб), скроллить и ловить искомый элемент.

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

Также для более корректного отображения при создании такого сайта разработчик может использовать JavaScript для более точного позиционирования элементов. Данный вид сайтов достаточно интересный, однако сегодня его вытесняет адаптивный дизайн сайтов.

Адаптивный дизайн сайтов — это дизайн, который рассчитан на корректное отображение на всевозможных устройствах, начиная от персональных компьютеров с FullHD разрешением мониторов, заканчивая мобильными устройствами с минимальным разрешением.

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

Некоторые владельцы интернет магазинов создают отдельную мобильную версию сайта, которую размещают на поддомене «m» и создают редирект (переадресацию) для мобильных устройств с основного домена example.com на m.example.com. К сожалению, на данный момент я затрудняюсь ответить в чем преимущество такого решения, но если вы знаете — пишите в комментариях — найдем истину вместе!

Однако, наличие адаптивной версии сайта — это не обязательный атрибут для каждого ресурса, т.к. каждый ресурс имеет свою специфику, и прежде чем вы решите создавать сайт с адаптивным дизайном, проведите анализ статистики по посещению подобных ресурсов на предмет процентного соотношения посещений с мобильных устройств к посещениям с персональных компьютеров или ноутбуков.

Таким образом, мы видим, что сегодня, при создании сайта, желательно иметь адаптивный дизайн (мобильную версию), и подойти к ее разработке очень тщательно и с умом, т.к. от качества подхода и разработки зависит удобство использования посетителем вашего ресурса, а ведь удобство клиента — это ваши деньги.

Один из моих читателей, оказался внимательнее чем все остальные, за что ему отдельная благодарность! И по его просьбе и в благодарность за внимательность, я представляю вам плагин ShadowSlider адаптированный под jQuery версии 1.1.

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

В новой же версии я устранил данную ошибку, и теперь это полнофункциональная простая карусель во всю ширину вашего сайта, с кнопками навигации, а также пагинацией! ДЕМО

Вам остается только оформить карусель как вам хочется и вуаля! Если у вас есть пожелания или предложения по улучшению данного плагина, то вы можете написать об этом в комментариях! Не забывайте ставить лайк!

Скачать ShadowSlider for jQuery: jquery-slideshow-1.1

Многие с такой проблемой часто борятся при помощи «хитрых скобочек», например 2 минут(ы), но это не профессионально и не красиво, да и строка увеличивается за счет лишних символов.

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

Работа скрипта основывается на значении последней цифры каждого из значений счетчика: т.е. если значение минут 26, то последняя цифра 6. Таким образом выбирается необходимый падеж.

Я приведу исходный код простого таймера обратного отсчета который использовал также в модуле отсчета времени до конца акции OpenCart и модуле Акции категорий со счетчиком для OpenCart, который вы можете переделать под свои нужды.

function countdown(){
	var names = {days:		{1:"день", 2:"дня", 3: "дней"},
				 hours:		{1:"час", 2: "часа", 3: "часов"},
				 minutes:	{1:"минута", 2: "минуты", 3: "минут"},
				 seconds:	{1:"секунда", 2: "секунды", 3: "секунд"},
	};
	var day_name = names['days'][3];
	var hur_name = names['hours'][3];
	var min_name = names['minutes'][3];
	var sec_name = names['seconds'][3];


	var today = new Date();
	var BigDay = new Date(2014, 11, 31, 15, 00, 00);
	var timeLeft = (BigDay.getTime() - today.getTime());

	var e_daysLeft = timeLeft / 86400000;
	var daysLeft = Math.floor(e_daysLeft);

	var slice_day = String(daysLeft).slice(-1);
	if(parseInt(slice_day) == 1 && (parseInt(daysLeft) < 10 || parseInt(daysLeft) > 20)){
		day_name = names['days'][1];
	}else if((parseInt(slice_day) == 2 || parseInt(slice_day) == 3 || parseInt(slice_day) == 4) && (parseInt(daysLeft) < 10 || parseInt(daysLeft) > 20)){
		day_name = names['days'][2];
	}else{
		day_name = names['days'][3];
	}

	var e_hrsLeft = (e_daysLeft - daysLeft)*24;
	var hrsLeft = Math.floor(e_hrsLeft);
	if(hrsLeft < 10){
		hrsLeft = '0'+hrsLeft;
	}
	var slice_hours = String(hrsLeft).slice(-1);
	if(parseInt(slice_hours) == 1 && (parseInt(hrsLeft) < 10 || parseInt(hrsLeft) > 20)){
		hur_name = names['hours'][1];
	}else if((parseInt(slice_hours) == 2 || parseInt(slice_hours) == 3 || parseInt(slice_hours) == 4)  && (parseInt(hrsLeft) < 10 || parseInt(hrsLeft) > 20)){
		hur_name = names['hours'][2];
	}else{
		hur_name = names['hours'][3];
	}

	var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
	var minsLeft = Math.floor(e_minsLeft);
	if(minsLeft < 10){
		minsLeft = '0'+minsLeft;
	}
	var slice_min = String(minsLeft).slice(-1);
	if(parseInt(slice_min) == 1 && (parseInt(minsLeft) < 10 || parseInt(minsLeft) > 20)){
		min_name = names['minutes'][1];
	}else if((parseInt(slice_min) == 2 || parseInt(slice_min) == 3 || parseInt(slice_min) == 4) && (parseInt(minsLeft) < 10 || parseInt(minsLeft) > 20)){
		min_name = names['minutes'][2];
	}else{
		min_name = names['minutes'][3];
	}

	var seksLeft = Math.floor((e_minsLeft - minsLeft)*60);
	if(seksLeft < 10){
		seksLeft = '0'+seksLeft;
	}
	var slice_sec = String(seksLeft).slice(-1);
	if(parseInt(slice_sec) == 1 && (parseInt(seksLeft) < 10 || parseInt(seksLeft) > 20)){
		sec_name = names['seconds'][1];
	}else if((parseInt(slice_sec) == 2 || parseInt(slice_sec) == 3 || parseInt(slice_sec) == 4) && (parseInt(seksLeft) < 10 || parseInt(seksLeft) > 20)){
		sec_name = names['seconds'][2];
	}else{
		sec_name = names['seconds'][3];
	}

	if (BigDay.getTime() > today.getTime() ){
		document.getElementById("countdown").innerHTML = daysLeft+" "+day_name+" "+hrsLeft+" "+hur_name+" "+minsLeft+" "+min_name+" "+seksLeft+" "+sec_name;
	}
}

Как видите для каждой позиции формата часов определяется последняя цифра и устанавливается соответствующий падеж. В случае если последняя цифра равна единице — минута, если 2, 3, 4 — минуты, 5-0 — минут. При этом величины от 10 до 20 имеют все значение — минут.

Данное решение нуждается в доработке в случае если в одной из позиций (одно из значений) таймера будет число, превышающее 100, т.к. необходимо будет брать последние две цифры для выполнения последнего условия с величинами от 10 до 20.

В моем случае ответ был прост: просто удалите ресурс с Google Analytics и потом снова его добавьте! Получите новый код и установите на сайт. После переходим в режим реального времени, и вуаля! Все заработало!

Вот в очередной раз и я столкнулся с данным вопросом. Необходим был слайдер во всю ширину экрана, который бы прокручивался в цикле. И я нашел такой, но я приверженец jQuery, а слайдер — плагин под Mootools. Что делать? Я попробовал найти ресурсы, которые помогают перевести плагины с одной библиотеки под другую, но в конечном счете понял, что сделать это придется мне самому.

Таким образом, представляю вашему вниманию оригинал слайдера на Mootools от Constantin Boiangiu, и свою скромную копию, адаптированную под jQuery. Посмотреть демо слайдера во вся страницу адаптированного под jQuery. Думаю что ссылки следующего и предыдущего слайда и остальные стили вы сами подберете и оформите слайдер по вкусу.

Скачать jquery-ShadowSlider
Скачать mootools-ShadowSlider

ВНИМАНИЕ! слайдер был обновлен, скачать новую версию слайдера для jQuery

Пользуйтесь на здоровье и не забывайте ставить «Лайк» и рассказывать друзьям!
Удачного оформления сайта!