Nivo Slider not working in IE8

Question

I am encountering some issues with the jquery nivo slider on my companies website.

First of all, the website is hosted by an company who provided a inhouse cms where we can't change anything. That's why I don't have any permissons to load anything in the Head-Tag and can't upload any files except Images on that server

So I found a Javascript which loads CSS files in the head afterwards. Well all of this works properly in every browser (Chrome, FF, IE6, IE9) except IE8 the NivoSlider loads only the first Image, shows no caption, no navigation.

I have no clue why it does that because if I execute the code (shown below) locally it works (all files are stored locally too).

<script type="text/javascript" src="slider/scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="slider/scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
  function loadjscssfile(filename, filetype){
     if (filetype=="js"){ //if filename is a external JavaScript file
      var fileref=document.createElement('script')
      fileref.setAttribute("type","text/javascript")
      fileref.setAttribute("src", filename)
     }
     else if (filetype=="css"){ //if filename is an external CSS file
      var fileref=document.createElement("link")
      fileref.setAttribute("rel", "stylesheet")
      fileref.setAttribute("type", "text/css")
      fileref.setAttribute("href", filename)
     }
     if (typeof fileref!="undefined") {
      document.getElementsByTagName("head")[0].appendChild(fileref)
    }
    }

  function toggle() {
    var slider = document.getElementById("slider");
    slider.style.display = "block";
  }

    $(window).load(

    function() {
            loadjscssfile("slider/css/nivo-default.css", "css");
            loadjscssfile("slider/css/nivo-slider.css", "css");
            toggle();
            $('#slider').nivoSlider();

    }
    );

</script>

The Hoster uses Prototype JS Framework for their CMS, so I thought maybe that causes some kind interference. Actually if I open the Devtools in IE8 I shows me some errors in the Prototype.js file provided by the Hoster

var nodes = $(element).getElementsByTagName('*');
className = ' ' + className + ' ';

for (var i = 0, child, cn; child = nodes[i]; i++) {
  if (child.className && (cn = ' ' + child.className + ' ') && (cn.include(className) ||
      (classNames && classNames.all(function(name) {
        return !name.toString().blank() && cn.include(' ' + name + ' ');
      }))))
    elements.push(Element.extend(child));
}

It doesn't like these lines, it says something like (translated from german) "the object does not support this value or the method"

You can see the original homepage and code XXX and try it out for yourself. I hope you can help me with my issue.

Answer 1

Checking with Chrome's Developer Tools, the only problem I can see is this:

var nivo-child = $(this);

You can't have a dash in a variable name, change it to nivo_child or nivoChild .

---

To fix the second error, you need to use jQuery.noConflict() .