Great! And thanks. I think that's a good way of dealing with keydown/keyup I hadn't thought of that. I did notice how holding down the key with keydown caused it to repeat, sometimes a lot. The alternative is to set and unset a flag. On keydown set the flag, if the flag is true, subsequent actions are not carried out. On keyup the flag is set to false. So you still need keyup. Not sure if that's an improvement or not. The less code and flags needed, generally the better. I always thought keydown was the way to go for anything like this, but that's leftover from years ago, before I ever started working with jQuery, something someone I respected said in these forums. It might have been more applicable then and/or to the specific situation then than it is with this code*.
BTW, the jump to number thing will still work without javascript, but of course not the arrow keys.
And, just looking at it again, I left an extra variable in there that's not used and you of course copied it:
Code:
<script>
jQuery(function($){
var $steps = $("#steplist2 li a").removeClass("CurrentSelection").click(function(e){
$steps.removeClass("CurrentSelection");
$(this).addClass("CurrentSelection");
var $targ = $(this.hash);
$('.activemap').removeClass('activemap');
$targ.addClass('activemap');
$('html, body').animate({scrollTop: $targ.offset().top}, 'slow');
e.preventDefault();
}), $current, total = $steps.length, curindex, newindex, action;
$(document.documentElement).keyup(function (event) {
curindex = $('.CurrentSelection').length === 1? $('.CurrentSelection').parent().index() : null;
action = event.keyCode - 38;
if (Math.abs(action) === 1) {
if(curindex === null){curindex = -action;}
newindex = (curindex + action + total) % total;
$steps.eq(newindex).click();
event.preventDefault();
}
});
$(window).load(function(){setTimeout(function(){$('html, body').scrollTop(0);}, 0);});
});
window.onunload = function(){};
</script>
The highlighted can be removed. It doesn't really hurt anything though. I had been using it in an earlier version of the code.
*I remember why keydown is preferable. If you need to cancel the default action, you have to use keydown. If the page were to have a horizontal scrollbar, the arrow keys would still move it left and right with keyup. And your code is more responsive with keydown, rather than waiting for keyup. So it's worth doing the flag thing to prevent repeats and to 'listen' for both events.
This seems to work:
Code:
<script>
jQuery(function($){
var $steps = $("#steplist2 li a").removeClass("CurrentSelection").click(function(e){
$steps.removeClass("CurrentSelection");
$(this).addClass("CurrentSelection");
var $targ = $(this.hash);
$('.activemap').removeClass('activemap');
$targ.addClass('activemap');
$('html, body').animate({scrollTop: $targ.offset().top}, 'slow');
e.preventDefault();
}), total = $steps.length, curindex, $current, newindex, action, flag;
$(document.documentElement).bind('keydown keyup', function (event) {
if(event.type === 'keyup'){flag = false; return;}
action = event.keyCode - 38;
if (Math.abs(action) === 1) {
if(flag){event.preventDefault(); return;}
flag = true;
$current = $('.CurrentSelection');
curindex = $current.length === 1? $current.parent().index() : -action;
newindex = (curindex + action + total) % total;
$steps.eq(newindex).click();
event.preventDefault();
}
});
$(window).load(function(){setTimeout(function(){$('html, body').scrollTop(0);}, 0);});
});
</script>
JQuery .click mouse event not working, .hide effect does.
Reply With Quote
Bookmarks