[Resolvido] Como carregar pagina com topico ja escondido

PauloRJ · Outubro 24, 2008

Opa!

Eu tenho o seguinte codigo de expandir e esconder o conteudo.

Funciona perfeitamente. Mas gostaria de saber e ajuda de vocês como eu colocar isso dinamico.

Ideia:

Ao carregar a pagina eu ja por uma informação antecipada ja exibir um menu escondido ao invez de esperar o usuario esconder.

A ideia e por login gravar a ultima configuração da tela do usuario, se ele na ultima visita preferiu esconder o topico "x" ele quando retornar se loagr no site o topico "x" vai aparecer para ele escondido, caso deseja ele expande novamente.

Por abrir tudo expandido e epe poder esconder esta ok.

segue o codigo:

pagina.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/interface.js"></script>

</head>
<body>

<div id="sort1" class="groupWrapper">
	<div id="newsFeeder" class="groupItem">

		<div class="itemHeader">Feeds<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
		</div>
	</div>

	<br>

   	<div id="fotos" class="groupItem">

		<div class="itemHeader">Fotos<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
		</div>
	</div>



</div>

<script type="text/javascript">
function Teste(obj)
{
	alert(obj.parentNode.parentNode.id);
}

$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);

	   }
);

var toggleContent = function(e)
{

	var targetContent = $('div.itemContent', this.parentNode.parentNode);

	if (targetContent.css('display') == 'none')
	{
		targetContent.slideDown(300);
		$(this).html('[-]');
		var teste2 = 'flag01';
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
		var teste2 = 'flag02';
	}

	alert(teste2);

	return false;
};

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

valeu a força!

PauloRJ · Outubro 30, 2008

Ok. 2 Semanas e nenhuma ideia sobre.

Alguem poderia me ajudar a encontrar um código bom para expandir e esconder o texto?

Abraço!

berkowitz · Outubro 30, 2008

bom... você deve utilizar BD, correto?

Você define como padrão todas as janelas iniciarem abertas (por exemplo), aí no banco você salva apenas as que devem iniciar fechadas.

Aí no seu loop (PHP por exemplo) você recupera esse valor e seta o DISPLAY dela!

Um exemplo simples (só pra te dar uma luz):

<?
...
while($usuarios = mysql_fetch_array($listaFuncionarios)) {
	echo "<div class=\"itemHeader\">".$usuarios['seiLa']."<a href=\"#\" class=\"closeEl\" onClick=\"Teste(this)\">[".(($usuarios['campoEXEMPLO'] == 0)?"+":"-")."]</a></div>";
	echo "<div class=\"itemContent\"".(($usuarios['campoEXEMPLO'] == 0)?" style='display: none;'":"").">".$usuarios['conteudoEXEMPLO']."</div>";
}
...
?>

Abrax!!!

PauloRJ · Outubro 30, 2008

Funcionou não.

EU ja tinah feito esse if do sinal "+" e "-"

valeu a força

William Bruno · Outubro 30, 2008

Bom.. então a idéia que vai funcionar, é mandar pro banco todos os cliques do usuário.

Pois será mais dificil saber qual foi o último. Seria assim, se ele escondeu, você vai num campo e coloca algo como "nao", se ele espandiu, você coloca "sim".

Na próxima vez que ele entrar, você verifica se tá "nao", e ai já dá um display: none; de cara no que você quer esconder, ou se tá sim, ai já deixa display: block;

Como você tá fazendo tudo com Javascript, acho que o melhor para mandar esses flags pro banco, seria um AJAX.

Uso muito pouco de jQuery.. mas acho que a lógica é essa que eu disse.

berkowitz · Outubro 31, 2008

Funcionou não.

EU ja tinah feito esse if do sinal "+" e "-"

valeu a força

Como você está salvando essas informações no banco pra poder resgatar depois? Mostra aí só pra gente ter uma idéia...

Abrax!!!

PauloRJ · Outubro 31, 2008

Eu falei pouco quando disse que não funcionou.

Seguinte:

1) Eu estou enviando os dados por ajax e que simplifiquei o codigo, vai par ao banco de dados sim, pq assim o usuario pode sair a qualquer momento que fica gravado.

2) dysplay: none ele abre a janela escondida, o problema e que fica setado direto o display: nome.

3) Quando o usuario vai querer abrir nao vai abrir pq esta setado direto na linha e nao como condição temporaria como é feito pelo javascript entende?

4) Minha flag no banco e 0/1

5) Esse é o problema vir escondido e ele nao conseguir abrir dps. :blink:

to pensando em soluções aqui tb. Mas somos muitas cabeças vamos nos ajudar!

e eu de javascript não sou lá muita coisa.

:unsure:

William Bruno · Outubro 31, 2008

Na verdade, TODA e qualquer manipulação que fazemos com: display: none/block.

setamos com estilo inline: style="display: none;" E é possivel sim mudar isso com javascript. Já que você tá mandando a flag pro banco como 0/1, tras com o server side, se vai começar com block, ou com none.

A resposta pra tua pergunta 6, é trazer com server side, dependendo do flag do teu banco.

PauloRJ · Outubro 31, 2008

William mas eu nao sei fazer isso.

O que eu estou falando é o seguinte:

1) Abra a pagina com todos abertos sem dislay nenhum setado

2) A ação do usuario de fechar e abrir ele esconde e aparece o conteudo da aba

3) E ele vai isso tudo sem setar no codigo nenhum dysplay. Ele "força" o display pelo javascript sem refresh da pagina

4) Isso que queria fazer, vem todos abertos e de acordo com a flag do banco que a aba estiver eu chamo a função para ele se esconder entende?

um if aba por aba se for pra ficar escondida chamo a funcao e ela aparece fechada como se fosse ação do click do usuario entende?

é mais ou menos isso no meu pouco conhecimento de javascript gostaria de fazer.

PauloRJ · Outubro 31, 2008

segue meu codigo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/interface.js"></script>



<style type="text/css" media="all">
html
{
	height: 100%;
}
img{
	border: none;
}
body
{
	background: #fff;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.groupWrapper
{
	width: 190px;
	float: left;
	margin-right: 1%;
}

.serializer
{
	clear: both;
}

.itemContent
{
margin-top:5px;
background-color:#FFFF00;
}


.groupItem
{
background-color:#FF0000;
border: 1px solid #000;
padding: 5px;
margin: 5px;

}

.groupItem .itemHeader
{
	line-height: 28px;
	background-color: #DAFF9F;
	border-top: 2px solid #B5EF59;
	color: #000;
	padding: 0 10px;
	cursor: move;
	font-weight: bold;
	font-size: 16px;
	height: 28px;
	position: relative;
}


.groupItem .itemHeader a
{
	position: absolute;
	right: 10px;
	top: 0px;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}

.sortHelper
{
	border: 2px dashed #ccff00;
	width: auto !important;
	background-color:#00FFFF;
}

div.groupWrapper { min-height: 50px; }	


.groupWrapper p
{
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.dragAtivo { background-color: #ccff99; }

.dragHover { background-color: #F0F1FF; }


.tabela {
	border: 1px solid #ccc;
	border-spacing:1px;
	border-collapse:collapse;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

</style>
</head>
<body>

<form name="form" action="ordem.php" method="post">
<table border="1" cellpadding="5" cellspacing="20" class="tabela">
<tr>
	<td>Coluna 1:</td>
	<td><input name="coluna1" id="exibecoluna1" value="" size="100" type="text"></td>
</tr>

<tr>
	<td>Coluna 2:</td>
	<td><input name="coluna2" id="exibecoluna2" value="" size="100" type="text"></td>
</tr>

<tr>
	<td>Coluna 3:</td>
	<td><input name="coluna3" id="exibecoluna3" value="" size="100" type="text"></td>
</tr>

<tr>
	<td>Coluna 4:</td>
	<td><input name="coluna4" id="exibecoluna4" value="" size="100" type="text"></td>
</tr>

<tr>
	<td colspan="2" align="right"><input type="submit" value="GRAVAR" /></td>
</tr>
</table>	
</form>

<div id="sort1" class="groupWrapper">
	<div id="newsFeeder" class="groupItem">

		<div class="itemHeader">Feeds<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
		</div>
	</div>
	
	<div id="news" class="groupItem">
		<div class="itemHeader">News<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">

			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>
		</div>

	</div>
	<p> </p>
</div>

<div id="sort2" class="groupWrapper">
	<div id="shop" class="groupItem">
		<div class="itemHeader">Shopping<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>
		</div>
	</div>
	<p> </p>

</div>

<div id="sort3" class="groupWrapper">

	<div id="links" class="groupItem">
		<div class="itemHeader">Links<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>
		</div>
	</div>
	
	<div id="images" class="groupItem">
		<div class="itemHeader">Images<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>

		<div class="itemContent">
			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>

		</div>
	</div>
	<p> </p>
</div>


<div id="sort4" class="groupWrapper">

	<div id="televisao" class="groupItem">
		<div class="itemHeader">televisao<a href="#" class="closeEl" onClick="Teste(this)">[-]</a></div>
		<div class="itemContent">
			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>

				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>
		</div>
	</div>
	
	<div id="radio" class="groupItem">
		<div class="itemHeader">Radio<a href="#" class="closeEl" onMouseOver="closeEl" >[-]</a></div>

		<div class="itemContent">
			
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
				orem ipsum dolor sit amet, consectetuer adipiscing elit<br>
			</ul>

		</div>
	</div>
	<p> </p>
</div>
</script>

<script>
function Teste(obj)
{
 alert(obj.parentNode.parentNode.id);
}
</script>

<script type="text/javascript">
$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);

		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'dragAtivo',
				hoverclass : 	'dragHover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				opacity			: 0.7,
				onChange : function(ser)
				{
				
					serialcoluna1 = $.SortSerialize('sort1');
					serialcoluna2 = $.SortSerialize('sort2');
					serialcoluna3 = $.SortSerialize('sort3');
					serialcoluna4 = $.SortSerialize('sort4');					
					$('#exibecoluna1').val(serialcoluna1.hash);
					$('#exibecoluna2').val(serialcoluna2.hash);
					$('#exibecoluna3').val(serialcoluna3.hash);
					$('#exibecoluna4').val(serialcoluna4.hash);					
				
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);


var toggleContent = function(e)
{

	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	
	alert(targetContent2);
	
	if (targetContent.css('display') == 'none') 
	{
		targetContent.slideDown(300);
		$(this).html('[-]');
		var teste2 = 'flag01';
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
		var teste2 = 'flag02';
	}
	
	alert(teste2);

	return false;
};

</script>

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

PauloRJ · Outubro 31, 2008

CONSEGUI!

EU fiz uma nova funcao jogando direto o nome da div que deve ter a condição de recolher e expandir.

fiz um botao de expandir e recolher todas.

segue o exemplo bruto :

function vai(nome2)
{
//	var toggleContent = function(e);
	var nomedessapouha = nome2;

	var targetContent = $('div.itemContent', this.nomedessapouha);

	
	if (targetContent.css('display') == 'none') 
	{
		targetContent.slideDown(300);
		$(this).html('[-]');
		var teste2 = 'flag01';
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
		var teste2 = 'flag02';
	}
	
	alert(teste2);

	return false;
};

</script>


<a href="#" onClick="vai(images)">Recolher/Expandir Todos</a>

valeu a força de todos!!!

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

berkowitz · Outubro 31, 2008

Aeeeeee!! Parabéns!!!

Como você fez?

Abrax!

Arquivado

[Resolvido] Como carregar pagina com topico ja escondido

Recommended Posts

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

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

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

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

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

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