Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    enable / disable mouse events not working

    I'm trying to enable/disable a textarea. I am able to do a mouseout disable, but cannot do a mouseover enable. For instance, when I click on the image, a textarea shows up. When I move my mouse to a different location, the textarea disables fine. Then when I try to move my mouse back over the textarea, it DOES NOT enable for me to write in it. What am I doing wrong? Thanks!

    Another bonus question, I just happen to try out this code in IE and the textareas are not showing up where I click. I assume that I'm capturing the X/Y coordinates incorrectly for an IE browser. Any pointers?

    ********* CODE *************

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Mouse position</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    var posx,
    posy;
    // initialize cache
    var cache= [];
    var count=0;

    function getMouse(e){
    posx= posy= 0;
    var ev= (!e) ? window.event : e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    } else if(ev.clientX) {//IE
    posx=ev.clientX+document.body.scrollLeft;
    posy=ev.clientY+document.body.scrollTop;
    } else { // old browsers
    return false;
    }
    }

    function showP(){
    // object to store this coordinate
    var thisCoord= {};
    // x & y values stored as object attributes
    thisCoord.posx= posx;
    thisCoord.posy= posy;
    // check the cache for this coordinate object
    if ( !cache[thisCoord] ) {
    // if it hasn't been cached yet, push it onto the stack
    cache.push(thisCoord);

    var newDiv= document.createElement("textarea");
    newDiv.setAttribute("class","div3");
    newDiv.setAttribute("id",count);
    newDiv.style.width='180px';
    newDiv.style.height='45px';
    newDiv.style.visibility="visible";
    newDiv.style.top= (thisCoord.posy -10) +'px';
    newDiv.style.left= (thisCoord.posx -6) +'px';
    newDiv.setAttribute("onmouseout","this.disabled=true");
    newDiv.setAttribute("onmouseover","this.disabled=false");
    // append to the document BODY
    document.getElementsByTagName("body")[0].appendChild(newDiv);
    count++;
    }
    }

    </script>
    <style type="text/css">
    .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5}
    .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;}
    .div3 {position:absolute;visibility:hidden;z-index:10;font-size:14px;font-weight:450;color:black;}

    textarea[disabled='disabled'] {
    background:yellow;
    color:blue;
    cursor:default;
    }
    </style>

    </head>

    <body>
    <div id="div1" class="div1">
    <img id="theImage" src="./YourImage.jpg">
    </div>
    <script type="text/javascript">
    // setup event handlers
    // document BODY onmousemove
    document.getElementsByTagName("body")[0].onmousemove= function(e){
    getMouse(e);
    };
    // the image onclick
    document.getElementById("theImage").onclick= showP;

    //onMouseOut
    </script>
    </body>
    </html>
    Last edited by jsnewbie2; 02-07-2010 at 07:43 AM.

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Disabled elements don't capture any events (I think that's how they disable them). What you could do is create your own CSS class for disabled textareas, and your own function for disabling them which doesn't stop mouseover events.

    Code:
    function disable(id) {
    	var el=document.getElementById(id);
    	el.className="disabled";
    	el.setAttribute("onkeydown", "return false;");
    }
    Here is a cross browser mouse coordinates function: http://snipplr.com/view/5069/cross-b...rsor-position/

    If you only need the coordinates when you click the image, you might as well incorporate that code into the showP function and do away with the mousemove listener for better performance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •