marky marky - 1 year ago 123
jQuery Question

Firefox jQuery UI Position effect

This requires a bit of history so you can see how one fix has only turned into a problem that itself needs to be fixed:

Take a look at this jsFiddle in Firefox. Click on the button and you'll see a maroon box show up in the upper left corner of the HTML area. In Chrome, IE, and Safari, in the same jsFiddle, the cell with the checkbox will get the maroon box show and then fade out to the background, which is what the desired behavior is.

Note in the js code and the css that a div is added to the checkbox cells and then faded out. This was supposed to be the solution to a problem found in this jsFiddle. In the js code there you can see that I use the UI Highlight effect, which works in all browsers, but fades to white before going to the background image.

To address the fade to white then to background image problem, the former jsFiddle was supposed to be the fix, which only introduced the Firefox problem. And trying to fix that using UI's Position effect didn't help.

I'd be eternally grateful if someone could help me find a cross-browser solution that highlights the checkbox cells without fading to white, as the Highlight effect does.


Answer Source

Wrap your input into a <div style="position: relative"> and it will work in FF too. Absolute positioning in tables in FF seems to be a problem, even if the <td> has position: relative.

Here is the modified fiddle.

It's also possible with jQuery only with dynamic wrapping / unwrappring. Modify your JS the following way:

 $('#classesTable input:checkbox').wrap('<div style="position: relative"/>').parent().append('<div class="checkwrap" />');

 $('#classesTable .checkwrap').fadeOut(1000, function() {
       $(this).unwrap().remove();
 });

Here this fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download