CODEWITHSUNDEEP
jqueryinternet-explorercross-browsershow-hide
Mark Rummel
Mark Rummel

Reputation: 2940

Simple Custom jQuery Rotator Not Working in IE 7, 8, or 9

Here is my jsFiddle: http://jsfiddle.net/markrummel/vPcrX/

This code works in Chrome, Firefox, Safari, and IE 10, but not in IE 7, 8, or 9.

I have tested it via IE 10's Developer Tool and it doesn't work when I first open it in IE 7, 8, or 9. However, after I open the Developer Tool it starts working in IE 7, 8, and 9. I have also tested in the older IE browsers via Microsoft's Virtual PC and the rotator isn't working.

You can see the whole page here: http://melaniejaderummel.com. However, I think the issue is isolated to the jQuery code since it doesn't work in the stripped-down jsFiddle.

Any help you can offer would be greatly appreciated!

My HTML:

<div id="testimonials">
    <p data-testimonial="1">“Testimonial Content” – Julie S.</p>
    <p data-testimonial="2">“Testimonial Content” – Melissa D.</p>
    <!--repeated; 10 total testimonials-->
</div>

The relevant CSS:

#testimonials p {display:none;}

And finally, here is my javascript:

$(document).ready(function () {

    var shownTestimonials = [];

    displayTestimonials(shownTestimonials);

    function displayTestimonials(shownTestimonials) {
        var totalTestimonials = 10;

        console.log(shownTestimonials);
        //console.log(shownTestimonials.length);

        if (shownTestimonials.length == 0 || shownTestimonials.length == totalTestimonials) {
            var shownTestimonials = [];
        }

        function getNewTestimonial(totalTestimonials) {
            return Math.floor(Math.random() * totalTestimonials) + 1; //random number between 1 and 10
        }

        var currentTestimonial = $('#testimonials p.visible').attr('data-testimonial');
        var newTestimonial = getNewTestimonial(totalTestimonials);

        console.log(currentTestimonial);

        if (currentTestimonial == null) {
            $('#testimonials p[data-testimonial="' + newTestimonial + '"]').addClass('visible').fadeIn(700);
            shownTestimonials.push(newTestimonial);
        } else {

            var newExists = 1;

            while (newExists > -1) {
                var newTestimonial = getNewTestimonial(totalTestimonials);
                var newExists = $.inArray(newTestimonial, shownTestimonials)
                console.log(newExists);
            }

            $('#testimonials p[data-testimonial="' + currentTestimonial + '"]').removeClass('visible').fadeOut(600);
            setTimeout(function () {
                $('#testimonials p[data-testimonial="' + newTestimonial + '"]').addClass('visible').fadeIn(700);
                shownTestimonials.push(newTestimonial);
            }, 700);
        } //end else

        setTimeout(function () {
            displayTestimonials(shownTestimonials);
        }, 12000);
    } //end displayTestimonials();

}); //end $(document).ready

Upvotes: 0

Views: 376

Answers (1)

j08691
j08691

Reputation: 207943

Remove or comment out the console.log statements. IE chokes on them unless the console is open (in the versions of IE that have the dev tools).

Per this MSDN article:

Keep in mind you will not be able to see the output unless you have the developer tools open. You can see the console output on either the Console or Script tabs. Be careful when using console for debugging. If you leave a call to the console object in your code when you move to production and you do not have the developer tools displayed you will get an error message telling you console is undefined. To avoid the error message, you either need to remove all the console method calls from your code, or you need to add a check to make sure console exists before calling any methods.

Upvotes: 1

Related Questions