Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

joxnas

[Resolvido] getelementbyid para classe, como?

Mensagens Recomendadas

joxnas    0
joxnas

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>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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..

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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 [[]]

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
joxnas    0
joxnas

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... :(

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NCS_One    2
NCS_One

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.

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


×

Aviso Sobre Cookies

Ao usar este site você aceita a nossa Política de Privacidade