FormCheck library for Mootools – fix overlay tips for IE6.x

It’s not possible to show a div element (or any other elements) on a select field in Internet Explorer 6.x
Of course, we get the same problem with the library FormCheck (http://mootools.floor.ch/).

I’ve produced recently a small “dirty” fix.
The solution is to insert a iframe inside the generated div (tips).

in forcheck.js:

/*        Function: addError                Private method                Add error message        */        addError : function(obj) {...                if (obj.element) {                        obj.element.empty();                        if (this.options.display.errorsLocation == 1) {                                var errors = [];                                obj.errors.each(function(error) {                                        errors.push(new Element('p').set('html', error));                                });/** Iframe hack for IE6.x for select overlay **/                                if(Browser.Engine.trident4){                                        var cf_iframe = IFrame({                                                src:'about:blank',                                                'frameborder':0,                                                'height':'35px', //must be improve but how?                                                'width':'300px', //must be improve but how?                                                'background':'transparent'                                        }).injectInside(obj.element);                                }/****/                                var tips = this.makeTips(errors).injectInside(obj.element);...

in formcheck.css

.../* fix IE6.x iframe/select */.fc-tbx iframe {        z-index:-1;        filter:mask();        display:block;        position:absolute;}

The known problem with this fix is the fixed dimensions of the iframe.
It’s not possible to put at 100%, the iframe generates ann horizontal scrolling bar.

This solution is based on an idea of Fabien Molinet (http://fabien-molinet.fr/) and his script called “Select Fix 0.30”.
Thanks to him!

Advertisements

One thought on “FormCheck library for Mootools – fix overlay tips for IE6.x

  1. Hi,Can you drop this change into the latest formcheck version? I have selects appearing above my tip boxes in ie6 but think your code is based on an earlier release.Mike

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s