Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

blastboot

Código funciona em vários Browsers menos IE8

Por , em Desenvolvimento frontend

Recommended Posts

blastboot    0

blastboot
Postado

Boas pessoal, estou com um problema que é o seguinte: Tenho uma página que faz requisições em AJAX a um arduino e depois faz alterar uma div que está por cima de uma imagem de um tanque, e que vai simular a altura da àgua conforme os dados recebidos no request.responseText

O código funciona bem no Chrome e IE9, menos no IE8 que é onde ele vai ter que funcionar.

No início pensei que fosse do script AJAX, mas como na consola não me dá qualquer erro já começo a inclinar-me para a parte em CSS, mas não sei onde nem como, e necessitava que me ajudassem e vissem o meu código.

O código é o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function dadosAlturaAgua(){
	nocache = "&nocache=" + Math.random() * 1000000;
	var request = false;  // The variable that makes Ajax possible!
	
	// Internet Explorer Browsers
		try{
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
	try{
		// Opera 8.0+, Firefox, Safari
		request = new XMLHttpRequest();
	} catch (e){
		
				// Something went wrong
				alert("AJAX nao suportado! Impossivel visualisar dados. Considere actualizar o browser.");
				return false;
			}
		}
	}
// Create a function that will receive data sent from the server
	request.onreadystatechange = function(){
		if(request.readyState == 4){
			if(request.status == 200){
				if(request.responseText != null){
					
document.getElementById("inner").style.height = request.responseText;
				}
			}
		}
	}
	request.open("GET", "&dadosagua" + nocache, true);
	request.send(null);
	setTimeout('dadosAlturaAgua()', 5000);

}

//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>PAGINA DO TANQUE</title>

<style type="text/css">
<!--
body {
	background: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "Monotype Corsiva";
	font-size: 100%;
	line-height: 1.4;
}


ul, ol, dl {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	text-align: left;
}
a img {
	border: none;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
	text-align: right;
}


.container {
	width: 85%;
	max-width: 1260px;
	min-width: 780px;
	background: #FFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


.header {
	background-color: #FFFFFF;
}


.sidebar1 {
	float: left;
	width: 17%;
	background-color: #FFFFFF;
	color: #000;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	position: static;
}
.content {
	padding: 10px 0;
	width: 54%;
	float: left;
	font-size: 14px;
	font-family: "Eras Medium ITC";
}
.sidebar2 {
	float: left;
	width: 24%;
	padding-top: 180px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	background-color: #FFFFFF;
	height: 90px;
	text-align: left;
	font-size: large;
}


.content ul, .content ol {
	padding: 0 15px 15px 40px;
	font-family: "Eras Medium ITC";
}


.footer {
	position: relative;
	clear: both;
	text-align: center;
	font-size: small;
	background-color: #325771;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 9px;
	padding-left: 0;
	font-family: Arial, Helvetica, sans-serif;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.container .sidebar1 .nav li div {
	color: #00F;
}
.tanque {
	background-image: url(SD%20CARD%20PAP%2012-04-2013/tanque.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
.container .content table tr td div {
	font-size: 25px;
	font-family: "Monotype Corsiva";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
.container .footer p {
	text-align: center;
}

#botao {
margin-left: 100px;
margin-top:330px;
}
.hist {
	font-family: "Monotype Corsiva";
}


/* IFRAME1, NIVEL DA ÁGUA */

<style type="text/css">


#outer {
	width: 265px;
	height: 255px;
	overflow: hidden;
	position: absolute;
	left: 36px;
	top: 138px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 2px;
}

#inner, #inner div {
	width: 265px;
	overflow: hidden;
	position: absolute;
	left: 448px;
}

#inner {
	border-top-width: 0;
	background-color: #06F;
	bottom: 104px;
	height: 0%;
}


  </style>
  
</style>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>

<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
  var selObj = null;  with (document) { 
  if (getElementById) selObj = getElementById(objId);
  if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0; }
}
</script>
</head>

<body onload="dadosAlturaAgua()">
<div class="container">
  <div align="center" class="header"><!-- end .header --><img src="SD CARD PAP 12-04-2013/border.jpg" width="1995" height="319" /></div>
  <div class="sidebar1">
    <p> </p>
    <table width="191" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><h2 class="hist">Histórico</h2></td>
      </tr>
    </table>
    <form action="" method="get" name="form" id="form">
      <select name="jumpMenu" id="jumpMenu">
        <option value="Histórico/Janeiro.txt">Janeiro</option>
        <option value="Histórico/fevereiro.txt">Fevereiro</option>
        <option>Março</option>
        <option>Abril</option>
        <option>Maio</option>
        <option>Junho</option>
        <option>Julho</option>
        <option value="Histórico/Agosto.txt">Agosto</option>
        <option>Setembro</option>
        <option>Outubro</option>
        <option>Novembro</option>
        <option>Dezembro</option>
      </select>
      <input name="go_button" type="button" id= "go_button" onclick="MM_jumpMenuGo('jumpMenu','parent',1)" value="Ok" />
    </form>
    <p>
     
   <p> </p>

 
 
 
  </div>
  <div align="center" class="content">
    <table width="537" height="45" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="45"><div align="left"><strong>Indicação do Nível de Água do Tanque das 700 T </strong></div></td>
      </tr>
    </table>
    <td width="223" height="108"><table width="425" height="420" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="425" class="tanque">
        <div id="outer">
  <div id="inner" style="height: 251px">
      
    </div></td>
      </tr>
    </table></td>
  </div>
  
  <div align="center" class="sidebar2">
   <table width="210" height="134" border="2" cellpadding="1" cellspacing="1" bordercolor="#0066FF">
  <tr>
    <td width="78" height="66"><div align="center"><strong>Nível </strong> Água</div></td>
    <td width="122"><div align="center"><strong>Quantidade </strong> Água (L)</div></td>
  </tr>
  <tr>
    
    </tr>
</table>
   <table width="210" height="104" border="3" cellpadding="0" cellspacing="1" bordercolor="#0066FF">
     <tr>
       <td width="97"><div align="center"><strong>Voltagem da Bateria</strong></div></td>
     </tr>
     
   </table>
   <h6> </h6>
  </div>
    
    
  <div class="footer">
    <p align="center">Projeto realizado ...</p>
    <p align="center">2013</p>
  </div>
</div>
</body>
</html>

 

Desde já agradeço a vossa ajuda. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito