Community discussion forum

Back to discussion

how to capture mouse position in javascript

Last post was 05 Jun 2008 at 09:32
Tags:
  • 3 years ago

    hi
     i have a problem ,i have to find out mouse position and store that value in a variables.how can i do that.


                                                                                                                                                           deepak

    Report abuse
  • Advertisement

    Simply the fastest line-level profiler for .NET ever

    “The low overhead means it has minimal impact on the execution of my program”
    Mark Everest, Development Team Leader, Renault F1 Team Ltd.

    Try out the new ANTS Profiler 4 for yourself. Download your 14-day trial now

  • 3 years ago

    hi deepak, i worked on your requirement and explored several topics.
    here is the code....one more this i worked on only for IE. it is possible to get mouse points in NS too..try to work it out ....all the best.take care

    Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>


    <body>


    <div align="left">
    <form name="f1">
     <p> X-value
       <input name="xvalue" type="text" size="5">
     </p>
     <p>Y-value
       <input name="yvalue" type="text" size="5">
     </p>
     <p>  </p>
    </form>
    </div>


    <script language="JavaScript">
    var IE=document.all?true:false
    document.onmousemove=getMousepoints;//deepak this is to identify mouse event
    var mousex=0;
    var mousey=0;
    function getMousepoints()
           {
            mousex=event.clientX+document.body.scrollLeft //to get client window X axis
            mousey=event.clientY+document.body.scrollTop//to get client window Y axis


            document.f1.xvalue.value=mousex;//put values
            document.f1.yvalue.value=mousey;//put values
            return true;        
           }
           
    </script>
    </body>
    </html>


    Report abuse
  • 2 years ago

    Hi Naveeng,Exclamation [:)]
              I was looking for something specific, something on this similar line.
    I want to dynamically move any control within a browser window.
    Ex: Suppose the user clicks and drags a textbox the textbox should move with the
    mouse and when he releases the mouse button the textbox should stay there.



        Something like what we do while designing any Form in an IDE. Can this be done using
    JavaScript/VBScript.

    Thanking in advance,
    ASD.

    Report abuse
  • 2 years ago


    hi Ashutosh!
    I went through your problem. i think we can do it. i didn’t worked on these type of tasks but i studied the possibilities. i think we can do it by using a combination of CSS and Java script. I will definitely try to work on your task.

     

    Mean while check this code which I wrote to change the position of textbox along with mouse pointer (here I used this to display time and an image) just go through this code and you will get some idea. Here I accessed the text box in my JavaScript using getElementById(“clock” ) method. Then I set the position of the textbox by setting the values of style attribute based on the mouse positions.

    Why I am giving this code is, it gives you the basic idea. If I can do this in JavaScript then it is possible to solve your problem too. But little bit tough. Here in my code I didn’t used any mouse events. We have onMouseDown do onMouseUP events in JS. If we make use of those mouse events we can do it I think. You start working on this and I will join you soon. Coz now-a-days I am working on Flash and ActionScript coz my boss asked me to work on these technologies. If I get some time I will definitely work on this. You have any ideas don’t hesitate to share with me. If you still have any confusion in getting started, buzz me back and I’ll try to explain you in some other way.

     

    Here is my code.

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .clock{
        border:none;
         font-size:17px;
        color:red;
        background-image:url('clock1.GIF');
        background-repeat:no-repeat;
        background-position: right middle;
        line-height:30px;

    }

    </style>

    </head>
    <body>
    <script language="JavaScript">
    var IE = document.all?true:false
    document.onmousemove = dispTime;
    function dispTime()
        {
        var mosx = 0;
        var mosy = 0;
        mosx = event.clientX + document.body.scrollLeft;
        mosy = event.clientY + document.body.scrollTop;
          if (mosx>999)
              mosx=800;
        if (mosy>575)
                mosy=500;
         var temp=new Date();
         var h=temp.getHours();
         var mins=temp.getMinutes();
         var s=temp.getSeconds();
         if(s<10)
            s="0"+s; 
         if( h >12)
              var m="PM";
              else m="AM";
          if(h>12) h-=12;
          if(mins<10)
          mins="0"+mins; 
        var time= h+":"+mins+":"+s+" "+m;
        h="";mins="";s="";t="";
        var x=document.getElementById("clock");
        document.f1.dispArea.value=time;
        var tx= document.getElementById("clock").style.left=mosx+10;   
        var tx= document.getElementById("clock").style.top=mosy+10;   

        //document.form1.clock.value=time; function for time not yet called
        //window.status= mosx+" "+mosy;
        setTimeout("dispTime();",1000);   
        //window.status=mosx+" -"+mosy;
        }
    </script>
    <div id="clock" style=" position:absolute;left:100; top:200;">
    <form name="f1">
        <input name="dispArea" type="text" class="clock" value="" size="12">
    </form>
    </div>

    </body>
    </html>








































































     

    Report abuse

Post a reply

Enter your message below

Sign in or Join us (it's free).

Quick links

Recent activity

Languages

Web Development

Frameworks & Architecture

Other major sections