Member Avatar for lawrenceh

Hi all,

My first post on this forum. I am trying to move a counter on a board and I am trying to use Web browers as the user interface. I have written the following test code, where x and y are generated by the server and passed to function draw_circles(x,y).

The code is not complete, but it does not load properly. The browser hangs before it displays anything. If it is only runs one time everything seems to work okay.

I believe the problem is that you can’t call the CSS more than once on a form. In this code, I am calling it once a second.

Does anyone have any better ideas for allowing me to move a counter around a board image. As I am not sure whether I have chosen the right language, is the reason I have placed it in this forum.

Regards

Lawrence

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
body {}
#map {position:relative; width:200px; height:200px; margin:0}
</style>
<script type="text/javascript">
function draw_circles(x,y) 
{ 
document.write('<style type=text/css>');
document.write('#map#Red_Counter{position:absolute;top:'+x+'px; left:'+y+'px;}');
document.write('</style>')
} 
</script>
<script type="text/javascript">
function loadGame()

{
var xmlHttp;
var timerId = setTimeout("loadGame();", 1000);
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(param);
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
}
draw_circles(xmlHttp.responseText.slice(0,1),xmlHttp.responseText.slice(1,2)) 


}
}
xmlHttp.open("GET",'Waiting_Server.asp,true)
xmlHttp.send(null);

}
</script>
<body onload="function loadGame()">
</body>

</html>
  • 2 Contributors
  • 2 Replies
  • 218 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lawrenceh
Member Avatar for MattEvans

That's a horrible way to influence the page dynamically. Don't 'print' HTML into an already-opened page in that way, i.e. never use document.write( ) unless its only to influence the first page render ( and even then, there are better alternatives ).

Instead, maintain the x and y position of the token within the script ( e.g. use 2 global JS variables ), and use a single element ( any visual element [div,img,span,etc] ) to represent the token. Assign it a constant ( fixed ) style that sets position:absolute; . Then use calls like: thetoken.style.top = ...; where 'thetoken' is the element you used for the token ( use DHTML/document.getElementID( ) to obtain a reference to it ).

If you're only moving things around occasionally ( i.e. a board game ) then Javascript/CSS/HTML will work fine, but if you want performant interactive movement; alternatives include Flash, among others..

Member Avatar for lawrenceh

Thanks for your response. There are a lot of things to try. I don't think what I am trying to do is unusual for a game. Yes, I am trying to write a borad game, which is updated every second.

Is there a web site that you know of, with some examples?

Best regards

Lawrence

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.