+ MENY

ontouchstart – 300ms snabbare jQuery klick

2013 Jan 20
5

Nuförtiden så känns det allt viktigare att redan från början bygga sin sajt med ett responsivt tänk. Själv försöker jag att göra de nya sajter jag bygger responsiva och någorlunda väl anpassade för olika mobiler och plattor.

Ofta så blir det då att jag bygger viss funktionalitet med olika Jquery skript där klick kopplas till någon funktion som visar exempelvis en meny eller ett innehåll. Vanligtvis har jag alltid byggt detta med någon ”click” funktion men har alltid stört mig på att det blir lite (300ms) långsammare respons på själva klicket i en touch baserad apparat, t.ex. en mobil.

En enkel och smidig lösning för användaren

Nu finns det faktiskt en mycket enkel lösning på det här problemet som jag tror kan vara bra att känna till för webbutvecklaren. Förvisso är det just bara 300ms men känslan när något reagerar snabbt tycker i alla fall jag gör ganska mycket för användarupplevelsen.

Tanken är att istället redan från början, när html dokumentet laddas in, bestämma sig för att binda (jQuery.bind) klicken till antingen ‘click’ funktionen eller till en ‘touchstart’ funktion. Själva koden ser ut så här:

if ("ontouchstart" in document.documentElement)
{
    var browserEvent = "touchstart";
}
else
{
    var browserEvent = "click";
}

$("div").bind(browserEvent, function (e) 
{
    //gör lite grejer tex:
    $(this).slideDown();
});

Demo

För dig som vill testa på känslan i detta så har jag två divtaggar nedan, för att du skall se skillnaden måste du surfa med en touch känslig apparat. I en vanlig webbläsare på datorn kommer du inte att märka någon skillnad.

KLICKA PÅ MIG JAG ÄR ANPASSAD FÖR MOBIL
KLICKA PÅ MIG JAG ÄR EJ ANPASSAD FÖR MOBIL

Det som vi gör här ovan är alltså att redan när html dokumentet laddas så kollar vi av om det finns stöd för touchevents och väljer då att lyssna på dessa istället för klick (musklick). Förhoppningsvis kommer då hemsidan att kännas snabbare och kvickare i sin respons på mobiler och plattor.

Om Simon Rybrand
Jag som driver den här bloggen heter Simon Rybrand. Här skriver jag om entreprenörskap, internetmarknadsföring och webbdesign.Jag driver framförallt sajten MatematikVideo.se där målet är att hjälpa så många som möjligt att lyckas med sina kurser i matematik.

Version 1.3.3 of websimon tables is released

2013 Jan 2
55

Today, 2013-01-02, I´ve released a new version of the plugin websimon tables.. The version number is 1.3.3 and you can download it from the wordpress repository. New features, beta import/export and minor bugfixes In this version I´ve made some structure changes to the plugin and added some new features: There […]

Återupptar lite affiliateprojekt

2012 Dec 19
2

Hela den här hösten har jag inte haft så mycket tid att förbättra mina affiliateprojekt. Det här beror på att jag har fokuserat på andra saker som att fördjupa mig inom konverteringsoptimering, javascript (framförallt node.se) göra nya mattekurser till matematikvideo och inte minst starta två stycken nya aktiebolag. Feeds och […]

Node.js – Javascript på servern

2012 Nov 12
5

Den senaste tiden har jag läst allt mer om node.js när jag har surfat runt på diverse olika sajter skrivna av utvecklare. Till slut blev nyfikenheten för stor och jag bestämde mig för att testa på detta själv. Jag har ju tidigare utvecklat en del i javascript och framförallt jQuery […]

Fokus fokus fokus

2012 Sep 17
4

För tillfället har jag liten eller inget tid till att bolla med flera projekt på en gång. Höstterminen har verkligen dragit igång och jag har fullt upp med att hålla ordning på alla processer på MatematikVideo där vi bland annat har släppt en ny kurs till Matte 3 och jobbar […]

Några saker som jag jobbar med

2012 Aug 13
0

Just nu sitter jag och försöker få igång livsenergin igen sedan en rätt kul helg som jag spenderat på Way Out West festivalen här i Göteborg. Det är lite svårt att komma igång igen efter en kul helg. Tänkte därför mjukstarta lite med ett blogginlägg om några saker som jag […]

Att strukturera ensamarbete mer effektivt

2012 Aug 1
5

Alla som jobbar framför datorn, har eget företag, och satsar på utveckling vill väl vara så effektiva som möjligt. Men det är förstås inte helt lätt alla gånger att i racerfart producera allt det där som du säkerligen skulle önska att du kan producera. Här vill jag dela med mig […]

Responsiv webbdesign

2012 Jun 30
0

Jag håller på att bygga om den här bloggen så att den får sig ett eget wordpress tema. Målet med det här temat är att det skall stödja så kallad responsiv webbdesign där de olika elementen på hemsidan och deras storlek och positionering anpassar sig efter om det är en […]

Ursäkta röran, bygger om

2012 Jun 20
0

Håller just nu på att bygga om min blogg och byter för tillfället tema från Thesis som jag kört på ganska länge till ett egenutvecklat tema. Så det är lite rörigt för tillfället här på bloggen mycket beroende på att Thesis innehåller väldigt mycket temaspecifika egenskaper, något som kanske egentligen […]