Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder Element's Avatar
    Join Date
    Jul 2004
    Location
    Lynnwood, Washington, US
    Posts
    855
    Thanks
    2
    Thanked 2 Times in 2 Posts

    InnerHTML problem changing content.

    I don't like JavaScript much, and I come into this problem a lot. I'm trying to replace the content of a span element with either the code of the online image and text, or offline image and text. However it just won't change a thing. I can get it to work no problem by changing the document.getElementById(id).style.visibility but not this way, and with the style method it throws off all the positioning as the hidden blocks are still there. :\ Any ideas?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    		<head>
    			<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    			<title>Pyrexia Craft - Retro Gaming, Evolved.</title>
    			<style type="text/css" media="screen">
    				<!--
    				
    					@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
    				
    					html  {
    						padding: 0;
    						margin: 0;
    						height: 100%;
    					}
    					
    					body {
    						background-image: url(images/background.jpg);
    						background-position: center top;
    						background-repeat: no-repeat;
    						background-color: #1a1a1a;
    						padding: 0;
    						margin: 0;
    						font-family: 'Noto Sans', sans-serif;
    						text-shadow: 2px 2px #000;
    					}
    					
    					#main_container {
    						width: 100%
    					}
    					
    					#content_container {
    						width: 50%;
    						margin: 0 auto;
    						padding-top: 300px;
    						color: #CCC;
    					}
    					
    					.right {
    						float: right;
    					}
    					
    					.status_box_left {
    						float: left; 
    						width: 300px;
    						padding: 10px;
    						margin: 15px;
    						margin-top: 55px;
    						margin-left: 0;
    						margin-bottom: 2px;
    						background-color: #151515;
    						-moz-border-radius: 10px;
    						-webkit-border-radius: 10px;
    						-khtml-border-radius: 10px;
    						border-radius: 10px;
    						color: #ccc;
    					}
    
    					.status_box_right {
    						position: absolute;
    						z-index: -2;
    						left: 58%;
    						width: 300px;
    						height: 60px;
    						padding: 10px;
    						padding-left: 0;
    						padding-right: 0;
    						margin: 15px;
    						margin-right: 0;
    						background-color: #151515;
    						-moz-border-radius: 10px;
    						-webkit-border-radius: 10px;
    						-khtml-border-radius: 10px;
    						border-radius: 10px;
    						color: #ccc;
    					}
    					
    					.status_box_left ul {
    						width: 90%;
    						list-style-type: none;
    						padding: 0;
    						margin: 0 auto;
    						margin-bottom: 10px;
    					}
    					
    					.title {
    						text-align: center;
    						font-weight: bold;
    						margin: 0;
    						padding: 0;
    						margin-bottom: 5px;
    						color: #ffb047;
    					}
    					
    					.status {
    						font-size: 9px;
    					}
    					
    					.status_green {
    						float: right;
    						color: #3cd03c;
    						margin-top: 8px;
    					}
    
    					.status_red {
    						float: right;
    						color: #990000;
    						margin-top: 8px;
    					}
    					
    					.status_norm {
    						float: right;
    						color: gray;
    					}
    					
    					.server-ico {
    						margin-top: 10px
    					}
    					
    					.marquee {
    						position: absolute;
    						z-index: -1;
    					}
    					
    					.fade-right {
    						position: relative;
    						z-index: 2;
    						float: right;
    						width: 100px;
    						background-image: url(images/fade-right.png);
    						background-position: right bottom;
    						background-repeat: no-repeat;
    						margin: 0;
    						margin-bottom: -31px;
    					}
    					
    					.fade-left {
    						position: relative;
    						z-index: 3;
    						float: left;
    						width: 100px;
    						background-image: url(images/fade-left.png);
    						background-position: left bottom;
    						background-repeat: no-repeat;
    						margin: 0;
    						margin-bottom: -31px;
    					}
    					
    				-->
    			</style>
    			
    			<script language="JavaScript">
    
    				function xmlhttpPost(strURL, spanid) {
    					var xmlHttpReq = false;
    					// Mozilla/Safari
    					if (window.XMLHttpRequest) {
    						xmlHttpReq = new XMLHttpRequest();
    						if (xmlHttpReq.overrideMimeType) {
    							xmlHttpReq.overrideMimeType('text/xml');
    							// See note below about this line
    						}
    						// IE
    					} else if (window.ActiveXObject) { // IE
    						try {
    							xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    						} catch (e) {
    							try {
    								xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    							} catch (e) {}
    						}
    					}
    					if (!xmlHttpReq) {
    						return false;
    					}   
    					xmlHttpReq.open('GET', strURL, true);
    					xmlHttpReq.setRequestHeader('Content-Type', 
    					'application/x-www-form-urlencoded');        
    					xmlHttpReq.onreadystatechange = function() { 
    						callBackFunction(xmlHttpReq, spanid); 
    					};
    					xmlHttpReq.send("");
    				}
    
    				function callBackFunction(http_request, spanid) {
    					if (http_request.readyState == 4) {
    						if (http_request.status == 200) {
    							var responseString = http_request.responseText;
    							if ( responseString == 'true' ) {
    								var serverStatus = '&nbsp;&nbsp;&nbsp; <span class="status_green">&nbsp;Online</span> <img class="server-ico" style="float:right;" src="images/online.png" alt="Server Online" />';
    							} else {
    								var serverStatus = '&nbsp;&nbsp;&nbsp; <span class="status_red">&nbsp;Offline</span> <img class="server-ico" style="float:right;" src="images/offline.png" alt="Server Offline" />';
    							}
    							//TODO implement your function e.g.
    							document.getElementById(spanid).InnerHTML = '';
    							document.getElementById(spanid).InnerHTML = serverStatus;
    						}
    					}
    				}
    						
    				setInterval("xmlhttpPost('checkserverstatus.php?h=pyrexiacraft.com&p=25565', 'minecraftStatus')", 5000);
    			
    			</script>
    			
    		</head>
    		<body>
    		
    			<div id="main_container">
    				<div id="content_container">
    					<div class="status_box_left">
    						<p class="title">Pyrexia Craft Servers</p>
    						<ul>
    							<li><img class="server-ico" src="images/minecraft.png" alt="Server Login: pyrexiacraft.com:25565" /> <span class="status_norm" id="minecraftStatus"><i style="font-size:6px;">Loading...</i></span></li>
    							<li>Terraria <span class="status_norm">&nbsp;<b class="status">( Coming soon )</b></span></li>
    							<li>Doom <span class="status_norm">&nbsp;<b class="status">( Coming soon )</b></span></li>
    							<li>Hexin <span class="status_norm">&nbsp;<b class="status">( Coming soon )</b></span></li>
    							<li>Quake <span class="status_norm">&nbsp;<b class="status">( Coming soon )</b></span></li>
    						</ul>
    					</div>
    					<p><h2 class="title">Welcome to Pyrexia Craft Server Hub</h2>
    					Pyrexia Craft has been around for some time, and it's long been the idea of the creators 
    					to bring in a large selection of servers to the lineup. With that in mind Pyrexia Craft 
    					has re-launced with the goal of developing one of the first, and most stable Game Server 
    					Operating Systems to date!</p>
    					<p>This OS we shall call it, will be unique FreeBSD, or Debian system (depending on dependancies 
    					we are working out) that will be pre-built to allow you to host your gaming servers, 
    					with little, to know programing knowledge. And for the advanced users, all the goodies you 
    					would expect to be from a Unix or Linux based system. Including advanced security to safeguard
    					your users and servers from harm.</p>
    					<p>Remember, we are in early stages of development and would appreciate some time to get started 
    					and work things out before we start taking input or feedback on the design and development process, 
    					so please bare with us! We'll let you know!</p>
    					<p>Until then, please feel free to game with us on our dedicated servers offered free to the public.</p>
    					<!--<div class="status_box_right">
    						<p class="title">Support us!</p>
    							<div>
    								<span class="fade-right">&nbsp;</span>
    								<span class="fade-left">&nbsp;</span>
    								<marquee class="marquee" behavior="scroll" scrollamount="4" direction="left" width="300">
    									Testing
    								</marquee>
    							</div>
    						</div>
    					</div>-->
    				</div>
    			</div>
    		
    		</body>
    	</html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Can you show a live version of your code to test?

    The ajax call only works with a server and cannot read a local file.

    The local file reference only works on your computer where the image/text resides.

    Difficult to determine problem with minimal information access given.


  •  

    Posting Permissions

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