views:

25

answers:

2

Hi

I would like use Jquery to add keyboard navigation to a Jquery slider. I am trying to use the left and right keys to trigger the previous and next buttons I already have but i can't get it to work. Can anyone see from my code where I am going wrong?

<script type="text/javascript">


$(function() {
    $("div#controller").jFlow({
        slides: "#slides",
        width: "980px",
        height: "313px"
});


$(document.documentElement).keyup(function (event) { var direction = null;

if (event.keyCode == 37) { $('#prevNext.jFlowPrev').click(); }

if (event.keyCode == 39) { $('#prevNext.jFlowNext').click(); }

}); 
}); 

</script>

<body>
<div id="wrap">

<div id="controller" class="hidden">
    <span class="jFlowControl">No 1</span>
    <span class="jFlowControl">No 2</span>
    <span class="jFlowControl">No 3</span>
</div>


<div id="slides">
    <div class="current">Hello</div>
    <div>Hello</div>
    <div>Hello</div>

</div> 


<div id="prevNext">
    <button class="jFlowPrev">previous</button>
    <button class="jFlowNext">next</button>
</div>

Thanks

A: 

I don't know if this is the answer, but I've always simply used...

$(document).keyup(function(event) {
    alert(event.keyCode);
});

That is, with just document as the selector.

Does that code pop up with character codes everyone you keyup?

alex
+1  A: 

You don't have space between #prevNext and .jFlowPrev change this

$('#prevNext.jFlowPrev').click()

to this

$('#prevNext .jFlowPrev').click()
jcubic