overlay not working in IE's

Question

Violet_82 89 Posting Whiz in Training

12 Years Ago

HI there, I have runt into an issue with the overlay I have on the website I am working on http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm
The problems seem to be with Internet explorer 7, 8 and 9. Say you click on the first thumbnail, then the big pix comes
up and behind it the overlay. Then close this picture and click on the next one: the overlay is now solid black. Basically
it works fine with the first image but then any subsequent image seems to throw it.
I am aware of IE's not being able to handle the opacity therefore in my css I have this:

.overlay
    {

        display:none;
        background-color:black;
        position:fixed;
        opacity:0.75;
        filter:alpha(opacity=75); /* For IE8 and earlier */
        top:0;
        bottom:0;
        right:0;
        left:0;
        width:100%;
        z-index:100;

    }

But despite this it doesn't work. I thought that maybe, it isn't the css but the script that handles the big
images but still I couldn't find anything wrong with it...maybe you can?
Here's the script:

var $full_images;
var $close_button;
var $overlay;

$(function(){
    $full_images = $(".full_images");
    $close_button = $(".close_button");
    $overlay = $(".overlay");
    $the_pic = $(".image_div");

});

function change_images(image, text){
        var $images = $("#" + image);
        var $description = $("#" + text);

        $overlay.hide().show();
        $the_pic.hide().show("slow");
        $full_images.hide().show("slow");
        $images.hide().fadeIn(1000);
        $description.hide().fadeIn(1000);
        $close_button.hide().show();

        $close_button.unbind('click').click(function(){
                    $(this).hide();
                    $images.fadeOut("fast");
                    $description.fadeOut("fast");
                    $full_images.hide("slow");
                    $overlay.hide("slow");
                    $the_pic.hide("fast");

        });


}

A note on the script: the variable $the_pic is there in error it hasn't actually been declared, but I doubt this
can be the problem because the overlay isn't working in previous versions of the script without the variable

ANy idea at all what could cause that?

javascript

3 Contributors
12 Replies
847 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Troy III

Troy III 272 Posting Pro

12 Years Ago

you are using a wrong doctype
use the damn standad!

Troy III 272 Posting Pro

12 Years Ago

<!doctype html>

That's the only html standard.
The thing you are using is an old w3c crap trying to befriend xhtml parsers which in fact was never used and most of the time didn't exist.

Edited 12 Years Ago by Troy III

Airshow 416 WiFi Lounge Lizard

12 Years Ago

I guess that $overlay.hide("slow"); leaves the overlay in a different state from that in which it started life.

You can try several things:

Use $overlay.hide(); and $overlay.show(); so as not to affect the overlay's opacity.
Ensure the overlay is reset to its original opacity by showing it with $overlay.css('opacity',0).animate('opacity',0.75);.
Move the overlay inside the #full_images div and allow $full_images.show("slow"); and $full_images.hide("slow"); to show/hide the entire modal contents rather than showing/hiding each of the contained elements individually.

All or any of these may work.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2012-04-10T20:45:39+00:00

ahm sorry but I thought I was using the standards...the html 4 strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
as found in here http://www.w3schools.com/tags/tag_doctype.asp. What doctype then I am meant to use? I've always used html 4 since I started developing

Troy III 272 Posting Pro · Answer 2 · 2012-04-11T07:43:52+00:00

<!doctype html> fixes it - I already tested it.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2012-04-11T12:12:47+00:00

That's OK if you don't care about people still using older pre HTML5 browsers. For many developers, that's still an isssue.

Troy III 272 Posting Pro · Answer 4 · 2012-04-11T14:00:41+00:00

That's the whole point -There are no older browsers.
All browsers will stick to their highest release level of suported standards in case of a proper html doctype which is:
<!doctype html>.
After this is set, all you need to do, is give alternate instructions suported by release versions, you aim to support.

Violet_82 89 Posting Whiz in Training · Answer 5 · 2012-04-11T20:20:29+00:00

All or any of these may work.

That worked. I removed all the speeds from the script, well, from the unbind('click').click(function(){ unbind('click').click(function(){
But I am interested in another solution you have mentioned:

Ensure the overlay is reset to its original opacity by showing it with $overlay.css('opacity',0).animate('opacity',0.75);.

My script at the moment looks like this:

var $full_images;
var $close_button;
var $overlay;

$(function(){
    $full_images = $(".full_images");
    $close_button = $(".close_button");
    $overlay = $(".overlay");


});

function change_images(image, text){
        var $images = $("#" + image);
        var $description = $("#" + text);

        $overlay.hide().show();

        $full_images.hide().show("slow");
        $images.hide().fadeIn(1000);
        $description.hide().fadeIn(1000);
        $close_button.hide().show();

        $close_button.unbind('click').click(function(){
                    $(this).hide();
                    $images.fadeOut();
                    $description.fadeOut();
                    $full_images.hide();
                    $overlay.hide();


        });


}

So I have tried to do that but it doesn't seem to work, although in fairness I might have put that in the wrong position I first tried it in place of $overlay.hide().show(); but this

$overlay.css('opacity',0).animate('opacity',0.75);.
is meant to grab the opacity 0 and gradually getting to 0.75, correct?

I wonder, if I change the css and reset the opacity to 0, the overlay is still there isn't it? It is just the opacity that has changet but the actual overlay is still on the top of everything, whereas if I hide it with .hide() the overlay is actually hidden...am I making any sense?

@Troy III:

That's the whole point -There are no older browsers.
All browsers will stick to their highest release level of suported standards in case of a proper html doctype which is:

I am not very well versed in that for me to take a clear-cut stance, but I do know many people who still run and use IE6. In some cases average users don't know how to upgrade (despite many updates now being automatic) so they still keep old browsers

Troy III 272 Posting Pro · Answer 6 · 2012-04-11T20:58:40+00:00

Perhaps you know more than I do in this busines
but one thing I know is that <!doctype html>
will enforce the standards mode even on Explorer 4.0
-but you never even saw an IE4 browser let alone code for it, so how would you otherwise get to know these details anyway

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2012-04-11T23:15:58+00:00

Violet,

am I making any sense?

Yes, you are making the right observations. With opacity == 0, the overlay is indeed still there on the top of everything and if it's hidden with .hide(), then yes, the overlay is actually hidden, ie. it is still in the DOM, but not rendered.

I think my suggestion 2 probably doesn't work because the statement $overlay.css('opacity',0).animate('opacity',0.75); doesn't include show().

This version (in place of $overlay.hide().show();) stands a better chance:

$overlay.css('opacity',0).show().animate('opacity',0.75);

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2012-04-11T23:52:37+00:00

My take on DOCTYPES is that changing the DOCTYPE can be a fix for some things but not for others. And like other types of fixe, a DOCTYPE fix may work in a particular version of a browser but not in another version. In extremis, it is conceivable that you could find that changing the DOCTYPE fixes a page in one browser and breaks it in another.

With regard to Standards Mode, yes it can be enforced with <!DOCTYPE html> but, and it's a big BUT, that doesn't mean older versions of browsers will magically become standards compliant. The best they will manage is their interpretatation of "standards compliant" at the time they were written, which can be woefully inadequate.

If you want to know more then, this gives a reasonable summary, including the following warning.

It cannot be stressed enough that the exact behavior of the modes varies from browser to browser even though discussion in this document has been unified.

Also see the section entitled "Standards Mode" near the top of the document.

Now, if you have an encycplopedic knowledge of every browser's behaviour in all the different modes (personally I don't have such knowledge), then it is possible that you may on occasions spot a universal DOCTYPE solution to a particular problem. It is possible that this is one such occasion and that Troy's <!DOCTYPE html> will fix the opacity issue. The problem is that without doing some laborious research, I don't know, and without seeing the whole page (and doing even more laborious research/testing) I don't know that some other feature of the page won't break.

The position I'm currently at with <!DOCTYPE html> is to use it only in a document written in HTML5 and that seems to be a position adopted by many.

If I'm not writing HTML5, then I use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If I'm working for a client who has a strong preference for a different DOCTYPE, then I will research it's characteristics and formulate my test plan accordingly.

Airshow

Troy III 272 Posting Pro · Answer 9 · 2012-04-12T12:50:21+00:00

you said

That's OK if you don't care about people still using older pre HTML5 browsers. For many developers, that's still an isssue.

And I said:

<!doctype html>
will enforce the standards mode even on Explorer 4.0
which renders your point, pointless.

I also added that

All browsers will stick to their highest release level of suported standards in case of a proper html doctype which is:
<!doctype html>.

And also made clear that:

After this is set, all you need to do, is give alternate instructions suported by release versions you aim to support.

So, what is the part you are having problems to understand?