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!

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 »

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.

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 »

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.)

Igen gyakran használt vezérlőelem a select (vagy drop down, combobox), mely nagyban megkönnyíti az értékek kiválasztását, mint pontos adatforrás. Mindez igaz addig, amíg maximum pár tíz elem közül kell választanunk, nagyobb elemszám felett bosszantó lehet a kereséssel eltöltött idő. Miért nem használunk címkéket? Csak: nem pontos, csak egy értéket közöl (a select 2 értéket közöl- value, text- és pontos értékek), és mert nem erre való. A nagyobb listákban való elemkiválasztására készítettem egy scriptet, ami már már nagyobb listaméretnél is megkönnyíti az választást. Read more »

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.

Azt hiszem nem kell hozzá semmi körítés: http://javascriptlibraries.com/

Aki a múlkori Miniajax gyűjteményben nem talált volna kedvére való megoldást, annak most ismét itt egy nagyszerű válogatás, több, mint 400 kisebb-nagyobb scriptet bemutatva:

http://www.ajaxrain.com/

Korábban már szóltunk a Tablekit-ről, most elkezdtük alkalmazni is. Esetünkben a táblázatot egy Prototype Ajax.Updater küldi, és ezután kívánjuk a táblázatunkat szerkeszteni. Probléma az, hogy ilyenkor automatikusan nem futnak le azok a scriptek, amik az inicializálást végzik el. Két megoldást találtunk ki:

A szebb megoldás:

var myAjax = new Ajax.Updater(
'options',
url, {
method: 'post',
parameters: pars,
evalScripts: true,
onSuccess: setTimeout('TableKit.load()',100)
});
//tehát onSuccess után 100ms-mal meghívjuk a Tablekit.load() függvényt. A timeoutra azért van szükség, mert az onSuccess és onComplete eseménykor még  az "options" div nem tartalmazza a végeredményt.

Nem annyira szép megoldás:

<img src="indicator_medium.gif" onload="TableKit.load(); this.parentNode.removeChild(this);" alt="" />

Updatekor érkezik egy kép is, jelen esetben egy indikátor, melynek onload eseményébe toljuk bele a Tablekit.load() hívást, majd ezzel a lendülettel a képet el is távolítjuk a DOM-ból: this.parentNode.removeChild(this);

Ha van szebb megoldásotok, nehabozzatok. Írjátok meg!