Тагове с jQuery

17
авг 10

FryPlayer – HTML5 видеоплейър!

категория: Общи, Проекти, Ревюта няма коментари

Слабата ми активност в блога напоследък има своето обяснение и то се крие в заглавието. В последните няколко месеца, по-голямата част от свободното ми време бе заета или от писане на уроци за FridayCode, или от работа по FryPlayer – HTML5 видеоплейърът, който разработваме. Е, версия 0.1 е факт и можем леко да поотдъхнем, така че ще имам малко повече време и за блога.

Да се върнем на темата обаче и тя е FryPlayer. С няколко думи ще се опитам да ви обясня предимствата, с които разполага плейърът в момента. На първо място е бързината – още във версия 0.1 дръпнахме пред доста конкуренти в това отношение, защото наблегнахме най-много на него. Честно казано за един потребител е най-важно плейърът да не товари сайта му и същевременно да е лесен за имплементация. Е, FryPlayer е точно такъв. „Инсталира“ се за по-малко от минута и е готов за работа. Постарали сме се да направим лесен и процеса за добавяне на скин, но въпреки това с ваша помощ можем да го усъвършенстваме. Другите опции са цял екран с рисайз, бързи клавиши, буфериране и т.н., но ако ви е интересно и ви се чете повече по-добре вижте този пост или цъкнете „към цялата публикация“, където ще намерите съдържанието от въпросния пост. Сега се насладете отново на шеметния трейлър на Sucker Punch, но този път благодарение на FryPlayer.

[ Официален сайт ] [ Свали FryPlayer ]

към цялата публикация »

тагове: , , , , , , ,
8
юли 10

FridayCode ъпдейт!

категория: CSS, xHTML, Общи 1 коментар

Отдавна не съм писал нищо за проектчето, което от няколко месеца развиваме и след като скоро пуснахме няколко нововъведения, реших, че сега е подходящия момент да го направя. Всъщност, ако се чудите за кой проект говоря – ами за FridayCode – сайт с уроци за HTML, CSS и JavaScript. От около седмица сме на нов хостинг, ъпдейтнахме до WordPress 3.0 и пуснахме форум! Разбира се, основния фокус пада на последното. В момента форумът, както се предполага не е особено популярен, но се надяваме с помощ на читателите нещата да се променят. Ако ви кефят материалите и решите да се приобщите към обществото – заповядайте!

FridayCode Форум!

Напоследък гледаме да се придържаме към тенденциите и позабравихме jQuery, но за сметка на това се концентрирахме върху HTML5 и CSS3. Може да прочетете как да си направите анимирани табове без грам картинка и само и единствено с CSS3… или пък да понаучите за основите на HTML5. Преди дни пък се появи и статията Всичко за HTML5 video или как да създадем видеоплейър!, в която ще научите доста за една от големите новости в HTML5 – video елемента. Съвсем скоро ще пуснем още няколко супер актуални материала, отново посветени на новите стандарти.

Ще се опитаме да продължим по план с развитието на проекта и се надяваме да го направим с ваша помощ!

тагове: , , , , , , , , , ,
27
мар 10

FridayCode – седмичен обзор #1

категория: CSS, xHTML, Общи няма коментари

FridaycodeВчера измина седмица от пускането на FridayCode.net – един проект, целящ да спомогне за развитието на кодинг обществото в България. Като цяло екипът ни получи доста добри отзиви, както под статиите в сайта, така и на мейл. Благодарение на Facebook и Twitter много хора разбраха за нас, а отделно бързо сформирахме и партньорство с DevStorming.com, което спомогна за разпространението на материалите. Тези дни ще се появим в още една българска мрежа, където се надяваме да намерим доста съмишленици.

В момента на сайта може да намерите няколко дребни, но много полезни съвета за xHTML/CSS. Също така сме написали няколко урока за jQuery – как да си направите лесно падащо меню с jQuery,  табове с jQuery и страхотния carousel. Освен това може да прочетете и част първа на полезните съвети с jQuery.

На PHP фронта имаме един представител, който набира скорост и чуваме само добри мнения за него. Ако се чудите как да парснете съдържание то сайт – ето го лесното решение.

През идната седмица очаквайте още полезни статии, които са вдъхновени от ежедневните проблеми, с които се сблъскваме на работа. Ако искате да се свържете с нас не се стеснявайте и използвайте контактите.

тагове: , , , , , , , , ,
19
мар 10

FridayCode – we enjoy code. Do you?

категория: Общи, Проекти няма коментари

Може би „редовните“ читатели са усетили, че този месец съм малко пасивен откъм писане, но повярвайте не е защото няма за какво да пиша, а просто защото заедно с още двама колеги (Павел Иванов и Мариан Игнев) работихме над FridayCode – един проект, който цели малко или много да спомогне за развитието на кодинг обществото в България.

И тъй като в нашата мила родина всеки втори човек е дизайнер и с него не може да се спори нивото на писане е наистина ниско. Няма спор, че има много талантливи дизайнери, но впечатлението от красивия дизайн се разваля когато натиснем магическата комбинация Ctrl+U. Положението е такова поради простата причина че на 90% от потреблението не им пука как е написан един сайт, стига той да изглежда добре и да е функционален. А щом масата от хора не ги интерсува логично е и този, който плаща да не се вкарва в излишни харчове, наемайки по-качествена работна ръка.

FridayCode

Другата причина да поставим началото на FridayCode е и факта, че някак няма място, в което да се заровиш, четейки за XHTML/CSS. Да, пълно е с форуми, но ние не искаме да бъдем подраздел, а нещо много повече. Ето защо сме замислили лека-полека да превърнем сайта в място, което да четете с удоволствие. Място пълно с наистина полезна и ползваема информация, практически съвети, придружени с добре обяснени примери и решения за ежедневни проблеми. Замислили сме и доста интересни гъзарийки, но ще ги пускаме под формата на изненади с течение на времето.

Като за начало сайтът тръгва с 10-ина статии взети от нашите блогове. Естествено ще се опитваме да попълваме базата с нови и нови неща всеки ден, доколкото ни позволява наличният ресурс, тъй като и ние сме работещи хора. Искам да отбележа и че FridayCode ще окаже влияние върху моя блог, като поеме цялата „професионална“ тежест. Тоест от този момент нататък моят блог ще се превърне в едно развлекателно място! Все пак в главата ми се върти идеята за седмични обзори, които мога да публикувам…

И така – стартът е труден, но ние сме амбицирани докрай. Нуждаем се от подкрепа и се надявам всички, на които им хареса идеята, да помогнат по един или друг начин. Контактите са „отворени“ за всеки!

тагове: , , , , , , , , ,
22
фев 10

Simple Drop Down Menu w/ CSS & jQuery

категория: CSS, xHTML, Дизайн, Уроци 3 коментара

Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.

Менюто е тествано и работи на всички по-популярни браузъри – Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко – не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!

View DemoDownload

Стъпка 1: HTML

Той представлява един съвсем прост и елементарен списък с няколко поднива, които символизират подменютата. За всеки случай съм копирал и целия работен документ за тези, които не знаят къде да го поставят.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Dropdown Menu w/ CSS & jQuery by RIP</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/simple-dropdown-menu.js"></script>
</head>
<body>

	<div id="menu">
		<div id="menu_r">
			<div id="menu_l">
				<ul class="main">
					<li><a id="home" href="#">Начало</a></li>
					<li>
						<a href="#">Новини</a>
						<ul class="sub">
							<li><a href="#">Свят</a></li>
							<li>
								<a href="#">България</a>
								<ul class="sub">
									<li><a href="#">София</a></li>
									<li><a href="#">Пловдив</a></li>
									<li><a href="#">Варна</a></li>
									<li>
										<a href="#">Бургас</a>
										<ul class="sub">
											<li><a href="#">Риби</a></li>
											<li><a href="#">Жълъди</a></li>
											<li><a href="#">Кифли</a></li>
											<li><a href="#">Патладжани</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Наука</a>
								<ul class="sub">
									<li><a href="#">Космос</a></li>
									<li><a href="#">Клониране</a></li>
								</ul>
							</li>
							<li><a href="#">Спорт</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Статии</a>
						<ul class="sub">
							<li><a href="#">Кратки</a></li>
							<li><a href="#">Дълги</a></li>
						</ul>
					</li>
					<li><a href="#">Каталог</a></li>
					<li><a href="#">Архив</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Блог</a></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>

На какво трябва да се обърне внимание тук? Като за начало погледнете си пътищата към javascript, image и css файловете. Ако ги местите и се чудите защо не работят, вероятно това е причината.

Стъпка 2: CSS

Тъй като целта ни е да направим едно безкрайно меню, CSS-а е малко по-дълъг от обикновено. Разбира се ако му накичите още някоя глезотийка редовете ще скочат, но това в крайна сметка няма значение… просто не се заблуждавайте, че е нещо много сложно. За урока съм го стилизирал по-семпличко и без много изображения, за да схванете логиката, а всеки, който иска може да си добави картинки и в подменютата. Между другото за по-голяма оптимизация съм направил sprite от картинките на менюто. Sprite с две думи, освен популярната напитка, представлява една огромна картинка (например хвърлете едно око на YouTube-ската тук), която се зарежда веднъж и впоследствие с помощта на CSS и background-position, ние позиционираме необходимата ни част на необходимото място. Прави се предимно с цел оптимизация, но много трябва да се внимава, защото е малко пипкава работа, особено под по-старите браузъри.

body {
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	line-height: 1.3em;
	background: #FFF;
	color: #666;
}

ul { margin: 0; padding: 0; list-style: none; }

#menu {
	background: url(../img/menu.png) repeat-x left -72px;
	width: 800px;
	margin: 100px auto;
}

#menu_r {
	background: url(../img/menu.png) no-repeat right -36px;
}

#menu_l {
	background: url(../img/menu.png) no-repeat left 0;
	height: 36px;
}

ul.main li {
	position: relative;
	float: left;
	background: url(../img/menu_li.png) no-repeat right top;
	padding: 0 3px 0 0;
}

ul.main li a, ul.main li a:link, ul.main li a:visited {
	float: left;
	padding: 0 25px;
	color: #666;
	font-size: 12px;
	height: 36px;
	line-height: 36px;
	font-weight: 700;
	outline: none;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
}

ul.main li a:hover {
	color: #00b2fc;
	background: url(../img/menu.png) repeat-x left -108px;
}

ul.main li a span.arrow {
	color: #999;
}

ul.main li a#home:hover {
	background: url(../img/home_hover.png) no-repeat left top;
}

ul.main li ul.sub {
	display: none;
	position: absolute;
	top: 36px;
	left: -2px;
	width: 200px;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}

ul.main li ul.sub li {
	position: relative;
	padding: 0;
	background: none;
}

ul.main li ul.sub li a, ul.main li ul.sub li a:link, ul.main li ul.sub li a:visited  {
	float: none;
	display: block;
	width: 180px;
	border-bottom: 1px solid #d9d9d9;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 11px;
	background: #f8f8f8;
}

ul.main li ul.sub li a:hover {
	color: #666;
	background: #efefef;
}

ul.main li ul.sub li ul.sub {
	position: absolute;
	top: -1px;
	left: 200px;
	border-top: 1px solid #d9d9d9;
}

Тук е трудно, а и безсмислено да се коментира кой ред какво прави, защото нещата са навързани. За това пак – ако има въпроси и предложения, насреща съм.

Стъпка 3: jQuery

Тъй като jQuery е една от най-добрите Javascript библиотеки, аз съм я използвал с актуалната й версия 1.4.2. Приложил съм всички файлове в архива за сваляне, но ако имате желание да го свалите отделно, ето линк за компресираната версия или за отворения файл, по който може да човъркате.

Тук JQ се ползва много малко и буквално, както виждате са 10 реда, но създава приятен ефект.

$(document).ready(function ()
	{
		$('.main li:has(ul) > a').addClass('more');
		$('a.more').append('<span class="arrow">&nbsp;&nbsp;&raquo;</span>');
		$('.main li').hover(function () {
			$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
		}, function () {
			$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
		});
	});

Идеята тук е да търсим всяко LI, което е родителски елемент на A и съдържа в себе си UL. Така ако е изпълнено условието на линка се добавя клас „more“, на колко клас на следващия ред добавяме стрелкички до името на бутона. Това го правим с цел да се разбере, че този бутон съдържа в себе си информация и подтиква юзъра да провери каква е тя.

След това създаваме плавния ефект на Slide Up & Down. Търсим всеки първи списък и му пускаме анимация, която го слайдва надолу и му добавя клас „active_list“. След това търсим списък с вече добавения клас „active_list“ и поставяме условие, ако мишока не е върху него да се изпълни анимацията за затваряне или иначе казано прибиране нагоре. След това просто изтриваме класа „active_list“ и всичко е готово.

Накратко е това. В javascript файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.

Плюсовете на менюто са, че може лесно да се интегрира, а с готовата структура бързо се преправя, така, че да пасне за нуждите на всеки.

тагове: , , , , , ,