Grow your CSS skills. Land your dream job.

AnythingSlider resizeContents bugs in IE8

  • # January 3, 2013 at 4:27 pm

    I work [on a website](http://www.noorderlicht.net/projecten/jaffa) 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!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".