Archive for the 'prototype' Category

Internet Explorer - Lightbox - A művelet megszakadt

A Micro$oftot sem a böngészője miatt szeretjük (de Surface az van), hanem azért, mert kihívásokat állít elénk, hogy kell egy szakosan megírt javascript forrást lebutítani, hogy azt az IE is megértse. Történet a következő:
Az “új” Lightbox 2.04 ( a szinte teljesen újraírt forrásával) már nem a

function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);

megoldást használja, hanem a szebb

document.observe('dom:loaded', function () { new Lightbox(); });

Tapasztalatunk szerint:
Ez így magában működik, de ha például saját javascript kódokat is akarunk betöltéskor futtatni akkor két lehetőség van:

document.observe('dom:loaded', function () {
//sajátkód
});
//vagy
Event.observe(window, 'load', function(){
//sajátkód
}, false);

Ha változatlanul hagyjuk a lightboxot, és dom:loaded-et vegyítjük a Event.observe-vel, akkor kapjuk “A művelet megszakadt” üzenetet. Kipróbáltuk, azt tapasztaltuk, hogy két dom:loaded-et sem kedvel az IE. Köszönjük. Az maradt a megfejtés, hogy a lightbox inicializálást át kell írni a “régire”:

online casinoEvent.observe(window,'load',function(){ new Lightbox(); },false);
//document.observe('dom:loaded', function () { new Lightbox(); });
//vagy, kiremeljük a lightboxban az initet, és a saját kodunkban hívjuk meg.
Event.observe(window,'load',function(){
new Lightbox();
//saját kód
},false);

Múkodj!

E-mail ellenőrzés php-ben

Korábban beszéltünk az adatvalidálásról, de sosem lehet elég a jóból. Még mindig akad olyan felhasználó, aki képes kijátszani az emberi értelem határait, és elköveti azt a galádságot, hogy helytelen e-mail címet ír be. Különösképp arra az esetre gondolunk, mikor (kimondva) halvány fingja nincs az e-mail címéről, stbstb. fremail.com, hotmail.hu, citrommail.com és sorolhatnánk. Read more »

CMS - Tartalom rendező

Hamár a CMS-t emlegettem, nézzük meg, hogyan lehetne egyszerűen beállítani például a főoldalon megjelenő elemek (bejegyzések, cikkek, stb., nem layout) sorrendjét. Legyen ez egy híroldal, ahol nem mindig az írások létrejöttének időrendi sorrendjében kell megjelenni a tartalomnak. Ráadásul több hasábunk van, több tartalom csoportból kell választanunk.

Legyen tehát:

  1. cikkek: szerkesztett szöveg
  2. galéria: mezei galéria, képekkel
  3. eseménynaptár: eseménynaptár

Read more »

TV Kommentár

Szerdán kezdtem el, esténként írtam, mára lett kész. Egy minimal alkalmazás a televízióba történek kommentálásához. Lehet anyázni, fikázni, szidni a bírót, Magdi anyust kiröhögni. Látjuk az aktuális műsorokat (balra), a következőket  (alatta) és azokat amikhez éppen hozzászóltak (jobbra). Csak rá kell kattintani a műsor nevére, és már lehet is írni a véleményt. Van mezei chat rész is.

Az oldalt egy db js hajtja, prototype és script.aculo.us alapokon. Az alkalmazás csak firefox alatt használható. Az adatokat 4 másodpercenként kérjük, a választ JSON-ban kapjuk, és dobáljuk szét az adatokat a megfelelő helyekre. RSS is lesz, majd.

Így készült egy videomegosztó

Csináltam egy videomegosztót. Nem nagy szám. Van már n db. De ha azt vesszük, hogy egy “garázsba” készült, magam készítettem, egyedül (programozás, server háttér), meetingek, milliók nélkül, akkor igen is nagy szám. Nekem az. Az oldal szinte fogad minden manapság menő viccformátumot (swf, pps, video, szöveg, képek). Statisztikák, érdekességek a képtelenség.hu technikai hátteréről. Read more »

Első üres szövegmező aktiválása a formon

Ha formokkal dolgozunk, általában szokás mondjuk onLoad-kor rátenni a focust valamelyik mezőre, ezzel is segítve a kitöltést. Prototypeban van gyárilag Form.focusFirstElemet(), az viszont aktiválja a már kitöltött mezőt is + checkboxra, radiobuttonra is rááll. Készítettem ezért egy új metódust a Form osztálynak, ami megoldja a problémát.

Object.extend(Form, {
 focusFirstEmpty: function(formElm) {
 	$A(formElm.getInputs()).each(function(elm) {
 		if(!$(elm).hasClassName('readOnlyInput')
 			&& $F(elm) == ''
 			&& (Element.readAttribute(elm, 'type') == 'text'
 				|| Element.readAttribute(elm, 'type') == 'password'
 				|| Element.readAttribute(elm, 'type') == 'file'
 				|| elm.tagName == 'TEXTAREA')) {
 			Field.focus(elm);
 			throw $break;
 		}
 	});
 }
});

Használat:

Event.observe(window, 'load', function() {
 Form.focusFirstEmpty($('myForm'));
});

(Egy form element azonosítót vár, utána pedig annyit csinál, hogy összeszedi a mezőket egy tömmbe, végigmegy rajtuk, majd az első, amelyik nem readonly, üres illetve text, password, file vagy texarea típusú az megkapja a focust.)

Egy egyszerű galéria adminisztráció

Nem tudod hogy vitelezd ki a képgaléria adminisztrációját? Egyszerű kezelhetőséget szeretnél? Tessék! Ötletet adunk!

Powered by: SWFUpload prototype script.aculo.us

Xilinus Prototype Portal Class

Xilius blogon jelent meg egy prototype és script.aculo.us alapokon működő kliens oldali “framework”, mellyel hasonló felületet tudunk varázsolni, mint a netvibes vagy az igoogle. A kódja szép munka, bár a demot nézve iziben feltűnik a dolog: miután átrendeztük az oldalt, újratöltve a widgetek ismét az eredeti helyükön jelennek meg. Erre a megoldás az lehet, hogy onUpdate (mikor befejeződött a drag&drop) eseménykor egy serialize() függvénnyel lekérjük a widgetek pozícióit, amit Ajax.Request-hez használva szerveroldalon lementhetjük a pozíciókat. Újabb oldalletöltéskor pedig ennek a sorrendnek megfelelően készül el a html. Természetesen ezt a megoldás bejelentkezett felhasználókhoz célszerű alkalmazni.  Másik megoldás, hogy nem Request, hanem cookie. De jelenleg dokumentáció hiányában nem jöttünk arra rá, hogy hogy lehet a widgetek pozícióját, és sorrendjét javascriptből állítani.

A project ígéretesnek tűnik, kíváncsian várjuk, mi lesz a belőle.

LightWindow v2.0

Korábban már esett szó a Gray Box technológiákról, most itt egy újabb, frissebb, ropogósabb. Nem sikerült rosszra a LightWindow v2.0, ami ha főzni is tudna (meg xhtml valid lenne) , igen jó háziasszony lehetne.

Read more »

Script.aculo.us Effect.Tooltip - lehet jobbat?

Ajaxian-on majdnem megtaláltuk, ami mindig is hiányzott a Script.aculo.us-ból: Effect.Tooltip. Elsőre jónak tűnt, de aztán elgondolkodtunk, hogy talán lehetne ezt jobban is.

Az egyetlen, de számunkra annál zavaróbb baja az, hogy window.onload-kor egyenként inicializálja az egyes tooltipeket. Ez sok elem esetén elég kényelmetlenné teheti a használatát. Nem beszélve arról, ha szerveroldalon automatikusan generálunk egyedi formokat, akkor külön kell foglalkoznunk a tooltip init-ek előállításával is, ami viszont ugye csak inline JavaScriptként történhet, bele a HTML kódba.

Sokkal jobb lenne egy olyan megoldás, amire már több példát láttunk, kifejezetten Script.aculo.us-ra kihegyezve viszont még senki sem készítette el:
- legyen 1 darab inicializáló sor, amely akár lehet a tooltip osztály konstruktorában is
- jelöljük meg a HTML-elemeinket valamilyen egyedi class-szal, pl ‘tooltip’
- a tip szövegét helyezzük el az elemek ‘title’ attribútumában, hiszen ezzel a legtöbb HTML tag amúgy is rendelkezik, és pont ezt a célt szolgálja
- az inicializálás során egyszerűen szaladjunk végig a lapunk ‘tooltip’ classnevű elemein, vegyük a ‘title’ attribútumukat, és jelenítsük meg ahogy tetszik

A logika alapján jól látható az egyszerűség és a rugalmaság:
- a tooltip-szöveg ott van, ahol szükség van rá: közvetlenül a HTML-elemnél - szerveroldalon már eleve így generáljuk majd a formot, vagy így készítjük el a templatet
- az inicializálás központi, egyszeri, és a mérete sem növekszik a tooltipek számával

Az elmélet tehát nagyjából ennyi, de valószínűleg egyszer majd a gyakorlatban is összerakjuk itt a dev2-n.

Következő oldal »