IT Anawer: Javascript OnMouseOver and Out disable/re-enable item problem

I wanted to have some radio buttons that disabled when the mouse went over and enabled again 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 on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.

Thanks in advance.

From stackoverflow

I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.
```
$('#rigged').mouseenter(function() {
    $(this).disabled = true;
  }).mouseout(function() {
    $(this).disabled = false;
  });
```
Something like that.

Again, that's using jQuery.

(You'll have to give the input radio button the id 'rigged')

You could 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, for a solution that works in FireFox do 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 function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript

<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
    <input name="rigged" type="radio">    
</div>

ichiban : Yeap. That's it +1

alex : Didn't know you could 'disable' a div. +1

Chad Grant : yeah, well your top example / code does not work (at least cross browser), so you should prob remove it and go with the script.

I think when it's becoming disabled, it's not going to fire any events. You could try a few things.
- On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.
- You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.
Markup for the first, in jQuery, would go 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'll need to adapt this to work with multiple elements.

The inputs do not fire the mouseout events because they are disabled.

So you have to wrap it in a div and catch the div's events.

If you want pure javascript, use Phaedrus's example "toggleDisabled" script.

If you want jQuery and not-so-newbie 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>

Bryan Ross : Why `new toggleDisabled` ? Why not just wrap it in a closure: `function toggleDisabled(d) { return function() { $(this).children().each(function(){this.disabled=d;})}}`

IT Anawer

Thursday, May 5, 2011

Javascript OnMouseOver and Out disable/re-enable item problem

0 comments:

Post a Comment

Blog Archive