Översätta klickfunktion till keydown-funktion? (jQuery)

Hej!

Jag har en behållare där flera divar slidas med 5 sekunders mellanrum. Jag har även en knapp som gör att man kan gå till nästa slide direkt. Nu vill jag låta besökaren göra detsamma med piltangent höger. Jag har fått till det hyfsat, men problemet är att den automatiska slidningen inte längre är 5 sekunder utan typ 2 av någon märklig anledning och till synes lite random.

Här är min funktion som byter slide vid knapptryck:

$(".next",$t).click(function(){
  [B]if(active===false) {
    animate("next",true);
    if(o.autoStart){
      if (o.restart) {autoStart();}
      else {clearInterval(sliderIntervalID);}
    }
  } return false;[/B]
});

Och här är min hembyggda funktion som byter vid pil höger:

$(document).keydown(function(e){
if (e.keyCode == 39) {
  [B]if(active===false) {
    animate("next",true);
    if(o.autoStart){
      if (o.restart) {autoStart();}
      else {clearInterval(sliderIntervalID);}
    }
  } return false;[/B]
}
});

Som ni ser är det fetmarkerade kopierat rakt av från klickfunktionen så jag förstår inte vad som gör att den börjar bete sig märkligt med kortare intervaller mellan bytena. Räcker dessa korta kodsnuttar för att lösa det eller behöver jag posta mer? Variabeln $t sätts lite högre upp och innehåller detta:

var $t = $(this);

Tror ni att jag måste få med den i min keydownfunktion?

Tack för svar!

edit/ Jag testade precis att ta bort $t från klickfunktionen och då fick jag samma beteende så det är $t som måste in i min keyfunktion! :D Det kan ju inte vara så svårt... Detta funkade dock inte:

$(document, $t).keydown(function(e){

Förslag? :) Tack igen!

Varför inte lägga scriptets funktion i en function (metod), och.sen peka båda eventhandlers på samma funktion?

Gildebrand skrev:

Varför inte lägga scriptets funktion i en function (metod), och.sen peka båda eventhandlers på samma funktion?

Hehe, för att jag inte vet hur. Vet du?

Tack :)

Vad betyder $t i följande?

var $t = $(this);
$(".next",$t).click(function(){

Jag förstår att det som kommer efter detta är vad som ska hända när man klickar på länken som har klassen .next, men vad innebär det att skicka med variabeln $t? Det verkar vara den som är nyckeln till mitt problem :)

Och i bästa fall. Hur får jag med denna $t-variabel i key-eventet i stället?
$(document).keydown(function(e){

Att man har både klick och key i samma funktion förstår jag är mer rätt, men jag vet inte hur man gör och vill bara få det att funka så det gör mig inget om det är upprepningar :)

Tack!

$t är en referens till this (fast som ett jquery objekt).
och $(".next", $t) innebär att den letar efter .next inne i $t
$(".next") är samma sak som $(".next", document)

som svar på andra punkten, du få inte in $t där, då document inte är en child nod av $t. Hur ser resten av Javascript koden ut och även HTML koden, för det är kanske så att du inte behöver köra efter .next alls utan leta upp den synliga .next (.next:visible) och triggar dess click event.

voigtann1 skrev:

$t är en referens till this (fast som ett jquery objekt).
och $(".next", $t) innebär att den letar efter .next inne i $t
$(".next") är samma sak som $(".next", document)

som svar på andra punkten, du få inte in $t där, då document inte är en child nod av $t. Hur ser resten av Javascript koden ut och även HTML koden, för det är kanske så att du inte behöver köra efter .next alls utan leta upp den synliga .next (.next:visible) och triggar dess click event.

Hehe, jag har nog beslutat mig för att ersätta klickfunktionen med tangentfuntionen så då har jag inte längre någon synlig .next att leta efter. Hm. Jag kan posta mer kod ikväll. Är ute på vift.

Tack!

Eller vänta. Kolla här i stället. Det är det jag använder. Hur får jag in så att tangentpil höger och vänster triggar samma funktioner som höger/vänster-länkknapparna i demon:
http://blog.cameronbaney.com/tutorials/iphone-like-slider/demo.html

Tack igen!

på demo sidan så kör jag:

$(document).keydown(function(e){
	if(e.keyCode===39) { // Right key button
		$(".next").click(); //Find .next element and trigger its click event
	} else if(e.keyCode===37) { //Left key button
		$(".previous").click(); //Find .previouselement and trigger its click event
	}
})

and seems to work. Så behåll alla funktioner du redan har och bygg ut det bara.

Allright tack, ska testa ikväll!

Funkar det även om jag tar bort next/prev-länkarna från html-sidan?
Tänkte som sagt skippa dem.

Jag har ju fått det att funka med min tidigare kod, men det var den där variabeln som saknades. Med din kod verkar jag få med den, men som sagt, måste jag lägga ut prev/next-knapparna för att .click ska hittas?

ta inte bort dom, dölj dom, då eventen är bunda på dessa element (orkar inte kolla igenom plugine:et) men du tjänar inget på att plocka bort dom tycker jag. Jag ser hellre att du behåller koden som den är och bygg ut den istället.

Ok, jag kör på det, tack!

En sista liten sak. Du behöver inte skriva någon kod, men pusha mig gärna i rätt riktning. Jag vill använda exakt samma script fast få slidsen att gå över hela skärmen i stället. Ska jag då försöka räkna ut sidbredden och se till att alla slides är så breda och att värdet ändras beroende på fönsterbredd?

Jag vill dock att innehållet i slidsen har samma bredd som nu, bara det att det ska komma in och ut från fönsterkanterna i stället.

Finns det någon getWindowWidth som jag kan sätta på slides-divarna och som uppdateras iom breddändringar av fönstret?
Finns det kanske ett ännu bättre/enklare sätt än det jag beskriver? Width 100% funkar väl inte eftersom alla slides ligger på en rad. Att det inte blir fast bredd längre gör mig vilse :)

Tack igen!

Du behöver nog i så fall ha en event listner på window resize,

med bredden kan jag tipsar om: window, http://api.jquery.com/innerHeight/ och innerWidth så borde du kunna lista ut resten ;)