Question

I have a really strange problem.
I’m using jQuery 1.7.1 and UI 1.8.17 for a slider.

It works like charm on Chrome, Safari and FF (as long as you don’t oben firebug…).
So far so good, BUT!

It doesn’t work on IE (tested with IE 8 & 9). However, as soon as you open the IE developer tools, the slider works!

I have absolutly no idea how to fix that… so hopefully anyone of you guys can help me out!

My JS-Code:

$(document).ready(function(){
$("#content-slider").slider({
        animate: true,
        value: 0,
        slide: handleSliderSlide,
        change:handleSliderChange
      });   

var c = parseInt($(".content-item").length);
var isiPad = navigator.userAgent.match(/iPad/i) != null;
//var w = eval((376 * c) + 1);
if ($.browser.msie && parseInt($.browser.version)==9 || isiPad) {
    var w = parseInt(eval(376.5 * c));
}
else {
    var w = eval(376.5 * c);
}

var s = $(window).width();


$("#content-scroll").attr('style', 'width:'+s+'px;');
$("#content-holder").attr('style','width:'+w+'px;');


if(isiPad){
        $("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:3px;');
    }
    else if($.browser.msie) {
        switch (parseInt($.browser.version)) {
            case 9:
                $("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:2px;');
                break;
            case 8:    
                $("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:2px;');
                break;
            case 7:    
                $("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:2px;');
                break;    
        }

    }
    else if ($.browser.safari) {
        $("#content-slider").attr('style', 'width:'+eval(s - 48)+'px;margin-left:3px;');
    } 
    else{
        $("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:2px;');
        //$("#content-slider").attr('style', 'width:'+eval(s - 49)+'px;margin-left:2px;');
    }

    $("a.fancybox").fancybox();

    $('#lnkproject').addClass('current');
        $('#lnkproject').click(function(){
            console.log('lnkproject.click');
            $('#lnkproject').addClass('current');
            $('#lnkskills').removeClass('current');
            $('#lnkcontact').removeClass('current');

            $("#content-slider").slider({
                animate: true,
                value: 0,
                slide: handleSliderSlide,
                change: handleSliderChange

            });
        });


    $('#lnkskills a').click(function(){
        console.log('lnkskills.click');
        $('#lnkproject').removeClass('current');
        $('#lnkcontact').removeClass('current');
        $('#lnkskills').addClass('current');        
        scval = parseInt(($("#content-holder").width() - $("#content-scroll").width()) / 100);
        $("#content-slider").slider({
            animate: true,
            value: eval(scval + 1),
            slide: handleSliderSlide,
            change: handleSliderChange
        });
    });

    $('#lnkcontact').click(function(){
        console.log('lnkcontact.click');
        $('#lnkproject').removeClass('current');
        $('#lnkskills').removeClass('current');
        $('#lnkcontact').addClass('current');       
        $("#content-slider").slider({
            animate: true,
            value: 100,
            slide: handleSliderSlide,
            change: handleSliderChange
        });
    });

    $("#fp_prev_thumb").click(function() {
        console.log('fp_prev_thumb.click');
        var slideval = parseInt($('#content-slider').slider("option", "value"));
        $("#content-slider").slider({
            animate: true,
            value: slideval - 10,
            slide: handleSliderSlide,
            change: handleSliderChange
        }); 
    });

    $("#fp_next_thumb").click(function() {
        console.log('fp_next_thumb.click');
        var slideval = parseInt($('#content-slider').slider("value"));
        $("#content-slider").slider({
            animate: true,
            value: (slideval + 10),
            slide: handleSliderSlide,
            change: handleSliderChange
        });


    });

function handleSliderChange(e, ui){
      console.log('handleSliderChange');
      var maxScroll = $("#content-holder").width() - $("#content-scroll").width();
      $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 200);
    }
function handleSliderSlide(e, ui)
    {
    console.log('handleSliderSlide');   
      var maxScroll = $("#content-holder").width() - $("#content-scroll").width();
      $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 20);
    }});

Answer 1

Get rid of your console.log calls. IE chokes on them when the dev tools aren’t open.