Путешествия и мероприятия

Петергофские фонтаны

Петергофские фонтаныКак-то раз, собравшись с друзьями в гостях у меня (поездка в Копорскую крепость), было решено — в следующий раз собраться в гостях у кого-то другого. И вот, тёплым солнечным утром вторника, сев на «9-ти часовую» электричку я отправился на встречу в Петергоф. Естественно, основной нашей целью, не считая встречи, было посещение нижнего парка фонтанов.

По приезде в Петергоф меня встретила ясная солнечная погода, как и дома — настроение от этого становилось всё лучше и лучше. Когда все собрались и были готовы идти — мы двинулись в сторону фонтанов.

И вот мы пришли. Отстояли в очереди из 5 человек, купили билеты по 100 рублей благодаря студенческим билетам и пошли в парк.

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

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

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

Надеюсь, мне удастся как-нибудь ещё раз сходить в нижний парк и посмотреть его полностью. До встречи!

По старой моей традиции — фотографии прилагаются.;-)

Истории из жизни

О планировании дел в онлайне

О планировании дел в онлайнеВсех нас постоянно сопровождают различные дела и заботы. Порой даже становится не по себе, от количества навалившегося на нас «груза». Чтобы выполнять их с наибольшей эффективностью и иметь возможность «предсказывать» своё время, мы прибегаем к планированию дел. Однако, и тут не всё так просто — иногда приходится пользоваться некоторыми хитростями, чтобы план удалось выполнить во время, а иначе какой от него толк?

В своём недавнем посте я упомянул о некоторых своих планах на ближайшее будущее. На моё удивление, я стал работать продуктивнее, и меня даже не преследовали приступы лени. Это произошло благодаря следующему:

  1. Перед этим я хорошо отдохнул (двое суток на природе на берегу моря с палаткой, костром и гречкой со сгущёнкой)
  2. Сообщил о своих планах онлайн

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

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

А какими советами, исходя из своего личного опыта, или хитростями для по увеличению … трудоспособности вы можете поделиться? Делитесь информацией по теме в комментариях к данному посту. Все описанные советы буду собраны в новом посте с указанием ссылки на блог автора (да-да, халявная ссылка).

Буду очень благодарен за ретвит, плюсадин или рассказом другам вконтакте. ;-)

Путешествия и мероприятия

Поездка в Копорскую крепость

Поездка в Копорскую крепостьНаша большая страна обладает богатейшей Историей. Куда не плюнь, практически везде можно найти какое-то историческое место. Мне, как жителю Ленинградской области, повезло, так как здешние места были исторически заселены и обладают богатой историей. Сегодня я поделюсь фотографиями  и немного расскажу о поездке в Копорскую крепость, которая находится всего-лишь в 25 километрах от моего дома.

Копо?рье или копорие — древнерусский город, а ныне село в Ломоносовском районе. В 1237 году немецкими рыцарями Ливонского ордена рядом с поселением была заложена одноимённая крепость. В те времена крепость была ещё деревянной. Спустя 4 года, великий князь Александр Невский отбил эту крепость и разрушил её. Затем, в 1280 году был выстроен каменный город, который через 2 года был разрушен местными жителями, в результате конфликта с князем. В 1297 году крепость вновь была выстроена, а затем она была несколько раз перестроена: в конце XV и в начале XVI века. После, крепость несколько раз поочерёдно переходила то к Швеции, то к Руси. Также, она принимала участие в сражениях Великой Отечественной войне.

Ныне, крепость является музеем. Входной билет стоит 50 рублей (полный), однако его никто не проверяет. Пенсионерам, естественно, предоставляется скидка, чернобыльцам вход бесплатный, насчёт студентов не знаю — при себе студенческого билета не было, а над окошком никакой информации не нашёл. Вместе с билетиком выдают маленькую бумажку с предупреждением о том, что крепость в аварийном состоянии и ходить по стенам опасно, ведь они могут обвалиться в любой момент. Если вас заметят — оштрафуют на смешные 100 рублей.

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

Больше, пожалуй, каких-либо построек в крепости нет. Разве что есть какая-то комнатка, видимо для знати, с когда-то красивой отделкой, которая достаточно хорошо сохранилась до наших дней, благодаря реставраторам. В данном случае «достаточно хорошо» — это значит вообще сохранилась, ведь 8 веков — достаточно большой срок.

Про «внутренности» крепости я рассказал — их там совсем не много. Теперь перейду к самой крепости. Крепость имеет 4 башни, внутрь которых можно залезть, а также, можно залезть и на них. Это хорошо тем, что крепость находится на возвышенности, и с башен открывается красивейшая живописная панорама с видом на Финский Залив. Кстати, в 13 веке крепость находилась на берегу залива, но со временем залив отступил и теперь до него от крепости напрямик 13 км. По этой причине огромная губа Финского Залива получила название «Копорская Губа». Одна из башен находится в сильно разрушенном состоянии, поэтому проход к ней перегорождён изгородью, но любопытной молодёжи это не помеха — его можно обойти. Однако, именно с этой башни открывается тот самый живописный вид, но это не беда. Рядом с башней можно подойти к краю стены (главное не смотрите вниз! Там метров 30 до земли) и увидеть эту же панораму.

Полазив по всем башням, выйдите из крепости и обязательно пройдите, посмотрите на неё снаружи. Массивность стен (толщиной 5 метров), их полуразрушенный ветром вид и высота очень впечатляют!

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

Истории из жизни

Переход на новый уровень

Переход на новый уровень Здравствуйте, уважаемые читатели. Давно не виделись ;-). Как же я соскучился по своему блогу — 4 месяца я ничего не писал. Теперь столько радости — сидеть, клацать по клавишам и видеть эту знакомую страницу редактирования поста. За эти месяцы прошло многое, на самое главное — я успешно закончил первый курс, который дался мне не легко, теперь у меня есть целых 2 месяца свободного времени для реализации множества планов и идей, которые я задумал во время второго семестра.

Раз начал про учёбу, то немного всё-таки расскажу о ней. Как я уже сказал, далась она мне не совсем гладко. Сессия была очень напряжённая, что я даже не написал традиционный пост о дне рождения блога (5 июня блогу исполнилось аж 3 года!) и конечно же о своём дне рождени (21 июня мне исполнилось 19). Во время учёбы были проблемы с некоторыми предметами и преподавателями, сильно боялся остаться с тремя долгами, которые потом как по маслу с относительной лёгкостью закрыл к концу сессии. Причём, по одному из предметов, где была самая ужасная ситуация и я боялся, что вместе с экзаменом не наберу баллов даже на тройку, удалось прыгнуть выше головы, сдать экзамен на максимум баллов и в результате получить оценку «хорошо» — для меня это было хорошим подарком. Больше до такого доводить не буду ;-) — теперь опыт есть. Обойтись без троек не получилось, к тому же, во втором семестре их количество увеличилось в два раза (с 1 до 2 :mrgreen:), но это со всеми бывает. В следующем году попробую выбраться без них, а пока буду отдыхать и ждать официального перевода на второй курс.

В одной моей записи, я высказывал своё слегка негативное мнение о Питере, а некоторые комментаторы утверждали, что Питер чудесный город и моё мнение о нём поменяется через некоторое время. Да, они были правы :roll:, сегодня я уже не ощущаю никаких неудобств связанных с Питером, да и настрой у меня там более рабочий, чем дома.

Всё, об учёбе вроде всё рассказал что хотел, хотя можно и больше, но вряд ли уже это будет интересно читать. Теперь кратко расскажу о своих планах на лето. Более подробно, скорее всего, я расскажу о них в следующем посте.

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

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

HTML и CSS

Расположение непрозрачного элемента внутри прозрачного (css)

Расположение непрозрачного элемента внутри прозрачного (css) Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.

Подробнее →

HTML и CSS

Создание тянущейся шапки с логотипом (для начинающих)

Создание “резиновой” шапки с логотипом (для начинающих)

Доброго времени суток, уважаемые читатели. Вчера вечером, мне написал в аську один человек, который попросил помочь ему с шапкой сайта. Перед ним стояла задача: сделать шапку с тянущимся фоном (резиновую) и чтобы посередине был размещён какой-то логотип. Конечно же, я не мог отказать человеку в помощи и поэтому пишу данный пост с примерами реализации такой шапки.

Подробнее →

HTML и CSS

Прозрачность средствами css (для начинающих)

Прозрачность средствами css (для начинающих)

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

Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).

С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.

filter:alpha(opacity=100);  /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */
-moz-opacity:1;  /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */
opacity: 1; /* Аналогично предыдущей строки */

Если честно, то достаточно только третей строки, но, к сожалению, не все браузеры поддерживают стандарты, поэтому для старых браузеров мы добавляем первые две строки. Первая для Internet Explorer, а вторая для старых версий Moziila, третья поддерживается всеми современными браузерами. Как видите, всё очень просто, но здесь есть одна хитрость – прозрачность передаётся «по наследству» от родительского контейнера, ко всем контейнерам внутри него (назовём их, дочерними).

«Унаследование» прозрачности вы можете наблюдать на картинке в начале статьи. К тому же, «унаследованную» прозрачность нельзя убрать, даже если установить для отдельного элемента 100% непрозрачность. Чтобы обмануть браузер, в прямом смысле, и сделать не прозрачный элемент внутри прозрачного, придётся создать 2 блока, один сделать полупрозрачным, а другой оставить «как есть», а затем с помощью CSS «заставить» браузер отобразить один поверх другого. Этот способ не слишком удобный, но есть ещё один – о нём я расскажу в следующем посте.

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

_________________________
Как хорошо, когда телефон это не только средство для общения — можно скачать бесплатные Java игры и поиграть в какие-нибудь игрушки, если застрял в пробке в общественном транспорте.

HTML и CSS

Использование тэга span для форматирования текста

Использование тэга span для форматирования текста Что же это за тэг такой, <span>? Данный тэг необходим для форматирования элементов. Он не является блочным элементом и позволяет, например, изменить стиль для одного слова. Его можно использовать внутри блочных элементов (<p>,<table>,<div>). Span поддерживается всеми известными браузерами (ну ещё бы он не поддерживался каким-либо браузером — стыд и позор :lol:)

Приступим к самому форматированию текста. В html это требует лишь пару символов кода, а всё остальное – чистый css. Хотя, можно прописать стили в html-коде, но это не хорошо, т.к. «нагружает» страницу лишним кодом, поэтому стили надо выносить в отдельный файл. Поскольку <span> это тэг для форматирования, то большая часть статьи будет о изучении и синтаксисе CSS.

Итак, дан текст: «Шел Грека через реку, видит Грека в реке рак, сунул грека руку в реку
рак его за руку цап…». Наши задачи:

  1. Придать словам «река» и «рак» синий цвет шрифта.
  2. Выделить жирным имя героя, без использования тэгов strong или b
  3. Изменить фон  и цвет глаголов, при наведении на них курсора мыши.

Задачи трудные, но это только на первый взгляд. На самом деле всё очень просто. Для начала «окружим» эти слова тэгом <span>. Должно получиться что-то, типа <span>рак</span>. Затем, необходимо присвоить класс к каждому тэгу span. У нас имеется 3 задачи, поэтому нам надо будет ко всем тэгам span присвоить один из трёх соответствующих классов, которые мы назовём, к примеру, “color” (1 задание), ”hero” (2 задание) и ”glagol” (3 задание). Пример присвоения классов к тэгу span — <span class=”color”>рак</span>. Всё, с html покончено, далее будет только CSS.

Создаём отдельный файл (назовите его style.css) и сохраняем его в том же каталоге, что и html файлы с нашим текстом. Подключаем файл стилей к нашей странице, сохраняем сделанные на  html странице изменения и можете смело её закрывать, теперь нам понадобиться только файл style.css. Для начала, ознакомлю вас с синтаксисом CSS. Он очень прост, задаётся селектор (название класса, айди или элемента), а затем идут различные свойства и их параметры. Сложно? Не переживайте, ниже будет пример кода, где вам всё станет понятно.

Итак, ранее мы создали 3 класса для каждой задачи. Теперь будем создавать стили для каждого их классов. Ниже я приведу отрывок кода с комментариями, где вы без труда разберётесь с синтаксисом CSS и не только. Небольшая шпаргалка: поскольку селекторы бывают разных типов, то они могут иметь одинаковые имена (Например, класс «color» и айди «color»), поэтому нам надо «сообщить» браузеру какой именно элемент нам нужен – для этого перед названием элемента ставятся специальные символы (без пробелов): «#» — перед айди, «.» — перед классом и ничего не ставиться перед названием тэга (например, span {} – этот стиль будет применяться для всех тэгов span, встречающихся в документе).

.color { /*Название селектора. В данном случае он называется «color.*/

Color:  #0000ff; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/

}

.hero {

Font-weight: bold; /* Делаем текст жирным.*/

}

.glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/

Background: #eeeeee; /*Задаём фоновый цвет.*/

Color:  #666666;

}

Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.

__________________

Украшать веб-страницы мы научились, теперь пора украшать свою девушку . Тут вместо CSS вам придётся использовать свадебные платья и прочие украшения, например ювелирные.

JavaScript и jQuery

Меню с эффектом наложения на 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>

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

Стили

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

Начнём со слоя наложения, который будет затемнять остальную часть страницы.

.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

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

Главное меню будет иметь следующий стиль:

ul.oe_menu{	
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:560px;
	float:left;
	clear:both;
}

«Прижимаем» меню к левому краю, оставляя отступ 40 пикселей слева и 30 сверху. Теперь рассмотрим следующий очень важный момент — позиционирование элементов списка.

ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}

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

Заголовок главного меню мы превращаем из простого текста в контейнер с текстом. Он будет иметь следующий стиль:

ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}

В нашем JavaScript коде мы добавим класс «hovered» на элементы главного меню, благодаря чему, при наведении курсора мыши на элемент, фон элемента будет сменяться на белый:

.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}

Сделаем под-меню невидимыми, так как они показываются только при наведении курсора мыши на тот или иной элемент главного меню:

ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}

Затем зададим стиль для ссылок внутри списков под-меню.

ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}

Так как мы будем показывать одновременно только одну подменю, то сделаем так, чтобы оно занимало всё пространство по длине главного меню.

ul.oe_menu div ul.oe_full{
	width:100%;
}

Если же внутри под-меню у нас не один список, то мы задаём им ширину в 150 пикселей, что позволяет нам разместить до трёх списков в один ряд.

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}

И наконец, выделим заголовок под меню особым стилем:

li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

Работу со стилями мы закончили. Теперь перейдём к созданию эффектов с помощью javascript фреймворка jQuery.

Javascript

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

Начнём с того, что зарезервируем некоторые элементы.

var $oe_menu		= $('#oe_menu');
var $oe_menu_items	= $oe_menu.children('li');
var $oe_overlay		= $('#oe_overlay');

Когда мы наводим курсор мыши на один из элементов главного меню, то к соответствующему элементу присваиваются классы «selected» и «slided». В этот момент один соответствующий слой под-меню выезжает, а остальные остаются невидимыми, для этого мы даём очень большое значение свойству z-index данного слоя. Когда мы убираем курсор мыши с элемента главного меню, то класс «selected» снимается с данного элемента.

$oe_menu_items.bind('mouseenter',function(){
	var $this = $(this);
	$this.addClass('slided selected');
	$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
		$oe_menu_items.not('.slided').children('div').hide();
		$this.removeClass('slided');
	});
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('selected').children('div').css('z-index','1');
});

Класс «selected» необходим для оформления, а вспомогательный, в данном случае, класс «slided» лишь для идентификации элемента, находящегося в данный момент времени в раскрытом состоянии.

После наведения курсора мыши на меню, мы устанавливаем прозрачность слоя наложения равной 60% и добавляем класс «hovered» на контейнер для меню, что устанавливает на всё меню в целом белый фон.

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
	$this.addClass('hovered');
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
})

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

Демонстрация работы | Скачать.

Данная статья является моим переводом с обработкой статьи с сайта tympanus.net.
______________________
Если вы любите посидеть вконтакте, то наверняка вы уже слышали фразы в свою сторону типа: «Опять ни черта не делал — весь день вконтакте онлайн!». Тогда вам в помощь статусы про обман — специальный скрипт для Opera 9, позволяющий сидеть вконтакте offline.

PHP

Постраничный вывод записей из БД

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

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

Предположим: нам надо вывести из таблицы «news» все записи, разбив их на страницы по 20 новостей на каждой, если это потребуется.

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

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

$link=mysql_connect("localhost","user","password"); // Подключаемся к серверу БД расположенном по адресу localhost используя логин user и пароль password.
mysql_select_db("dbname"); // Подключаемся к базе данных с именем "dbname"

Для начала, нам необходимо проверить, запросил ли пользователь какую-либо определённую страницу или нет. Номер запрашиваемой страницы будет передаваться в переменной «page», передаваемой методом get.

if(isset($_GET['page'])) { $page=$_GET['page']; } else { $page="0"; }

Затем, мы делаем запрос в базу данных, где просим вернуть 20 записей, начиная с определённой записи. Этой самой определённой записью, будет запись, которая является первой записью на странице, и её номер будет определяться как: номер страницы минус единица и умноженный на количество записей на страницу. Например: первая запись на третьей странице будет иметь номер 2*20=40, при условии вывода по 20 записей на страницу.

$query=mysql_query("SELECT * FROM news ORDER BY id DESC LIMIT ".($page*20).",20");

Далее используя цикл while() выводим на экран необходимую нам информацию в необходимом виде. Эту часть кода я опишу кратко и очень условно.

while($news=mysql_fetch_array($query)) {
        echo "<strong>".$news['title']."</strong><p>".$news['messaage']."</p>";
}

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

$q=mysql_query("SELECT * FROM news");

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

$numpages=ceil(mysql_num_rows($q)/20);

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

if($numpages > 1) {
	if($page!=0) { echo "<a href=\"/index.php?page=0\">Первая</a> "; }
	for($i=0;$i<$numpages;$i++) {
		if($page != $i) { echo "<a href=\"/index.php?page=".$i."\">".($i+1)."</a> "; }
		else { echo "<strong><a href=\"/index.php?page=".$i."\">".($i+1)."</a></strong> "; }
	}
	if($page!=($numpages-1)) { echo "<a href=\"/index.php?page=".($numpages-1)."\">Последняя</a>"; }
}
	echo "<a href=\"/index.php?gotopage=$numpagess\">Последняя</a>";
}

Во второй и седьмой строках кода, представленного выше, мы выводим постоянные ссылки на первую и последнюю страницы соответственно. В третьей строке мы задаём цикл от единицы до n-1, где n — количество страниц. В теле данного цикла (4-5 строчки) мы выводим ссылку на каждую страницу, с указанием номера данной страницы, предварительно проверив, является ли ссылка, ссылкой на текущую страницу. Если условие выполняется, то ссылка выделяется жирным шрифтом. Проще говоря, мы выделяем жирным ссылку на ту страницу, на которой пользователь находиться в данный момент.

Добавлено: Теперь нам остаётся лишь закрыть соединение с базой данных и очистить память, от теперь уже ненужной информации. В первой строке представленного ниже кода, мы очищаем память от массива данных, содержащегося в переменной $query — это все наши записи из базы данных. Во второй строке, мы закрываем соединение с базой данных.

mysql_free_result($query);
mysql_close($link);

Вот и всё, как видите, ни чего сложного здесь нет. Требуется лишь немного смекалки и небольших знаний php.

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