Javascript OnMouseOver and Out disable / re-enable item issue
I wanted some of the switches to turn off when the mouse was switched over and turn back on when it went out (just for fun).
<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>
When the mouse goes, it does what it should, when it comes back from a non-restartable button. Also, how can I enable it by default so that it doesn't stay disabled when the page is refreshed.
Thanks in advance.
source to share
Inputs do not fire mouseout events because they are disabled.
So you have to wrap it in a div and catch the div events.
If you want pure javascript use the Phaedrus "toggleDisabled" script example.
If you want jQuery and non-beginner friendly:
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
function toggleDisabled(d) {
var disable = d;
this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
}
$("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
});
</script>
</head>
<body>
<form>
<div class="radios">
<input type="radio" name="rigged" value="1"/> Item One<br />
<input type="radio" name="rigged" value="2"/> Item Two<br />
<input type="radio" name="rigged" value="3"/> Item Three<br />
<input type="radio" name="rigged" value="4"/> Item Four
</div>
</form>
</body>
</html>
source to share
You can achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.
<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
<input name="rigged" type="radio">
</div>
The above solution only works in IE, as the solution that works in FireFox does the following.
<script type="text/javascript">
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>
* This javaScript feature was borrowed from here: Enable or disable the DIV tag and its inner controls using Javascript
<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
<input name="rigged" type="radio">
</div>
source to share
I had a similar problem getting the image to display and then regularly when the mouse left the image. I used jQuery and ended up hooking up with mouseenter and mouseout and not the events you are using. You might want to try them.
$('#rigged').mouseenter(function() {
$(this).disabled = true;
}).mouseout(function() {
$(this).disabled = false;
});
Something like that.
Again using jQuery.
(You will need to enter the "faked" input switch)
source to share
I think that when he becomes disabled, he is not going to trigger any events. There are several things you can try.
-
On mouse over, make an invisible div overlay on the radio cassette. This will make it unusable. Then on the output of that invisible div, remove the div.
-
You can play with the x and y coordinates of the mouse and see if they overlap your radio elements. However, this is not the optimal solution.
The markup for the first, in jQuery, would look something like this:
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element
$('#rigged').bind('mouseover', function() {
$('#overlay').show();
});
$('#overlay').live('mouseout', function() {
$(this).hide();
});
You will need to adapt this to work with multiple elements.
source to share