Firefox and Chrome not updating position of GIF images properly

[Humakt]

Hey all. It's been a while since I last visited.

Short description of program: Board game which's html elements are fully constructed using DHTML/Javascript. Board is constructed of html table, and each table cell has one image (together the table forms a map/board). Players (2-4) each have their own pawns that float over the board using z-index (they are GIF-images).

I actually did this program last fall and it works fine and dandy except Firefox and Google Chrome have a bit odd behaviour when it comes to placing GIF images (players' pawns) on the board on startup. They get into proper position after some refreshing and moving pawns works properly always. Just at the startup (unless page has been refreshed) will the pawn start at upper middle and not in their starting positions. This works perfectly fine in IE 7, IE 8 and Opera by the way.

Here is the code where I set the starting position of players' pawns upon starting.

var h = 0;
    while(h<pelaajia){ //pelaajia = amout of players
        var x = findPosX(document.getElementById(vuorotaulu[h].id)); //array containing player objects
        var y = findPosY(document.getElementById(vuorotaulu[h].id));
        document.getElementById(vuorotaulu[h].nappula).style.left = x + 20 + "px"; //nappula is for pawn, it is one the variables for player object
        document.getElementById(vuorotaulu[h].nappula).style.top = y + (h * 5) + "px";
        h++;
    }

And findPosX and findPosY:

function findPosX(obj){
    var curleft = 0;
    if(obj.offsetParent){
        while(1){
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)break;
          obj = obj.offsetParent;
        }
    }else if(obj.x)curleft += obj.x;
    return curleft;
}
 
function findPosY(obj){
    var curtop = 0;
    if(obj.offsetParent){
        while(1){
          curtop += obj.offsetTop;
          if(!obj.offsetParent)break;
          obj = obj.offsetParent;
        }
    }else if(obj.y)curtop += obj.y;
    return curtop;
}

Any insight or help on the matter is appreciated.

[gits]

when is the code executed? in the page's onload handler?

kind regards

[Humakt]

Actually no. There is a html page which has a form for player names and description of game with rules. All that is inside div element which's contents will be replaced by gametable (and other game related stuff) via Javascript function tarkista() that is called from form.

This is function that is called from form of html page (validates and builds gametable also creates new Peli object (Game object)):

function tarkista(){
    var i = 0;
    var pelaajaa, pelaajab, pelaajac, pelaajad;
    pelaajaa = document.getElementById('nimia').value;
    pelaajab = document.getElementById('nimib').value;
    pelaajac = document.getElementById('nimic').value;
    pelaajad = document.getElementById('nimid').value;
    if(pelaajaa !== ""){vuorotaulu[i] = new Pelaaja(pelaajaa, 500, "8_5", i, 47); i++;}
    if(pelaajab !== ""){vuorotaulu[i] = new Pelaaja(pelaajab, 500, "8_6", i, 48); i++;}
    if(pelaajac !== ""){vuorotaulu[i] = new Pelaaja(pelaajac, 500, "8_7", i, 49); i++;}
    if(pelaajad !== ""){vuorotaulu[i] = new Pelaaja(pelaajad, 500, "8_8", i, 50); i++;}
    if(i < 2){ 
        document.getElementById('tarkka').innerHTML = "Moninpelissä täytyy olla vähintään kaksi pelaajaa"; //Peli ei käynnisty ellei tämä ehto täyty
    }else{
        //laitetaan nappulat sivulle
        var sivunteko = "";
        if(pelaajaa !== ""){
            sivunteko = sivunteko +"<div class='position_player1' id='position_player1'><img src='pelaajat/player1.gif' id='player1'></div>";
        }
        if(pelaajab !== ""){
            sivunteko = sivunteko +"<div class='position_player2' id='position_player2'><img src='pelaajat/player2.gif' id='player2'></div>";
        }
        if(pelaajac !== ""){
            sivunteko = sivunteko +"<div class='position_player3' id='position_player3'><img src='pelaajat/player3.gif' id='player3'></div>";
        }
        if(pelaajad !== ""){
            sivunteko = sivunteko +"<div class='position_player4' id='position_player4'><img src='pelaajat/player4.gif' id='player4'></div>";
        }
        sivunteko = sivunteko + "<table class='pelaajat'><tr>";
        if(pelaajaa !== ""){
            sivunteko = sivunteko +"<td class='pelaaja1'>"+pelaajaa+"<div id='"+pelaajaa+"'>Rahaa: 500</div></td>";
        }
        if(pelaajab !== ""){
            sivunteko = sivunteko +"<td class='pelaaja2'>"+pelaajab+"<div id='"+pelaajab+"'>Rahaa: 500</div></td>";
        }
        if(pelaajac !== ""){
            sivunteko = sivunteko +"<td class='pelaaja3'>"+pelaajac+"<div id='"+pelaajac+"'>Rahaa: 500</div></td>";
        }
        if(pelaajad !== ""){
            sivunteko = sivunteko +"<td class='pelaaja4'>"+pelaajad+"<div id='"+pelaajad+"'>Rahaa: 500</div></td>";
        }
        //noppa
        sivunteko = sivunteko +"<td><div class='nop'><img src='noppa/noppa_6.png' id='noppa'></div></td>";
        sivunteko = sivunteko +"</tr></table>";
        //kartta
        sivunteko = sivunteko +"<table id='kartta' class='kartta'>";
        sivunteko = sivunteko +"<tr>";
        sivunteko = sivunteko +"<td colspan='12'><img src='palikat/yla.png'></td>";
        sivunteko = sivunteko +"</tr>";
        sivunteko = sivunteko +"<tr>";
        sivunteko = sivunteko +"<td rowspan='8'><img src='palikat/vasen.png'></td>";
        sivunteko = sivunteko +"<td><img src='palikat/1_1.png' id='0' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko +"<td><img src='palikat/1_2.png' id='1' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_3.png' id='2' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_4.png' id='3' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_5.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_6.png' id='4' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_7.png' id='5' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_8.png' id='6' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_9.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/1_10.png'></td>";
        sivunteko = sivunteko + "<td rowspan='8'><img src='palikat/oikea.png'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/2_1.png' id='7' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_3.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_4.png' id='8' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_5.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_6.png' id='9' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_7.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_8.png' id='10' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_9.png' id='11' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/2_10.png' id='12' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/3_1.png' id='13' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_3.png' id='14' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_4.png' id='15' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_5.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_6.png' id='16' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_7.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_8.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_9.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/3_10.png' id='17' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/4_1.png' id='18' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_3.png' id='19' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_4.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_5.png' id='20' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_6.png' id='21' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_7.png' id='22' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_8.png' id='23' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_9.png' id='24' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/4_10.png' id='25' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/5_1.png' id='26' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_3.png' id='27' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_4.png' id='28' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_5.png' id='29' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_6.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_7.png' id='30' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_8.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_9.png' id='31' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/5_10.png'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/6_1.png' id='32' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_3.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_4.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_5.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_6.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_7.png' id='33' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_8.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_9.png' id='34' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/6_10.png'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/7_1.png' id='35' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_2.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_3.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_4.png' id='36' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_5.png' id='37' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_6.png' id='38' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_7.png' id='39' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_8.png' id='40' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_9.png' id='41' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/7_10.png' id='42' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td><img src='palikat/8_1.png' id='43' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_2.png' id='44' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_3.png' id='45' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_4.png' id='46' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_5.png' id='47' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_6.png' id='48' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_7.png' id='49' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_8.png' id='50' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_9.png'></td>";
        sivunteko = sivunteko + "<td><img src='palikat/8_10.png' id='51' onClick='peli.klikkaus(this.id)'></td>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "<tr>";
        sivunteko = sivunteko + "<td colspan='12'><img src='palikat/ala.png'>";
        sivunteko = sivunteko + "</tr>";
        sivunteko = sivunteko + "</table>";
        sivunteko = sivunteko + "<div id='vuoro' align='center' class='vuoro'>Vuorotaulu.</div>";
        document.getElementById('sivu').innerHTML = sivunteko;
        peli = new Peli(i); //tehdään peliolio
    }
}

Here is the code for Peli() which puts the pawns into starting position among other things:

function Peli(pelaajia){
    this.klikkaus = klikattu; // klikattu funktio pelille
    this.pelaajia = pelaajia; //pelaajien määrä
    this.vuoroja = vuoro; // vuoro funktio pelille
    this.vaihda = vaihdavuoro; // vaihdavuoro funktio pelille
    var noppaluku = 0; // apumuuttuja nopan silmäluvun muistamista varten
    var osta = false;
    var odota, odota2, odota3 = false;
    var mikaostetaan = 999;
    // arvotaan paikoille laput:
    var k = 0, aarre = 0, varas = 0;    
    while(k<52){
        if(paikat[k].onlappu){
            var onkotehtylappu = false;
            while(!onkotehtylappu){
                var randomi = Math.ceil(Math.random() * 4);
                if(randomi == 1 && aarre !== 1 && !(Math.ceil(Math.random() * 3) == 1)){
                        paikat[k].lappu = 1;
                        aarre = 1;
                        onkotehtylappu = true;
                }
                if(randomi == 2 && varas < (pelaajia - 1) && !(k == 51 && aarre === 0)){
                        paikat[k].lappu = 2;
                        varas++;
                        onkotehtylappu = true;
                }
                if(randomi == 3 && !(k == 51 && aarre === 0)){
                        paikat[k].lappu = 3; //jalokivi
                        onkotehtylappu = true;
                }
                if(randomi == 4 && !(k == 51 && aarre === 0)){
                        if(Math.ceil(Math.random() * 2) == 1) paikat[k].lappu = 4; //tyhjä lappu
                        else paikat[k].lappu = 5; //uusi vuoro lappu
                        onkotehtylappu = true;
                }
            }
        }
        k++;
    }
    //korjataan pelaajien sijainti kartalla:
    var h = 0;
    while(h<pelaajia){
        var x = findPosX(document.getElementById(vuorotaulu[h].id));
        var y = findPosY(document.getElementById(vuorotaulu[h].id));
        document.getElementById(vuorotaulu[h].nappula).style.left = x + 20 + "px";
        document.getElementById(vuorotaulu[h].nappula).style.top = y + (h * 5) + "px";
        h++;
    }
    //aloitetaan peli:
    this.vuoroja();
}

[gits]

have a look at the firefox-error console or use firbebug for firefox to see whether the node could be retrieved reliably with your current code ... otherwise call the code from the onload-handler of the page this should solve the problem ...

kind regards

[Humakt]

@gits
Error console gave me nothing. But I made separate function that sets pawns to starting positions. Function is called upon loading last image of the generated table (called via onload-handler). Works like a charm now. Thanks for the help.

[gits]

glad to hear that you got it working :) ...

kind regards

[Humakt]

If you are interested to see what this was about, take a peek: http://ukkosmyrsky.mine.nu/Aarreretki/Aarreretki.html

Yes, it is in my native language. Yes, I made those terrible graphics.

[gits]

ok ;) ... i guess it's Finnish? and the graphics could be much worser ... so i find it quite good ... :)

kind regards,
gits

[Humakt]

@gits
That's right. Are you familiar with Finnish language? Or did you just google translate it? ;)

Thanks for the help again, BYTES is the best forum when it comes to IT. At least from those few forums I viewed/know ;?).

[gits]

nej .... jag talar lite svenska :) ... and it just looked Finnish so i said 'i guess' :)

[Frinavale]

I've been watching the TV show "Lost" lately...it reminds me of it (the plane in the corner approaching what looks like an island )

Not a bad looking game :)