Div "Show/Hidden"

Lou Poulit · Fevereiro 25, 2010

Mestres, bom estar de novo com vcs.

Estou testando o código abaixo, com resultados bons mas parciais para as minhas necessidades. Esgotei meus reduzidos recursos inutilmente para conseguir mais dois efeitos:

1) Que no "onload" o div não apareça (none), até que a âncora correspondente seja clicada.

2) Que todos desapareçam ao se tirar o cursor de cima (onclick para onmouseover/out).

------------------------------------------------------------------------------------------------

CÓDIGO PESQUISADO:

<html>
<head>
<script language = "Javascript">
//Criado por: Igor Ferreira Cemim
//E-mail: i.cemim@yahoo.com.br
//Blog: [url="http://my.ziki.com/igorcemim"]http://my.ziki.com/igorcemim[/url]

var ID

function Mostrar_Ocultar(ID){

if (eval(ID).style.display=='none'){
eval(ID).style.display='block'
}
else{
eval(ID).style.display='none'
}
}
</script>
<title>Mostrar Ocultar</title>
</head>
<body>
<a href = "java script:Mostrar_Ocultar('num_um')">Mostrar Ocultar num_um</a><br>
<br>
<a href = "java script:Mostrar_Ocultar('num_dois')">Mostrar Ocultar num_dois</a><br>
<br>
<div id="num_um">
<b>DIV número um</b><br>
</div>
<br>
<div id="num_dois">
<b>DIV número dois</b><br>
</div>
</body>
</html>

POR FAVOR NÂO RETIRE OS CRÉDITOS.

-----------------------------------------------------------------------------------------------

CÓDIGO ADAPTADO POR MIM:

<html>
<head>
  <title>Mostrar Ocultar</title>

<script language="Javascript" type="text/javascript">
//Criado por: Igor Ferreira Cemim
//E-mail: i.cemim@yahoo.com.br
//Blog: [url="http://my.ziki.com/igorcemim"]http://my.ziki.com/igorcemim[/url]

var ID

function Mostrar_Ocultar(ID){

if (eval(ID).style.display=='block'){
eval(ID).style.display='none'
}
else{
eval(ID).style.display='block'
}
}
</script>

<style type="text/css">
a {
	text-decoration: none;
	}
a:hover {
	color: #FFF;
	text-decoration: underline;
	}
	
#container {
	Z-INDEX: 1; 
	POSITION: relative; 
	margin: auto auto; 
	WIDTH: 400px; 
	DISPLAY: block; 
	BACKGROUND: #000040; 
	HEIGHT: 300px;
	BORDER: 1px solid #fff;
	MARGIN-LEFT: 50%;
	TOP: 150px;
	LEFT: -200px;
	}
#outraspaginas {
	POSITION: absolute;
	TOP: 20px;
	LEFT: 20px;
	BORDER: 1px solid #FFF;
	}
#num_um {
	Z-INDEX: 2;
	POSITION: absolute;
	TOP: 20px;
	LEFT: 115px;
	DISPLAY: block;
	WIDTH: 250px;
	HEIGHT: 50px;
	BORDER: 1px solid #FFF;
	PADDING: 5px;
	BACKGROUND: #005efa;
	}
#parceiros {
    POSITION: absolute;
	TOP: 100px;
	LEFT: 20px;
	} 
</style>
</head>

<body onload="eval('num_um)''(um_dois)'.style.display='none'">

  <div id="container">
  
  	<span id="outraspaginas">
    <a href="javascript:Mostrar_Ocultar('num_um')">Outras Páginas</a></span>
	<br><br><br><br><br><br>
	
	<span id="parceiros">
    <a href="javascript:Mostrar_Ocultar('num_dois')">Mostrar Ocultar num_dois</a></span><br>
    <br>

    <div id="num_um">
      <a href="http://falecomloupoulit.blogspot.com" target="_blank" title="Ir Para o BLOG">BLOG FALE COMIGO</a><br>
  	<a href="http://facaartecompoulit.blogspot.com" target="_blank" title="Ir Para o BLOG">BLOG FAÇA ARTE COM POULIT</a>
    </div><br>

    <div id="num_dois">
      <b>DIV número dois</b><br>
    </div>
	
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------------

Quando eu uso como abaixo funciona:

onload="eval(num_um).style.display='none'""

mas eu preciso de vários div, e aí aparecem todos eles no carregamento da página.

Bem, talvez nem tudo eu possa conseguir aprender. Mas de toda forma tenho sido bem atendido e feito, por justiça, a divulgação de Fórum. Espero que dê certo desta vez também.

Grande abraço.

Lou Poulit

(http://www.loupoulit.xpg.com.br)

William Bruno · Fevereiro 25, 2010

Melhorando esse código ai:

<html>
<head>
  <title>Mostrar Ocultar</title>

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function toggle_id( el )
{
	if ( id( el ).style.display=='block' )
		id( el ).style.display='none'
	else
		id( el ).style.display='block'
}
window.onload = function(){
	id('num_um').style.display = 'none';
	id('num_dois').style.display = 'none';
}
</script>

<style type="text/css">
a {
	text-decoration: none;
	}
a:hover {
	color: #FFF;
	text-decoration: underline;
}

#container {
	Z-INDEX: 1; 
	POSITION: relative; 
	margin: auto auto; 
	WIDTH: 400px; 
	DISPLAY: block; 
	BACKGROUND: #000040; 
	HEIGHT: 300px;
	BORDER: 1px solid #fff;
	MARGIN-LEFT: 50%;
	TOP: 150px;
	LEFT: -200px;
}
#outraspaginas {
	POSITION: absolute;
	TOP: 20px;
	LEFT: 20px;
	BORDER: 1px solid #FFF;
	color: #fff;
	cursor: pointer;
}
#num_um {
	Z-INDEX: 2;
	POSITION: absolute;
	TOP: 20px;
	LEFT: 115px;
	DISPLAY: block;
	WIDTH: 250px;
	HEIGHT: 50px;
	BORDER: 1px solid #FFF;
	PADDING: 5px;
	BACKGROUND: #005efa;
}
#parceiros {
	POSITION: absolute;
	TOP: 100px;
	LEFT: 20px;
	color: #fff;
	cursor: pointer;
} 
</style>
</head>

<body>

	<div id="container">

		<span id="outraspaginas" onclick="toggle_id('num_um')">Outras Páginas</span>
		<br /><br /><br /><br /><br /><br />

		<span id="parceiros" onclick="toggle_id('num_dois')">Mostrar Ocultar num_dois</span><br />
		<br />

		<div id="num_um">
			<a href="http://falecomloupoulit.blogspot.com" target="_blank" title="Ir Para o BLOG">BLOG FALE COMIGO</a><br />
			<a href="http://facaartecompoulit.blogspot.com" target="_blank" title="Ir Para o BLOG">BLOG FAÇA ARTE COM POULIT</a>
		</div><br />

		<div id="num_dois">
			<b>DIV número dois</b><br />
		</div>

	</div><!-- /container -->
</body>
</html>

propriedades e valores CSS devem ser escritos em minusculo

Tópico Movido para o fórum principal

Lou Poulit · Fevereiro 25, 2010

Poxa, mermaum... Valeu.

Toda "melhorada" é bem vinda por aqui, preciso disso.

Neste momento tenho que sair à rua, mas logo que voltar vou procurar entender isso na prática.

Depois dou um retorno aqui mesmo.

Mas tenho a impressão, só de olhar, que você já deu algum jeito.

GRande abraço.

Lou Poulit · Fevereiro 28, 2010

Grande Irmaum,

você pode ver abaixo o código do meu exercício incrementado pela sua colaboração. Pode ver também que, para "segurar" o tamanho deste post, apliquei o efeito apenas no primeiro link do menu (Notícias) e criei um arquivo de estilos. Imagino que esteja faltando algum pequeno detalhe (talvez em razão da maior complexidade desta página em comparação com o exercício inicial que lhe enviei), porque no exercício inicial tudo funcionou perfeitamente mas nesta página não está funcionando ainda. Não consegui matar essa charada.

Se você ainda puder "melhorar", ficarei grato. E satisfeito pela certeza de que este exercício será util a outros.

------------------------------------------------------------

CÓDIGO FONTE DO ESTÁGIO ATUAL DA PÁGINA:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">

//Colaboração: Igor Ferreira Cemim (E-mail: i.cemim@yahoo.com.br)(Blog: [url="http://my.ziki.com/igorcemim%29"]http://my.ziki.com/igorcemim)[/url]
//Colaboração: Willian Bruno (http://www.wbruno.com.br/)

function id( el ){
return document.getElementById( el );
}
function toggle_id( el )
{
if ( id( el ).style.display=='block' )
id( el ).style.display='none'
else
id( el ).style.display='block'
}
window.onload = function(){
id('num_um').style.display = 'none';
id('num_dois').style.display = 'none';
id('num_tres').style.display = 'none';
}
 </script>

 <title>IMARNAVE - Instituto Marítimo de
Navegação</title>


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

 <meta name="description" content="Serviços do Instituto Marítimo de Navegação e seus associados.">

 <meta name="keywords" content="">

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

</head>

<body>

<div id="container">

	<div id="topo"><!--[if IE]><script type=text/javascript defer src="fix_eolas.js">/SCRIPT> <![endif]--><!--[if !IE]> --><object type="application/x-shockwave-flash" data="flash/topo.swf" height="100" width="760"><!-- <![endif]--><!--[if IE]> <OBJECT codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=760 height=100><PARAM NAME="_cx" VALUE="20108"><PARAM NAME="_cy" VALUE="2645"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="flash/topo.swf"><PARAM NAME="Src" VALUE="flash/topo.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"> <!--><!--dgx-->
<p>Necessita de Flash Player</p></object><!-- <![endif]--> </div>

<div id="colesq"></div>

[b]<div id="bloco1"></div>[/b]
[b]
[/b]
[b]<span id="noticias" onclick="toggle_id('num_um')">Notícias</span>[/b]
[b]
[/b]
[b]<div id="num_um"><br/>[/b]
[b]<a href="http://jbonline.terra.com.br//" target="_blank" title="Leia o JB On Line">Jornal do Brasil</a><br>[/b]
[b]<a href="http://oglobo.globo.com/" target="_blank" title="Leia O Globo On Line">O Globo</a><br/>[/b]
[b]<a href="http://odia.terra.com.br/portal/" target="_blank" title="Leia O Dia On Line">O Dia</a><br>[/b]
[b]<a href="http://www.estadao.com.br/" target="_blank" title="Leia O Estadão On Line">O Estadão</a></div>[/b]

<div id="projetos">Projetos</div>
<div id="servicos">Serviços</div>
<div id="produtos">Produtos</div>

<div id="bloco2"></div>

<div id="buscas">Buscas</div>
<div id="financeiro">Financeiro</div>
<div id="conhecimentos">Conhecimentos</div>
<div id="cultura">Cultura</div>

<div id="coldir"></div>

</div>

</body>
</html>

------------------------------

Nota: Se você quiser o código CSS eu envio. Talvez queira apenas saber que CONTAINER tem "position: relative" e os demais elementos "absolute".

Abraço, Mestre.

Lou Poulit · Fevereiro 28, 2010

Mestre Willian,

Subi este exercício para um endereço de testes, reincluindo os códigos de estilo.

Assim você e outros poderão compreender integralmente a codificação e o DIV em questão:

http://www.loupoulit3.xpg.com.br

Aguardo alguma resposta sua.

Abraço, amigo.

ET: Troquei aqui:

"window.onload = function(){

id('num_um').style.display = ' Imagem Postada block';"

para que o DIV entre visível.

William Bruno · Março 2, 2010

é algum problema no teu CSS, valide o teu documento, e reveja esse HTML que está bem bagunçado..

esse position absolute é desnecessário ai, e por algum motivo, essa estrutura mal feita está atrapalhando o funcionamento do script js.

Lou Poulit · Março 3, 2010

Olá, mestres.

Estou procurando quem já tenha aplicado o efeito Toggle em camada distinta e com posicionamento absoluto em relação a um container relativo centralizado, ou quem afirme que isso simplesmente não seja possível.

No meu estudo não está funcionando. Quem quiser ver pode clicar aqui:

http://www.loupoulit3.xpg.com.br

Antecipadamente grato.

William Bruno · Março 3, 2010

O teu problema é CSS !

remova:

#container  {
	z-index: -1;
}

Não duplique tópicos pelo fórum, procure estudar CSS, essa estrutura está muito ruim.

Arquivado

Div "Show/Hidden"

Recommended Posts

Lou Poulit 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lou Poulit 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lou Poulit 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lou Poulit 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lou Poulit 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante