JQuery doesn't work sometimes in IE

Question

I am working on a site that has a few jquery sliders on it, as well as some other functions. However, every few page jumps in IE (and IE only as far as I've seen) the jquery will just NOT load, breaking the page. The parts that won't load SOMETIMES in IE are from the jquery.cycle.all.js file. Here is the javascript section of my code.

<script type="text/javascript" src="javascript/modernizr.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    if (!Modernizr.input.placeholder) {
        $('input[placeholder], textarea[placeholder]').each(function(index, elem) {
            elem = $(elem);
            placeholder = elem.attr('placeholder');
            elem_id = elem.attr('id');
            elem_name = elem.attr('name');

            clone = elem.clone();
            clone.hide();

            if (elem_id) {
                clone.attr({'id': elem_id+'-fake'});
            }
            if (elem_name) {
                clone.attr({'name': elem_name+'-fake'});
            }
            clone.addClass('fake');
            clone.data({'original': $(elem)});
            clone.val(placeholder);

            clone.focus(function(e) {
                e.preventDefault();
                $(this).hide();
                $(this).data('original').show().focus();
            });
            elem.blur(function() {
                if ($(this).val() == '') {
                    $(this).hide();
                    $(this).next().show();
                }
            });

            elem.after(clone);
            elem.blur();
        });
    }

    $('#image-slider').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#text-slider').cycle({
        speed: 1000,
        timeout: 10000
    });

    $('#ad-1').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#ad-2').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#gallery-slider').cycle({
        speed: 2000,
        timeout: 2500
    });
});

function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,   width='+w+', height='+h+', top='+top+', left='+left);
} 

</script>

As far as I've seen, the placeholder and #image-slider parts work every time. The #text-slider, #ad-1, and #ad-2 fail sporatically ONLY in IE. Someone please tell me I'm missing something, I'm tearing my hair out over here. A link to the site can be found here http://memorysquare.com/testSite/

Answer 1

Having a look at this example, and trying my best not to blame Internet Explorer, I can come up with a few suggestions for you.

Firstly, I think the problem you are encountering is not in jQuery or IE (even though most problems are in IE), but rather in your 'cycle' plugin. If you're aiming at a carousel effect, I recommend you checkout Twitter's Bootstrap @ http://twitter.github.com/bootstrap

There, you'll find an amazing set of styles and scripts which will allow you to use basic markup to set up your slider. Here's an example using Bootstrap.

The markup would just look something like this:

<!-- The carousel container -->
<div id="slider" class="carousel slide">
    <!-- The carousel -->
    <div class="carousel-inner">
        <div class="active item">
            <!-- Here you can put the image itself, as well as a custom element to hold a caption -->
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
            <div class="carousel-caption">
                  <h4>The Title</h4>
                  <p>Some text.</p>
                </div>
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        </div>
    <!-- The anchors to move through the carousel -->
    <a class="carousel-control left" href="#slider" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#slider" data-slide="next">&rsaquo;</a>
</div>

Best part is, you won't have to write any scripting for it. You can use this as is, just the markup will auto initialize.

Few Tips.

I just felt I should give you a few tips since you are aiming at making your site support internet explorer.

When making sites capable of being run even with Internet Explorer's crappy everything, it's a good idea to use little shivs and tools that'll optimize your site for you. You no longer have to do a switch/case to optimize your site.

When you're using HTML5 elements, try including 'HTML5Shiv @ http://code.google.com/p/html5shiv/'. And for CSS3, I'm writing 'CSS3Shiv @ http://github.com/karimsa/css3shiv', but that won't be out till January.

Regardless, it's a good idea to browse around and check if the plugins you're using are able to self-optimize, if not, I really recommend you look for other ones.

Answer 2

When I open your sample page in Chrome I get

[cycle] terminating; zero elements found by selector

Maybe your problem isn't in JS, but in your markup. Maybe you haven't closed some div or have empty set of elements defined. Also, page doesn't work in Chrome either.

EDIT: Yes I think the problem is in your markup. On your FAQ page, IE simply breaks but shows 4 pictures in your footer, but Chorme doesn't show anything. If I go to Chrome developer tools I see that it's animating some element in your footer.