andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


move cropping window with keys?

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas
View previous topic :: View next topic  
Author Message
stillcurious
Newbie


Joined: 07 Dec 2005
Posts: 2

PostPosted: Wed Dec 07, 2005 5:31 am    Post subject: move cropping window with keys? Reply with quote

hi.

first i would like to thank you for this masterpiece.
its really neat and saves me everyday time :]

my problem..

i want to move the cropping window (the part i wanna
choose from an image) with the arrow keys of the
keyboard and resize the image with +/-

is this possible? i've tried some stuff with css and
moving div containers but all without success :(

you got any hint for me?

thanks in advance.

*stillcurious
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Dec 07, 2005 9:26 am    Post subject: Reply with quote

Hi, and welcome to the board.

First thing you need to do is capture the keypresses, naturally. The drag/drop library might do this, but without checking through Walter's javascrip I don't know. If not, then you could use something like this:

Code:
<script language="javascript">

nn = (document.layers) ? true : false;
ie = (document.all) ? true : false;

function keyDown(e)
{
   var evt = (e) ? e : ((window.event) ? window.event : null);
   if (evt) {
      var key = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
      switch (key) {
      case 37:
         // process key left
         break;
      case 38:
         // process key up
         break;
      case 39:
         // process key right
         break;
      case 40:
         // process key down
         break;
      }
   }
}

document.onkeydown = keyDown;
if (nn) {
   document.captureEvents(Event.KEYDOWN);
}

</script>


You'd integrate that javascript into the javascript block output by the class. Then in the relevant switch cases you would make a call to the drag/drop API, using something like:

Code:
      switch (key) {
      case 37:
         dd.elements.theCrop.moveBy(-1, 0);
         break;
      case 38:
         dd.elements.theCrop.moveBy(0, -1);
         break;
      case 39:
         dd.elements.theCrop.moveBy(1, 0);
         break;
      case 40:
         dd.elements.theCrop.moveBy(0, 1);
         break;
      }


You may need some additional checks in there to make sure that the cropping area is within the bounds. (You may not need to as the drag/drop library knows about maximum boundaries for the divs, but I'm not sure if that applies when using the moveBy method.)

Haven't tried integrating it myself, but the above should work out for you.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Dec 07, 2005 9:26 am    Post subject: Reply with quote

The API, btw, can be found here:

http://www.walterzorn.com/dragdrop/api_e.htm
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
stillcurious
Newbie


Joined: 07 Dec 2005
Posts: 2

PostPosted: Wed Dec 07, 2005 11:20 am    Post subject: final result Reply with quote

thanks for the hint.

in case someone wants to use this too (navigate with arrows and resize with +/-)

Code:

      switch (key) {
      case 37:
         dd.elements.theCrop.moveBy(-1, 0);
         break;
      case 38:
         dd.elements.theCrop.moveBy(0, -1);
         break;
      case 39:
         dd.elements.theCrop.moveBy(1, 0);
         break;
      case 40:
         dd.elements.theCrop.moveBy(0, 1);
         break;
      case 107:
         dd.elements.theCrop.resizeBy(10, 10);
         break;
      case 109:
         dd.elements.theCrop.resizeBy(-10, -10);
         break;
      }


good evening everybody
*stillcurious
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group