• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joxnas

[Resolvido] getelementbyid para classe, como?

32 mensagens neste tópico

saquei um código para fazer um menu destes: http://jblog.000webhost.info/joxnas/menu.html

O código funca bem mas, eu queria que em ves de ele só permitir "<ul id='menuzao'>", permitisse "<ul class='menuzao'>"

Já tentei mudar lá em baixo o "bodyOnReady(function(){ ativaSubMenus( document.getElementById('menuzao') ) })" para getElementByClass, mas n dá.

Nao sei nada de javacript, se me pudessem ajudar..aqui tá o script todo:

<script>
function ativaSubMenus(quem){
    //sumindo inicialmente com todas as ULs
    var uls = quem.getElementsByTagName('ul')
    for(var i=0; i<uls.length; i++){
        uls[i].style.display = 'none';
    }
    
    //ativando o click dos títulos, a seta do mouse e desabilitando selecionar
    var h3s = quem.getElementsByTagName('h3')
    for(i=0; i<h3s.length; i++){
        //desabilitando selecionar
        h3s[i].style.MozUserSelect = 'none'; //FF
        h3s[i].unselectable = 'on'; //IE
        
        //seta do mouse
        h3s[i].style.cursor = 'pointer';
        
        h3s[i].onclick = function(e){
            var source = getSource(e);
            var ulatual = source.parentNode.getElementsByTagName('ul')[0];
            if(ulatual.style.display=='none'){
                ulatual.style.display = 'block';
            }else{
                ulatual.style.display = 'none';
            }
        }
    }
}

function bodyOnReady(func){
    //Chama a função 'func' quando o DOm tiver sido carregado. Não aguarda as imagens
    //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
    //explicações: http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/
    if(!(document.body==null)){
        func();
    }else{
        var func_rep = func;
        setTimeout(function(){ bodyOnReady(func_rep) },100);
    }
}

function getSource(evt){
    //retorna quem foi o gerador do evento. Crossbrowser
    //http://elcio.com.br/crossbrowser/#7
    if(typeof(evt)=='undefined') var evt=window.event //IE
    source = evt.target?evt.target:evt.srcElement //IE
    if(source.nodeType == 3)source = source.parentNode //Safari
    return source;
}

//chamando na inicialização
bodyOnReady(function(){ ativaSubMenus( document.getElementById('menuzao') ) })
</script>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

O getElementByClass nao existe.

Mas pq queres class em vez de id ?

Para teres varios ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois, realmente não parece ser preciso. Basta chamares a função para os ids necessários.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ya mas vão ser geradas por php "<ul class="">" ou seja vários ul class... não sei quantos vão ser(o numero depende de dados na BD) por,  isso é que quero que dê para classe..

Imaginem, se tiver 1000 linhas de dados na bd, vai ter de aparecer o tal ul class 1000x... era completamente inviável fazer 1000 ids diferentes...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Nao tas a perceber bem aquele codigo.

Eh o UL principal k fica com o ID de MENUZAO :

function ativaSubMenus(quem){
    var uls = quem.getElementsByTagName('ul') //O "quem" vem com o valor de "menuzao" e isto vai aos childs dele buscar todos os ULs
    for(var i=0; i<uls.length; i++){
        uls[i].style.display = 'none'; // Aqui vai a todos os k encontrou um a um e esconde os.
    }
    
    var h3s = quem.getElementsByTagName('h3') // Apartir de aqui ta a tratar de quando se clica no menu e mostra ou esconde o UL dentro dele
    for(i=0; i<h3s.length; i++){
        h3s[i].style.MozUserSelect = 'none'; //FF
        h3s[i].unselectable = 'on'; //IE
        
        h3s[i].style.cursor = 'pointer';
        
        h3s[i].onclick = function(e){
            var source = getSource(e);
            var ulatual = source.parentNode.getElementsByTagName('ul')[0];
            if(ulatual.style.display=='none'){
                ulatual.style.display = 'block';
            }else{
                ulatual.style.display = 'none';
            }
        }
    }
}

Fazes assim como ta no exemplo k deste :

<ul id='menuzao'>
    <li><h3>Menu</h3>

        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li><h3>Menu</h3>

        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li><h3>Menu</h3>

        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
</ul>

Dentro do UL principal k eh o MENUZAO ele vai ah procura de todos os ULs e esconde os, e eh nestes k vais por

as cenas k vais buscar ah DB.

Nao interessa quantos ULs metes dentro do MENUZAO k vai funcionar para todos.

Espero ter ajudado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Desde de ja te digo k arranjas menus muito melhores k esse so feitos em CSS.

Aqui tens muitos :

http://www.cssplay.co.uk/menus/

Atençao : Alguns desses menus podes usar ah vontade mas outros tens de pedir autorizaçao ao autor,

na pagina onde ves o menu em baixo diz se podes usar ou se tens de pedir autorizaçao.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

a questão é que eu preciso de um menu tree, do tipo abrir e fechar,estilo explorador do windows.. :P obrigado pelas dicas, quando puder testo e posto o feedback..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mas olha, eu percebi o script... a questão é que eu não preciso de gerar múltimplos ul's... Mas sim múltiplos menus!!

Eu sei que não é habitual ver, mas acredita, eu preciso é de múltiplos menus, porque vou ter conteudo a separar ao meio esses menus..alem de que os menus não têm minima relaçao entre si nem devem ter!! Já sabia que todos os ul's dentro da tag <ul id='menuzao'> ião ser escondidos.. mas então se eu precisar de dois menus?? Com várias coisas a separá-los, conteudo, etc,ect: A unica hipotese é gerar multiplos menus. Como já expliquei, teria de ter uma id para cada menu.. Isso seria inviável!

Ou seja: preciso mesmo do código a funcionar com classes, e não com id's... :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

No meu primeiro post perguntei te se era para teres varios mas nao respondes te.

Entao faz assim :

Em vez de dares o id das o name="menuzao".

<ul name="menuzao">
...
</ul>
...
<ul name="menuzao">
...
</ul>

Depois alteras isto :

bodyOnReady(function(){ ativaSubMenus( document.getElementById('menuzao') ) })

Para isto :

bodyOnReady(function(){
var MyMenus = document.getElementsByName("menuzao");
var Len = MyMenus.length;
for (var aa=0;aa<Len;aa++)
{
ativaSubMenus(MyMenus[aa]);
}
})

Nao experimentei mas deve tar a funcionar, depois diz qq coisa.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tipo, meti o teu codigo,experimentei e funcionou na boa.. Mas não sei porque, eu pus numa página que eu tava a fazer e não deu..mas pus noutra e já deu?!?! esquisito!

A que deu--> http://jblog.000webhost.info/joxnas/jlog4.php (página experimental)    carrega em "Postado em :" para veres a cena a abrir e fechar.(Pus dois <ul name='menuzao'> pa ter a cereteza que já dava pa por multiplos menus.

A que não dá e onde eu queria por-->http://jblog.000webhost.info/joxnas/ageral.php 

Podes ver os codigos fontes das duas páginas, mas eu comparei e parece-me tudo igual!!..

Não percebo..

outra coisa é que quando carrego a página pela primeira vez, não funcionam os menus.., mesmo nesta página(a unica em que funcionam) :

http://jblog.000webhost.info/joxnas/jlog4.php

Tenho de fazer um refresh e só depois é que dá... Sabes-me explicar o porquê??

Agradecido [[]]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Tive a ver o 2 links k deste e funcionou ah primeira tanto num como no outro, apareceu um calendario com uns numeros e letras ah frente e

mais ah frente um relogio e dois pontos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nao sei se sera disto mas na k nao funciona tu tens DIVs dentro da TAG HEAD quando deviam tar dentro do BODY.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Fds tive a ver melhor o codigo e a pagina tem varios HEADs e BODYs nao pode ser assim.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ahh? tive a ver e não estão nenhumas divs na tag head, olha:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jlog</title>
<link rel="stylesheet" type="text/css" href="cleanjlog.css">
</head>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Esquece , tinhas razão, a pagina tinha varias tags head porque no script php eu tinha posto os includes cujas paginas tinham tag head

resumindo, não influenciou porque eu já resolvi esse problema e ocntinua a não funcionar... :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

</script>

<!--INICIO DA PAG-->
<!--HEADER E DIVS PRINCIPAIS-->
<div id="behind"><!--0-->
<div align="center"><!--1-->
<div id="back"><!--2-->
<div class="midlle"><!--3-->
<div id="header"></div>

<!--SITE TOP MENU MAIS LOG IN!!-->
<div id="menulist"><!--1m-->
<div id="menulistl"><!--1ml-->
<a href="ageral.php"><img src="linkag.jpg" alt="" width="125" height="32" border="0" /></a><a href="arestrita.php"><img src="linkar.jpg" alt="" width="125" height="32" border="0" /></a><a href="aprivada.php"><img src="linkap.jpg" alt="" width="125" height="32" border="0" /></a></div>
<!--1ml-->
<div align="right"><!--1mr-->
<div id="menulistr"><!--2mr-->


</body>
</html>
</body>
</html>

<form id="form2" name="form2" method="post" action="login.php"> 
  User:
<input name="logname" type="text" size="8" maxlength="12" />
Pass:
<input name="logpass" type="password" size="8" maxlength="12" />
<input type="submit" name="Submit3" value="Entrar" />
</form>
</div><!--2mr-->
</div><!--1mr-->
</div><!--1m-->
<!--SITE TOP MENU MAIS LOG IN-FIM!-->



<!--SITE CONTEUDO!!*SITE CONTEUDO!!*-->
<div align="left"><!--4-->
<div id="content"><!--c1-->
<div id="contentt"></div><div id="contentm"><!--c2-->
<div id="contentw"><!--c3-->

Repara no meio, tas a fechar o body depois fechas o html depois voltas a fechar o body e a seguir o html e depois tens elementos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

realmente, 4 olhos vêm melhor que 2...

já solucionei isso... mas coninua igual :( :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Tas a fazer isso mal.

Olha como ta o teu :

<ul name="menuzao">
<h2>Postado em:</h2>
<ul>
	<p> </p>
	<table width="100%" border="0">
		<tr>
			<td width="50%">
				<div align="center"><img src="calendar.gif" width="32" height="32" align="middle" />
					25 de Novembro de 2007
				</div>
			</td>
			<td width="50%">
				<div align="center"><img src="clock.jpg" width="32" height="32" align="middle" />
					13:14
				</div>
			</td>
		</tr>
	</table>
</ul>
</ul>

Tem de ficar assim :

<ul name="menuzao">
<li><h2>Postado em:</h2>
	<ul>
		<li>
			<p> </p>
				<table width="100%" border="0">
					<tr>
						<td width="50%">
							<div align="center"><img src="calendar.gif" width="32" height="32" align="middle" />
								5 de Novembro de 2007
							</div>
						</td>
						<td width="50%">
							<div align="center"><img src="clock.jpg" width="32" height="32" align="middle" />
								20:24
							</div>
						</td>
					</tr>
				</table>
		</li>
	</ul>
</li>
</ul>

UL quer dizer unordered list mas para o UL funcionar tem de ter um ou mais LIs k eh a LIST.

Faz com k o codigo fique assim e vai funcionar.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

As vezes sao os erros mais pequenos k nos fazem perder mais tempo.

O script para fazer o menuzao funcionar tem de tar dentro da tag HEAD e nao dentro da tag BODY.

Depois diz qq coisa.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Consegui! pá obrigado... ;)

Já agora há alguma maneira simples e rápida da setinha que eu pus agora ficar virada para cima (outra imagem) quando aquilo tá aberto?

Se der muito trabalho, esquece ja ajudaste muito... Tinha esperasnça que uma simples propriedade no css desse pa fazer tal...

http://jblog.000webhost.info/joxnas/ageral.php

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Nao sei se ja reparaste mas o menu do teu site nao funciona no IE e no Opera, tive a ver e basta alterares isto :

<ul name="menuzao">

Para isto :

<ul id="menuzao" name="menuzao">

Deve ser algum erro desses browsers, nao sei.

Quanto ah setinha, nao sei se da pa fazer em css(acho k nao) mas vou dizer te usando JavaScript e 2 imagens.

O ficheiro da tua seta actual chamasse list.jpg troca para listdown.jpg e cria outra a apontar para cima e da lhe o nome de listup.jpg,

depois inseres as 3 linhas k antes teem isto /*+++*/ na function ativaSubMenus do script do menu ou copias tudo :

function ativaSubMenus(quem){
    //sumindo inicialmente com todas as ULs
    var uls = quem.getElementsByTagName('ul')
    for(var i=0; i<uls.length; i++){
        uls[i].style.display = 'none';
    }
    
    //ativando o click dos títulos, a seta do mouse e desabilitando selecionar
    var h2s = quem.getElementsByTagName('h2')
    for(i=0; i<h2s.length; i++){
        //desabilitando selecionar
        h2s[i].style.MozUserSelect = 'none'; //FF
        h2s[i].unselectable = 'on'; //IE
        
        //seta do mouse
        h2s[i].style.cursor = 'pointer';
	  
/*+++*/        var Img = h2s[i].getElementsByTagName("IMG"); // Esta vai buscar o objecto IMG dentro do H2
        
        h2s[i].onclick = function(e){
            var source = getSource(e);
            var ulatual = source.parentNode.getElementsByTagName('ul')[0];
            if(ulatual.style.display=='none'){
                ulatual.style.display = 'block';
/*+++*/		Img[0].src = "listup.jpg"; // Esta altera a imagem pa listup.jpg quando o menu eh aberto
            }else{
                ulatual.style.display = 'none';
/*+++*/		Img[0].src = "listdown.jpg"; // Esta altera a imagem pa listdown.jpg quando o menu eh fechado
            }
        }
    }
}

Depois diz qq coisa.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora