www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Using style.position on a text ?

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Location
    France
    Posts
    23

    resolved [RESOLVED] Using style.position on a text ?

    Hi,

    As a noob, I'm trying to make a little game in JS (only client side). For that, i put images in different positions on the screen without problem with style.position/bottom/left/zindex.

    But i can't do the same thing with a text : The script stop when it encounter the first "style" command :

    Code:
    			case5[i3+"*"+j3] = document.createElement("div");
    			case5[i3+"*"+j3] = document.createTextNode(ville_nom[a]);
    			document.getElementById('ratsodie').appendChild(case5[i3+"*"+j3]);
    	//		case5[i3+"*"+j3].style.position = 'absolute';
    	//		case5[i3+"*"+j3].style.bottom = i2 + 'px';
    	//		case5[i3+"*"+j3].style.left = j2 + 'px';
    	//		case5[i3+"*"+j3].style.zIndex = j4+1;
    When i un-comment one of the four "style" lines, the script stop.

    Does somebofy know how i can put a text on the screen at a position in pixels (because the text need to be on top an image, and that image is put by bottom/left commands).


    Thank you.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,135
    case5[] may not be an element object, so it might not have a 'style' property which would cause a crash. Insert something like:

    alert(case5[i3+"*"+j3]);

    above the commented lines and check that the result is an HTML element. If not, you'll need to re-write that section. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Location
    France
    Posts
    23
    Thank you for your answer.


    The alert box say "object text". That's not good ?

    Firefox error terminal say "case5[i3+"*"+j3].style" is "undefined

    If i put a "var" before (var case5[...), it say a " ; " is missing between case5 and [...

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    if you show whole the page that may help. and by the way:

    http://www.devguru.com/technologies/.../obj_text.html

    elements can have .style but not their text data
    Last edited by Padonak; 03-31-2012 at 12:47 PM. Reason: typo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Mar 2012
    Location
    France
    Posts
    23
    Well, okay.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Ratsodie</title>
            <script>
                window.onload = function () {
    
    
    // Définition du jeu //
    // Game Definition //
    
    
    
    // Répertoire du mod.
    // Mod folder.
    var mod="ratsodie";
    
    // Taille d'affichage des cases (100 = normal. + = plus grand. - = plus petit.
    // Size of tiles (100 = normal. + = bigger. - = Tinier
    var taille_case = 100;
    
    // Carte du monde. Un terrain de base.
    // World map. A standard ground.
      table1 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);				
      table2 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
      table3 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
      table4 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
      table5 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
      table6 = new Array(11,11,11,12,04,04,04,14,14,15,15,16,16,17,17,18,18);
      table7 = new Array(11,11,11,04,04,13,13,14,14,15,15,16,16,17,17,18,18);
      table8 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
      table9 = new Array(11,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
     table10 = new Array(11,01,01,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
     table11 = new Array(01,01,11,12,12,13,13,14,14,15,15,16,16,05,05,05,18);
     table12 = new Array(11,11,11,12,12,13,01,14,14,15,15,16,16,17,05,05,18);
     table13 = new Array(11,01,01,01,01,01,01,01,01,01,15,16,16,17,17,18,18);
     table14 = new Array(01,01,02,02,02,02,02,02,02,02,01,01,16,17,17,18,18);
     table15 = new Array(01,02,02,02,02,03,03,03,03,02,02,02,01,01,01,18,18);
    
    // Lines number for the map. North-South.
    // Nom de lignes du jeu (hauteur, Nord-Sud).
    var table_l=15;
    
    // Columns number for the map. Est-West
    // Nom de colonnes du jeu (largeur, Est-Ouest).
    var table_c=17;
    
    // List of base grounds.
    // Liste des terrains de base.
    var ter_image = new Array();
    ter_image[11]="glace";
    ter_image[12]="toundra";
    ter_image[13]="taiga";
    ter_image[14]="lande";
    ter_image[15]="oceanique";
    ter_image[16]="steppe";
    ter_image[17]="desert";
    ter_image[18]="tropical";
    ter_image[1]="cote";
    ter_image[2]="mer";
    ter_image[3]="ocean";
    ter_image[4]="lac";
    ter_image[5]="lave";
    
    // List of forests for each ground.
    // Liste des forets pour chaque terrain.
    var ter_foret_image = new Array();
    ter_foret_image[11]="";
    ter_foret_image[12]="taiga";
    ter_foret_image[13]="taiga";
    ter_foret_image[14]="oceanique";
    ter_foret_image[15]="oceanique";
    ter_foret_image[16]="oceanique";
    ter_foret_image[17]="tropical";
    ter_foret_image[18]="tropical";
    ter_foret_image[1]="";
    ter_foret_image[2]="";
    ter_foret_image[3]="";
    ter_foret_image[4]="";
    ter_foret_image[5]="";
    
    // Grounds that are seen as "sea" by the game. 1 is classical water, 2 is lava. Others values can show other wet terrains.
    // Liste des terrains étant considérés comme une "mer". 1 est de l'eau classique, 2 de la lave. D'autres valeurs peuvent indiquer des types "aquatiques" différents.
    var ter_mer = new Array();
    ter_mer[1]=1;
    ter_mer[2]=1;
    ter_mer[3]=1;
    ter_mer[4]=1;
    ter_mer[5]=2;
    
    // Tiles with a river. Line*Column.
    // Liste des cases contenant un fleuve. Ligne*Colonne.
    fleuve = new Array("4*3","5*3","6*3","6*4","8*4","8*5","9*5","10*5","11*5","11*6","11*7","11*8","11*9","12*9","13*9","6*10","6*9","7*4","7*9","8*9","9*9","9*8","9*7","9*6","6*11","6*12","5*11","7*11","7*7","7*8","8*1","8*2","8*3","7*2","4*4","4*5","4*6","4*7","4*8","5*6","5*1","6*13","6*14","6*15","6*16","5*16","4*16","3*16","1*2");
    
    // Forest map. 1=yes, 0=no.
    // Carte des forêts. 1=Oui, 0=Non. La variable "mer" a priorité sur ce tableau.
      foret1 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
      foret2 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
      foret3 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
      foret4 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
      foret5 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1,0);
      foret6 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
      foret7 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
      foret8 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1,0);
      foret9 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
     foret10 = new Array(0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
     foret11 = new Array(0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0);
     foret12 = new Array(0,0,1,1,1,1,0,1,1,1,1,1,0,0,0,0,0);
     foret13 = new Array(0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0);
     foret14 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
     foret15 = new Array(0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0);
    
    // Create the the map arrays for forests and ground.
    // Crée le tableau des cartes "foret" et "table".  
    foret = new Array(foret1,foret2,foret3,foret4,foret5,foret6,foret7,foret8,foret9,foret10,foret11,foret12,foret13,foret14,foret15);
    table = new Array(table1,table2,table3,table4,table5,table6,table7,table8,table9,table10,table11,table12,table13,table14,table15);
    
    
    // pre-existing cities
    // Ville préplacées
    var	ville_position = new Array();
    var	ville_nom = new Array();
    
    ville_position[1] = "5*3";
    ville_nom[1] = "Ville 1";
    
    ville_position[2] = "6*13";
    ville_nom[2] = "Ville 2";
      
      
    // Code // 
      
      
    var table_nb_cases = table_l*table_c;  
    var taille_case_vertical = taille_case/2+(taille_case);
      
    
    
    case1 = new Array();
    case2 = new Array();
    case3 = new Array();
    case4 = new Array();
    case5 = new Array();
    kf = new Array();
    
    for(var i=0 ; i < table_l ; i++)
    {
    	for(var j=0 ; j < table_c ; j++)
    	{
    			for(var k2=0;k2<10;k2++) {kf[k2]=0;}
    			
    		var i2 = (table_l*taille_case/4)-i*(taille_case/4)+(j*(taille_case/4));
    		var j2 = 50+(j*taille_case-(j*taille_case)/2)+(i*taille_case/2);
    		var i3 = i+1;
    		var j3 = j+1;
    		var j4 = (i*table_c)+(table_c-j);
    		
    		// Show the ground
    		// Afficher le sol
    		
    ncase = "terrain_"+ter_image[table[i][j]]+"_1.svg";	
    
    			case1[i3+"*"+j3] = document.createElement("img");
    			case1[i3+"*"+j3].src=mod+"/terrain/"+ncase;
    			case1[i3+"*"+j3].setAttribute('width',taille_case);
    			//case1[i3+"*"+j3].setAttribute('height',taille_case_vertical);
    			case1[i3+"*"+j3].setAttribute('id','case1['+i3+'*'+j3+']');
    			document.getElementById('ratsodie').appendChild(case1[i3+"*"+j3]);	
    			case1[i3+"*"+j3].style.position = 'absolute';
    			case1[i3+"*"+j3].style.bottom = i2 + 'px';
    			case1[i3+"*"+j3].style.left = j2 + 'px';
    			case1[i3+"*"+j3].style.zIndex = j4;
    			
    		// Show the rivers 
    		// Afficher les fleuves.
    
    		var fleuve_element = i3+"*"+j3;
    		if (fleuve.indexOf(fleuve_element) != -1 && !ter_mer[table[i][j]])
    		{
    			var fleuve_element_n = (i3-1)+"*"+j3;
    			var fleuve_element_e = (i3)+"*"+(j3+1);
    			var fleuve_element_s = (i3+1)+"*"+j3;
    			var fleuve_element_o = (i3)+"*"+(j3-1);
    			var fleuve_voisin = 0;
    			kf[5]=1;
    			if (fleuve.indexOf(fleuve_element_n) != -1) {fleuve_voisin+=1; kf[4]=1;}
    			if (fleuve.indexOf(fleuve_element_e) != -1) {fleuve_voisin+=2; kf[8]=1;}
    			if (fleuve.indexOf(fleuve_element_s) != -1) {fleuve_voisin+=4; kf[6]=1;}
    			if (fleuve.indexOf(fleuve_element_o) != -1) {fleuve_voisin+=8; kf[2]=1;}
    			
    			var ncase = "riviere_"+fleuve_voisin+".svg";
    							
    							
    			case2[i3+"*"+j3] = document.createElement("img");
    			case2[i3+"*"+j3].src=mod+"/terrain/"+ncase;
    			case2[i3+"*"+j3].setAttribute('width',taille_case);
    			//case2[i3+"*"+j3].setAttribute('height',taille_case_vertical);
    			case2[i3+"*"+j3].setAttribute('id','case2['+i3+'*'+j3+']');
    			document.getElementById('ratsodie').appendChild(case2[i3+"*"+j3]);	
    			case2[i3+"*"+j3].style.position = 'absolute';
    			case2[i3+"*"+j3].style.bottom = i2 + 'px';
    			case2[i3+"*"+j3].style.left = j2 + 'px';
    			case2[i3+"*"+j3].style.zIndex = j4;				
    			
    	
    		}
    		
    		// Fow the pre-existing cities.
    		// Afficher les villes préplacée.
    		
    		var a = ville_position.indexOf(fleuve_element);
    		
    		if (a != -1)
    		{
    			var ncase = "ville.svg";
    			case4[i3+"*"+j3] = document.createElement("img");
    			case4[i3+"*"+j3].src=mod+"/terrain/"+ncase;
    			case4[i3+"*"+j3].setAttribute('width',taille_case);
    			//case4[i3+"*"+j3].setAttribute('height',taille_case_vertical);
    			case4[i3+"*"+j3].setAttribute('id','case4['+i3+'*'+j3+']');
    			document.getElementById('ratsodie').appendChild(case4[i3+"*"+j3]);	
    			case4[i3+"*"+j3].style.position = 'absolute';
    			case4[i3+"*"+j3].style.bottom = i2 + 'px';
    			case4[i3+"*"+j3].style.left = j2 + 'px';
    			case4[i3+"*"+j3].style.zIndex = j4+1;				
    			
    			
    			case5[i3+"*"+j3] = document.createElement("div");
    			case5[i3+"*"+j3] = document.createTextNode(ville_nom[a]);
    			document.getElementById('ratsodie').appendChild(case5[i3+"*"+j3]);
    	//		alert(case5[i3+"*"+j3]);
    			case5[i3+"*"+j3].style.position = 'absolute';
    			case5[i3+"*"+j3].style.bottom = i2 + 'px';
    			case5[i3+"*"+j3].style.left = j2 + 'px';
    			case5[i3+"*"+j3].style.zIndex = j4+1;
    		}
    
    		
    		// Show the forests.
    		// Afficher les forets.
    		
    
    		if (foret[i][j]==1 && !ter_mer[table[i][j]])
    		{
    			for (var k=1;k<10;k++)
    			{
    				if (kf[k]==0)	
    				{
    				ncase = mod+"/terrain/"+"foret_"+ter_foret_image[table[i][j]]+"_"+k+".svg";
    				case3[i3+"*"+j3] = document.createElement("img");
    				case3[i3+"*"+j3].src=ncase;
    				case3[i3+"*"+j3].setAttribute('width',taille_case);
    				//case3[i3+"*"+j3].setAttribute('height',taille_case_vertical);
    				case3[i3+"*"+j3].setAttribute('id','case3['+i3+'*'+j3+']');
    				document.getElementById('ratsodie').appendChild(case3[i3+"*"+j3]);	
    				case3[i3+"*"+j3].style.position = 'absolute';
    				case3[i3+"*"+j3].style.bottom = i2 + 'px';
    				case3[i3+"*"+j3].style.left = j2 + 'px';
    				case3[i3+"*"+j3].style.zIndex = j4+1;
    				}
    			}
    		}
    	}
    }
    
                };
                 
            </script>
      </head>
      <body>
            <div id="ratsodie"></div>
      </body>
    </html>

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    replace
    Code:
    case5[i3+"*"+j3] = document.createTextNode(ville_nom[a]);
    with
    Code:
    case5[i3+"*"+j3].innerHTML = ville_nom[a];
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Mar 2012
    Location
    France
    Posts
    23
    Oh, thank you, that work !

    I just read a page on innerHTML, and i see it's full of possibilities.


    Again, thank you :-)

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    good to hear ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles