Как вставить яндекс карты на сайт

Как вставить яндекс карты на сайт Доброго времени суток! В прошлой статье я поведал о том, как генерировать YMapsML файл с гео-данными для яндекс карт. Однако, не все имеют опыт работы с яндекс картами, поэтому сегодняшний пост я посвящу тому, как вставить карты на свой сайт, то есть, для тех кто никогда не работал с API ЯК.

Читать полностью

Меню с эффектом наложения на jQuery

Меню с эффектом наложения на jQuery В этом уроке мы создадим простое меню, которое будет выделяться из всей страницы, при наведении на него курсора мыши, затемняя всю остальную часть страниц, при этом само меню будет оставаться незатемнённым, а под-меню будет будет «выезжать» из-под него. «Этот эффект мы воссоздадим используя jQuery.

Разметка

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

<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
		<li>
			<a href="">Collections</a>
			<div>
				<ul>
					<li class="oe_heading">
						Summer 2011
					</li>
					<li><a href="#">Milano</a></li>
					...
				</ul>
				<ul>
					...
				</ul>
				<ul>
					...
				</ul>
			</div>
		</li>
		<li>
			<a href="">Projects</a>
			<div style="left:-111px;">
				...
			</div>
		</li>
		<li>
			<a href="">Fragrances</a>
			<div style="left:-223px;">
				<ul class="oe_full">
					<li class="oe_heading">
						Fashion Fragrances
					</li>
					<li><a href="#">De?lure</a></li>
					<li><a href="#">Violet Woman</a></li>
					<li><a href="#">Deep Blue for Men</a></li>
					<li><a href="#">New York, New York</a></li>
					<li><a href="#">Illusion</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Events</a>
			<div style="left:-335px;">
				...
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				...
			</div>
		</li>
	</ul>
</div>

Читать полностью

TinyEditor — визуальный редактор на JavaScript

TinyEditor - визуальный редактор на JavaScript TinyEditor — это простой и очень лёгкий (около 8 кб) визуальный редактор на JavaScript. Он очень легко настраивается и внедряется в любой сайт посредством CSS и множеством других параметров. TinyEditor способен выполнять основные задачи по форматированию текста, но при этом, сохранять форматированный текст как можно более чистым (со стороны html-разметки). Значки форматирования объединены в один графический файл, что сокращает количество http-запросов к серверу до минимума.

Для инициализации скрипта (подготовке к работе) пропишите следующий код:

new TINY.editor.edit('editor',{
	id:'input', // (обязательно) ID текстового поля
	width:584, // (не обязательно) ширина редактора
	height:175, // (не обязательно) высота редактора
	cssclass:'te', // (не обязательно) CSS класс редактора
	controlclass:'tecontrol', // (не обязательно) CSS класс для иконок
	rowclass:'teheader', // (не обязательно) CSS класс для рядов иконок
	dividerclass:'tedivider', // (не обязательно) CSS класс для разделителей иконок
	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (обязательно) Опции форматирования на выбор (здесь вы можете убрать не нужные вам элементы форматирования). Символ '|' является разделителем, а 'n' переносом строки
	footer:true, // (не обязательно) показывать ли нижнюю часть редактора?
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (не обязательно) Доступные шрифты для форматирования
	xhtml:true, // (не обязательно) Форматирование происходит используя XHTML или HTML?
	cssfile:'style.css', // (не обязательно) attach an external CSS file to the editor
	content:'starting content', // (не обязательно) set the starting content else it will default to the textarea content
	css:'body{background-color:#ccc}', // (не обязательно) Применить стиль к редактору
	bodyid:'editor', // (не обязательно) Применить ID к &quot;телу&quot; редактора
	footerclass:'tefooter', // (не обязательно) CSS класс нижней части редактора
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (не обязательно) Переключение вариантов просмотра
	resize:{cssclass:'resize'} // (не обязательно) Отображать настройки изменения размера редактора
});

Читать полностью

Шпаргалка по Jquery

Шпаргалка по Jquery Очень полезная шпаргалка по jQuery для дизайнеров и кодеров на 6 страницах. Она содержит полное описание jQuery API с подробным описанием, а некоторые элементы содержат примеры кода. Простое оформление шпаргалки позволяет быстро найти всё, что вам необходимо. Шпаргалки представлены ниже, все картинки кликабельны.

Читать полностью