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);
}});