...

View Full Version : enable / disable mouse events not working



jsnewbie2
02-07-2010, 06:41 AM
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>

gusblake
02-07-2010, 12:46 PM
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.



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-browser-cursor-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum