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

Итак, для решения проблемы локализации любого атрибута с помощью 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

Один из моих читателей, оказался внимательнее чем все остальные, за что ему отдельная благодарность! И по его просьбе и в благодарность за внимательность, я представляю вам плагин 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.

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

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

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

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

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

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

Итак, приступим!

Для начала мы скачиваем последнюю версию скрипта — tagcanvas version 1.17 для Internet Explorer качаем — excanvas

Добавляем в свою страницу код:

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="tagcanvas.js"></script>

Или (если используете jQuery):

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tagcanvas.min.js"></script>

Добавляете на свою страницу елемент canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>Все браузеры, которые поддерживают элемент canvas проигнорируют текст внутри этого абзаца</p>
 </canvas>

Если вам не обязательна поддержкаcanvas

<canvas width="300" height="300" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </canvas>

Если вы все-таки хотите чтобы ваше облако правильно отображалось и в Internet Explorer’e ниже 9, то поместите свои ссылки ВНЕ блока canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>In Internet Explorer versions up to 8, things inside the canvas are inaccessible!</p>
 </canvas>

 <div id="tags">
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </div>

Инициализируйте класс TagCanvas следующим образом подключив его в свою страницу:

<script type="text/javascript">
  window.onload = function() {
    try {
      TagCanvas.Start('myCanvas');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
 </script>

Если ваши ссылки не в элементе canvas, то инициализируйте его при помощи следующего выражения:

...
      TagCanvas.Start('myCanvas','tagList');
      ...

Если вы используете jQuery плагин, то инициализируйте его таким образом:

 <script type="text/javascript">
 $(document).ready(function() {
   if( ! $('#myCanvas').tagcanvas({
     textColour : '#ffffff',
     outlineThickness : 1,
     maxSpeed : 0.03,
     depth : 0.75
   })) {
     // TagCanvas failed to load
     $('#myCanvasContainer').hide();
   }
   // your other jQuery stuff here...
 });
 </script>

Вот вроде бы и все! Удачного коддинга!
Оригинал статьи, опции и другая документация по скрипту — тут

• Скрипт для редактирования любой страницы
• Скрипт полета изображений

Первый скрипт позволяет «редактировать» любую страницу.
Заходим на любой сайт, очищаем адресную строку браузера и вставляем следующий код, нажимаем Enter:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Теперь вы можете делать что захотите с этой страничкой. Но конечно же страница на сервере не изменится =)

Второй скрипт — пляшущие изображения:
Заходим на любой сайт, я зашел на ВК, там изображений много =), и снова вставляем в строку браузера следующий скрипт и нажимаем Enter:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

Изображения заплясали =) Изменяя x,y-ки можно изменить траекторию их «полета» =)

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

Для этого воспользуемся JavaScript. Для простоты решения задачи подключим jQuery.
Для обычного (без вложенных подпунктов) меню мы можем воспользоваться следующим кодом:

var current = window.location.toString();
var menu = document.getElementById('menu');
var links = menu.getElementsByTagName('a');

for (var i=0;i<links.length;i++){
if (links[i] == current){
links[i].setAttribute('id', 'current');
}
}

При HTML коде такого вида:

<ul id="menu">
	<li><a href="#">Пункт 1</a></li>
	<li><a href="#">Пункт 2</a></li>
	<li><a href="#">Пункт 3</a></li>
	<li><a href="#">Пункт 4</a></li>
	<li><a href="#">Пункт 5</a></li>
</ul>

Данный скрипт будет выполнять следующее:
Строка 1 — считывание текущего адреса в строке браузера
Строка 2 — получение всех дочерних элементов для элемента с id=»menu»
Строка 3 — получение всех ссылок (элементов <a>) и их запись в массив links[]
Строка 5 — запускаем цикл, который будет проверять все ссылки в нашем массиве links[] и сверять с текущим адресом, и если есть совпадение, то ссылке устанавливается id=»current». Т.е. устанавливается стиль для текущей (нажатой) кнопочки/ссылки. Можно установить параметр class.

Если у вас есть более рациональные идеи — пишите в комментариях сайта (не от контакта), буду рад почитать и проанализировать ваши варианты!

Методы объекта XMLHttpRequest

open()
Варианты вызова:
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )
Первый параметр method — HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.

URL — адрес запроса. Можно использовать не только HTTP/HTTPS, но и другие протоколы, например FTP и FILE://. При этом есть ограничения безопасности, так называемая «same origin policy»: запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.

Ниже это ограничение и способы обхода будут рассмотрены подробнее.
async = true задает асинхронные запросы, эта тема была поднята выше.
userName, password — данные для HTTP-авторизации.

send()
Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

abort()
Вызов этого метода xmlhttp.abort() обрывает текущий запрос.
Здесь есть одно НО для браузера Internet Explorer. Успешный вызов abort() на самом деле может не обрывать соединение, а оставлять его в подвешенном состоянии на некоторый таймаут (20-30 секунд). Отловить такие повисшие соединения можно через прокси для отладки, например, Fiddler.

У браузера есть лимит: не более 2 одновременных соединений с одним доменом-портом. Т.е, если два соединения уже висят (и отвиснут по таймауту), то третье открыто не будет, пока одно из них не умрет. Надеюсь, Вы с такой проблемой не столкнетесь. Ее можно обойти использованием кросс-доменных XmlHttpRequest.

setRequestHeader(name, value)
Устанавливает заголовок name запроса со значением value. Если заголовок с таким name уже есть — он заменяется. Например,
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

getAllResponseHeaders()
Возвращает строку со всеми HTTP-заголовками ответа сервера.

getResponseHeader(headerName)
Возвращает значение заголовка ответа сервера с именем headerName.