Question

I coded a simple sliding gallery with jQuery. It’s a narrow container with a wide table inside that changes it’s ‘left‘ property through .animate()

Works beautifully on Firefox, Safari and IE8. However i’m having an issue with internet explorer 7 and below.

A message error pops up saying ‘script error. line: 4619. char: 4. error: invalid argument. url: http://www.imagina.com.uy/bentancorleborgne/?page_id=2

That line can only be inside the jQuery.js file. Since it’s the only file with 6k+ lines.

So I’m wondering. What the hell is going on!!

The error only pops up when I press the arrow to animate the gallery. So I’m leaving the script’s code just in case you can get some clue from there.

Any help or clue would be geatly appreaciated. Thanks in advance!!

$(document).ready(function() {      
    var tablaWidth = parseFloat($('.imagenesWrapper table').width());
    var tdWidth = parseFloat( $('.imagenesWrapper table tr td').outerWidth() )  +  parseFloat( $('.imagenesWrapper table tr td').css('marginRight') );
    var cantCeldas = tablaWidth / tdWidth - 1;
    var posActual = 0;
    var leftCSS = 1;

    if(cantCeldas==0) {
        $('#leftArrow').hide();
        $('#rightArrow').hide();
    }
    else 
        $('#rightArrow').show();


    $('#rightArrow').click(function() {
        if(leftCSS < tablaWidth) {
            posActual += 1;
            leftCSS = moverTabla(posActual, cantCeldas, tdWidth);
        }
    });
    $('#leftArrow').click(function() {
        if(posActual > 0) {
            posActual -= 1;
            leftCSS = moverTabla(posActual, cantCeldas, tdWidth);
        }
    }); 
});

function moverTabla(pos, cantidad, tdWidth) {   
    var leftCSS = pos * tdWidth;
    $('.imagenesWrapper table').animate( {left: '-' + leftCSS +'px'}, 'slow');      
    mostrarOcultarFlechas(pos, cantidad);       
    return leftCSS;
}

function mostrarOcultarFlechas(pos, cantidad) { 
    //mostrar-ocultar flecha izquierda
    if(pos==0) 
        $('#leftArrow').hide();
    else if($('#leftArrow').css('display') == 'none') 
        $('#leftArrow').show(); 
    //mostrar-ocultar flecha derecha    
    if(pos==cantidad) 
        $('#rightArrow').hide();
    else if($('#rightArrow').css('display') == 'none') 
        $('#rightArrow').show();
}

Answer 1

The problem is that IE7- returns auto for the $('.imagenesWrapper table tr td').css('marginRight')

So the parseFloat() returns NAN (not a number) and everything fails after that..

checking for the reason ..