Jump to content

Keyboard-navigation problem

jlindblom

By jlindblom
in JavaScript

 Share

Recommended Posts

jlindblom Newbie

jlindblom

Posted
Posted (edited)

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

Edited by jlindblom
Link to comment
Share on other sites
dzhax Member

dzhax

Posted
Posted (edited)

EDIT: I understand now so when you press the down arrow you want it to scroll until the top of the next div is the top of the page correct? This is sample code I used in a previous project for scrolling. 

<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script type="text/javascript">     function goToByScroll(id){          $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');     }</script></head> <body>     <div id="home" style="padding:10px; background:gray; color:black;">          <a onclick="javascript:goToByScroll('home');">Home</a><br/>          <a onclick="javascript:goToByScroll('1');">1</a><br/>          <a onclick="javascript:goToByScroll('2');">2</a><br/>          <a onclick="javascript:goToByScroll('3');">3</a><br/>     </div>     <div id="1" style="padding:10px; background:silver; height:800px; vertical-align: top; display:block; color:black;">          1     </div>     <div id="2" style="padding:10px; background:lime; height:800px; vertical-align: top; display:block; color:black;">          2     </div>     <div id="3" style="padding:10px; background:yellow; height:800px; vertical-align: top; display:block; color:black;">          3     </div></body></html>

Edited by dzhax
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You need to add an event listener to the document that will listen for keystrokes. I heard safari only accepts keyboard input when a form input is selected, but I'm not sure. For other browsers:

document.body.onkeyup = function() {	// Check which key was pressed and call the right function for it}

More information about keyboard events here: http://www.quirksmod...erties.html#key Your program might be a little more complicated. You probably need to keep a reference to the element you're currently looking at in a variable, and use the DOM to navigate to the next or previous siblings. It's not something I could do in 5 minutes, I'd need a little longer to figure out the whole thing.

Link to comment
Share on other sites
dzhax Member

dzhax

Posted
Posted

i got it. its choppy but you can space it as needed

<!DOCTYPE html><html><head>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <title></title>   <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>  <style type="text/css">   body{  margin: 0 0 0 0;}  </style><script type='text/javascript'>//<![CDATA[$(document).ready(function(){$('.keyboardscroll').css('height', document.height);$('.keyboardscroll').css('width', document.width);});$(document).resize(function(){$('.keyboardscroll').css('height', document.height);$('.keyboardscroll').css('width', document.width);});$(window).load(function(){$(function() {    var boxLefts = [];    $('.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;	    }			    console.log(this);	    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);		    }	    }    });});});//]]> </script></head><body>  <div id="wrapper">    <section class="keyboardscroll" style="background:red">Start</section>    <section class="keyboardscroll" style="background:blue">Middle</section>    <section class="keyboardscroll" style="background:lime">Bottom</section></div></body></html>

Link to comment
Share on other sites
jlindblom Newbie

jlindblom

Posted
  • Author
Posted

Hello! Thanks dzhax! Really thankful for your kind help! One problem left! When resizing the window, the sections height/widht doesn't "update" as it did in this script; 

$(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();});

Is is possible to fix?

Link to comment
Share on other sites
dzhax Member

dzhax

Posted
Posted 
$(document).resize(function(){     $('.keyboardscroll').css('height', document.height);     $('.keyboardscroll').css('width', document.width);});

This should be re-sizing the elements when the browser is being re-sized.You used the above code I posted right?

Link to comment
Share on other sites
dzhax Member

dzhax

Posted
Posted

hmm your right... change the above mention code to this:

$(window).resize(function(){     $('.keyboardscroll').css('height', document.height);     $('.keyboardscroll').css('width', document.width);});

not sure why it wasn't being called properly when re-sizing but checking the window rather than the document seems to work.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I'm not sure why you're changing the width with Javascript when you can just use CSS to set the widths on those elements to 100%. They will resize automatically, you don't need Javascript for that. In the resize function, you should be setting the heights to $(window).height(); which gives the height of the viewport. You don't want to set the height to the height of the document (all 3 elements - 3x the window height).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...