Question

I have written a javascript module (div object) which slides inside the document from right if you click inside an input element with using Jquery UI show and hide functions. This works properly in most of the browsers except IE 8.

The problem is that when the module hides itself, IE 8 won’t open it anymore.

With a lot of work I managed to figure out some strangeness. When I run the following code as an onclick function of a button element to hide the module, then I can open it again.

$('#segitseg').hide('drop', { direction: 'right' }, 600);

But if I call the same line from an object, called Segitseg (it means help in English) like this:

var Segitseg = new function () {
    ...
    this.bezar = function() {
        $('#segitseg').hide('drop', { direction: 'right' }, 600);
    }
    ...
}

then I can’t reopen the module again.

But I should have use the second variation, because the method bezar should make other things too.

Have anyone met this problem?

Answer 1

I’ve found the problem!

Well, when you call hide() on an element then it will change its opacity, or what is more important its alpha opacity, which is used by IE8. So the element will be just invisible.

The solution: (changing back the opacity after the hide() function ends)

$('#segitseg').hide('drop', { direction: 'right' }, 600, function(){
    $('#segitseg').css('filter', 'alpha(opacity=100)');
});