[RESOLVED] Using style.position on a text ?

**Ddurand** · 03-31-2012, 09:50 AM

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.

**rtrethewey** · 03-31-2012, 10:54 AM

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!

**Ddurand** · 03-31-2012, 12:00 PM

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

**Padonak** · 03-31-2012, 12:46 PM

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

**Ddurand** · 03-31-2012, 02:09 PM

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>

**Padonak** · 03-31-2012, 02:39 PM

replace

Code:

case5[i3+"*"+j3] = document.createTextNode(ville_nom[a]);

with

Code:

case5[i3+"*"+j3].innerHTML = ville_nom[a];

**Ddurand** · 04-01-2012, 05:32 AM

Oh, thank you, that work !

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

Again, thank you :-)

**Padonak** · 04-01-2012, 08:45 AM

good to hear ))

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

Thread Tools

Display

Hybrid View

[RESOLVED] Using style.position on a text ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions