CODEWITHSUNDEEP
javascriptjqueryinternet-explorercross-browser
ariel
ariel

Reputation: 3072

How to fix this jquery function to work in IE?

I am relatively new with Javascript but managed to somehow get this code to work on chrome, firefox, safari but it doesn't properly on IE. First look at this code and then after that I will explain what seems to be not working: 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
        <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var transition = 'slow';
                var target1 = $('#flash1');
                var target2 = $('#flash2');
                var target3 = $('#box2');
                var target4 = $('#tble');
                var target5 = $('.links');
                var target6 = $('#wording');
                target1.delay(1000).fadeIn();
                target2.delay(2000).fadeIn();
                target3.delay(3000).fadeIn();
                target4.delay(4000).fadeIn();
                target5.delay(5000).fadeIn();
                target6.delay(6000).fadeIn();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#this_is_button").click(function () {
                    $("#box2").hide();
                    $("#tble").hide();
                    $(".links").hide();
                    $("#second_pls").show();
                    $("#box2").css("background", "black");
                })
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#what_close").click(function () {
                    $("#second_pls").hide();
                    $("#tble").show();
                    $(".snap").show();
                    $(".links").show();
                    $("#box").css({
                        backgroundImage: "url('/test/img.jpg')",
                        backgroundSize: "800px"});
                    });
                });
        </script>
    </head>
    <body>
        <div id="box">
            <div id="box2" style="display:none"></div>
            <div id="wording" style="display:none">
                <label id="flash1" style="display:none">Hello</label>
                <label id="flash2" style="display:none">World</label>
            </div>
            <div id="tble" style="display:none">This is a table</div>
            <div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
                <input type="button" id="what_close" value="Close">
            </div>
            <div class="links" style="display:none">
                <input type="button" id="this_is_button" value="Sample">
            </div>
        </div>
    </body>
</html>

CSS:

 #box {
    background-color: #000000;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
 }
 #box2 {
    background-image: url("/test/img.jpg");
    background-size: 800px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    position: absolute;
}
#wording {
    position: relative;
    color: #999999;
    font-size: 15px;
    letter-spacing: 5px;
    margin-left: 20px;
    padding-top: 30px;     
    }
#tble {
        margin-top: 180px;
        position: absolute;
}
#second_pls {
        margin-left: 10px;
        margin-top: 310px;
        position: absolute;
}
.links {
        margin-left: 10px;
        margin-top: 310px;
        position: absolute;
}

So what is the part that doesn't seem to function when the page is rendered in IE? It seems that the fadeIn, fadeOut, hide and show parts are not rendering in IE except #flash1, and #flash2 work, the rest of the fade in, fade out don't work. I am ripping my hair out not understanding why those two would work but not the rest.

I used BrowserStack and it seems that on Windows XP using IE 8 it renders properly with the exception of properly rendering the background image. But on Windows 7 using IE 8, it works the same way as it does on Windows XP but when using IE 9 it gives me the current issue.

What am I doing wrong?

Upvotes: 1

Views: 1626

Answers (3)

Pedro Estrada
Pedro Estrada

Reputation: 2404

add this meta tag inside your <head></head>

<meta http-equiv="X-UA-Compatible" content="IE=8">

should work then.

i have it here in this jsfiddle: http://jsfiddle.net/Morlock0821/XtyWC/

Upvotes: 0

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

It seems the problem arise from incorrect syntax:

 $("#box").css({
               backgroundImage: "url('/test/img.jpg')",
               backgroundSize: "800px", //<-- extra comma
 });

http://jsfiddle.net/bfcZd/3/

vs.

http://jsfiddle.net/bfcZd/4/

Upvotes: 2

ckaufman
ckaufman

Reputation: 1497

You should look at the CSS declarations for the two divs that are working. I suspect they may be position:relative or have some other property that is causing them to render differently (properly) while the other ones fail. Could you provide the CSS that you have set for the divs in your example. It will help us troubleshoot a little better, but without seeing it, this is my hunch.

Upvotes: 1

Related Questions