Javascript in different browsers

**XzAzX** · Nov 28, 2003, 10:47

right, I'm trying to make a battle system, which already works, but now i added a HP bar (with some help from xDev

) and it works fine for me in IE, but for example Opera doesn't get it right..

IE, good version :

Opera, wrong

:

http://www.binary-zero.net/maikel/spel/bs/Test2.html

here's the whole code (offcourse you can also view the source

)

HTML Code:

<HTML>
<HEAD>	
<style type="text/css">
#balk 
{
  width: 100px;
}
</style>
<script language="JavaScript">
		
var lvl = 10;
var att = 34;
var edef = 40;
var widthBalk = 100;
var widthLeeg = 0;
					
function attack(type)
{
	if(type=='norm')
		{
			var dmg=Math.round((((2*lvl/5+2)*(att/2)*(5 + Math.random()*10)/edef)/5+2));
			if(dmg < "1" ){ dmg = "1"; } 
			schade.innerHTML = dmg;
			hp.innerHTML -= dmg;
						
			// start HP balk
			widthBalk = hp.innerHTML;
			widthLeeg = 100 - hp.innerHTML;
			
			if(widthLeeg >= 100)
			{
				hp.innerHTML = 0;
				document.getElementById("balk").style.width = 0;
				document.getElementById("leeg").style.width = 100;
			}
			else
			{
				document.getElementById("balk").style.width = widthBalk;
				document.getElementById("leeg").style.width = widthLeeg;
			}		
			
			// einde HP balk
			
			
			
		
		}
					
	if(type=='fb')
		{
			if(mpx.innerHTML < 1)
			{ 
				alert("Your can't use FireBall any more\nbecause your MP is too low");
			}
			else
			{
				var dmg=Math.round((((2*lvl/5+2)*(att/2)*(30 + Math.random()*40)/edef)/5+2)); 
				if(dmg == "0" ){ dmg = "1"; } 
				mpx.innerHTML = mpx.innerHTML - 5;
				schade.innerHTML = dmg;
				hp.innerHTML -= dmg;
				
				// start HP balk
				widthBalk = hp.innerHTML;
				widthLeeg = 100 - hp.innerHTML;
			
				if(widthLeeg >= 100)
				{
					hp.innerHTML = 0;
					document.getElementById("balk").style.width = 0;
					document.getElementById("leeg").style.width = 100;
				}
				else
				{
					document.getElementById("balk").style.width = widthBalk;
					document.getElementById("leeg").style.width = widthLeeg;
				}		
			
			// einde HP balk
				
			}
		
	    }
					
	if(hp.innerHTML < 1)
		{
			hp.innerHTML = "0";
			var text = 
			"You Destroyed The Enemy!\nCongratulations!\n\n" +
			"This gave you 20 experience points!";
			alert(text);
		}
			
}

		</SCRIPT>

<SCRIPT>
		function menu(nr)
        {
        pic = "pic_" +nr;
                if(document.getElementById(nr).style.display=="none")
                {
                    document.getElementById(nr).style.display=''  ;
                    document.getElementById(pic).src='pilned.gif' ;
                }
                else
                {
                    document.getElementById(nr).style.display="none";
                    document.getElementById(pic).src='pil.gif' ;
                }
        }
</SCRIPT>
</HEAD>

<BODY rightmargin=0 leftmargin=0 bottommargin=0 topmargin=0>
<font face="verdana">
<br>
<center>
<table border="1" style="border-collapse:collapse">

<tr>
       <td id="balk" height="15" background="bar.gif"></td>
	   <td id="leeg" height="15" background="leeg.gif"></td>
</tr>
</table>

<TABLE align="center" border="1" style="border-collapse:collapse">
<TR>
<TD>Enemy HP :</TD>
<TD align="center" id="hp" style="font-weight:bold">100</TD>
</TR>
<TR>
<TD>Damage this time : </TD>
<TD align="center" id="schade">0</TD>
</TR>
<TR>
<TD>Your MP : </TD>
<TD align="center" id="mpx">10</TD>
</TR>
</TABLE>

<br>


<table align="center" border="0" width="200" cellspacing="0" cellpadding="3">
<tr>
<td width="100%" bgcolor="#CFD0CF" colspan="2" style="cursor:hand" 
onClick="menu('1')">
<img border="0" src="pil.gif" WIDTH="9" HEIGHT="9" id="pic_1">
&nbsp;Attack
</td>
</tr>
<TR>

<td bgcolor="#f0f0e0" style="display:none" id="1">
&nbsp;&nbsp;&nbsp;
<a style="cursor:hand" onClick="attack('norm');">Normal</a><br>

</td>

</tr>         
</table>

<table align="center" border="0" width="200" cellspacing="0" cellpadding="3">
<tr>
<td width="100%" bgcolor="#CFD0CF" colspan="2" style="cursor:hand" 
onClick="menu('2')">
<img border="0" src="pil.gif" WIDTH="9" HEIGHT="9" id="pic_2">
&nbsp;Cast
</td>
</tr>
<TR>

<td bgcolor="#f0f0e0" style="display:none" id="2">
&nbsp;&nbsp;&nbsp;
<a style="cursor:hand" onClick="attack('fb');">FireBall</a>&nbsp;&nbsp;(5 MP)
</td>

</tr>         
</table>

<br>
<br>
<TABLE align="center" border="1" style="border-collapse:collapse">
<TR>
<TD>Attack (att) :</TD>
<TD align="center" id="val_att">&nbsp;<script>document.write(att);</script>&nbsp;</TD>
</TR>
<TR>
<TD>Level (lvl) : </TD>
<TD align="center" id="val_lvl">&nbsp;<script>document.write(lvl);</script>&nbsp;</TD>
</TR>
<TR>
<TD>Enemy Defense (edef) : </TD>
<TD align="center" id="val_edef">&nbsp;<script>document.write(edef);</script>&nbsp;</TD>
</TR>
</TABLE>
<br>
<TABLE align="center" border="1" style="border-collapse:collapse">
<TR>
<TD><b>&nbsp;Type :</b> </TD>
<TD><b>&nbsp;Formule :</b> </td>
<TD><b>&nbsp;Min. Dmg :</b> </td>
<TD><b>&nbsp;Max. Dmg :</b> </td>
</TR>
<TR>
<TD align="center">&nbsp;Normal&nbsp;</TD>
<TD align="left">&nbsp;((((2*lvl/5+2)*att*(5 + Math.random()*10)/edef)/5+2));</TD>
<TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+0)/edef)/5+2)));</script></td>
<TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+10)/edef)/5+2)));</script></td>
</TR>
<TR>
<TD align="center">&nbsp;Fireball&nbsp; </TD>
<TD align="left">&nbsp;((((2*lvl/5+2)*att*(30 + Math.random()*40)/edef)/5+2));</TD>
<TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+0)/edef)/5+2)));</script></td>
<TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+40)/edef)/5+2)));</script></td>
</TR>
</TABLE>

</BODY>
</HTML>

Anyone an idea how to fix it?
thx

**XzAzX** · Nov 29, 2003, 20:24

anyone?

**MikeFoster** · Dec 1, 2003, 10:28

Hi XzAzX,

I've looked at this several times, and finally dug into it a little deeper.

Opera7 is reacting strangely, I agree. When the TDs are resized td.offsetWidth does not change by the same amount td.style.width changes - but padding and border width remain constant.

There are several tips I would like to give about your code - but I don't have time right now, sorry.

For another way of implementing a bar-graph, have a look at this: xBarGraph demo.

**XzAzX** · Dec 1, 2003, 10:48

thx for reacting anyway

I'll wait for your reply

User Tag List

Thread: Javascript in different browsers

Thread Tools

Display

Javascript in different browsers

Bookmarks

Bookmarks

Posting Permissions