[Resolvido] HTML+JavaScript

[Everton Nogueira 0]

Olá Pessoal.

 

Estou me iniciando em HTML/CSS/JS e estou com um problemão.. =p

 

Estou configurando uma loja virtual no UOL Host, e preciso colocar um flash como logomarca, o problema é que o painel da uol host só permite imagens, então, é necessário injetar o código, já que também não permitem editar diretamente o HTML.

 

Selecionando um dos templates, a tag da logomarca tem uma ID, então utilizei o seguinte código.

 

<script type="text/javascript">

var swfContent = 

       "<object width='933' height='130' >" +
           "<param name=movie value='/media/logo_temp.swf'>" +
           "<param name=quality value=high>" +
           "<param name=wmode value=opaque>" +

           "<embed src='/media/logo_temp.swf' quality=high wmode=opaque width='933' height='130' name='mySwf' type='application/x-shockwave-flash'>"+
           "</embed>" +
       "</object>";


   document.getElementById("logo").innerHTML = swfContent;


</script>

 

Funcionou exatamente como queria.

 

O problema é que trocando o template para o qual o cliente quer, a div responsável pelo logo não tem ID, na verdade, nenhuma tag tem ID, como sou AINDA bem iniciante, não sei como fazer o mesmo procedimento que fiz acima, com a tag do código abaixo

 

 

 <h1 class="logo"><strong>Ouro Brasil Jóias logo</strong><a href="#" title="Ouro Brasil Jóias logo" class="logo"><img src="#" alt="Ouro Brasil Jóias logo" /></a></h1>

 

A pergunta é! Como altero este conteúdo do segundo código, já que ele não tem uma ID.

 

Quero alterar o conteúdo da h1 todo, pelo objeto flash acima.

 

 

Agradeço desde já quem puder me ajudar.!

 

Muito Obrigado.

[William Bruno 1501]

Não é nativo da linguagem, mas você pode declarar uma função getElementsByClassName

 

E então fazer o mesmo que você fez com o ID:

http://javascript.about.com/library/bldom08.htm

[Everton Nogueira 0]

OPa, obrigado William, mas ainda não deu certo.

 

 

Depois de criada a função que me passou, tentei

 

document.getElementsByClassName("logo").innerHTML = swfContent;

 

e nada aconteceu =X

 

Já tentei usando getElementsByTagName()[] e também não deu certo.

 

Alguém já alugou uma loja virtual da UOL e sofreu algo do tipo?

[William Bruno 1501]

tente assim:

 

document.getElementsByClassName("logo")[0].innerHTML = swfContent;

 

não cara, nunca usei nenhuma loja da uol não.

se não funcionar, veja no console de erros o motivo

 

ctrl+shift+j no firefox

[Everton Nogueira 0]

Fala William,

 

o código ficou assim:

 

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};





var swfContent = 

       "<object width='933' height='200' >" +
           "<param name=movie value='#/media/logo_temp.swf'>" +
           "<param name=quality value=high>" +
           "<param name=wmode value=opaque>" +

           "<embed src='#/media/logo_temp.swf' quality=high wmode=opaque width='933' height='200' name='mySwf' type='application/x-shockwave-flash'>"+
           "</embed>" +
       "</object>";



document.getElementsByClassName("logo")[0].innerHTML = swfContent;

 

no FireFox deu o seguinte erro

 

Hora: 28/07/2012 14:53:25

Erro: TypeError: document.getElementsByClassName("logo")[0] is undefined

Arquivo-fonte:#

Linha: 376

[William Bruno 1501]

você chamou esse javascript depois do elemento estar disponivel ?

 

 

veja:

<script type="text/javascript">
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
	var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
window.onload = function(){
document.getElementsByClassName('logo')[0].innerHTML = 'Texto Alterado';
}
</script>


<h1 class="logo">Texto inicial</h1>

aqui eu usei um window.onload para esperar q o elemento .logo constasse na marcação, para só depois manipular ele.

[Everton Nogueira 0]

O script está logo antes de fechar o </body>

 

adicionei o window.onload e o firefox mostra o mesmo erro.

 

Mas não se preocupe, agradeço demais pela atenção e pela ajuda.

 

Vou fazer o seguinte: Utilizar o template que tem ID para as páginas que permitem e fazer as alterações necessárias, nas páginas que só funcionam o template padrão, colocarei a logomarca estática mesmo, utilizando o painel da UOL.

 

As páginas de contato e as de finalização de venda que não pegam template personalizado. Se no final das contas, ficar muito discrepante o visual, faço uma página de "contato" nova e a de venda não tem tanta importância, já que depois muda para pagseguro e talz..

 

William,

 

Post só pra constar..

 

Realmente funciona esse método que você mostrou. No outro template, que tem ID, fiz um teste pegando uma tag sem ID com o getElementByClassName() e funcionou corretamente.

 

Deve ser alguma limitação imposta pela UOL no código que não permite que funcione nos templates padrões. Uma pena.