PDA

View Full Version : Keybind for mousewheel to arrow keys



jundo12
10-03-2014, 07:16 PM
Not sure what category this fits in, but i'd like to make it so the mousewheel is represented on my webpage (it's not on the internet atm) by the up and down arrow keys instead. this could get a little snarky though, as i have a mousewheel zoom script on the page for zooming into a very large image, that i want to transfer use of, from the mousewheel to the up and down arrow keys on the keyboard. in other words, as long as i'm pressing the up arrow or the down arrow, the image zooms in or out, smoothly, without clicks. since i can't show you the code as it isn't on the net yet, i was wondering if there is a standard script for making mousewheel events happen with the up and down arrow keys on the keyboard instead of the mousewheel? and if the fact the mousewheel controls are themselves being called to a different purpose (zooming into an image) than default scrolling, if it's possible to reference an already in specialized use item like that, and transfer its ability to the keyboard up and down arrows.

i know, it's a mess lol but the mousewheel zoom script is smooth like silk. all the other zoom methods seem choppy and laborious, as you would be constantly clicking to zoom, and i'd need smoooooth scrolling into the image. what's unique about this zoom script is that it keeps the image centered so zooming doesn't result, in your browser window looking at the upper left hand corner of the image, instead of the middle.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.iviewer test</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="jquery.iviewer.js" ></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 100); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.jpg"
});

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image.jpg");
return false;
});
});
</script>
<link rel="stylesheet" href="jquery.iviewer.css" />
<style>
.viewer
{
width: 115%;
height: 140%;
border: 1px solid black;
position: relative;
}

.wrapper
{
overflow: hidden;
}
</style>
</head>
<body bgcolor="#000000">



<h1></h1>
<!-- wrapper div is needed for opera because it shows scroll bars for reason -->


<div class="wrapper">
<span>
<a id="in" href="#"></a>
<a id="out" href="#"></a>
<a id="fit" href="#"></a>
<a id="orig" href="#"></a>
<a id="update" href="#"></a>
</span>
</div>
<br />

<div id="viewer2" class="viewer" style="position: absolute; left: 0%; top: 0%; right: 0%" ></div>
<br />
<p><a href="#" id="chimg"> </a></p>
</div>
</body>
</html>

jscheuer1
10-04-2014, 06:40 PM
If these work:


$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });

You can use them like so:


$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv1.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv1.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});

jundo12
10-05-2014, 12:51 AM
well there was, at one point, a + and - above the image to be zoomed AND
a + and - below the image to be zoomed. i removed the top ones but the bottom ones had already vanished, the moment i put the script on my page, and i assume these are the ones you're referring to? i have no idea why they didn't show up to begin with. i just removed the + and -, nothing else and the bottom ones were already invisible so removing the + and - for the zoom feature was irrelevant.

i put your script in. the arrow keys on the keyboard are supposed to control the zoom now, correct? when i press the up arrow on keyboard, nothing happens. what am i doing wrong?
you can see it in its page here: (warning big image, slow loading)
http://thelivingmoon.com/undomiel/game/index1a.html

jundo12
10-05-2014, 01:38 AM
p.s. the arrow keys do move the image left or right, up or down, in chrome, but not in ff, not to mention, i was hoping the up and down arrow keys could be used to do what the mousewheel is doing -- et.al, zooming into the image, and even in chrome, the arrow keys are not doing that. they are just moving the whole image around the screen, instead of zooming into it or out of it.

jscheuer1
10-05-2014, 01:46 AM
Probably some sort of conflict and/or syntax snafu. When I have more time, I will investigate.

jundo12
10-05-2014, 01:58 AM
Probably some sort of conflict and/or syntax snafu. When I have more time, I will investigate.

thanks so much.

jscheuer1
10-05-2014, 02:01 AM
OK, iv1 only exists within the scope of the document ready function where it was defined. And in addition, it appears that iv2 is the one you are actually using. It is also of the same limited scope. So, let's first get rid of this from your demo:


<script>
$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv1.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv1.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});

</script>


And add the highlighted to it as shown:


<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image2.png",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.png"
});

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image2.png");
return false;
});
$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv2.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv2.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});
});
</script>

The browser cache may need to be cleared, and/or the page reloaded to see changes.

Any questions or problems, just let me know.

jundo12
10-05-2014, 02:40 AM
Any questions or problems, just let me know.


<!DOCTYPE html>
<html>
<head>
<meta http-

equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Interface: Space</title>



<script type="text/javascript" src="jquery.js"

></script>
<script type="text/javascript"

src="jqueryui.js" ></script>
<script

type="text/javascript" src="jquery.mousewheel.min.js"

></script>
<script type="text/javascript"

src="jquery.iviewer.js" ></script>
<script

type="text/javascript">
var $ = jQuery;


$(document).ready(function(){
var iv1 =

$("#viewer").iviewer({
src:

"test_image2.png",
update_on_resize:

false,
zoom_animation: false,


mousewheel: false,


onMouseMove: function(ev, coords) { },


onStartDrag: function(ev, coords) { return false; }, //this

image will not be dragged
onDrag:

function(ev, coords) { }
});



$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });


$("#out").click(function(){ iv1.iviewer

('zoom_by', -1); });
$("#fit").click

(function(){ iv1.iviewer('fit'); });


$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer

('update_container_info'); });

var iv2 =

$("#viewer2").iviewer(
{


src: "test_image2.png"
});



$("#chimg").click(function()
{


iv2.iviewer('loadImage', "test_image2.png");


return false;
});
});


$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv2.iviewer('zoom_by',

1);;
break;
}
case 40: {//down arrow
iv2.iviewer('zoom_by',

-1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});
</script>



<link rel="stylesheet" href="jquery.iviewer.css" />


<style>
.viewer
{


width: 115%;
height: 140%;


border: 1px solid black;
position: relative;


}

.wrapper
{


overflow: hidden;
}
</style>




</head>
<body bgcolor="#000000">






<div id="test_image2"
onclick="location.href='hub.html';" style="cursor: pointer;">





<h1></h1>
<!-- wrapper div is needed for opera

because it shows scroll bars for reason -->


<div class="wrapper">
<span>


<a id="in" href="#"></a>
<a id="out"

href="#"></a>
<a id="fit" href="#"></a>


<a id="orig" href="#"></a>
<a

id="update" href="#"></a>
</span>
</div>


<br />

<div id="viewer2" class="viewer" style="position: absolute;

left: 0%; top: 0%; right: 0%" ></div>
<br />


<p><a href="#" id="chimg"> </a></p>
</div>






<div style="position: absolute; left: 95%; top: 85%; right:

13%">
<!-- Generated by AudioPlay Online Generator

(http://www.strangecube.com/audioplay/) --><div><object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/fl

ash/swflash.cab#version=10,0,0,0" width="30"

height="30"><PARAM NAME=movie

VALUE="http://www.strangecube.com/audioplay/online/audioplay.s

wf?

file=http://thelivingmoon.com/undomiel/interface/earth/hangar.

mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strang

ecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000

000&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM

NAME=wmode VALUE=transparent><embed

src="http://www.strangecube.com/audioplay/online/audioplay.swf

?

file=http://thelivingmoon.com/undomiel/interface/earth/hangar.

mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strang

ecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000

000&mode=playpause" quality=high wmode=transparent width="30"

height="30" align="" TYPE="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"></em

bed></object></div><!-- End of generated code -->

</div>


</body>
</html>

Well now ff moves the image with the arrow keys, but still doesn't zoom in with the up arrow key nor zoom out with the down arrow key. did i miss something ? there's the code

jscheuer1
10-05-2014, 02:52 AM
I see no change to the live demo.

jundo12
10-05-2014, 02:55 AM
oh one sec, will upload it.

jundo12
10-05-2014, 02:56 AM
k it's on the site.

jscheuer1
10-05-2014, 03:17 AM
I don't think you followed exactly what I said, or maybe I wasn't clear or made an error myself. In any case, change:


<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image2.png",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.png"
});

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image2.png");
return false;
});
});


$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv2.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv2.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});
</script>

to:


<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image2.png",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.png"
});

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image2.png");
return false;
});
$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv2.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv2.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});
});


</script>

So that the added code is within the scope where iv2 is defined.

jundo12
10-05-2014, 06:24 AM
do you think you could just repost the entire page with the correction in it? cause i'm having trouble getting it to show the image now and i think it must be that i'm missing some bit of the code.

jscheuer1
10-05-2014, 06:47 AM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interface: Space</title>


<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="jquery.iviewer.js" ></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image2.png",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.png"
});

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image2.png");
return false;
});
$(document).keydown(function(e){
switch(e.keyCode){
case 38: {//up arrow
iv2.iviewer('zoom_by', 1);;
break;
}
case 40: {//down arrow
iv2.iviewer('zoom_by', -1);;
break;
}
default: {
return;
}
}
e.preventDefault();
});
});
</script>



<link rel="stylesheet" href="jquery.iviewer.css" />
<style>
.viewer
{
width: 115%;
height: 140%;
border: 1px solid black;
position: relative;
}

.wrapper
{
overflow: hidden;
}
</style>




</head>
<body bgcolor="#000000">






<div id="test_image2"
onclick="location.href='hub.html';" style="cursor: pointer;">





<h1></h1>
<!-- wrapper div is needed for opera because it shows scroll bars for reason -->


<div class="wrapper">
<span>
<a id="in" href="#"></a>
<a id="out" href="#"></a>
<a id="fit" href="#"></a>
<a id="orig" href="#"></a>
<a id="update" href="#"></a>
</span>
</div>
<br />

<div id="viewer2" class="viewer" style="position: absolute; left: 0%; top: 0%; right: 0%" ></div>
<br />
<p><a href="#" id="chimg"> </a></p>
</div>






<div style="position: absolute; left: 95%; top: 85%; right: 13%">
<!-- Generated by AudioPlay Online Generator (http://www.strangecube.com/audioplay/) --><div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="30" height="30"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://thelivingmoon.com/undomiel/interface/earth/hangar.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000000&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://thelivingmoon.com/undomiel/interface/earth/hangar.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000000&mode=playpause" quality=high wmode=transparent width="30" height="30" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div><!-- End of generated code -->

</div>


</body>
</html>

jundo12
10-05-2014, 07:00 AM
it works! thank you again! i wonder what i was missing / had too much of. oh that's brilliant.

jundo12
10-05-2014, 07:02 AM
do you happen to know what part of the script controls how far each scroll zooms? like with the arrow key, if i click and hold it, it's like turbo charging and then whoosh, it takes off and zooms by a large amount

jscheuer1
10-05-2014, 04:21 PM
I don't really see a way to slow it down and still have the motion appear smooth unless we only slow it down a little. The motion really isn't smooth with the mouse either, but with the mouse it only moves a single increment per mouse wheel increment. Because of the nature of a mousewheel, even if you try to spin it, it will only move so fast. This is significantly different from an arrow key which can be held down and will therefore be able to continuously fire. We can make it so that it only fires once per key press and that can be either on the down stroke or on the up stroke of the key, or we can make it so that there is a delay between steps (imitating a slowly turning mousewheel) if the key is held down. That's what I will show you now:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interface: Space</title>

<base href="http://thelivingmoon.com/undomiel/game/" />

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="jquery.iviewer.js" ></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
var iv1 = $("#viewer").iviewer({
src: "test_image2.png",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
onDrag: function(ev, coords) { }
});

$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
$("#fit").click(function(){ iv1.iviewer('fit'); });
$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); });
$("#update").click(function(){ iv1.iviewer('update_container_info'); });

var iv2 = $("#viewer2").iviewer(
{
src: "test_image2.png"
}), keyisdown, keytimer;

$("#chimg").click(function()
{
iv2.iviewer('loadImage', "test_image2.png");
return false;
});
$(document).on('keydown keyup', function(e){
var key = e.keyCode;
switch(key){
case 38: {break;}//up arrow
case 40: {break;}//down arrow
default: {return;}
}
if(e.type === 'keyup'){
keyisdown = false;
clearTimeout(keytimer);
return;
}
if(!keyisdown){
keyisdown = true;
keytimer = setTimeout(function(){keyisdown = false;}, 500);
iv2.iviewer('zoom_by', 39 - key);
}
e.preventDefault();
});
});
</script>



<link rel="stylesheet" href="jquery.iviewer.css" />
<style>
.viewer
{
width: 115%;
height: 140%;
border: 1px solid black;
position: relative;
}

.wrapper
{
overflow: hidden;
}
</style>




</head>
<body bgcolor="#000000">






<div id="test_image2"
onclick="location.href='hub.html';" style="cursor: pointer;">





<h1></h1>
<!-- wrapper div is needed for opera because it shows scroll bars for reason -->


<div class="wrapper">
<span>
<a id="in" href="#"></a>
<a id="out" href="#"></a>
<a id="fit" href="#"></a>
<a id="orig" href="#"></a>
<a id="update" href="#"></a>
</span>
</div>
<br />

<div id="viewer2" class="viewer" style="position: absolute; left: 0%; top: 0%; right: 0%" ></div>
<br />
<p><a href="#" id="chimg"> </a></p>
</div>






<div style="position: absolute; left: 95%; top: 85%; right: 13%">
<!-- Generated by AudioPlay Online Generator (http://www.strangecube.com/audioplay/) --><div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="30" height="30"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://thelivingmoon.com/undomiel/interface/earth/hangar.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000000&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://thelivingmoon.com/undomiel/interface/earth/hangar.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000000&mode=playpause" quality=high wmode=transparent width="30" height="30" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div><!-- End of generated code -->

</div>


</body>
</html>


Notice the highlighted line (scroll down to see it) the red 500 there is the number of milliseconds between steps if the key is held down. You can actually do it faster if you repeatedly press and release the key. If you make this number smaller - say 300 or 200, the delay will be less and the action will appear smoother, but it will start to seem as if there is no delay. You can increase to 1000 if you like that effect better.

jundo12
10-05-2014, 04:50 PM
oh that's perfect! looks just like walking! i wasn't sure how it would look but as soon as i saw it in action, i was like yeahh. that's very effective. so if the number is lower, it goes faster? and number is higher it makes bigger jumps between steps? i like this walking effect. :D

jundo12
10-05-2014, 05:19 PM
lower number=running
higher number=jumping
middle number=walking

:D