Nicholas Pufal

Tô com um semi-desafio aqui. Tem um sistema em que precisarei criar uma árvore genealógica, administrável via painel. O PHP não tem segredo, mas o CSS/XHTML tô pensando bem ainda em como vou estruturar.

Tava pensando em abusar de position (relative e absolute) para deixar tudo nos devidos lugares, mas estou postando justamente pra ver se alguém tem uma sugestão melhor, pois vai ser um tanto quanto chato fazer desta forma (eu acho).

Na SS anexa, segue o modelo de como mais ou menos será. Ao deixar o mouse acima do nome, é aberta uma foto em miniatura abaixo da plaquinha.

 arvore.jpg   57.42KB   35 downloads

Qualquer sugestão é bem-vinda

RESOLVIDO - Tava procurando cabelo em ovo... A estrutura ficou bem básica, e apenas trabalhei com margins e float:right. Bem simples. Ficou assim a estrutura:

<div class="arvore">
		<h5>Árvore genealógica:</h5>
		
			<!-- BISAVOS -->
			<div class="main_bisavos">
			
				<div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				<div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>				
				
				<div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				<div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				
				<div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				<div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				
				<div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				<div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				
			</div>
			
			<!-- AVOS -->
			<div class="main_avos">
			
				<div class="avos1"><a href="">123</a></div>
				<div class="avos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>					
				
				<div class="avos3"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>
				<div class="avos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div>				

				
			</div>
			
			<!-- PAIS -->
			<div class="main_pais">
			
				<div class="pais1"><a href="">Nome do pai</a></div>
				<div class="pais2"><a href="">Nome da mãe</a></div>					
				
			</div>
			
			<!-- FILHO -->
			
			<div class="main_filho">			
				<div class="filho1"><a href="">Nome do pai</a></div>				
			</div>
					
		</div>

Estou desenvolvendo algo aqui só com o propósito de me desafiar mesmo. É um simples formulário, contendo checkboxes principalmente, onde assim que submetidos os dados, o meu script irá deixar impresso na tela apenas as opções selecionadas nos checkbox. Além disso, é tudo dividido em grupos. Assim por exemplo (no exempo não tem outros campos, mas a intenção é misturar tudo que é tipo de campo):

 Capture.JPG   17.37KB   9 downloads

Por enquanto só preciso de uma mão para capturar todos os Ids que eu definir em getElementById, ou então todas as tags que eu definir com getElementsByTagName.

Minha idéia (de girico, mas não deixando de ser idéia) é capturar as minhas DTs (que é onde eu coloco os titulos de "Grupo 1", "Grupo 2") imprimir o título se ele já não existir, pegar todas as checkbox com "g1" (no caso de grupo 1), "g2" (no caso de grupo 2)... (vai incrementando na medida que tiver checkbox daquele grupo) e imprimir apenas aquelas que estavam selecionadas.

Pode ser feito de outra forma? Tá muito muito burro?

Minha estrutura está assim por enquanto (para vocês terem idéia de como vou trabalhar com o JS):

<form name="teste" onSubmit="lista();">
<dl>
<dt id="titulo">Grupo 1</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo1" value="g1/item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo1" value="g1/item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo1" value="g1/item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo1" value="g1/item 4"></dd>
</dl>
<dl>
<dt id="titulo">Grupo 2</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo2" value="g2/item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo2" value="g2/item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo2" value="g2/item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo2" value="g2/item 4"></dd>
</dl>
<input type="submit" value="Enviar"><BR><BR><BR>
</form>

O meu value possui a "/" pq é através dela que pretendo pegar a que grupo pertence (dividindo os valores).

Pessoal,

como faço para habilitar o IP externo, sendo assim outros podem acessar meu computador? (exemplo: o meu servidor APACHE configurado)

Pergunto isso assim porque acho que o meu modem é que toma conta dessa configuração. Ao acessar o meu IP externo do meu computador, abre a tela de login do meu modem (ADSL). E quando alguém tenta acessar de fora, nunca consegue, dá erro.

Mesmo uma vez que configurei um servidor aqui, para poder compartilhar umas pastas do meu PC, ninguém conseguia entrar.

Não uso firewall no modem e muito menos no Windows.

Alguma idéia?

Valeu!

<HTML>
<HEAD>
<script language="javascript">
function checagem() {
var formulario = document.forms['teste'];
if formulario.elements['destaque'].checked {alert("hahah"); }
}
</script>
</HEAD>
<BODY>
<form name="teste" id="teste">
Destaque? <input type="checkbox" name="destaque" id="destaque" onClick="checagem(this);"><br><br>
<span style="display:none;">Grandeza: <input type="text" name="grandeza" id="grandeza"></span>
</form>
</BODY>
</HTML>

No FF dá erro de função não definida, quando eu clico no checkbox. Mas está tudo certo, não?


EDIT: resolvido. Esqueci os parenteses na condição do IF.

Tô quebrando a cabeça aqui pra fazer essa coisa bem simples. Cheguei em algo que funciona, mas de uma forma nada a ver com o que eu quero

Ocorre isso:

<tr id="fundo">
style='background-color:#ccc;'
</tr>
<tr id="fundo">
<td width="50">
  <input value="1" name="check" onclick="cbalterna(this)" type="checkbox">
</td>
<td width="350">
teste teste teste teste
</td>
<td width="100">
teste 2 teste 2 teste 2
</td>
</tr>

Ou seja, ferra com a minha tabela.

Ah, sim, o meu código é esse:

<script type="text/javascript">
function cbalterna(cb) {
elemento = document.getElementById("fundo");

elemento.innerHTML = cb.checked ? "style='background-color:#ccc;'" : "";
}
</script>

<form action="#">


<TABLE ALIGN="CENTER" WIDTH="500" border="1">
<TR id="fundo">
<TD WIDTH="50"><input type="checkbox" value="1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
<TR id="fundo">
<TD WIDTH="50"><input type="checkbox" value="1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
</TABLE>

</form>

Notei que não dá certo por dois motivos:
1. Ele nao insere o style="" ali dentro da tag TR, mas sim como conteúdo dela, e isso me ferra.

2. Como todas as TR tem id="fundo", se eu clico no checkbox da TR de baixo, ferra com a de cima, mexe com a de cima apenas

Teria então que conseguir um jeito de detectar que a checkbox pertence aquela TR (é filha dela) e que deve alterar portanto só o fundo da sua TR pai. O problema é: como faço isso??

Dei uma olhada em algumas documentações e afins, mas não consegui ainda. Qualquer sugestão é bem vinda.

Abraços!