tags:

views:

165

answers:

0

Problem: I'm using a jQuery menu script that has built-in keyboard controls (left, right, up and down specifically). I want to replicate the same functionality as, say, the up keypress when a user clicks on an image. (This is the iPod jQuery drill-down menu found here http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/)

Here's the original code, where I want to simply execute the same functionality as 'case 38'

// assign key events
 $(document).keydown(function(event){
 var e;
 if (event.which !="") { e = event.which; }
 else if (event.charCode != "") { e = event.charCode; }
 else if (event.keyCode != "") { e = event.keyCode; }

 var menuType = ($(event.target).parents('div').is('.fg-menu-flyout')) ? 'flyout' : 'ipod' ;

 switch(e) {
 case 37: // left arrow 
 if (menuType == 'flyout') {
 $(event.target).trigger('mouseout');
 if ($('.'+options.flyOutOnState).size() > 0) { $('.'+options.flyOutOnState).trigger('mouseover'); };
 };

 if (menuType == 'ipod') {
 $(event.target).trigger('mouseout');
 if ($('.fg-menu-footer').find('a').size() > 0) { $('.fg-menu-footer').find('a').trigger('click'); };
 if ($('.fg-menu-header').find('a').size() > 0) { $('.fg-menu-current-crumb').prev().find('a').trigger('click'); };
 if ($('.fg-menu-current').prev().is('.fg-menu-indicator')) {
 $('.fg-menu-current').prev().trigger('mouseover'); 
 }; 
 };
 return false;
 break;

 case 38: // up arrow 
 if ($(event.target).is('.' + options.linkHover)) { 
 var prevLink = $(event.target).parent().prev().find('a:eq(0)'); 
 if (prevLink.size() > 0) {
 $(event.target).trigger('mouseout');
 prevLink.trigger('mouseover');
 }; 
 }
 else { container.find('a:eq(0)').trigger('mouseover'); }
 return false;
 break;

Attempted Solution(s): I created an image with an associated click function that registers the click and then triggers the original keydown function. Except this time I've changed the event.charCode, keyCode, and .which to mimic the up button. This obviously isn't enough information for jQuery to know what to do but I don't understand enough about '$(event.target)' to figure out the missing information. (I don't know, for example, what info the right button could be passing to the keydown function that tells it where to go in the menu).

I feel like I'm missing something fundamental here. I've sunk two weekends into this and am no further. If anyone has any suggestions, please let me know!

Thanks for your time!!