Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 30th, 2004, 10:50 PM
Authorized User
 
Join Date: Sep 2004
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default Mouse Event

In javascript, we have an event called onKeyPress. Is it possible that we could simulate the same function as "onKeyPress" when we press down the mouse button? And how, if possible?

Any feedback is appreciate. Thanks

 
Old October 1st, 2004, 03:08 AM
Friend of Wrox
 
Join Date: Jul 2003
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hey muklee,

Have you tried the onmousedown event?
http://www.devguru.com/Technologies/...mousedown.html

HTH,

Chris
 
Old October 1st, 2004, 06:04 AM
Authorized User
 
Join Date: Sep 2004
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Sorry for my late reply. About the onMouseDown event, I try to use it but it doesn't work as what I expected.

For instance, I have a drop-down menu with 3 options ("A", "B", "C"). When user selects "C" and clicks on a button, "C" will be moved to 2nd position while "B" will move down to the 3rd place. All the processes are done by calling a javascript function by invoking the onClick event.

It works but if the drop-down menu has more than 30 options, then users have to click so many time just to move a particular option to a certain position.

I try to replace the onClick() event with the onMouseDown() event but it doesn't work as the onKeyPress() event.

So, any suggestion? Thanks in advanced.

 
Old October 1st, 2004, 06:28 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

You can't send key strokes to a screen in HTML/JavaScript. What exactly are you trying to achieve?

--

Joe
 
Old October 1st, 2004, 06:44 AM
Authorized User
 
Join Date: Sep 2004
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I am trying to move a particular value in a drop-down menu to a certain position when I click on the mouse button without release it, untill the selected option in the drop-down menu reach at the desire position, I will release the mouse button and the movement will stop.

Currently, I use the onClick() event to handle it. But, I found out that it is not that user-friendly when the drop-down menu has a very long options. I have to click so many time to move a selected value to a particular position.

Thanks for reply.

 
Old October 1st, 2004, 08:34 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Not perfect and the exchangeOptions function is abit feeble but if you click once on buttons the selected option moves and if you keep it held down it keeps moving.
Code:
<html>
<head>
<title>Move Options</title>
<script type="text/jscript">

  function exchangeOptions(Listbox, FromOption, ToOption)
  {
    var oNewOption = document.createElement("option");
    oNewOption.text = ToOption.text;
    oNewOption.value = ToOption.value;
    //alert("To: " + ToOption.text + "\n" + "From: " + FromOption.text + "\n" + "New: " + oNewOption.text);
    ToOption.text = FromOption.text;
    ToOption.value = FromOption.value;
    FromOption.text = oNewOption.text;
    FromOption.value = oNewOption.value;
    ToOption.selected = true;
  }


  function moveOption(Listbox, Direction)
  {
    var iSelectedIndex = Listbox.selectedIndex;
    var iOptionCount = Listbox.options.length;
    var bAtTop = (iSelectedIndex == 0);
    var bAtBottom = (iSelectedIndex == (iOptionCount - 1));
    var iAdjustment = 0;
    if (Direction == "up")
    {
      if (!bAtTop)
      {
        iAdjustment = -1;        
      }    
    }
    else
    {
      if (!bAtBottom)
      {
        iAdjustment = 1; 
      }    
    }
    if (iAdjustment != 0)
    {
      var oMoveOption = Listbox.options[iSelectedIndex];
      var oReplaceOption = Listbox.options[iSelectedIndex + iAdjustment];
      exchangeOptions(Listbox, oMoveOption, oReplaceOption);
    }
  } 

  var bContinueMoving = false;

  function cancelMove()
  {
    bContinueMoving = false;     
  }

  function startMove(Direction)
  {
    if (window.event.button == 1)
    {
      bContinueMoving = true;
      window.setTimeout("moveSelectedOption('" + Direction + "')", 300);
    }
  }

  function moveSelectedOption(Direction)
  {    
      var oListbox = document.getElementById("lstMenu");
      moveOption(oListbox, Direction);
      if (bContinueMoving)
      {
        window.setTimeout("moveSelectedOption('" + Direction + "')", 1200);    
      }
  }

</script>
</head>

<body bgcolor="#FFFFFF">
<table border="0" width="40%" align="center"><tbody>
<tr><td width="60%" rowspan="3">
<select id="lstMenu" size="10" style="width: 200px">
  <option value="0" selected>Option 0</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>  
</select>
</td><td width="40%"><input type="button" value="^" onmousedown="startMove('up');" onmouseup="cancelMove();"></td></tr>
<tr></td><td>&nbsp;</td></tr>
<tr></td><td><input type="button" value="v" onmousedown="startMove('down');" onmouseup="cancelMove();"></td></tr>
</tbody>
</table>
</body>
</html>
--

Joe
 
Old October 1st, 2004, 10:10 AM
Authorized User
 
Join Date: Sep 2004
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks a lot man, your code is marvelous. It work exactly what I want.






Similar Threads
Thread Thread Starter Forum Replies Last Post
Mouse Event Handler daniel.mihalcea C# 2008 aka C# 3.0 1 September 8th, 2008 06:30 AM
Problem regarding the mouse event CsharpHelp C# 2 June 20th, 2005 01:08 AM
Mouse Event Question muklee Javascript How-To 1 June 9th, 2005 07:44 AM
Mouse Wheel Event BSkelding ASP.NET 1.0 and 1.1 Professional 3 March 30th, 2005 09:12 AM
Mouse Click Event roniestein Access 4 December 11th, 2003 04:53 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.