CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Martin Hobert
Martin Hobert

Reputation: 203

Background-image style with JS not working in ie9

I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within.

You can see it in function here: http://diakondk.quine.pil.dk/

It works wonders in most browsers but i cant seem to figure out why its not working in IE9 or how im gonna make it work since im no JS master.

Any suggestions?

var slideshow = (function () {
var images = $('.img-slider-wrapper img').map(function() { 
                  return this.src; 
             }).get()
             for(i = 0; i < images.length; i++) {
               $(".selector").append('<div class="dot" data-image="'+i+'" id="dot'+i+'"></div>');
             }
var index = images.length - 1;
var dot = "#dot"+index;
var timer = setTimeout(slideshow, 8000);

  $('.selector .dot').click(function() {
     index = this.dataset.image;
     $(".img-slider-wrapper").css('background-image', 'url(' + images[index] + ')');
     $(".dot.active").removeClass("active");
     dot = "#dot"+index;
     $(dot).addClass("active");
     clearTimeout(timer);
     timer = setTimeout(slideshow, 8000);
  });

  return function () {
    index = (index + 1) % images.length;
    $(".img-slider-wrapper").css('background-image', 'url(' + images[index] + ')');
    $(".dot.active").removeClass("active");
    dot = "#dot"+index;
    $(dot).addClass("active");
    clearTimeout(timer);
    timer = setTimeout(slideshow, 8000);
  }
 }());

 $(document).ready(slideshow);

Upvotes: 0

Views: 88

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution).

It's a matter of time. At the moment when you call 

var timer = setTimeout(slideshow, 8000);

slideshow is undefined , and undefined is not a valid argument for setTimeout.

Wrap the call in a anonymous function:

var timer = setTimeout(function(){slideshow();}, 8000);

The anonymous function will be a valid argument for setTimeout and the contents of this function will be evaluated after 8sec(when slideshow is defined and a function)

Upvotes: 1

Related Questions