Keyboard-navigation problem
Hello! Hope you're fine! First I will excuse for my bad english. Have some problem with a keyboard-scroll-script. I don't know what I'm doing wrong. I want it to work like
this (link1), press "UP" and "DOWN"-arrows to test. But right now it doesn't work
here (link2). I have made a script who set the height and width to 100% of the screen. Then I have a script which will listen for keyboard-press of "UP" and "DOWN" key, and then scroll from section, to section (class: keyboardscroll). But it doesn't work on the second link (link2). Someone who know why? Or can help me fix this working? If I forgot to explain something, please tell me!
Thanks for all kind of help!
Script for resizing to 100% sections:
- $(document).ready(function() {
- $(window).resize(function() {
- Resize();
- });
- var Resize = function() {
- var windowHeight = $(window).height(),
- windowWidth = $(window).width();
-
- $("section").css("width", windowWidth);
- $("section").css("height", windowHeight);
- }
- $(window).resize(function() {
- Resize();
- });
- setTimeout(Resize, 20);
- Scrolling();
- });
Script for keyboard-scroll:
- $(window).load(function(){
- $(function() {
- var boxLefts = [];
- $('div.keyboardscroll').each(function(i, el){
- boxLefts.push(this.offsetTop);
- });
-
- $(document).keydown(function(e) {
- var dir = false,
- targetTop = -1;
-
- switch (e.keyCode) {
- case 38:
- dir = -1;
- break;
- case 40:
- dir = 1;
- break;
- default:
- break;
- }
- if (dir) {
- e.preventDefault();
- winDown = window.scrollY;
- $.each(boxLefts, function(i, v){
- if ((dir == 1 && winDown < v && targetTop < 0) ||
- (dir == -1 && winDown > v)) {
- targetTop = v;
- }
- });
- if (targetTop >= 0) {
- $('html, body').animate({scrollTop: targetTop}, 200);
- }
- }
- });
- });
- });
Have a nice day!
Sincerly,
J