CategoryjQuery

Exemplo de uso do nth-child seletor css

Selecionar o terceiro elemento de cada lista, para alterar alguma coisa do css dele.

Usar: .eq(3) é o mesmo que :nth-child(3), oq queremos é o 3n

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.lista li:nth-child(3n)').css('background','#f0f');
});
</script>
<style type="text/css">
.lista { width: 180px; }
.lista li {
	background: #f00;
	margin: 5px;
	width: 50px;
	height: 50px;
	float: left;
}
.clear { clear: both; }
</style>
</head>
<body>
	<h2 class="clear">Primeira lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<h2 class="clear">Segunda lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<h2 class="clear">Terceira lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

Princípio de carousel de imagens com jQuery – Criando um plugin simples

Nos últimos meses, tenho usado bastante o efeito de carousel.
Como todo programador, me incomodo de ter que ‘me repetir’. Ou ter que repensar uma lógica que já resolvi uma vez.

Nem sempre ‘temos tempo’ de parar, analisar e otimizar oque estamos fazendo.
Porém, devemos fazer isso.
Continue reading

Exibir restante de conteúdo, que já estava sendo mostrado pela “metade”- jQuery exibe-esconde

Boas,

A idéia aqui, foi chegar próximo do efeito de “Exibir mais” do youtube:
Escondido:

A mostra:

Ok ?
Uma parte do conteúdo fica a mostra, e clicando no botão aparece o restante.

O primeiro passo é resolver o efeito no css. Todos os efeitos são apenas css. O javascript manipulando css. jQuery só entra para facilitar essa manipulação, porém é importante ressaltar, que toda a lógica e o efeito em si, ficou no css.

Depois de conseguir resolver tanto o estado aberto, qnto o fechado, usando apenas css e html, sem nenhuma linha de js, fazer o comportamento fica super simples.

<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
.content { margin: 0 auto; width: 500px; }
#panel { position: relative; width: 500px; margin: 0 auto; }
#content { }
.hidden { height: 100px; overflow: hidden; }
#toggle { width: 488px; height: 20px; padding: 5px;
	background: #fff; border: 1px solid #ccc; cursor: pointer;
	text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#toggle').click(function(){
		jQuery('#panel').toggleClass('hidden');							  
	});	
});
</script>
</head>
<body>
	<div id="panel" class="hidden content">
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet 
            luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt 
            eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.</p>
            
			<p>Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu 
            ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo. 
            Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
             sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.</p>
             
			<p>Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. </p>
         </div><!-- /content -->
	</div><!-- /panel -->
	<div id="toggle" class="content">toggle</div>
</body>
</html>

Demonstração

Exemplo de uso jQuery.Deferred – simples

Talvez esteja faltando algo “simples”, situações “cotidianas”, ou sei lá oque.
Continue reading

Setar combo pelo .text() do option – jQuery

Apenas repositório mesmo:
Continue reading