0

I'm having a bit of trouble making this JQuery work in Internet Explorer, it works beautifully in FF, WebKit, etc, sliding up, bouncing and falling back into place, but in Internet Explorer it does nothing, the buttons don't work and the content never slides up upon page load. It's really weird, I had an element fade out in an earlier design of my site and it didn't work in IE but worked in everything else...

<script>

$(document).ready(function(){
           $('#homecontent').delay("750").animate({ marginTop: "-15px" }, 1500).animate({ marginTop: "5px" }, 500);
})

</script>


<script>
$("#shop").click(function(){
           $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
           window.location.href = "http://www.jamiedurham.co.uk/shop/","shop"      
  });
})
$("#blog").click(function(){
           $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
           window.location.href = "http://www.jamiedurham.co.uk/blog/","blog"      
  });
})
</script>


<div id="homecontent" style="width:1000px; margin-left:20px; margin-right:20px; position:absolute; margin-top:1500px; line-height:19px;"></div>

<table style="margin-top:70px;">
    <tr style="height:50px; width:738px;">
         <td style="width:242px;"><a href="http://www.jamiedurham.co.uk/" ><img src="http://www.jamiedurham.co.uk/pics/homehover.gif" alt="home" name="home" id="home"></a></td>
         <td style="width:242px;"><a href="http://www.jamiedurham.co.uk/shop" id="shop" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shop','','http://www.jamiedurham.co.uk/pics/partnershover.gif',1)"><img src="http://www.jamiedurham.co.uk/pics/shop.gif" alt="shop" name="shop" id="shop"></a></td>
         <td style="width:242px;"><a id="blog" href="http://www.jamiedurham.co.uk/blog" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','http://www.jamiedurham.co.uk/pics/bloghover.gif',1)"><img src="http://www.jamiedurham.co.uk/pics/blog.gif" alt="blog" name="blog" id="blog"></a></td>     
    </tr>
</table>
user999734
  • 3
  • 1
  • 1
  • 3

2 Answers2

1

http://jsfiddle.net/koolvin/MXwXA/5/ This has been tested in all IE versions, it works in IE6+

I did three things:

  1. I made it look nice
  2. I ended the statements with ;
  3. I added e.preventDefault() in order to ensure your javascript was working as expected.

It amounted to this:

$(document).ready(function() {
    $('#homecontent').delay("750").animate({
        marginTop: "-15px"
    }, 1500).animate({
        marginTop: "5px"
    }, 500);
});
$("#shop").click(function(e) {
    e.preventDefault();
    $('#homecontent').animate({
        marginTop: "1500px"
    }, 1500).delay("1500", function() {
        window.location.href = "http://www.jamiedurham.co.uk/shop/", "shop"
    });
});
$("#blog").click(function(e) {
    e.preventDefault();
    $('#homecontent').animate({
        marginTop: "1500px"
    }, 1500).delay("1500", function() {
        window.location.href = "http://www.jamiedurham.co.uk/blog/", "blog"
    });
});
Korvin Szanto
  • 4,531
  • 4
  • 19
  • 49
0

I think you have some errors in your HTML. You've specified the id="shop" and id="blog" on both the a and img tags. Remove it from the img tags.

And try this new Javascript code. The click actions weren't being executed and by adding the event.preventDefault(), the standard click event won't execute and the user will only be redirected once the window.location happens.

    <script>
$(document).ready(function(){
   $('#homecontent').delay("750").animate({ marginTop: "-15px" }, 1500).animate({ marginTop: "5px" }, 500);

$("#shop").click(function(event){
        event.preventDefault();
       $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
            window.location.href = "http://www.jamiedurham.co.uk/shop/","shop"
        });
});
$("#blog").click(function(event){
    event.preventDefault();
   $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
       window.location.href = "http://www.jamiedurham.co.uk/blog/","blog"
    });
});
});
</script>
endyourif
  • 2,186
  • 19
  • 33
  • Giving an img tag an ID isn't going to break the JS in IE8/9 – Korvin Szanto Oct 17 '11 at 18:42
  • the id was attached to both the img and a tag, so i'm sure jquery was confused. – endyourif Oct 17 '11 at 18:43
  • I see your reasoning, however jQuery is built to handle multiple elements with the same attributes, that's one of it's main functions. All it does is attach the event handler to each of the objects selected. – Korvin Szanto Oct 17 '11 at 18:46
  • Seemed to be just that the way the jQuery file was linked to on a CDN IE didn't like, moved the file to my server and works perfectly now... Thanks for all the advice though! – user999734 Oct 17 '11 at 19:03