dev stuff

Много ми допадна тази презентация на възможностите на HTML5, мисля да започна с експериментите:
http://apirocks.com/html5/html5.html

за един проект ми трябваше бързо да направя галерия от снимки. собственикът на сайта много беше харесал флаш-галерията, която видял еди-къде-си. до мен поръчката достигаше през посредник, което правеше нещата доста сложни. защо ли? ами защото не знам флаш. та обясних на посредника (което не беше особено лесно), че няма как да взема готова флаш галерия и „само малко тука промени 2-3 неща“, след като никога не съм виждал сорс на флаш-приложение. все пак се помири с идеята, че няма как да стане, а и не искаше да търси човек с флаш познания (сигурно защото проектът беше „за вчера“, а хората вземат доста пари за експресни поръчки). long story short (too late for that?), започнах да пиша галерията на html/jquery. първо порових в примерите (явно не достатъчно, понеже накрая дизайнерката ми каза, че имало готово решение) и като не намерих нищо, запретнах виртуални ръкави.

целта на задачата беше да има една централна снимка (текущата) и отдолу в една лента да има малки версии (thumbnails) на всички останали снимки в дадената галерия/категория, като се виждат само 3-4 от тях, а останалите се появяват, като се задържи мишката над лентата – ако я задържиш над лявата част, тръгват в едната посока, над дясната – в другата. (слагам screenshot, ако някой не ме е разбрал)

като всеки проект, който ползва jquery, първата работа е да се добави библиотеката.

след това зареждам адресите на картинките, които ще показвам на екрана в масив $images, който изглежда примерно така:

във финалната версия този блок съм го заменил с обръщение към базата-данни, от където реално „зареждам“ картинките. след тези предварителни приготовления, можем да изведем и самите картинки:

за улеснение за основна картинка ползвам първата от масива. Continue reading »

често ми се налага да пиша листинги в админ-панела на даден сайт. мразя таблици колкото всеки друг, но понякога ги ползвам за по-лесно. в повечето случаи когато не ползвам таблици, ползвам плаващи div-ове с фиксирана ширина, но това не е особено добра идея — в случай, че текстът в даден div е по-дълъг от мястото, което съм му отделил или пък броят на „колоните“ стане по-голям, всичко се омазва. добрите стари таблици имат и своите предимства.

наскоро обаче попаднах на нещо за CSS2, което не знаех досега (те не са малко тези неща – аз все пак съм програмист, не дизайнер), а именно – че с помощта на стилове може да се правят таблици. изпробвах го и то взе, че проработи. ето как

първо слагате нещо от сорта в css файла:

.t { display: table; }
.t-row { display: table-row; }
.t-head { display: table-row; font-weight: bold; }
.t-cell { display: table-cell; border: 1px solid gray; padding: 2px; }

след това използвате съответните класове в html-а:

<div class=’t'>
<div class=’t-head’>
<div class=’t-cell’>номер</div><div class=’t-cell’>име</div><div class=’t-cell’>адрес</div>
</div>
<div class=’t-row’>
<div class=’t-cell’>1</div><div class=’t-cell’>Димитър Чакъров</div><div class=’t-cell’>България, Бургас</div>
</div>
<div class=’t-row’>
<div class=’t-cell’>2</div><div class=’t-cell’>Пенчо Иванов</div><div class=’t-cell’>Германия, Мюнхен</div>
</div>
</div>

и получавате нещо такова:

а вие знаете ли някоя тънкост? а таблици ползвате ли?