views:

56

answers:

1

Hi there!

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();
}
+2  A: 

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 ..

Gaby
He's right! try setting it explicitly if you can and that will fix it!
wowo_999
Why would it return 'auto' if right margin its 19px? fucking internet explorer.. i'll check it! thanks! ;)
sanchy
I LOVE YOU MAN :D that was it. how did you realize?
sanchy
ps: i just changed the margin-right to padding-right at the CSS. So I wouldn't have to set it specifically and just use .outerWidth().
sanchy
@sanchy, just used firebug lite, and tested the scripts ..
Gaby
firebug lite hmm... ill take a look at that. Thanks again
sanchy