Publicado em 7 de nov.

Pagina HTML + JS o conteudo do JS não acentua

Estou fazendo uma pagina simples em HTML com um menu laterar pra carerar paginas dos menus ao lado por JS, mas as paginas carregada no menu mostram caracteres estranhos nos acentos.

Já estou usando charset="ISO-8859-1" nas paginas html e se abro elas está ok. Mas quando clico no menu, ao lado aparece a pagina sem os acentos.

Segue os codigos:

<!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" xml:lang="pt-br"
lang="pt-br">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<head>

<title>CATEQUESE</title>

<link type="text/css" rel="stylesheet" href="css/estilo.css"/>

<script type="text/javascript" src="js/jquery-1.4.4.min.js" charset="iso-8859-1" ></script>
<!-- <script type="text/javascript" src="js/jquery.color.js"charset="iso-8859-1" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> -->
<script type="text/javascript" src="js/funcoes.js" charset="iso-8859-1"></script>

</head>
<body>
<div id="menu" meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" charset="iso-8859-1" >
	<a href="pgininio.html">Catequese</a>
	<a href="Atividades.html">Atividades</a>
	<a href="fotos.html">Fotos</a>
	<a href="Atividades.html">1a.Comunhão</a>
	<a href="contato.html">Contato</a>
</div>
<div id="conteudo" charset="iso-8859-1" ></div>
<div id="loader" charset="iso-8859-1">Carregando...</div>
</body>
</html>

<!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" xml:lang="pt-br"
lang="pt-br">

<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />

<title>Catequese da Paróquia </title>
</head>
<body>

<h1>Seja bem-vindo!</h1>
<h4>Pagina da </h4>
<h4>Catequese da Paróquia</h4>
<h4>Incdrições pelo fone:...</h4>
<p></p>
<img src="imagens/catequese.jpg" />
<p> </p>

</body>
</html>

e o arquivo "funcoes.js":

//função executada qdo a página é lida pelo navegador

$(document).ready(function(){

//seleciona os links da div com id 'menu' e adiciona o evento click

$("#menu a").click(function(){

	//pega na variável pagina a url que será carregada, através
	//do atributo 'href' do link
	//attr("atributo") -> acessa um atributo do elemento selecionado
	var pagina = $(this).attr("href");

	//faz uma requisição ajax para atualiza o innerHTML da div
	//com id 'conteudo', através do método load() do jQuery
	//$("#conteudo").load(pagina);

	//agora com efeitos!

	//escondemos a div conteudo e após a animação, executa
	//uma função para carregar o arquivo externo
	$("#conteudo").slideUp("fast", function(){
 //carrega o arquivos e após o carregamento, mostra a div
 $(this).load(pagina, function(){
 //mostra a div conteudo
 $(this).slideDown("medium");
 });
	});

	//interrrompe o evento para não mudar de página
	return false;

});

//dispara o evento do primeiro botão do menu
//trigger(evento) -> executa um evento de um elemento selecionado
$("#menu a:first").trigger("click");

//seleciona o elemento com id 'loader'
$("#loader")

	.ajaxStart(function(){
 //mostra o loader
 $(this).show(200);
	})
	//função executada qdo uma requisição ajax é encerrada
	.ajaxStop(function(){
 //esconde o loader
 $(this).hide(200);
	});

//Animações dos botões do menu
//hover(f1, f2) -> evento que recebe como parâmetro duas funções,
//a primeira é executada qdo o mouse passa sobre o elemento (mouseover)
//a segunda é executada qdo o mouse sai do elemento(mouseout)
//IMPORTANTE: PARA FAZER ANIMAÇÕES DE CORES, É NECESSÁRIO
//O PLUGIN JQUERY.COLOR.JS
//PARA VARIAÇÕES NO MOVIMENTO, USE O PLUGIN JQUERY.EASING.JS
$("#menu a").hover(

	function(){
 //$(this).html("teste")

 //animate() -> método utilizado para animar propriedades
 //do CSS do elemento selecionado
 $(this).stop().animate({
 lineHeight	: 60, //"line-height"
 fontSize	: 20, //"font-size"
 paddingLeft	: 50, //"padding-left"
 backgroundColor : "#F00",
 color : "#FD0"
 }, 500, "easeOutBounce");

	},
	function(){
 //$(this).html("teste finalizado")

 $(this).stop().animate({
 lineHeight	: 30,
 fontSize	: 16,
 paddingLeft	: 10,
 backgroundColor : "#FD0",
 color : "#F00"
 }, 500, "easeOutBounce");

	});

});

Se alguem puder me ajudar agradeço pois nao sou novato nisso e quejo ajudar o pessoal da paroquia aqui ok.

Grato

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Catequese da Paróquia </title> </head> <body> <h1>Seja bem-vindo!</h1> <h4>Pagina da </h4> <h4>Catequese da Paróquia</h4> <h4>Incdrições pelo fone:...</h4> <p></p> <img src="imagens/catequese.jpg" /> <p> </p> </body> </html>

$("#menu a").click(function(){ //pega na variável pagina a url que será carregada, através //do atributo 'href' do link //attr("atributo") -> acessa um atributo do elemento selecionado var pagina = $(this).attr("href"); //faz uma requisição ajax para atualiza o innerHTML da div //com id 'conteudo', através do método load() do jQuery //$("#conteudo").load(pagina); //agora com efeitos! //escondemos a div conteudo e após a animação, executa //uma função para carregar o arquivo externo $("#conteudo").slideUp("fast", function(){ //carrega o arquivos e após o carregamento, mostra a div $(this).load(pagina, function(){ //mostra a div conteudo $(this).slideDown("medium"); }); }); //interrrompe o evento para não mudar de página return false; });

function(){ //$(this).html("teste") //animate() -> método utilizado para animar propriedades //do CSS do elemento selecionado $(this).stop().animate({ lineHeight : 60, //"line-height" fontSize : 20, //"font-size" paddingLeft : 50, //"padding-left" backgroundColor : "#F00", color : "#FD0" }, 500, "easeOutBounce"); }, function(){ //$(this).html("teste finalizado") $(this).stop().animate({ lineHeight : 30, fontSize : 16, paddingLeft : 10, backgroundColor : "#FD0", color : "#F00" }, 500, "easeOutBounce"); }); });