Seleckis.lv :: журнал Никиты Селецкого » JavaScript http://www.seleckis.lv Tue, 01 Jun 2010 05:46:59 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Min-width и max-width в IE6 с помощью expression http://www.seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression http://www.seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression#comments Thu, 06 Aug 2009 08:52:17 +0000 Никита http://seleckis.lv/?p=1690 Уже писали много раз, просто приведу свой код.

В JavaScript-файле размещаем такую функцию:

function width(min,max){
	w = document.documentElement.clientWidth;
	return (w <= min) ? min + "px" : ((w >= max) ? max + "px" : "auto");
}

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

  1. Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина;
  2. Если ширина документа больше максимальной ширины, то возвращается максимальная ширина;
  3. Иначе ширина указывается автоматическая.

Функция из CSS вызывается следующим образом:

div {
    width: expression(width(600,1000));
 
    /* далее для нормальных браузеров */
    min-width: 600px; 
    max-width: 1000px;
}

600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью условных комментариев, либо воспользоваться хакками, поскольку чтобы изменить значение придётся лезть в два файла, а не в один. Ну это уже как кому удобнее.

Скачайте пример и убедитесь, что всё работает.

Минимальную ширину в IE 6 можно эмулировать с помощью приёма, в котором указывается правый border для контейнера шириной в необходимую минимальную ширину элемента, а элементу задаётся правый отрицательный margin равный той же минимальной ширине. При этом внутренний элемент должен быть либо плавающим (float), либо inline-block. В общем не читайте и не внимайте в эти последние предложения, а просто посмотрите пример на cssplay.co.uk.

]]> http://www.seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression/feed 7 Ещё один PNG Fix для IE6 http://www.seleckis.lv/journal/javascript/eshe-odi-png-fix-dlya-ie6 http://www.seleckis.lv/journal/javascript/eshe-odi-png-fix-dlya-ie6#comments Fri, 28 Nov 2008 12:56:41 +0000 Никита http://seleckis.lv/?p=1447 Разработчики из Unit Interactive написали новый скрипт заставляющий IE6 адекватно отображать полупрозрачные PNG‑картинки — Unit PNG Fix.

Главные преимущества скрипта:

  • Очень компактный JavaScript: меньше 1 Kb!
  • Исправляет большинство проблем интерактивности вызванных использованием IE-фильтров.
  • Работает и для <img> и для CSS-свойства «background».
  • Запускается автоматически. Не нужно определять классы или вызывать функции.
  • Работает и для элементов со значением auto для свойств width и height.

Установка скрипта:

  1. Скачиваем это чудо.
  2. Подключаем в <head>: 
    <!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

    Естественно путь к файлу сами правите как нужно.

  3. Файл «clear.gif» помещаем в папочку с картинками, а в файле скрипта «unitpngfix.js» исправляете путь к этой картинке (только путь должен быть прямой относительно корня сайта).

Небольшие примечания:

  1. Unit PNG Fix проверяет наличие CSS-свойства «background-repeat» и если оно используется, то в IE6 картинка растягивается, чтобы заполнить всю площадь элемента. Чушь конечно, но это единственный вариант выхода из ситуации, когда IE6 напрочь игнорирует это свойство.
  2. А так же, нет возможности изменить позицию фона в элементе. Стало быть техника CSS работать не будет. Ну и не надо, для таких вещей на сайтах с требованиями высокой производительности используйте data:URI в связке с MHTML.
]]> http://www.seleckis.lv/journal/javascript/eshe-odi-png-fix-dlya-ie6/feed 3 Публичная порка JS-гуру http://www.seleckis.lv/journal/fun/publichnaya-porka-js-guru http://www.seleckis.lv/journal/fun/publichnaya-porka-js-guru#comments Mon, 09 Jun 2008 13:09:32 +0000 Никита http://seleckis.lv/journal/fun/publichnaya-porka-js-guru Конкурс закончился и работы проверены. Работы прислали 11 программистов, из которых один участник прислал аж 8 вариантов.

На удивление решения задачи оказались очень разные. Многие писали обработчики событий обычным способом, но некоторые всё-таки рекомендуемым AddEventListener/AttachEvent. Поразило разнообразие способов проверки на пробелы и наличие классов.

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

Said

Эффективное решение с помощью цикла проверить все поля и свойства объекта inputData перед выводом. А, ведь действительно, поля могут быть заполнены не только вручную, но и скриптом.

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

Нехороший повтор AddEventListener/AttachEvent. Можно было объединить.

Неправильное изменение элемента. Класс должен добавляться, а не заменяться.

Не могу понять эту конструкцию.

if (typeof(e.target) == 'text') e.target.className = 'edit';

Разве typeof(e.target) должен возвращать text? По-моему он возвращает object. Соответственно эта часть не работает в Firefox. Видимо автор скрипта хотел проверить тип элемента формы. Правильно было бы написать так:

if (typeof(e.target) != 'undefined' && e.target.type == 'text') e.target.className += ' edit';

Правильно, добавил проверку существования свойства объекта inputData, на тот случай если в форму добавили поле ввода, а свойство в inputData не добавили.

if (!!inputData[el.name] || inputData[el.name] == '') inputData[el.name] = el.value;

Только для чего написаны два восклицательных знака? Ведь в конструкции if такие вещи в любом случае конвертируются в Boolean.

SergiusD

Хорошая работа с массивами.

Есть проверка существования класса error.

Извращение:

arr[ind] = null;

Для таких вещей есть функция splice.

Неоправданное решение относительно поиска в className, путём создания прототипа indexOf. Даже если использовать этот вариант, то лучше было бы разбивать строку в массив уже в indexOf. А возвращать и проверять в этом случае правильнее не -1 и ещё какое-то число, а true и false.

Андрей

Сделано не совсем универсально. При убирании фокуса возвращается первоначальный класс как первый. А если их там несколько?

Примитивный и неоптимизированный вывод данных в showAll. Гораздо лучше можно было бы сделать и не использовать лишние переменные.

Такие вещи нужно объединять в единое регулярное выражение:

.replace(/^\s/, '')
.replace(/\s$/, '')

Николай

Хороший вариант обращения к объектам по id или напрямую. Любят такие вещи во фреймворках.

var $ = function(id) {
    return typeof id == 'string' ? document.getElementById(id) : id;
};

Смысла особого нет в том, чтобы обращаться к объекту не на прямую, а через $, но ради единообразия…

Изящный вариант проверки существования класса:

return !!el.className.match(new RegExp('(^|\\s)' + className + '(\\s|$)'));

Мусор в цикле:

l = inputs.length; i < l

Это зачем?

})(inputs[i]);

Игорь Источник

Параноидально концептуальный подход. Годен для больших проектов. В пору писать свой фреймворк.

Хорошая прописка прототипов, особенно ifEmpty.

В конце вывода лишний перенос строки.

Если удалить текст, то поле становится красным. Если дать ему фокус, то класс будет: read error edit.

element.className = element.className + " "  + className;

для таких вещей есть оператор «+=»:

element.className += " "  + className;

Тяжеловатый для восприятия стиль.

FX Poster

Да, с классами лучше всего работать как с масивом, а не как со строкой. Правильно.

С пробелами так работать нельзя:

this.value = this.value.replace(/^ +| +$/g, '').replace(/ +/g, ' ');

Нужно искать пробельный символ а не пробел.

Зачем столько строгих проверок (===, !==)?

В конце вывода будет лишний перенос строки.

Артём Глувчинский

Тоже хороший вариант проверки существования класса

if (this.className.indexOf(errorClass) >= 0)

В задании сказано «очистить содержимое поля от лишних пробелов». Значение поля очистил, но не заменил содержимое на очищенное значение.

В функции getResults после вывода сообщения об ошибке можно просто написать return а не return false?

Артём Макаров

Не убирается последний пробел в поле ввода.

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

Некрасивая обработка классов удалением слов и пробелов.

Хитро:

response += (response.length ? "\n" : '') + v + " = " + inputData[v];

но запись в массив и объединение с помощью метода join() — умнее.

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

Dmytro-Shteflyuk

Чем больше щёлкаешь по полю, стираешь и вписываешь текст в поле, тем больше пробелов у поля ввода между read и edit.

Чем такой вариант:

results.push(name);
results.push('=');
results.push(inputData[name]);
results.push("\n");

лучше чем

results.push(name + '=' + inputData[name] + '\n');

?
Преимуществ не вижу. Опять же в конце будет лишний перенос строки.

Алик Кириллович

Победитель, который не только правильно выполнил задание, но также исследовал поимку событий в случае динамического добавления полей, а так же переноса введённых данных из одного поля в другое (drag&drop). Гостевой пост от победителя, в котором раскроются все секреты исследования ожидается в ближайшее время.

И последнее

Господа программисты, я задолбался конвертировать эти каракули:

Ýòà ôóíêöèÿ óñòàíàâëèâàåò îáðàáîò÷èê fncAction ñîáûòèÿ txtType äëÿ óçëà, óäîâëåòâîðÿþùåãî óñëîâèþ fncCondition.

Выучите наизусть, раз и на всегда!

UTF-8

Я очень рад, что мои читатели откликнулись на предложение и приняли участие в конкурсе, но я никак не думал, что их будет так много! Проверять одному достаточно сложно, поскольку со временем глаз замыливается и можно пропустить очевидные ошибки, а в других работах они могут броситься в глаза. Нужно было бы собрать целую комиссию для объективной оценки работ. Поэтому прошу быть снисходительными к результатам конкурса. Думаю, что мои замечания для вас будут только полезными и не вызовут агрессивного настроя: «Ууу, докопался!»

Спасибо всем за участие!

Все работы в одном архиве

]]> http://www.seleckis.lv/journal/fun/publichnaya-porka-js-guru/feed 25 Конкурс для javascript-гуру! http://www.seleckis.lv/journal/fun/konkurs-dlya-javascript-guru http://www.seleckis.lv/journal/fun/konkurs-dlya-javascript-guru#comments Sat, 17 May 2008 20:30:14 +0000 Никита http://seleckis.lv/journal/fun/konkurs-dlya-javascript-guru Объявляю конкурс среди javascript-программистов!

В качестве конкурсной задачи предлагаю выполнить зачётное задание по javascript, которое выполняли в этом году студенты web-курсов на которых я преподаю.

Итак, задание:

Дана форма. Нужно:

  1. При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit».
  2. При убирании фокуса из поля нужно:
    1. очистить содержимое поля от лишних пробелов слева и справа и от дублированных пробелов;
    2. записать содержимое поля в одноимённое свойство объекта inputData;
    3. проверить:
      1. если содержимое поля пустое, то нужно убрать класс «edit» и добавить класс «error»,
      2. иначе — вернуть первоначальный класс.
  3. При щелчке по кнопке «Show All» проверить, нет ли пустых свойств у объекта inputData.
    1. Если есть — открыть окно «alert» с сообщением: «Please fill all fields!»,
    2. иначе — записать содержимое объекта inputData в переменную и вывести в окно «alert» в таком виде:
      firstname = Vasily
      lastname = Pupkoff.

Задание достаточно простое. Проблем, думаю не будет, однако нужно соблюсти следующие условия:

  1. Кроссбраузерность.
  2. Универсальность — должно быть применимо ко всем текстовым полям ввода (type=”text”). Даже если я захочу добавить ещё несколько полей и соответствующие свойства объекта inputData, скрипт должен работать и для них.
  3. Не использовать фреймворки и библиотеки javascript.
  4. Код должен быть только в файле script.js, ни html, ни css редактировать нельзя.

Конкурс закончился. Работы проверяются.

]]> http://www.seleckis.lv/journal/fun/konkurs-dlya-javascript-guru/feed 27 Градиентный текст с помощью CSS http://www.seleckis.lv/journal/world-creative/gradientnyiy-tekst-s-pomoschyu-css http://www.seleckis.lv/journal/world-creative/gradientnyiy-tekst-s-pomoschyu-css#comments Fri, 18 Jan 2008 20:32:07 +0000 Никита http://www.seleckis.lv/journal/gradientnyiy-tekst-s-pomoschyu-css Иногда бывают дни, когда не хватает времени, иногда бывают моменты, когда не хочется ничего выдумывать. Тогда приходят спасительный копи-пэйст!

В этом посте я не буду ничего исследовать, придумывать, обучать и выбирать. Просто поделюсь с вами ссылкой на замечательный пост дизайнера Nick La. Nick получит на свой пост очередной трекбек, а расслаблюсь ещё на пару дней.

Итак, если вы хотите создать градиентный заголовок не заморациваясь с картинками в Photoshop, вам поможет очень простой CSS трюк использующий картинку в формате PNG (никаких Javascript или Flash, только чистый CSS). Всё что вам нужно — это пустой тэг <span> в заголовочном тэге, который будет накладываться на буквы с помощью свойства position:absolute.Тестировано на Firefox, Safari, Opera, и даже на Internet Explorer 6.

Пример:

ГРАДИЕНТ С ПОМОЩЬЮ CSS

Как же это работает?

А очень просто. Рисуем в фотошопе градиент, в высоту шрифта и ширину 1-го пикселя, причём базовый цвет должен быть такой же как и фон у страницы, вверху прозрачность можно варьировать по своему усмотрению, внизу — полная прозрачность. С помощью CSS эта картинка множится по горизонтали и закрывает весь текст. А наложение происходит уже знакомым вам методом, правда тэг <span> здесь должен уже писаться перед текстом, но это дело верстальщика — можно сделать и по-другому. Главное — идея:

HTML

<h1><span></span>CSS Gradient Text</h1>

CSS

h1 {
    font: bold 330%/100% "Lucida Grande";
    position: relative;
    color: #464646;
}
h1 span {
    background: url(gradient.png) repeat-x;
    position: absolute;
    display: block;
    width: 100%;
    height: 31px;
}

Ну и поправка к Internet Explorer 6.
<!--[if lt IE 7]>
<style type="text/css">
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
Автор так же предлагает маньякам валидности использовать jquery функцию для вставки тэга <span> в заголовок.

$(document).ready(function(){
    $("h1").prepend("<span></span>");
});

Смотрите что ещё можно сделать

]]> http://www.seleckis.lv/journal/world-creative/gradientnyiy-tekst-s-pomoschyu-css/feed 11 Иерархический список с помощью jQuery http://www.seleckis.lv/journal/css/ierarhicheskiy-spisok-s-pomoschyu-jquery http://www.seleckis.lv/journal/css/ierarhicheskiy-spisok-s-pomoschyu-jquery#comments Wed, 02 Jan 2008 13:12:06 +0000 Никита http://www.seleckis.lv/journal/css/ierarhicheskiy-spisok-s-pomoschyu-jquery Написал очень простой и функциональный скрипт организации иерархического списка. Но смысл заключается не только в скрипте, но и в правильной вёрстке.

HTML

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

<ul class="ns_hierarchy">
<li>Модель статусных групп (классов) Л. Уорнера
	<ul>
	<li>Высший класс
		<ul>
		<li>Верхний-высший класс, включал так называемые старые семьи.</li>
		<li>Низший-высший класс, не включал старые родовые семьи.</li>
		</ul>
	</li>
	<li>Средний класс
		<ul>
		<li>Верхний-средний класс состоял из собственников и профессионалов.</li>
		<li>Нижний-средний класс составляли низшие служащие, приказчики, клерки.</li>
		</ul>
	</li>
	<li>Низший класс
		<ul>
		<li>Верхний-низший класс включал рабочих.</li>
		<li>Нижний-низший класс &mdash; &laquo;социальное дно&raquo;.</li>
		</ul>
	</li>
	</ul>
</li>
</ul>

Получится следующее:

  • Модель статусных групп (классов) Л. Уорнера
    • Высший класс
      • Верхний-высший класс, включал так называемые старые семьи.
      • Низший-высший класс, не включал старые родовые семьи.
    • Средний класс
      • Верхний-средний класс состоял из собственников и профессионалов.
      • Нижний-средний класс составляли низшие служащие, приказчики, клерки.
    • Низший класс
      • Верхний-низший класс включал рабочих.
      • Нижний-низший класс — «социальное дно».

Как видите, код лаконичный и логичный.

Что нужно сделать?

  • Каждому элементу списка, который имеет внутренний список, с помощью JS добавим тэг <span>, который будет являться кнопкой раскрытия или закрытия списка. Эта кнопка будет текстовой, но нам бы хотелось, чтоб была возможность отображать её и графически. Поэтому для удобства, внутри поместим ещё один тэг, который будет содержать картинку, которую и наложим на текстовое отображение кнопки.
  • Скроем все внутренние списки, пропишем начальные классы.
  • Каждой кнопке напишем событие onclick, по которому будем изменять класс у элемента списка, и скрывать или показывать внутренний список

CSS

ul.ns_hierarchy li{ /* Чтобы не было сдвига элементов списка из-за кнопки раскрытия/закрытия */
	clear: both;
}
ul.ns_hierarchy, ul.ns_hierarchy ul{
	list-style-type: none; /* Убираем маркер */
	margin: 0;
	padding-left: 0px;
}
/* наводим красоту */
ul.ns_hierarchy{
	padding-left: 18px;
}
ul.ns_hierarchy ul{
	padding-left: 22px;
}
li.nsh_closed span, li.nsh_opened span{ // тэг span, на который будем жать
	float: left;
	position: relative;
	width: 9px;
	height: 9px;
	margin: 6px 6px 0 -18px;
	cursor: pointer;
	overflow: hidden;
	font: normal 0.8em/0.8em sans-serif;
}
li.nsh_closed span em, li.nsh_opened span em{ // тэг em в тэгу span, который будет содержать картинку
	position: absolute;
	width: 9px;
	height: 9px;
	top: 0;
	left: 0;
	background: url(plus-min.gif) no-repeat;
}
li.nsh_closed span em{
	background-position: bottom;
}

Подготовительные работы провели, теперь за дело

jQuery

Не забываем подключить два файла: jquery библиотеку и наш скрипт

А скрипт будет такой:

$(document).ready(function() //загрузив документ,
{
	// добавляем тэг <em>span</em> с плюсиком и тэгом <em>em</em> во все элементы списка,
	// которые содержат внутренние списки
	$("ul.ns_hierarchy li:has(ul)").prepend("<span>+<em><!----></em></span>");
	$("ul.ns_hierarchy li:has(ul)").addClass("nsh_closed"); // им же добавляем класс по-умолчанию
	$("ul.ns_hierarchy li > ul").hide(); // скрываем все внутренние списки
	// при щелчке по кнопке меняем плюс на минус, или наоборот,
	// а так же скрываем или показываем внутренние списки
	$("ul.ns_hierarchy li > span").click(function()
	{
		if( $(this).parent("li").attr("class") == "nsh_closed" )
		{
			$(this).parent("li").attr("class", "nsh_opened");
			$(this).html("&minus;<em><!----></em>");
			$(this).next("ul").show();
		}
		else if( $(this).parent("li").attr("class") == "nsh_opened" )
		{
			$(this).parent("li").attr("class", "nsh_closed");
			$(this).html("+<em><!----></em>");
			$(this).next("ul").hide();
		}
	});	
});

Вот и всё.

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

Скрипт кроссбраузерный, расширяемый, поключаемый, настраиваемый и прочее и прочее…
Пользуйтесь!

Посмотреть пример

Скачать исходник

]]> http://www.seleckis.lv/journal/css/ierarhicheskiy-spisok-s-pomoschyu-jquery/feed 19 JS-Imagemapping — исправленно. http://www.seleckis.lv/journal/javascript/js-imagemapping-ispravlenno http://www.seleckis.lv/journal/javascript/js-imagemapping-ispravlenno#comments Fri, 07 Dec 2007 10:36:50 +0000 Никита http://www.seleckis.lv/jquery/js-imagemapping-ispravlenno В предыдущем посте я написал как делается активный imagemapping на jQuery.

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

Исправляем

  1. В CSS добавляем относительное позиционирование тэгу div с id=”map”: 
    #map{ 	position: relative; }

    Теперь кружочки будут позиционироваться относительно этого дива, а не относительно body.

  2. В коде исправляем позиционирование удалив координаты карты и добавляя кружочки не в body а в #map. 
    function add_numbers(){
	$("area").each(
		function(){
			var id = $(this).attr("href").substring(1);
			var coords = $(this).attr("coords").split(",");
			var max_l = 0, min_l = 9999, max_t = 0, min_t = 9999;
			for(i=0; i<coords.length; i++){
				if(i%2 == 0){
					max_l = (max_l < Number(coords[i]))?Number(coords[i]):max_l;
					min_l = (min_l > Number(coords[i]))?Number(coords[i]):min_l;
				}
				else {
					max_t = (max_t < Number(coords[i]))?Number(coords[i]):max_t;
					min_t = (min_t > Number(coords[i]))?Number(coords[i]):min_t;
				}
			}
			var left = Math.floor((max_l+min_l)/2) - 11;
			var top = Math.floor((max_t+min_t)/2) - 11;
			var div = '<div class="overblock ' + $(this).attr("class")
			div += '" id="num_' + id + '">' + id.substring(2) + "</div>"
			$("#map").append(div)
			$("#num_" + id).css({ "left": left, "top": top });
			$("#num_" + id).hover(
				function () {
					add_highlight(id);
				},
				function () {
					remove_highlight(id);
				}
			);
		}
	);
}
  3. Можем удалить $(window).resize и функцию удаления кружочков

В итоге, избавляемся от багов в Опере, от необходимости перепроверять позиционирование при изменении размеров окна и можем смело отключить расширение Dimensions.

Качаем пример

Спасибо Игорю, что направил на путь истинный.

]]> http://www.seleckis.lv/journal/javascript/js-imagemapping-ispravlenno/feed 1 Активный imagemapping на jQuery http://www.seleckis.lv/journal/javascript/aktivnyiy-imagemapping-na-jquery http://www.seleckis.lv/journal/javascript/aktivnyiy-imagemapping-na-jquery#comments Thu, 06 Dec 2007 15:33:24 +0000 Никита http://www.seleckis.lv/journal/javascript/aktivnyiy-imagemapping-na-jquery Главная проблема стандартного способа создания карт в том, что тэг <area> не поддерживает никаких css свойств, т.е. при наведении курсором на активную область нельзя никак её подсветить. В этом случае Flash выигрывает (пример карты на flash реализован в проекте pludmales9.lv).

Я предлагаю такой вариант: подсвечиваются не сами активные области, а какие-то картинки расположенные по центру активной области. Это могут быть кружочки, квадратики, и любые другие shape’ы. Проблема заключается в том, что если мы попробуем получить координаты <area> через offsetLeft и offsetTop, то будут возвращаться координаты всей картинки.

Слегка улучшить положение я предлагаю используя библиотеку jQuery (на голом JavaScript тоже можно написать, только дольше и больше). С её помощью найду все элементы <area>, узнаю координаты каждого из атрибута coords и найду среднее значение, размещу картинку по центру каждой области и добавлю события onmouseover и onmouseout, чтобы картинка менялась.

За дело!

Итак, чтобы сделать активный imagemapping подобного плана участков средствами javascript нужно:

  1. Взять картинку на которой будут размечены активные области;
  2. Разметить области с помощью визуальных инструментов (если конечно вы не фанат ручной разметки и вам некуда девать своё время)
  3. В итоге получим код такого плана: 
    <p id="#map">
<img src="images/map.png" alt="My Image Map" usemap="#map0" />
<map name="map0">
<area href="#id1" shape="poly" class="free" coords="240,38,295,38,295,100,365,100,365,144,240,144" />
<area href="#id2" shape="poly" class="sold" coords="364,144,364,287,294,287,294,144" />
<area href="#id3" shape="poly" class="free" coords="364,287,364,400,294,400,294,287" />
 ................................................................................................
</map>

    Чтобы можно было менять кружочек в зависимости от того, продан ли участок или нет, добавляем каждому href значение #id1, #id2, #id3 и т. д., а class=”free” и class=”sold” будут указывать на то, продан ли участок или нет.

  4. Рисуем картинки такого плана:

    показывать будем верхнюю половину, а при наведении — вторую.
  5. Для этих кружочков напишем CSS: 
    .overblock{
	width: 22px; /* это зависит от размера картинки */
	height: 22px; /* высоту ставим в половину меньше */
	position: absolute; /* естественно */
	overflow: hidden; /* фикс бага в IE7, а может надо было line-height маленький поставить */
	cursor: pointer; /* в IE не меняется курсор — исправляем */
	text-align: center;
	font: normal 11px sans-serif;
}
/* эти два класса создаём специально чтобы было удобно указывать, какой участок продан а какой — нет. */
div.free{
	background: url(images/r_free.gif) no-repeat top;
}
div.sold{
	background: url(images/r_bought.gif) no-repeat top;
}
/* добавляем класс, который будет изменять кружочек при наведении на активную область */
div.selected{
	background-position: bottom;
}

Подготовительные работы закончились, теперь самое интересное

jQuery

Для получения точных координат самой карты, нам нужно подключить расширение Dimensions (версии 1.1.2). Код, естественно будем писать отдельным файлом чтоб не засорять html.

1. Сначала напишем функцию add_numbers(), которая каждому элементу <area> добавит кружочек

function add_numbers(){
	$("area").each(
		function(){
			var mappos = {};
			// получаем координаты самой карты, здесь используется функция position расширения Dimensions
			$("#map").position(mappos);
			var id = $(this).attr("href").substring(1); // получаем id активной области обрезая #
			var coords = $(this).attr("coords").split(","); // записываем координаты в массив
			// поскольку координаты в атрибуте coords перечисляются поочерёдно (X1, Y1, X2, Y2...),
			// то нам нужно разделить иксы и игреки
			var max_l = 0, min_l = 9999, max_t = 0, min_t = 9999;
			for(i=0; i<coords.length; i++){
				// делаем это в цикле, распределяя по чётному и нечётному индексу
				if(i%2 == 0){
					// нахождение максимального и минимального числа методом перебора
					max_l = (max_l < Number(coords[i]))?Number(coords[i]):max_l;
					min_l = (min_l > Number(coords[i]))?Number(coords[i]):min_l;
				}
				else {
					max_t = (max_t < Number(coords[i]))?Number(coords[i]):max_t;
					min_t = (min_t > Number(coords[i]))?Number(coords[i]):min_t;
				}
			}
			// создаём переменные отвечающие за координаты кружочка,
			// записываем туда среднее значение координат
			// добавляем координаты самой карты и отнимаем половину размера кружочка
			var left = Math.floor((max_l+min_l)/2) + mappos["left"] - 11;
			var top = Math.floor((max_t+min_t)/2) + mappos["top"] - 11;
			// помещаем кружочек в документ, добавляем класс текущей активной области (free, sold)
			// прописываем id (хотя может это и лишнее) и записываем в кружочек номер участка
			var div = '<div class="overblock ' + $(this).attr("class")
			var += '" id="num_' + id + '">' + id.substring(2) + "</div>"
			$("body").append(div)
			$("#num_" + id).css({ "left": left, "top": top }); // прописываем координаты кружочку
			// добавляем события при наведении мышки на кружочек
			$("#num_" + id).hover(
				function () {
					add_highlight(id);
				},
				function () {
					remove_highlight(id);
				}
			);
		}
	);
 
}

2. Дополнительные функции

Пишем две очень простые функции добавления подсветки кружочкам

function add_highlight(id){
	$("#num_" + id).addClass("selected");
}
function remove_highlight(id){
	$("#num_" + id).removeClass("selected");
}

Запуск документа. Добавление событий каждому <area>

$(document).ready(
	function() {
		add_numbers(); // запускаем описанную выше функцию
		// каждому area добавляем событие rollover'а в котором добавляем подсветку кружочку
		// при наведении на всю область, а не только на кружочек
		$("area").hover(
			function () {
				var id = $(this).attr("href").substring(1);
				add_highlight(id);
			},
			function () {
				var id = $(this).attr("href").substring(1);
				remove_highlight(id);
			}
		);
	}
)

Как видите, пришлось продублировать подсветку кружочка, при наведении на область и при наведении на сам кружочек.

Изменение размеров окна

Если у нас центрированная фиксированная вёрстка, то при изменении размеров окна кружочки сдвигаются. Чтобы этого не было, придётся дописать одну функцию удаляющую все кружочки, а так же написать событие resize в котором запустим функцию удаления кружочков и добавления их заново. Конечно это форменное читерство, но мне было лень переписывать получение координат <area> и добавление координат кружочкам в отдельную функцию. Поэтому я сделал так:

// функция удаления кружочков
function remove_numbers(){
	$("div[class*='overblock']").each(
		function() {
			$(this).remove();
		}
	);
}
// при изменении размеров окна удаляем и добавляем кружочки заново
$(window).resize(function(){
	remove_numbers();
	add_numbers();
});

Минусы

  • При изменении размеров окна передобавление кружочков тормозит в IE.
  • Подсвечивается не вся область, а только кружочки

Функциональность можно расширить, например добавить подсветку данных в таблице, это сделано на Jaunsapņi.

Альтернативный вариант imagemapping’а предлагает CSSPlay, сделать карту с помощью CSS, но там все координаты пишутся вручную и области могут быть только прямоугольными.

Исправляем и упрощаем в следующем посте.

]]> http://www.seleckis.lv/journal/javascript/aktivnyiy-imagemapping-na-jquery/feed 12 Всплывающая подсказка v.2 http://www.seleckis.lv/journal/javascript/vsplyvayushhaya-podskazka-v2 http://www.seleckis.lv/journal/javascript/vsplyvayushhaya-podskazka-v2#comments Mon, 17 Sep 2007 13:34:22 +0000 Никита http://www.seleckis.lv/journal/javascript/vsplyvayushhaya-podskazka-v2 Вспоминаем мой давний пост про плавающую над объектами подсказку.

Феатурес:

  • Вторая версия написана с использованием библиотеки jQuery (кстати, очень рекомендую обратить внимание, не такая громоздкая как Prototype)
  • Запуск скрипта осуществялется средставми jQuery, в сам html-файл ничего не нужно вписывать
  • В настройках скрипта можно указать в каких тэгах будет работать подсказка
  • Подсказки прописываются в атрибут rel, хотя можно использовать любой другой атрибут, например title или alt, достаточно прописать его в настройках скрипта. Проблема только в валидации кода
  • Добавлена функция простого парсинга, заменяющего знаки “[" на "<" и "]” на “>”, чтобы можно было добавлять в подсказки простые псевдо-тэги
  • Проверено в браузерах: Mozilla Firefox 2.0.0.6, Opera 9.23, Internet Explorer 5.5+, Safari 3.0.3, Swift 0.2

Ну вот вроде и всё. Смотрим работающий пример.

Качаем исходник.

]]> http://www.seleckis.lv/journal/javascript/vsplyvayushhaya-podskazka-v2/feed 21 Замена подстрок с помощью JavaScript v.2 http://www.seleckis.lv/journal/javascript/zamena-podstrok-s-pomoshhyu-javascript-v2 http://www.seleckis.lv/journal/javascript/zamena-podstrok-s-pomoshhyu-javascript-v2#comments Thu, 06 Sep 2007 10:56:41 +0000 Никита http://www.seleckis.lv/journal/javascript/zamena-podstrok-s-pomoshhyu-javascript-v2 Не string’ом единым…

Пересмотрел я скрипт написаный мною в прошлой статье и теперь с некоторыми изменениями выкладываю вновь.

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

Кроме этого к объекту поиска добавил флаг (параметр ‘flag’), который может быть равен “i” – игнорировать регистр. Это в рамках правил регулярных выражений. Логично что вы не будуте использовать параметр “i” если вам нужно поменять регистр у букв. Отмечу так же, что в поиске не используется флаг “g”. Глобальный поиск реализован с помощью цикла (см. цикл while).

Код


symbols = new Array();
symbols[1] = { 'search' : 'k', 'replace' : 'K', 'flag' : '' }
symbols[2] = { 'search' : 'br', 'replace' : 'hr', 'flag' : 'i' }
symbols[3] = { 'search' : 'block', 'replace' : 'inline', 'flag' : 'i' }


function sym_Replace()
{
for (sym in symbols)
{
expr = new Array()
expr = "([^(<.*?)]*)(" + symbols[sym]['search'] + ")([^(.*?>)]*)"
srch = new RegExp(expr, symbols[sym]['flag'])
replace = "$1" + symbols[sym]['replace'] + "$3";
block = document.getElementsByTagName("p")
for (i=0; i<block.length; i++)
{
text = block[i].innerHTML
while(srch.test(text)){
text = text.replace(srch, replace);
}
block[i].innerHTML = text
}
}
}

Запускается функция как обычно:

<body onload="sym_Replace()">
Прошу, кто может, сделайте дебаг.

Плагин для Wordpress?

Не думаю, что этот небольшой скриптик нужно оформлять как плагин для Wordpress. На самом деле, в репозитории Wordpress’a уже есть плагины выполняющие замену в тексте и постов и комментариев на уровне php.

]]> http://www.seleckis.lv/journal/javascript/zamena-podstrok-s-pomoshhyu-javascript-v2/feed 0