Archive for the 'script.aculo.us' 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!

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.

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.

Csemegék

JavaScript String.prototype Extensions

Igen sok függvény hiányzik javascript sting kezeléséből, itt van hát egy kis gyűjtemény, ami kisegíthet minket:

trim , splitrim, escHtml, unescHtml, urlEncode, isEmail, isURL, contains, beginsWith, endsWith, bővebben itt.

http://www.ajax.org/

Eddig még nem említettük, de az ajax.org-on egy igen jó kis demót láthatunk a Javeline Ajax platformjából. Égnek állt a hajunk, mikor megláttunk a letölthető demóban, a platform js-e 440k. Lehet, ezt ki fogjuk hagyni.

Accordion v1.0

Accordion tool-ról már volt szó, érkezett most egy script.aculo.us effect libraryval is. A js-t megnézve egy elég egyszerű kódot láthatunk, és működés közben is szépen muzsikál. Ajánljuk.

Web 2.0 Hard Drives

Ha már nem férnénk otthon a két vagy három számítógépen, a külső 320GB-os merevlemezen, még ott van az internet, és most már web2-es felületen tölthetjük fel fájljainkat egy távoli szerverre.

  • http://www.justupit.com/
    A szolgáltatás egyszerű, mint a raklap, csak feltöltés van, feltöltéskor megadhatunk 4 címzettet, és a rendszer elküldi e-mailben a tartalmat.
  • https://www.dropboks.com/
    Itt regszitráció nélkül kapásból kapunk 1 GB tárhelyet. Lehetőségünk van egyszerre több fájlt feltölteni, bár ennek a megoldása személy szerint nekem kifejezetten nem tetszett, van erre szebb megoldás is, amit későbbiekben tervezünk bemutatni. A regisztráció leokézása után rögtön olyan lesz, mintha be lennénk jelentkezve, és kapunk egy e-mailt is regisztrációnkról. Az alkalmazás Opera alatt nem működött. Kissé idegesítő a súgó popupok felugrálása, és hiányoltuk a fájl közvetlen eléréséhez a linket.

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.

Modalbox 1.5.3

Annak idején Lokesh Dhakar megalkotta a Lightbox JS-t, ami egy nagyon látványos képmegjelenítő volt, majd megszületett a Lightbox2. Használata egyszerű volt, mivel a képnézegetőt DOM manipulációval építette fel, így a felhasználónak igazán semmi dolga nem maradt. Majd megjelentek a különböző klónok is: Read more »