Here is what I have, but the key event do not work?
<html>
<head>
<style>
.section {
border:1px solid silver;
background:#EEE;
margin:-5px;
}
.highlight {
border: 1px solid red;
background: #FFCC99;
}
</style>
<script>
$(function(){
// selected Item function
var selectedItem = null;
var setSelectedItem = function(item) {
selectedItem = item;
if (selectedItem === null){
return;
}
if (selectedItem < 0) {
selectedItem = 0;
}
if (selectedItem >= $('ul .switcher').find('li').length){
selectedItem = $('ul .switcher').find('li').length - 1;
}
$(' ul .switcher').find('li').removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
// key events up/down
$('ul .switcher li').keyup(function(event) {
if (event.keyCode == 38 && selectedItem !== null){
//user pressed up arrow
setSelectedItem(selectedItem - 1);
alert('up');
}
else if (event.keyCode == 40 && selectedItem !== null){
//user pressed up arrow
setSelectedItem(selectedItem + 1);
}
else if (event.keyCode == 27 && selectedItem !== null){
//user pressed esc key
setSelectedItem(null);
}
});
$('.switcher li').click(function() {
$('.switcher .section').removeClass('highlight');
$(this).addClass('highlight');
setSelectedItem($(this).length);
alert($(this).length);
});
});
</script>
</head>
<body>
<ul class="switcher">
<li class="section highlight" style="z-index:1"> Stuff </li>
<li class="section" style="z-index:2"> Stuff2 </li>
<li class="section" style="z-index:3"> Stuff3 </li>
<li class="section" style="z-index:4"> Stuff4 </li>
<li class="section" style="z-index:5"> Stuff5 </li>
</ul>
</body>
</html>
On Feb 16, 6:48 am, yabado <[EMAIL PROTECTED]> wrote:
> Can someone suggest a way to add some keycode events to this?
>
> up-arrow and down-arrow actions?
>
> On Feb 16, 6:31 am, yabado <[EMAIL PROTECTED]> wrote:
>
> > Michael,
>
> > I had to change some things but this works...
>
> > <script>
> > $(function(){
>
> > $('#switcher .section').click(function() {
> > $('#switcher .section').removeClass('highlight');
> > $(this).addClass('highlight');
>
> > });
> > });
>
> > </script>
>
> > On Feb 15, 8:46 am, Michael Price <[EMAIL PROTECTED]> wrote:
>
> > > yabadowrote:
> > > > <div id="section" class="section1"> Stuff </div>
> > > > <div id="section" class="section2"> Stuff </div>
> > > > <div id="section" class="section3"> Stuff </div>
> > > > <div id="section" class="section4"> Stuff </div>
> > > > <div id="section" class="section5"> Stuff </div>
>
> > > If this isn't pseudo-code then you've got your IDs and classes the wrong
> > > way round here, I think.......
>
> > > Anyway, the way I usually do it (and someone will be along shortly with
> > > a better method, I don't doubt, but it works for me) is have the CSS for
> > > the highlight in a new class. Then on click I REMOVE this class from all
> > > of them, then I ADD the class to the clicked DIV. Code for basic idea
> > > follows:
>
> > > $(".section").click(function() {
> > > $(".section").removeClass(".highlight");
> > > $(this).addClass(".highlight");
>
> > > }
>
> > > jQuery being what it is, there's bound to be a way of doing
> > > this in one line, though :)
>
> > > Regards,
> > > Michael Price
