Miksiköhän tämä jQuery UI:ta hyödyntävä koodi ei oikein toimi? Draggiminen ("vetäminen") toimii, mutta ei fadeta ("häviä himmennetysti").
$(function(){
$("#postiviesti").draggable({
revert: true,
axis: "x",
distance: 128,
containment: "parent",
drag:
function(event,ui){
if($("#postiviesti").offset.left>256){
$("#postiviesti").fadeOut("slow");
}
}
});
});#postiviesti pitäisi siis fadettaa, kun sitä on dragittu 256 pikseliin.
Syy on luultavasti tuossa offsetissa, jonka kanssa minulla on aiemminkin ollut ongelmia.
En nyt ehdi testaamaan, mutta toimisko $(this).offset().left tai ui.offset.left?
offset -> offset() ja toimii.
Grezin ohjeiden mukaisesti näyttää nyt toimivan. Hankala muistaa, kun ei tule missään muualla kirjoitettua funktion nimen perään heti pistettä.
Ilmeisesti et sitten koodaile Javalla, C#:lla tms.
Mielestäni se on hyvin helppo muistaa. Jos haluat kutsua funktiota, laitat (<mahdollisesti jotain>) funktion nimen perään.
Eihän tuossakaan mikään pakko ole laittaa pistettä heti funktiokutsun perään. Voit toki laittaa sen funktion palauttaman tuloksen ensin muuttujaan:
var offset = $("#postiviesti").offset()
if(offset.left>256){
$("#postiviesti").fadeOut("slow");
}Juu; Java ja C-kielet eivät ole minulle tuttuja. Javaan aion tutustua pian ja C-kieletkin harkinnassa.
Johan kohdassa $("#id").offset on piste heti $-funktion kutsumisen perässä.
Tuo piste tulee ihan automaattisesti ilman pähkäilyjä, kun se on tavallaan jQueryn "ydintä".
Petja kirjoitti:
Hankala muistaa, kun ei tule missään muualla kirjoitettua funktion nimen perään heti pistettä.
Mitä. Virheesihän oli juuri se, että laitoit pisteen heti funktion nimen perään kun sen pitää olla funktiokutsun perässä.
Jos et aseta funktioille attribuutteja tai kikkaile prototyypeillä, sinun ei juuri koskaan tarvitse kirjoittaa pistettä heti funktion nimen perään joten tuonhan pitäisi olla helppo muistaa.
Petja kirjoitti:
Grezin ohjeiden mukaisesti näyttää nyt toimivan. Hankala muistaa, kun ei tule missään muualla kirjoitettua funktion nimen perään heti pistettä.
Oppimista helpottaisi se, että alkaisit debugata koodiasi. Ainakin Firefoxissa on tätä varten erikseen Error Consoler.
The Alchemist kirjoitti:
Oppimista helpottaisi se, että alkaisit debugata koodiasi. Ainakin Firefoxissa on tätä varten erikseen Error Consoler.
Petja: Tykkäät Firefoxista, joten käytä The Alchemistin mainitsemaa debuggeria. Käsittääkseni kaikilla selaimilla on (IE:stä ja Chromesta olen varma) debuggeri olemassa.
Myös molemmat ehdottamani näkyvät toimivan. Nyt kun otat tuon ui:n funktiossa kuitenkin vastaan niin olisi luultavasti parempi käyttää sitä kuin etsiä elementti uudestaan DOM-puusta. Kirjoittamalla $(this).fadeOut... säästyt refaktoroinnin vaivalta tuon osalta, mikäli päätät joskus nimetä elementin uudelleen. Nopeudesta en tuossa mene sanomaan mitään varmaa, mutta voisin taas veikata nopeammaksi. DOM-puusta hakeminen on yleisellä tasolla verrattain hidasta ja useasti käytetyt elementit kannattaisikin ottaa muistiin.
Toisaalta ID:n perusteella hakeminen lienee helppo optimoida nopeaksi ja veikkaisin näin jo tehdynkin.
Virhekonsolia harvemmin käytän, mutta on sinnekin pari kertaa tullut eksyttyä. Voisi sitäkin opetella käyttämään.
Aloin muuten miettimään, että onko tämä kaunis/toimiva (IE:llä ei ainakaan toimi!) tapa tehdä postikuorea muistuttava palautelomake, joka raahataan postilaatikkoon, kun viesti halutaan lähettää? Vai pitäisikö sen sijaan käyttää vain ihan tutuksi tullutta Lähetä-nappia? Vaikka näytetäänkin ohjeet kuinka viesti lähetetään, osaavatko kaikki ihmiset varmasti lähettää viestin tällä raahaamissysteemillä? Selaintuen vuoksi IE:lle voisi tehdä normaalibuttonin; muille selaimille tämän raahaamissysteemin.
Kuva käytännössä:
https://twitter.com/#!/PetjaTouru/status/
Ainakin kannattaa tarkistaa selaimessa toimivat kehitystyökalut kuntoon. Monessa tilanteessa niistä saa huomattavasti etua verrattuna basic-tason print-debuggaukseen tai vastaavaan.
Lataa esim firebug tai dragonfly riippuen selaimesta. Myös muissa selaimissa taitaa olla kehitystyökalut (tarkoittaa js concolea, js debuggeria, DOM-inspectoria, jne..). Taitaapa jopa IE:n saada nykyisin toimivat työkalut.
Mutta tuosta postilaatikkoon raahauksesta omat kommentit on että aivan turhaa kikkailua. Käyttäjälle on paljon helpompi painaa kerran hiirtä kuin alkaa askartelemaan ja vetelemään. Voiko tuota käyttää edes ilman hiirtä? Mutta tämähän on maku/käytettävyys/mielipideasioita.
Firebug ollut käytössä jo vuoden ellei kohta piakkoin toisenkin.
Kosketusnäytöllä pitäisi kyllä wörkkiä, mutta jos ei ole hiirtä eikä kosketusnäyttöä, sitten on kyllä hieman hankalampi toimia. Sivuille pitäisi kuitenkin saada jotain toiminnallisuutta, siten että vastaisivat vaatimuksia. Jos tämän raahaamissysteemin ottaisi pois, mitä hienoa sen tilalle pystyisi oikein kehittelemään?
Petja kirjoitti:
Firebug ollut käytössä jo vuoden ellei kohta piakkoin toisenkin.
Miten sitten debuggasit tuota alkuperäistä ongelmaa käyttäen firebugia ennen kuin postasit tänne? Laitoit breaklinen if($("#postiviesti").offset.left>256){ -riville, ja kun katsoit että $("#postiviesti").offset.left arvo on "undefined", nostit kädet pystyyn?
Ei se auta jos se on "käytössä", jos sitä ei käytä.
Lisää osoitteen alle lähetysnappi, kyllä siinä voi kaksikin tapaa olla.
Petja kirjoitti:
Sivuille pitäisi kuitenkin saada jotain toiminnallisuutta
Petja kirjoitti:
Jos tämän raahaamissysteemin ottaisi pois, mitä hienoa sen tilalle pystyisi oikein kehittelemään?
Siis tälläiset keinotekoiset asiat eivät ole tai lisää sivujen toiminnalisuutta. Toiminnallisuus tuossa on se että käyttäjä voi lähettää palautetta. Se, että miten käyttäjä sen joutuu tekemään, ei ole lisätoiminnallisuutta vaan käytettävyyttä.
Ainakin itse ymmärrä asian näin.
The Alchemist kirjoitti:
Toisaalta ID:n perusteella hakeminen lienee helppo optimoida nopeaksi ja veikkaisin näin jo tehdynkin.
ID:llä hakeminen on totta kyllä nopeaa (= getElementById), mutta en ainakaan nopealla haulla löytänyt viitteitä, että jQuery käyttäisi varsinaista cachea. Tässä Stack Overflow:n keskustelussa mainitaan, että selectoreiden cachetukseen olisi mahdollista käyttää DOM-eventtejä, mutta kirjastojen tapauksessa tämä vaatisi ko. eventtien toteutuksen vanhemmille selaimille. Vaikka ko. eventeista löytyisikin toteutuket, veikkaisin niiden käytön syövän cachen edut.
Jos tekee yhtään suurempia projekteja jQueryllä (pätenee osittain myös ihan XPath-hauille), kannattaa lukaista thegrubbsian - Optimizing jQuery Selector Performance ja jQuery: Performance analysis of selectors.
EDIT: Ja tosiaan kehityskonsoleita ja työkaluja löytyy nykyään lähes jokaiselle valtavirtaselaimelle. Firefoxille alunperin tehdystä Firebugista löytyy myös lite-versio, jota voi käyttää useissa selaimissa. Operassa, IE:ssä, Chromessa ja Safarissa kehitystyökalut tulevat selaimen mukana.
Aihe on jo aika vanha, joten et voi enää vastata siihen.