Mit Tastatur Link erreichen?

[C64]

Hallo zusammen,

blöde Überschrift, evtl. einfaches Problem:

Diese Seite habe ich aktuell in erstellt.
So weit so gut. Die Navigation habe ich mit den Skripten jquery + scrollTo, localscroll und serialScroll erstellt. Das funktioniert auch alles einwandfrei. Nun würde ich aber gerne die Funktion hinzufügen, dass, wenn man auf die Pfeiltasten der Tastatur links und rechts drückt, ich zum nächsten oder zum vorherigen Menüpunkt komme. Es müsste also das selbe ausgelöst werden, wie wenn ich auf einen der beiden Pfeile klicke.

Wie kann ich das einfach und schnell bewerkstelligen?

Danke

Edit: Das wichtige Skript ist das folgende... da müsste ich dann vermutlich irgendwo noch den Befehl einfügen, dass das Skript auch auf die beiden Tasten reagiert:

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});

// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="css/images/overlay.png" />')
.after('<img class="scrollButtons right" src="css/images/overlay.png" />');

// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}

if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;


var scrollOptions = {
target: $scroll, // the element that has the overflow

// can be a selector which will be relative to the target
items: $panels,

navigation: '.navigation a',

// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',

// allow the scroll effect to run both directions
axis: 'xy',

onAfter: trigger, // our final callback

offset: offset,

// duration of the sliding effect
duration: 500,

// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'easeOutQuint'
};

// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

 

[torben1]

Hallo,

Pfeiltasten kannst Du so abfangen:
JS

[COLOR=#003366][B]function[/B][/COLOR] nav[COLOR=#66cc66](param[/COLOR][COLOR=#66cc66])[/COLOR]
[COLOR=#66cc66]{[/COLOR]
    [COLOR=#000066][B]if[/B][/COLOR][COLOR=#66cc66](param[/COLOR].[COLOR=#006600]keyCode[/COLOR] == [COLOR=#cc0000]37[/COLOR][COLOR=#66cc66])[/COLOR]
    [COLOR=#66cc66]{[/COLOR]
     befehl für taste links;
    [COLOR=#66cc66]}[/COLOR]

    [COLOR=#000066][B]if[/B][/COLOR][COLOR=#66cc66](param[/COLOR].[COLOR=#006600]keyCode[/COLOR] == [COLOR=#cc0000]39[/COLOR][COLOR=#66cc66])[/COLOR]
    [COLOR=#66cc66]{[/COLOR]
        befehl für taste rechts:
    [COLOR=#66cc66]}[/COLOR]
[COLOR=#66cc66]}[/COLOR]

HTML

<body onKeyDown=[COLOR=#3366cc]"nav(param);"[/COLOR]>

Ist zwar schon was her, aber ich erinnere mich dunkel.

Torben

 

[C64]

Danke ich werde mal sehen, ob ich das irgendwie reinbauen kann

 

[Bajuware]

Es gibt für jQuery ein Plugin für Mausrad/Keyboard Befehle, wär wohl die einfachste und sinnvollste Sache, dann kannst du das ganze gleich im Script anpassen.

 

[C64]

Super, dann werde ich vielleicht sogar gleich das verwenden - aktuell arbeite ich noch an anderen Baustellen

 

[Bajuware]

http://rikrikrik.com/jquery/shortkeys/ zum Bleistift