incompatbilidade com FireFox

Erick 2.0 · Março 27, 2008

Boa tarde pessoal!

Estou com um problema que vem me atormentando a um bom tempo! Estou començando a trabalhar com web agora, e vi as inumeras tecnicas para deixar a pagina dinamica e agradavel aos olhos do usuario. porem os browsers e suas incompatbilidades atormentam a vida do programador.

Usei a uns dias atraz um modelo de voces mesmo da Imasters de como ultilizar o ajax (ADOREEI ESSA TECNICA) funcionou legal com IE mas nao foi sucesso com FF. O erro no FF é que nao gera a div que tem o conteudo. coloquei a pagina no ar para que voces possam me ajudar! meu sonho é conceguir dominar esta tecnica para começar a desenvolver meus sites!

Para visualizar o site Click aqui

Eis o codigo:

INDEX.PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="apresentacao.css" rel="stylesheet" type="text/css" />
<script src="funcoes.js" language="javascript" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<a href="teste.php?cad=true" id="novo">Novo teste </a>
</body>
</html>

como voces podem ver é um script bem simples agora segue os demais

FUNCOES.JS

// JavaScript Document
var ajax = false;
function openAjax(){
	var ajax=false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
					ajax = new XMLHttpRequest();
					
					if (ajax.overrideMimeType) {
						ajax.overrideMimeType('text/xml');
					}
				} else if (window.ActiveXObject) { // IE
					try {
						ajax = new ActiveXObject("Msxml2.XMLHTTP");
						
					} catch (e) {
						try {
						ajax = new ActiveXObject("Microsoft.XMLHTTP");
						
						} catch (e) {}
					}
				}

		return ajax;	 
	}
	
window.onload = loadfunctions;

function loadfunctions(){
	ativarbtnovo();
}	

function gE(id){
	return document.getElementById(id);
	}
	
function gEt(tag){
	return document.getElementsByTagName(tag);
	}	

function ativarbtnovo(){
	if (!gE('novo')) return false;
	gE('novo').onclick = function(){
		  boxcenter();
		  bgbody();
		  var capsula = gE('boxcenter');
		  ajax = openAjax();
		  ajax.open('GET','conteudo.php',true);
		  ajax.onreadystatechange = function(){
				if (ajax.readystate == 4){
						
					if (ajax.status == 200){
						
						   capsula.innerHTML = ajax.responseText;
						
						}//status = 200
					}//state = 4
			  
			  }//onreadyStateChange
		  ajax.send(null);
		  return false;
		}//funtion onclick.
	}
function bgbody(){
	var tagBody = gEt('body').item(0);
	var tamanho = getPageSize();
	var bgbody = document.createElement('div');
	bgbody.setAttribute('id','bgbody');
	var wpage = arrayPageSize[0];
	var hpage = arrayPageSize[1];
	bgbody.style.height = hpage +'px';
	bgbody.style.width = wpage +'px';
	
	if (!gE('bgbody')){
	 tagBody.insertBefore(bgbody,tagBody.firstChild);
	  }
	}
	
function boxcenter(){
	  var objbody = gEt('body').item(0);
	  var tamanho = getPageSize();
	  var box = document.createElement('div');
	  box.setAttribute('id','boxcenter');
	  var wpage = arrayPageSize[0];
	  var hpage = arrayPageSize[1];
	  box.style.width = (wpage / 2) + 'px';
	 // box.style.height = (wpage/2)+'px';
	  box.style.margintop = -(wpage/4)+'px';
	  //box.style.marginLeft = -(wpage / 4) + 'px';
	  objbody.insertBefore(box,objbody.lastChild);
	
	}	


function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

}

este é o resultado do onclick do BTN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


testando bg box!

</html>

por fim seu css

APRESENTACAO.CSS

#boxcenter {
	background-color:#00CCFF;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 700px;
	margin-left: -350px;
	z-index: 180;
}
#bgbody {
	background-color: #000;
	-moz-opacity: 0.5;
	opacity: 0.5;
	filter:alpha(opacity=50);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
}

Giovani Campêlo · Março 27, 2008

Cara dá uma olhada neste código ele é bem simples e ainda resolve o problema do IE6 acho melhor que o anterior, dá uma olhadinha...

Fiz aqui rapidinho juntando algumas coisas prontas, dá para melhorar!!!!

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#dvTransparente {
	position:absolute;
	left:63px;
	top:77px;
	z-index:2;
	background-color:#000000;
	opacity: .6;	filter: alpha(Opacity=60);	-khtml-opacity: .6;
	width: 718px;
}
#iFrameMenu{
	background-color:#000000;
	opacity: .0;	filter: alpha(Opacity=0);	-khtml-opacity: .0;
}
#dvMsg {
	position:absolute;
	background-image:url(img/confirmar.gif);
	background-repeat:no-repeat;
	left:258px;
	top:195px;
	width:250px;
	height:125px;
	z-index:8;	
}
-->
</style>
<script language="javascript">
function ExibirDivTransparente(opcao)
{
	if (opcao)
	{ 
		posicionaObj();
		document.getElementById('dvTransparente').style.display = '';
		document.getElementById('dvMsg').style.display = '';
				
		
		if ((browser.isIE) && (browser.version < 7))
		{
			document.getElementById("iFrameMenu").style.display = '';
		}			

	}
	else
	{
		document.getElementById('dvTransparente').style.display = 'none';
		document.getElementById('dvMsg').style.display = 'none';

		if ((browser.isIE) && (browser.version < 7))
		{
			document.getElementById("iFrameMenu").style.display = 'none';
		}			
	}

}
function posicionaObj(){
	var dvTransparente = document.getElementById('dvTransparente');
	var dvMsg = document.getElementById('dvMsg');
	
	dvTransparente.style.top		='0pt';
	dvTransparente.style.left		='0pt';		
	dvTransparente.style.height		= document.body.scrollHeight + 'px';	
	dvTransparente.style.width		= document.body.scrollWidth  + 'px';
	
	dvMsg.style.left		= (document.body.scrollWidth/2-90) + 'px';

	//alert(dvTransparente.style.height);
	if ((browser.isIE) && (browser.version < 7))
	{
		
		
		var w	= 	dvTransparente.style.width;
		var h	= 	dvTransparente.style.height;
		var x	=	getPageOffsetLeft( dvTransparente );
		var y	=	getPageOffsetTop( dvTransparente );
	
		frameM = document.getElementById("iFrameMenu");
		
		frameM.style.left 	= x + "px";
		frameM.style.top	  = y + "px";
		frameM.style.width 	= w;
		frameM.style.height = h;
			
	}			
	
}

// iframe

// Alteração Giovani
function Browser() {

  var ua, s, i;

  this.isIE	= false;  // Internet Explorer
  this.isOP	= false;  // Opera
  this.isNS	= false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "Opera";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isOP = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isNS = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isNS = true;
	this.version = 6.1;
	return;
  }

  s = "MSIE";
  if ((i = ua.indexOf(s))) {
	this.isIE = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }
}

var browser = new Browser();

function getPageOffsetLeft(el) {

  var x;

  x = el.offsetLeft;
  if (el.offsetParent != null)
	x += getPageOffsetLeft(el.offsetParent);

  return x;
}

function getPageOffsetTop(el) {

  var y;

  y = el.offsetTop;
  if (el.offsetParent != null)
	y += getPageOffsetTop(el.offsetParent);

  return y;
}
window.onresize=function(){
posicionaObj();
};
window.onload=function(){
	addComponentes('<IFRAME id=iFrameMenu style="Z-INDEX: 2; display:none;  POSITION: absolute; " frameborder="0" scrolling="no" src="about:blank"></IFRAME>');
	addComponentes('<div id="dvTransparente" style="display:none" ></div>');	
	addComponentes('<div id="dvMsg" style="display:none;" > 										'+
				   '</div>																					');		
}
function addComponentes(strHtml){
	document.body.innerHTML = (strHtml+document.body.innerHTML);
}
</script>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="98%"></td>
	<td width="16px"><img src="img/close.gif" width="16" height="14"  onclick="java script:ExibirDivTransparente(false);"/></td>
  </tr>
  <tr>
	<td></td>
	<td></td>
  </tr>
</table>

<input type="submit" name="button" id="button" value="Exibir" onclick="java script:ExibirDivTransparente(true);"/>
<p> </p>
<p>
  
</p>
<p>
  <input type="text" name="textfield2" id="textfield2" />
</p>
<p>
  <select name="select" id="select">
	<option value="0">Item01</option>
	<option value="1">Item02</option>
  </select>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

Erick 2.0 · Março 27, 2008

Bom legal essa ajudina Giovani só que tem algumas coisas que nao sei o que significam ainda estou começando com javacript mais nada q um pouco de cafe e atençao nao resolvam obrigado!

Giovani Campêlo · Março 27, 2008

addComponentes('<div id="dvMsg" style="display:none;" > '+

'</div> ');

Cara coloca neste div tudo que tiver dentro deste div ficará visível.

ex:

addComponentes('<div id="dvMsg" style="display:none;" > '+

'sssssssssssssssss '+

'</div> ');

Erick 2.0 · Março 27, 2008

hummmm intendi giovani! axei um tanto quanto embaralhados os dados da pagina , acostumei mto com o pascal(delphi)

hehehe obrigado pela força!

Gostaria usando o metedo ajax porque ele cria tudo dinamicamente. Pretendo montar um site que as imagens sao carregadas dinamicamente. para isto vou precisar de usar parametros PHP. sera que posso usar esta tecnica para usar com PHP?

GuttoSP · Março 27, 2008

Movido para Ajax

Giovani Campêlo · Março 27, 2008

É realmente eu tinha complicado, mas como te disse fiz nas carreiras, tenta assim:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#dvTransparente {
	position:absolute;
	left:63px;
	top:77px;
	z-index:2;
	background-color:#000000;
	opacity: .6;	filter: alpha(Opacity=60);	-khtml-opacity: .6;
	width: 718px;
}
#iFrameMenu{
	background-color:#000000;
	opacity: .0;	filter: alpha(Opacity=0);	-khtml-opacity: .0;
}
#dvMsg {
	position:absolute;
	left:258px;
	top:195px;
	width:250px;
	height:125px;
	z-index:8;
	background-color: #FFFFFF;
}
-->
</style>
<script language="javascript">
function ExibirDivTransparente(opcao)
{
	if (opcao)
	{ 
		posicionaObj();
		document.getElementById('dvTransparente').style.display = '';
		document.getElementById('dvMsg').style.display = '';
				
		
		if ((browser.isIE) && (browser.version < 7))
		{
			document.getElementById("iFrameMenu").style.display = '';
		}			

	}
	else
	{
		document.getElementById('dvTransparente').style.display = 'none';
		document.getElementById('dvMsg').style.display = 'none';

		if ((browser.isIE) && (browser.version < 7))
		{
			document.getElementById("iFrameMenu").style.display = 'none';
		}			
	}

}
function posicionaObj(){
	var dvTransparente = document.getElementById('dvTransparente');
	var dvMsg = document.getElementById('dvMsg');
	
	dvTransparente.style.top		='0pt';
	dvTransparente.style.left		='0pt';		
	dvTransparente.style.height		= document.body.scrollHeight + 'px';	
	dvTransparente.style.width		= document.body.scrollWidth  + 'px';
	
	dvMsg.style.left		= (document.body.scrollWidth/2-90) + 'px';

	//alert(dvTransparente.style.height);
	if ((browser.isIE) && (browser.version < 7))
	{
		
		
		var w	= 	dvTransparente.style.width;
		var h	= 	dvTransparente.style.height;
		var x	=	getPageOffsetLeft( dvTransparente );
		var y	=	getPageOffsetTop( dvTransparente );
	
		frameM = document.getElementById("iFrameMenu");
		
		frameM.style.left 	= x + "px";
		frameM.style.top	  = y + "px";
		frameM.style.width 	= w;
		frameM.style.height = h;
			
	}			
	
}

// iframe

// Alteração Giovani
function Browser() {

  var ua, s, i;

  this.isIE	= false;  // Internet Explorer
  this.isOP	= false;  // Opera
  this.isNS	= false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "Opera";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isOP = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isNS = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
	this.isNS = true;
	this.version = 6.1;
	return;
  }

  s = "MSIE";
  if ((i = ua.indexOf(s))) {
	this.isIE = true;
	this.version = parseFloat(ua.substr(i + s.length));
	return;
  }
}

var browser = new Browser();

function getPageOffsetLeft(el) {

  var x;

  x = el.offsetLeft;
  if (el.offsetParent != null)
	x += getPageOffsetLeft(el.offsetParent);

  return x;
}

function getPageOffsetTop(el) {

  var y;

  y = el.offsetTop;
  if (el.offsetParent != null)
	y += getPageOffsetTop(el.offsetParent);

  return y;
}
window.onresize=function(){
posicionaObj();
};
window.onload=function(){
	addComponentes('<IFRAME id=iFrameMenu style="Z-INDEX: 2; display:none;  POSITION: absolute; " frameborder="0" scrolling="no" src="about:blank"></IFRAME>');
/*	
	addComponentes('<div id="dvTransparente" style="display:none" ></div>');	
	addComponentes('<div id="dvMsg" style="display:none;" > 										'+
				   '</div>																					');		
*/
}
function addComponentes(strHtml){
	document.body.innerHTML = (strHtml+document.body.innerHTML);
}
</script>
</head>

<body>
<div id="dvTransparente" style="display:none" <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="98%"></td>
	<td width="16px"><img src="img/close.gif" width="16" height="14"  onclick="java script:ExibirDivTransparente(false);"/></td>
  </tr>
  <tr>
	<td></td>
	<td></td>
  </tr>
</table>></div>
<div id="dvMsg" style="display:none" >asdasdasdasd</div>


<input type="submit" name="button" id="button" value="Exibir" onclick="java script:ExibirDivTransparente(true);"/>
<p> </p>
<p>
  
</p>
<p>
  <input type="text" name="textfield2" id="textfield2" />
</p>
<p>
  <select name="select" id="select">
	<option value="0">Item01</option>
	<option value="1">Item02</option>
  </select>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
Disponível: <input type='checkbox' name='disponivel' id='disponivel' value='1' onclick="teste2(this);" />
<br />
Lançamento: <input type='checkbox' name='lancamento' id='lancamento' value='1' onclick="teste2(this);" />
<br />
Em Breve: <input type='checkbox' name='em_breve' id='em_breve' value='1' onclick="teste2(this);" />
<script language="javascript">
function teste2(obj)
{	
	if (obj.checked == true) 
	{
		if (obj.id == 'disponivel')
		{
			document.getElementById('lancamento').disabled = false;
			document.getElementById('em_breve').disabled = true;		
		}
		else if (obj.id == 'lancamento')
		{
			document.getElementById('disponivel').disabled = false;
			document.getElementById('em_breve').disabled = true;
		}
		else if (obj.id == 'em_breve')
		{
			document.getElementById('disponivel').disabled = false;
			document.getElementById('lancamento').disabled = false;
		}	
	}
	else
	{
		document.getElementById('disponivel').disabled = false;
		document.getElementById('lancamento').disabled = false;
		document.getElementById('em_breve').disabled = false;
	}
}
</script>

</body>
</html>

Erick 2.0 · Abril 7, 2008

boa tarde!

alguem poderia me apontar uma solução com os dados que passei no topo do topico.

o link que postei do site mudou, se precisarem coloco novamente

agradeço a atenção.

GuttoSP · Abril 7, 2008

Você testou o code que o Giovani postou?

Erick 2.0 · Abril 7, 2008

sim e consegui, mas com ajax o codigo fica menor e mais viavel, com o ajax tambem posso colocar o READYSTATE, caso seja 1 coloco uma função de loading.

Tenho um site que tomei como exemplo

veja como e:

http://www.majikmedia.com/portfolio/

gostaria de um semelhante mas com FF nao funciona

Arquivado

incompatbilidade com FireFox

Recommended Posts

Erick 2.0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani Campêlo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Erick 2.0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani Campêlo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Erick 2.0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GuttoSP 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani Campêlo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Erick 2.0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GuttoSP 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Erick 2.0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante