treehouse : what would you like to learn today?
Web Design Web Development iOS Development

AnythingSlider resizeContents bugs in IE8

  • I work on a website using AnythingSlider. My current setup works in every browser, except Internet Explorer 8 and it's driving me nuts. IE8 bugs out of the Javascript with the following error:

    '2' is null or not an object in anythingslider.js line 6
    '2' is null or not an object in anythingslider.js line 6
    

    (the error does appear twice in the error console). My current setup (version 1.8.7) is configured as follows:

    $('#gallery').anythingSlider({
        buildStartStop: false,
        resizeContents: false,
        hashTags:       false,
    
        appendBackTo: $('#slidernav span:eq(0)'),
        appendControlsTo: $('#slidernav span:eq(1)'),
        appendForwardTo: $('#slidernav span:eq(2)'),
    
        forwardText: "»",
        backText:    "«",
    
        // Enable slide functionality
        onInitialized: function(e, slider) {
            var time = 1000, // allow movement if < 1000 ms (1 sec)
                range = 50,  // swipe movement of 50 pixels triggers the slider
                x = 0, t = 0;
    
            // Bind events to the slider
            slider.$window.bind('touchstart', function(e){
                // Store starting position of swipe
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
            });
    
            slider.$window.bind('touchend', function(e){
                // Terminates swipe
                t = 0; x = 0;
            });
    
            slider.$window.bind('touchmove', function(e){
                // Calculate how far and how long we've moved
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                ct = (new Date()).getTime();
                // Determine whether we've moved far and long enough to advance the slidedeck
                if (t !== 0 && ct - t < time && r > range) {
                    // Do not scroll the page
                    e.preventDefault();
                    // Advance slider
                    if (newx < x) { slider.goForward(); }
                    if (newx > x) { slider.goBack(); }
                    // Reset touch-event
                    t = 0; x = 0;
                }
            });
        }
    })
    

    I've tracked the bug to:

    resizeContents: false
    

    If I remove that line, it works in IE8. But I need to the line to whip my content (from Wordpress and not-so-savvy users) in shape. Any help would be much appreciated!