jlindblom Posted April 4, 2013 Share Posted April 4, 2013 (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 April 4, 2013 by jlindblom Link to comment Share on other sites More sharing options...
dzhax Posted April 4, 2013 Share Posted April 4, 2013 (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 April 4, 2013 by dzhax Link to comment Share on other sites More sharing options...
jlindblom Posted April 5, 2013 Author Share Posted April 5, 2013 Thanks for your answer dzhax. Yes, exactly. When pressing arrow key, I want it to scroll to next top of div. Your script works fine. The question is how to "translate" it to keyboard-arrows. Do you know anyway? Thanks again! Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2013 Share Posted April 5, 2013 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 More sharing options...
dzhax Posted April 5, 2013 Share Posted April 5, 2013 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 More sharing options...
jlindblom Posted April 8, 2013 Author Share Posted April 8, 2013 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 More sharing options...
dzhax Posted April 12, 2013 Share Posted April 12, 2013 $(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 More sharing options...
jlindblom Posted April 12, 2013 Author Share Posted April 12, 2013 Yes, I did. It looks like this now, perfect! Until resizing the window, then the sections doesn't "update" to the window size. Link to comment Share on other sites More sharing options...
dzhax Posted April 12, 2013 Share Posted April 12, 2013 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 More sharing options...
jlindblom Posted April 12, 2013 Author Share Posted April 12, 2013 Hello! Thanks for your nice helping! Sorry to tell, but now when resizing the window, the scroll function stops working, and it bugs a little bit. It's not easy this! Have you any more ideas? Thanks! Link to comment Share on other sites More sharing options...
jlindblom Posted April 12, 2013 Author Share Posted April 12, 2013 https://dl.dropboxusercontent.com/u/101235437/100procent/index2.html Link to comment Share on other sites More sharing options...
dzhax Posted April 12, 2013 Share Posted April 12, 2013 Sorry man, I'm stumped on this one. Anyone else care to take a look? Link to comment Share on other sites More sharing options...
justsomeguy Posted April 12, 2013 Share Posted April 12, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now