RSS Feed

Posts Tagged ‘javascript’

  1. Jelszó beviteli mező YUI DataTable-höz

    February 11, 2009 by nyu

    Az utóbbi időben egyre többet foglalkozom a YAHOO User Interface-szel, annak is főként a DataTable komponensével. Hogy egy pici kedvet csináljak másoknak is a YUI-val való ismerkedéshez, bemutatok egy egyszerű módszert a DataTable cella-szerkesztőinek bővítésére.

    (more…)

    Category prog, web | Tags: ,,, | No Comments

  2. Script.aculo.us slider mod

    August 29, 2008 by nyu

    Egész jóra sikerült a script.aculo.us-os slider control, annyi a baj vele, hogy nem tudja kezelni azt az esetet, amikor két “pöcök” van a “pályán” és az egyiket rátolom a másikra. Ilyenkor az első probléma az, hogy átfedésbe kerülnek, emiatt az egyik “pöcök” elérhetetlenné válik. Ha ezt sikerül kiküszöbölni, akkor meg az a gond, hogy találkozáskor nem ugyanazt az értéket fogják visszaadni.

    Ez így nehezen érthető, de itt egy példa, ami az eredeti slider control-t használja: PÉLDA. Ezen jól látható, hogy egzmásra tolható a két pöcök, ugyanazt az értéket adják, de ilyenkor az alul levőt nem lehet közvetlenül elérni, el kell cibálni a fölül levőt.

    A módosított verzióban a két pöcök már csak egymás mellé képes beállni, ilyenkor a visszaadott értékük azonos. Ez már jól használható intervallum megadásokra: PÉLDA

    A módosított slider control letölthető innen. Az 1.8.1-es script.aculo.us lib-et használtam fel alapnak, ebbe hackeltem bele Gerd Riesselmann módosítását, amit itt tett közzé még az 1.6-os script.aculo.us lib-hez.

    Category prog, web | Tags: ,,, | No Comments

  3. WebKit Nightly Build, majdnem 7,5x gyorsabb JavaScript

    June 12, 2008 by nyu

    Ma kipóbáltam a WebKit legutolsó Nightly Build-jét (r34503), amiben már bent csücsül a hiper-szuper új JavaScript motor a SquirrelFish. Gyors teszt a SunSpider-rel:

    Akkor ezek szerint a WebKit 7,46x gyorsabb JavaScript futtatásban. Impresszív!

    Gondolom Google tele van már ilyen tesztekkel, de jó látni, hogy egymásra licitálnak a “kis” böngészőgyártók. Várom a FF3-at jövő héten! A FF3 partiban van a legújabb Safarival! Igazán szép eredmény!

    Category szoftver, web | Tags: ,, | No Comments

  4. Új prototype.js és script.aculo.us

    November 10, 2007 by nyu

    Megjelent végre az új verzió a lassan már egybenövő két javascript library-ből. Amint az a mir.aculo.us-ról is kiderül, ezt a megjelenést most még egy új könyv megjelenéséhez is időzítették. Ha hinni lehet a beharangozó híreknek, akkor sikerült megint jópár újdonságot és némi gyorsulást hozó fejlesztést belepakolniuk a fiúknak.

    Egy kis összefoglaló a leírásból, először a script.aculo.us:

    • Ajax.InPlaceEditor-t és az Ajax.InPlaceCollectionEditor-t teljesen újraírták. Ez jó hír, a korábbi verziókban nehézkesnek tűnt a használata, kíváncsi vagyok használat közben ez mit fog jelenteni.
    • Új effekt: Effect.Tween. Ez ha jól értem valami morph szerű dolog lesz, ki kell próbálnom.
    • MP3 fájlok lejátszása, IE alatt natívan támogatott, többi böngészőben meg kell valami plugin (quicktime valószínű jó, legalábbis nekem ment firefox alatt)
    • Egy rakás bugfix és teljesítmény tuning.

    Prototype.js kicsit nagyobb falatnak tűnik, de a legofntosabbak:

    • Egy gyerek osztály meg tudja hívni a szülője bármelyik metódusát a $super függvény segítségével.
    • Egy már léterhozott Class-hoz az addMethod-dal hozzá lehet rakni újabb metódusokat.
    • Az Ajax.Response támogatja a JSON válaszokat, rögtön javascript objektumokként jelennek meg.
    • Az Element.insert()-tel objektumokat vagy HTMLkódot szúrhatunk be egy DOM objektumba.
    • Element.select gyakorlatilag egy objektumon belüli $$()
    • Sokat javítottak az eseménykezelésen. Úgy tűnik az eseménykezelő függvényeinknél már nem kell bind-olni.
    • Függvényeinket időzíthetjük a Function.delay()-jel vagy a Function.defer()-rel, ez utóbbi esetén a függvényünk csak akkor indul, ha a javascript értelmező éppen üresjáratban van.
    • Meglévő függvényeket csomagolhatunk be újra a Function.wrap()-pal.
    • Hash.merge() összefésül két hash objektumot.

    Errefelé nézelődj, ha érdekel a dolog részletesebben:

    prototype.js

    script.aculo.us

    Category IT, prog, web | Tags: , | No Comments

  5. IE javascript debug

    April 26, 2007 by nyu

    Nem a legszebb, de mindenképpen egy működő és ingyenes megoldás:

    Visual Studio Web Developer

    Persze van IE-hez firebug-hoz hasonló debugger is:

    http://www.ieinspector.com/dominspector/

    … bar ez nem ingyenes, meg háááát… nem igazán jó, főleg firebug után.

    Category IT, prog, web | Tags: ,, | No Comments

  6. Apró trükk tooltip gyártásra prototype.js-sel

    April 19, 2007 by nyu

    Talán nem a legszebb megoldás, de rendkívül rövid és könnyen konfigurálható, kusztomizálható.

    A medve:

    function get_absolute_pos(obj)
{
   var shiftX = 0;
   var shiftY = 0;
   if (obj!=null)
   {
      if (obj.tagName.toUpperCase()=='DIV')
      {
         if (obj.scrollLeft) shiftX = obj.scrollLeft;
         if (obj.scrollTop) shiftY = obj.scrollTop;
      }

      var ret = { x: obj.offsetLeft - shiftX, y: obj.offsetTop - shiftY };
      if (obj.offsetParent) {
         var tmp = this.get_absolute_pos(obj.offsetParent);
         ret.x += tmp.x;
         ret.y += tmp.y;
      }
   }

   else ret={x:0,y:0};
   return ret;
}

function create_popups(class_name)
{
   $$('.'+class_name).each(
      function(i)
      {
         Event.observe(i,'mouseover',function()
         {
            if (!this.popup)
            {
               pos=get_absolute_pos(this);
               this.popup=document.createElement('DIV');
               this.popup.className='popup';
               this.popup.innerHTML=this.innerHTML;
               this.popup.style.top="-100px";
               this.popup.style.left=(pos.x)+'px';
               this.appendChild(this.popup);
               this.popup.style.top=(pos.y-this.popup.offsetHeight-2)+'px';
            }
            this.appendChild(this.popup);
         });

         Event.observe(i,'mouseout',function()
         {
            this.removeChild(this.popup);
         });
      }
   );
}

    és a css osztály:

    .popup {
   position:absolute;
   padding:2px;
   color:#000000;
   background-color:#f8f8a0;
   border:1px solid #000000;
}

    Hogy miről is van szó?
    Először is a $$() függvény kikeresi az összes olyan objektumot, amihez a megadott css osztály tartozik. Aztán minden ilyen objektumhoz beállítok eseménykezelőt az Event.observe()-vel. A ‘mouseover’-re készítek egy div-et, amihez hozzárendelem a popup css osztályt, és belerakom az eredeti elem tartalmát, majd pozícionálom. (Azért rakom ki első körben a látható területen kívülre, hogy le lehessen kérdezni a magasságát, így aztán az appendChild után már könnyen a megfelelő helyre tudom mozgatni.) A ‘mouseout’-ra meg csak egyszerűen eltüntetem.
    Ahhoz, hogy picit gyorsabb legyen, figyelem azt is ‘mouseover’-kor, hogy már létrehoztam-e a popup div-et korábban.

    Category IT, prog, web | Tags: , | No Comments