Internet Explorer v8 and Opacity Issues

A great WordPress plugin jQuery-lightbox (JQLB), used to provide animated slideshow-like viewing of images in a post seemed to be having some undesired behavior on sites viewed with Internet Explorer (IE) v8 – the plugin’s jQuery based javascript was unable to successfully set the opacity of an “overlay” <div> it created in process of showing images. All worked fine in Firefox (FF) and IE v9 but would fail (though not all the time) in IE v8 (unable to test IE v7 but it may also have similar issue). Some more testing seemed to confirm that all versions of the JQLB plugin were affect as were all versions of jQuery, but the issue only affected Windows 7/IE v8. 

Some background: When invoked JQLB’s jQuery javascript will create a <div class=’overlay’>, set its height and width equal to the page size, set the background color to black, and absolutely position it to top:0, left:0 so it covers the entire page. It also sets the <div> opacity to 80% to give a transparent affect so the underlying page is still partly visible.  On some pages and using IE v8 the affect failed and there would be no opacity with only a completely black background.

Continue reading Internet Explorer v8 and Opacity Issues

onClick Event and Javascript Confirm() to Control Postback That Works in All Browsers (that I tested)

Ok, using an onClick event to call a function which uses a confirm() alert to control posting a form has been around for a long time.  Something similar to this:

<input name=’submit’ type=’submit’ value=’Delete’ onClick=’return confdel();’>

One bug that was plaguing us for some time and due to low usage/priority had not been addressed, was that on many of the forms when a user selected Cancel to halt the submit the form was still posting! It was only in Internet Explorer (IE) that showed this bug – Firefox would correctly halt the form.

Long overdue to be corrected and the fix seemed to be elusive. But after numerous Google searches and reading other posts about similar issues and possible solutions I pieced together a fairly straightforward fix that seems to work correctly in browser: FF 4.0, IE8/9, Chrome.  Code sample is just for a simple confirm true/false: 

/* confirm delete */
function confdelappt() { 
        var msg = "\nYou have requested to delete this thing. By deleting this thing you will actually delete it. Are you sure?\n";
        if (confirm(msg)){
            return true;
        }
        else{
                    if (window.event) { //will be true with IE, false with other browsers
                    window.event.returnValue=false; } //IE specific, seems to work
                else {
                    return false; } 
            }
        }
    }

I found (with the help of other posts) that setting “window.event.returnValue=false;” would get IE the recognize that the onClick= event had returned false to then halt processing of the form submit. You could also include similar code for the “true” case but even if IE doesn’t see that the return is “true” the form still submits. Its usually the “false” case that matters most.

Definitely needed is the check that (window.event) is something otherwise the “window.event.returnValue=false;” code will error in browsers like Firefox – when it errors your form most likely will continue processing.