The competition will be running for two weeks, between Monday, August 29 and Sunday, September 11. The winners will be announced in this post at Monday, September 12 and will be invited through their e-mail address given in the comments, so make sure to use a working mail address otherwise I will not be able to invite you! You can also leave a link to your Dribbble prospector account, that works as well.

Good luck everyone!

UPDATE: The winners!

Thanks everyone for participating. My friend Peter Eszes, who helped me with judging and I had a hard time choosing the winners but we decided that Steve Pocklington (Dribbble account) and Péter Viszt (Dribbble account) should be invited this time. Make sure to follow them as they are awesome! And follow me on Twitter to get info about the next contest.

I did a little research on OS X dashboard development and gladly found that all the widgets are developed in HTML, CSS and JavaScript languages, all which I’m really familiar with due to web development. So I started downloading Xcode from the Mac App Store and opened Photoshop to create a layout plan for the widget. The first draft got kind of popular on Dribbble, so I know I was going the right way with it.

Now, couple of days later, ladies and gentlemen I present to you the first version of GAget – Google Analytics Widget for OS X. Download it now!

(If you put more than two links in your comment, and you can’t see it, don’t worry, it’s normal: the comment will be held for moderation by the WordPress engine, so please give me some time to approve it.)

UPDATE: And the winner is…

Wow, thank you guys for the participation! Almost 40 designers have entered the contest and a lot of great works were submitted, giving me a hard time to judge them. I asked a very good friend of mine Péter Eszes to help me decide. This not only helped me, but made it a much more awesome for one of you guys, since Péter had an invite himself, so actually not one, but TWO of you got invited!

After giving it much thought, the two winners are Syahmi Ismail (Dribbble profile) and Marty Batten (Dribbble profile). Congratulations! The rest of you shouldn’t worry, I will be surely making a contest like this for the next time I get an invite, make sure you follow me at Twitter, so you will not miss it!

Once Upon a Time, I Almost Designed a Twitter App by Tyler Galpin

Project navigation by Thomas Schranz

Rent-a-car by Josh Holloran

Twickets Betadesign 1 by Davy Kestens

Iphone App Part2 by steemorol

Webapp UI by Fares Farhan

LocationSpot by Josh Hemsley

Dashboard by Jonathan Moreira

This beautiful user interface design by Jonathan is a project manager site’s first detailed look. I especially love the blue color choice for the selected item in the sidebar.

Latest from Twitter by Meagan Fisher

Meagan is designing a new Tumblr theme for Pixel Union. I think she’s heading the right way. More shots of the project.

Russian truck by Studio38.ru

This is actually the debut shot of Studio38.ru on Dribbble but it already got them more than 450 likes and 300 followers. I call a “GEEZUS” on this one

Island by by Leonid Vazniuk

There are clients who simply don’t appreciate great designs: this was not accepted, even though the whole thing was designed fully in Photoshop. Amazing, if you ask me.

Birthday Cake by Artua

Oh my god. Just look at the details on this bad boy. Artua Design Studios sure know they way around pixels, as you can cleary see on the following example. If you’re ready for a jaw-dropping experience, head over to their showroom for more icon designs.

Miro 4′s new UI bits by Morgan Allan Knutson

Miro has been a really well designed open source podcast viewer OSX app, and it’s 100% free. Morgan and his team are working on version 4 and they’re clearly heading the right direction. You can find more shots of this project on Dribbble.

Worldview — She be live! by Jesse Dodds

Jesse did a great work on this website header. It is basically a site for campaign monitoring, on how the social media is responding to your marketing moves, but head over to the website if you would like to know more!

Travel deal site header by Zsolt Jakab

This fellow Hungarian designer, Zsolt Jakab has been working on the Trawelo for some time now and I have been keeping up with the progress on Dribbble. The shot bellow is inviting and professional looking at the same time, great work!

London Office by Julian Burford

This illustration is a part of a wallpaper by the amazing artist Julian Burford. Head over to his website to download the full wallpaper version of the shot.

Circle map by Matthew Farag

Not much needs to be said for this shot, it’s just awesome.

Calendar by ididi

I personally love everything that is a fresh approach to office applications, that’s why I really like the design of Flow and some other apps. Calendar by ididi is a great example of these nicely designed everyday apps. I like the colors as well as the spacing, the only thing I would change are the red dod marks of events.

CMR by David Cristian

Gondoltam körülnézek a neten, hátha találok valamit, amivel fel tudom dobni az összhatást, és mondhatom, sikerrel jártam: több millió friss, igényes és főleg ingyenes ikont találtam. Hogy hol?

FindIcons

A keresésem fő forrása a FindIcons nevű, ~200 000-es ikon- és ~2000-es ikonpakk-adatbázissal rendelkező gyűjtőhely. Nagyon szépen lehet filterezni a keresést, kulcsszó, méret, licensz és stílus szerint. Csak ajánlani tudom, hibátlan választás.

IconFinder

Hasonlóan igényes, és még a nevében is könnyen összekeverhető a FindIcons-hoz az IconFinder, a maga ~160 000 ikon és kb 500 ikoncsomag bázisával. Szintén kereshető kulcsszó, méret és licensz szerint, ezen kívül van még egy százezres óriáscsomag, ami azért elég tetemes.

We Love Icons

A We Love Icons oldal inkább egy gyűjtő, mint rendszerező hely, hiszen külső oldalakra (pl deviantArt) mutat. Jól átválogatott gyűjtemény, ahova tényleg csupa igényes csomag kerül ki, kb 450 csomag. Egyetlen hibájának talán azt lehet felróni, hogy a kereshetőség nem elég mély, ezért sokszor nem lehet tudni, hogy az adott ikoncsomag használható-e üzleti célra.

WebAppers

A WebAppers nem csak ikonok gyűjtőhelye: mindenféle webfejlesztéshez hasznos dolgot rendszereznek itt, kezdve a Flash videólejátszóknál, át a jQuery-s képgalériákon, egészen a betűtípusokig. Ez bizony kötelező a Google Readerben!

Icon Archive

A fentieknél kisebb és kevésbé igényes oldallal rendelkező, de sokszor hasznos az Icon Archive, ahol nagyjából 30 000 ikon található.

Egyelőre ennyi elég lesz.

Írásomban összeszedem, hogy miként is működik egy jQuery program és hogy mik a legalapvetőbb effekt utasítások, amiket használni érdemes és kell. Akik egyáltalán nincsenek tisztában a HTML kóddal és az alapvető Javascript nyelvvel, azok először ezeknek nézzenek utána, mert ahhoz, hogy az ember megértsen egy komplexebb nyelvet, jobb ha ismeri annak az alapjait. Persze azért nem kell az Assembly-vel kezdeni!

A Javascripttől eltérően a jQuery parancsok elég összetettek tudnak lenni, főleg mivel ezt a library-t azért hozták létre, hogy meggyorsítsa, megkönnyítse a webprogramozást, és hogy minél kevesebb sor megírásával lehessen létrehozni minél felhasználóbarátabb oldalakat. Minden parancs így néz ki:

$(DOM elem).valami();

• A $ jel a “jQuery” rövidítése, ez jelzi a JS számára, hogy itt most egy jQuery objektumról lesz szó. Ha mondjuk használtál már Ruby on Rails-t akkor ismerős lehet ez a fajta jelölés. Lényegében ennyi, de érdemes még tudni, hogy a $ helyettesíthető a jquery kiírásával, tehát: jquery(DOM elem).valami();
• A (DOM elem) az a HTML elem amire hivatkozol a jQuery parancsban. Ezen az elemen fog végrehajtódni a meghívott függvény
• A .valami(); a jQuery függvény, amely meghívásra kerül. Lehet ez a legegyszerűbb hide(), ami eltünteti a megnevezett elemet, vagy egy összetett AJAX hívás is.

Tulajdonképpen ez volt a legelrettentőbb rész. Érdemes tudni, hogy egy DOM elemhez több függvény is rendelhető, tehát a $(DOM elem).valami1().valami2(); is nagyon szépen fog működni; és ebben van az igazi potenciál. Most, hogy ezt megértettük nézzünk meg a legegyszerűbb függvényeket: az effekteket.

Effekt függvények

A beépített effekt függvények nagy része a következő felépítéssel működik:

$(elem).effekt([speed, callback]);

• A függvények paraméterei opcionálisak, de közülük a speed, azaz sebesség az amit legtöbbször használni kell. Meg lehet adni ezt ‘slow’, ‘normal’ és ‘fast’ értékeken túl milliszekundumban is (1000 ms = 1 másodperc). Ez lesz az az időtartam, ami alatt a függvény végrehajtódik; ez a lefutási idő.
• A callback, vagyis visszahívás paraméterben megadható, hogy mi történjen miután lefutott a függvény. Például amint véget ér az adott parancs, visszakapjuk egy alert()-ben a számolás értékeit.

Volt, nincs (show(), hide(), toggle())

Szerencsére a jQuery függvényei többsége nevében hordozza a funkcióját is, ezért ha nem is ismered a függvényt, nagyon gyorsan rá lehet jönni a működésére. Így van ez a show() és a hide() parancsoknál is: míg előbbi megjelenít egy rejtett elemet, utóbbi eltünteti a célelemét. Mindkét függvény használható speed és callback paraméterrel és nélküle, de fontos megjegyezni, hogy a sebesség paraméter nélkül csak megjelenik/eltűnik a kiválasztott DOM elem; megadásakor azonban egy kis animációt kap.

A toggle() egy kicsiben eltér a show() és hide() függvényketől, ugyanis ez tulajdonképpen a kettő kombinációja. Paramétereinek megadhatjuk a már ismert speed és callback paramétereket, de egy kifejezést is (pl. osztas++ % 2 == 0, azaz ha az “osztas” változó kettővel történő maradékos osztásának eredménye 0), amely teljesülésekor végrehajtódik az utasítás.

Lássunk is egy rövid példát. HTML kód:

Jelenítsd meg (show)
Tüntesd el (hide)
Jelenítsd meg és tüntesd el (toggle)

jQuery kód:

$('a#show').click(function() {
  $('p.pelda_1').show();
});
$('a#hide').click(function() {
  $('p.pelda_1').hide();
});
$('a#toggle').click(function() {
  $('p.pelda_1').toggle('slow');
});

A kis programunk mindössze annyit csinál, hogy a megadott linkekre való kattintáshoz  (click() függvény [erről egy későbbi postban]) rendel show, hide és toggle effekteket. Itt nézheted meg működés közben a demot. A show és hide nem kapott speed paramétert, míg a toggle-re tettem, csak azért, hogy lássátok, hogy milyen is az.

Csúszkálás (slideDown(), slideUp(), slideToggle())

A slide függvények nagyon hasonlóan működnek a show, hide függvényekhez, lényegében annyiban különböznek, hogy míg az előbbiek a speed megadásával függőleges és vízszintes irányba animálták a függvényt, a slide függvények csak függőleges irányba teszik ezt. Nem ér meg külön példát, a jQuery dokumentációban van róluk bőven leírás, példával.

Eltűnés/feltűnés (fadeIn(), fadeOut(), fadeToggle())

Eljutottunk egyik kedvencemhez: a fadeIn(), fadeOut(), fadeTo() ugyanis az a függvényhármas, amelyiket a legnagyobb előszeretettel használom. Szerintem baromi jól tud kinézni egy jó helyre rakott, szépen animálódó üzenet a usernek, főleg ha az ugyanilyen szépen be is csukódik utána. A fadeTo() a paraméterben kapott értékig csökkenti a függvény láthatóságát, míg a fadeIn() és fadeOut() a megadott sebességgel csökkenti az elem opacity CSS értékét, majd mikor ez elért a 0-hoz, rádob egy “display: none”-t, tehát eltűnteti teljesen, hogy ne foglalja a helyet. Na ez gondokat okozhat néha.

A fade effektek egyik fontos tulajdonsága, hogy míg az eddig megismert függvények folyamatosan “nyitják ki” a célobjektumot, ezzel lentebb tolva/fentebb húzva az alatta és körülötte lévő elemeket; a fade az animáció befejeztével és kezdetekor a DOM elem elfoglalja a megfelelő méretű helyét és így tűnik el(ő). Ez azt jelenti, hogy ha egy oldal közepén lévő elemet animálsz meg fade-del, akkor az animációs idő egy időpillanatában ugrani fog egyet az oldal magassága/szélessége, erre pedig figyelni kell mert zavaró lehet!

A fade-hez készített példában az eltüntetendő elem után raktam egy másikat, hogy lássátok miről beszéltem pontosan. Megoldásként vagy azt javaslom, hogy olyan elemeknél használjátok a függvényt, amik nincsenek körülvéve sok másik elemmel, vagy CSS-sel pozicionáljátok be az elemet egy felsőbb rétegre.

A központi effekt (animate() és stop())

Az összes eddig felsorolt effekt függvény visszavezethető egy központi animációs függvényre, az animate()-re. Ez az amivel mi magunk is létrehozhatunk hasonló mozgásokat a DOM elemekre, csupán egy kis CSS tudás kell hozzá. Egyszerűen az animate() paraméterei között meg kell adnunk, hogy mely CSS tulajdonságokat változtassa meg a függvényünk; például a 400px széles és magas <p> csökkenjen 200×200-ra, a láthatósága pedig legyen fele:

$('a#animald').click(function() {
  $('p.pelda_3').animate({width: "200px", height: "200px", opacity: 0.5}, 1500);
});

Itt a kipróbálható példa. Az animate() az egyik legfontosabb effekt, hiszen ezzel nagyon komplex animációkat hozhatunk létre, de vannak korlátok; a háttérképet például csak vízszintesen lehet animálni, ami kicsit idegesítő tud lenni, szerencsére azonban van erre egy plugin.

Feltűnhet, hogy a példában alkalmaztam a stop() függvényt az animate() előtt (a függvények összefűzhetőek, mint már említettem!); ez annyit csinál, hogy megállítja az éppen zajló animate()-et, így adva szabad utat a következő animáló függvénynek. A stop()-ról van egy egészen jó példa a jQuery dokumentációban.

Mára ennyi. Következő alkalommal megnézünk egy-két fontos esemény-függvényt (pl. rákattintás, fókuszba kerülő elemek) és néhány selectort (ezekkel tudunk bizonyos elemekre hivatkozni és kezelni jobban a DOM elemeket). Addig is gyakoroljatok ezekkel! Ha valami nem világos, nyugodtan kérdezzetek a hozzászólásoknál!

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

- jQuery.com

Láttátok a főoldalon a portfólióm részt? Nagyjából egy óra alatt megvolt, a nulláról. Vagy a Webidea legördülő menüit? Fél óra. Sorolhatnám az ehhez hasonló példákat, vagy írhatnék a végtelen felhasználási lehetőségről, de ezzel sokan foglalkoztak már, így inkább egy kicsit az általános működésről és a jQuery User Interface-ről, azaz a jQuery-hez fejlesztett grafikus segédkörnyezetről írnék.

A jQuery a(z egyik) leghasznosabb JavaScript fejlesztői környezet, amivel valaha dolgom volt. Ez a mondat bátran hagyhatja el számat, mert a cucc használata annyival megkönnyíti a webfejlesztési tevékenységem, mint például a Google a böngészést. Nagy szavak, de mindjárt meggyőzlek benneteket. Nagyjából egy éve használom, ez idő alatt rengeteg hasznos információt megtanultam róla: az alapvető működést, a programozást egyszerűsítő funkcióit; a “hogyan”-ra és a “hol”-ra jöttem rá. Nem állítom, hogy nincsenek még nekem is kisebb sötét foltok, de azért már elég jól eligazodom benne. Tekintsük át, hogy mit tud ez az 50 kbyte-os kis JS library.

Az első és talán legfontosabb tulajdonsága a DOM megváltozott kezelésében van. Amikor egy JavaScript alkalmazást írsz és sok HTML elemre kell hivatkozni és azokkal operálni, elég nehézkes és egy idő után átláthatatlan lesz a kód. Tegyük fel, hogy egy űrlapot kezelsz éppen és a benne lévő 3 <label> színét szeretnéd lecserélni, mert a felhasználó elfelejtette kitölteni a mezőket. Az űrlap:

Első mező:

Második mező:

Harmadik mező:

Ezt sima JS-ben így csinálod:

document.getElementById("elsomezo").style.color = 'red';
document.getElementById("masodikmezo").style.color = 'red';
document.getElementById("harmadikmezo").style.color = 'red';

Míg jQuery-ben:

$('label#elsomezo, label#masodikmezo, label#harmadikmezo').css('color', 'red');

Melyik tűnik egyszerűbb és elegánsabb megoldásnak? Innen már csak azt kell elképzelni, hogy ha egy három soros kódon ennyit tudtunk egyszerűsíteni, akkor mi lesz a 4-500 soros JS alkalmazásokkal!

A második, szintén fontos tulajdonság a beépített effektek létezése. Egy sor beírásával tűnheteted el, hozhatod elő, csukhatod be és nyithatod ki a HTML elemeket, összesen 9 beépített effekt áll rendelkezésre. Ezeken túl használható még az alap animáló függvény, amiben beállíthatod, hogy milyen módon mozogjon egy elem, például az alaphelyzetből egy elfehéredéssel csukódjon össze, miközben a betűmérete is folyamatosan csökken. Egy rövid demonstráló példa:

Kattints rám, hogy eltűntessem/előhozzam az alábbi bekezdést-t

Csukj be, nyiss ki!

A forrása pedig:

$('a.pelda').click(function(){
$('blockquote.pelda').slideToggle();
});

Ugye, hogy milyen egyszerű? Vajon mennyi idő lenne ezt megírni szimpla JavaScripttel?

A jQuery önmagában egy olyan számtalan extra tulajdonsággal rendelkező eszköz, amit minden webfejlesztőnek ismernie kéne, hogy sokkal sokszínűbb, interaktívabb és használhatóbb weboldalakat készíthessenek vele. Az 1.4-es verzió megjelenésével pedig újabb lehetőségeket adtak a kezünkbe: a változtatások dokumentációja 16 teljesen új függvényt és több tucat egyéb fejlesztést tartalmaz.

Térjünk rá a jQuery UI-re. Mint már említettem, ez a jQuery-hez fejlesztett grafikus környezet: itt jön képbe az interaktív weboldal, hiszen olyan extrákat tesz hozzá ez a kis plugin az alap programhoz, mint például a mozgatható, az átméretezhető, vagy a rendezhető sorrendű HTML elemek. Ezen felül jó néhány kis widget (dátum választó, felugró ablak kezelő, csúszka és egyebek) valamint számtalan felturbózott jQuery effekt áll rendelkezésére a fejlesztőnek.

Melyik a meggyőzőbb?

A jQuery UI hasznos kiegészítő társa a jQuery-nek, mindenképpen ajánlott egy komolyabb portál elkészítéséhez, de akár a saját weboldalon is hasznos lehet, főleg mivel a plugin letöltésénél teljesen személyre szabható, hogy melyik funkciókat szeretnénk a UI-n belül használni, így nem kell a felesleges függvények letöltésével terhelni a szervert.

A kérdés tehát nem az, hogy a webfejlesztőknek használnia kéne-e a jQuery-t, hanem az, hogy feltegyék-e mellé a jQuery UI-t is. Az 1.4-es fejlesztői környezet már annyira sokrétű és fejlett, hogy aki nem is gondolkodott el a használatán, az pont olyan, mint aki szándékosan levágja a fél karját, csak hogy megnehezítse a saját dolgát. Aki jobban el akar mélyedni a jQuery-ben, annak ajánlom a teljes dokumentációt és a különböző tutorialokat.

Szóval nekiálltam, hogy akkor megtanulom a jQuery Ajax metódusait, de szerencsére ráakadtam egy nagyon hasznos kis kerülőre. Ezt fogom most megosztani veletek.

Az első és legfontosabb dolog, hogy megértsük a <form> működését. A form – magyarul űrlap – egy olyan HTML tag, amivel egyszerű kitölthető mezőket tolhatunk a felhasználó arcába, ezzel rákényszerítve, hogy regisztrációkor megadja nekünk a haja színét és a kedvenc parfümének illatát. Ezek közé a mezők közé tartozik a fájl mező is. Az űrlap működése nagyon egyszerű, beillesztésekor megadjuk, hogy milyen módon (method), és hova (action) küldje az információkat, amiket a mezőkben megadtak a felhasználók.

A milyen módon rész POST vagy GET lehet, attól függően, hogy mennyire titkosan akarjuk küldeni az infokat. Elég másként lehet feldolgozni az adatokat, a GET ugyanis a címsorban küldi az adatokat (pl regisztracio.php?felhasznalo=jozsi&jelszo=123456), míg a POST titkosan küldi tovább, de ezért ha használni akarunk egy-két adatot további oldalakhoz, akkor azokat tovább kell vinni valahogy (PHP-nál nagyjából úgy mint ahogy a GET metódus teszi).

Az űrlap hova része a feldolgozó fájl (esetünkben egy PHP lesz), ami kezeli a megkapott adatokat és tárolja vagy továbbküldi.

A formokban betöltött fájlokkal az a baki összesen, hogy azokat PHP-ban nem $_POST és nem is $_GET, hanem $_FILES előtaggal kell feldolgoznunk, hogy jussunk valahova. Ahhoz, hogy megkapjuk a kiválasztott fájlokat, az űrlapnak meg kell adnunk még egy attribútumot, ez pedig az enctype. Az enctype igazából az elküldött adatok titkosításának módja (nem ugyanaz mint a POST/GET), a fájlok feltöltéséhez szükséges értéke pedig enctype=”multipart/form-data”.

Nézzük is akkor hogy mire lesz szükségünk. Lesz egy form, ahol kiválasztjuk a fájlt; lesz egy PHP ami feldolgozza a fájlt; és egy JavaScript ami a vizualizációért felelős. Az űrlap nem lesz túl bonyolult, lássuk csak:

  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Upload" />
  </form>

Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:

<body>
  <p id="f1_upload_process">Feltöltés folyamatban...</p>
  <p id="result"></p>
  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Feltöltés" />
  </form>
  <iframe id="upload_target" name="upload_target" src="#" style="width:0px; height:0px; border:0px;"></iframe>
</body>

Mint látjátok bekerült két <p> bekezdés és egy <iframe> belső frame, de ez utóbbi el van rejtve (width: 0px, height: 0px;). A keretre azért van szükségünk, mert ha megnézitek, az űrlapunk megkapta target attribútumnak az <iframe> nevét; magyarán oda fog betöltődni az action=”upload.php”. Ezzel le is lőttem a legnagyobb poént, amivel a fájlfeltöltés AJAX-szerűvé válik.  Egy finom kis CSS-t ráhúzunk az oldalra:

#f1_upload_process{
  z-index: 100;
  position: absolute;
  visibility: hidden;
}

Ezzel biztosítottuk, hogy a #f1_upload_process egyelőre láthatatlan legyen, mert majd a JavaScript teszi láthatóvá, a fájlfeltöltés elindításakor. Sok szó esett már a JavaScript részről, nézzük is meg, hogy mit tud. Egyelőre csak a startUpload() függvényt hívtuk meg az űrlap elküldésével. Ez a függvény igazából csak annyit tesz, hogy a már említett #f1_upload_process részt megmutatja nekünk és engedélyezi a form elküldését:

function startUpload(){
  document.getElementById('f1_upload_process').style.visibility = 'visible';
  return true;
}

A hangsúly nem is ezen a függvényen van, hanem a stopUpload()-on, ami a feltöltés eredményét fogja nekünk kiírni. Ezt a függvényt a PHP fájlból fogjuk meghívni majd.

function stopUpload(success) {
  if (success == 1){
    document.getElementById('result').innerHTML = '<span class="msg">Sikeres volt a fájlfeltöltés!</span>>';
  } else {
    document.getElementById('result').innerHTML = '<span class="emsg">Hiba történt a feltöltés során!</span>';
  }
  document.getElementById('f1_upload_process').style.visibility = 'hidden';
  return true;
}

A függvényt egy success paraméterrel együtt hívhatjuk meg, ami az eredménynek megfelelő üzenetet dob ki a <p id=”result”> bekezdésünkbe. A vizualizációval meg is volnánk, nézzük meg, hogy mi is történik a háttérben. A PHP az űrlapból megkapott fájlt egyszerűen felmásolja a gyökérkönyvtárjába, majd 1 másodperces pihenő után (hogy a nagyon kicsi fájloknál is látszódjon, hogy történik valami ) meghívja a stopUpload() JS függvényt.

<?php
  $destination_path = getcwd().DIRECTORY_SEPARATOR;
  $result = 0;
  $target_path = $destination_path . basename( $_FILES['myfile']['name']);
  if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
  }
  sleep(1);

  echo('<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(' . $result . ');
  </script> ');

?>

Ezzel tulajdonképpen meg is volnánk. A dolog működik szépen, én is használom, használjátok ti is egészséggel! Ha bármilyen kérdés vagy észrevétel van, jöhet fórumba!

Forrás: ajaxf1.com