Felipe Campos | Design e Desenvolvimento

Novo site do Samuel Barbosa

18 de fevereiro de 2012 admin Sites, 0

Criação de layout e desenvolvimento do site.

Últimos tweets para seu site

16 de fevereiro de 2012 admin Blog, 0

Vou postar um pequeno script que mostra no site os seus últimos tweets de uma forma que você possa deixar com um estilo diferente daquele que você pega direto do site do twitter.

É simples, seus tweets são mostrados no seu html por listas <li>

<div id="twitter">

<ul id="twitter_update_list"></ul>

<script type="text/javascript" src="http://www.seusite.com/js/script.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/AQUI-SEU-USUARIO.json?callback=twitterCallback2&amp;count=1"></script>

</div>

Primeiro coloquei tudo dentro de uma div qualquer, a tag <ul> com a id twitter_update_list é onde vai mostrar seus tweets e é op id que você vai estilizar em seu css, logo abaixo você chama 2 scripts um você coloca em seu servidor junto com o site (pegue o script aqui) e outro é direto do twitter. Onde diz AQUI-SEU-USUARIO você coloca o usuário do seu twitter e no final onde diz count=1 é a quantidade de tweets que você deseja mostrar, para mostras os 5 ultimo mude para count=5

Isso ae, qualquer duvida comente

twitter

Mostrar e esconder div com efeito toggle jQuery

16 de fevereiro de 2012 admin Blog, 0

Estou trabalhando em um site www.samuelbarbosasb.com e em algumas áreas do site teriam muitas informações para aparecer na pagina, aí tive a idéia de usar divs que ficassem ocultas, e quando clicar em abrir, ou mostrar conteúdo, a div abre com um efeito tipo slide para baixo, e se clicar novamente a div recolhe ficando oculta.

É bem fácil. Primeiro chamamos o plugin jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Entre as tags <head> e </head> cole o seguinte script

<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
$('.tgl').before('<span><center>Revelar</center></span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

E no seu HTML o conteúdo que você quer ocultar coloque entre as divs:

<div id="box-toggle">
<div class="tgl">
<div class="sessao" >

<p>Aqui o Conteudo</p>

</div>
</div>
</div><!-- fim do toggle -->

Pronto, está feito, agora é só arrumar o estilo.

Note que o efeito funciona quando clicar em Revelar e Esconder, para usar como Abrir e Fechar, basta alterar a palavra no script do jQuery, onde estiver escrito Revelar troque para Abrir e onde estiver Esconder, troque para Fechar. Não tem erro, se tiver dúvidas, deixe seu comentário.

jquery, toggle

Banner com efeito simples em jQuery

13 de fevereiro de 2012 admin Blog, 0

Achei interessante postar esse script, você pode criar vários banners, e com um script em jQuery ele trocas os banners com efeito fade in e fade out.

Dentro das tags <head> e </head> cole o seguinte script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
function animar() {
	$('#banner div').eq(0).animate({opacity: 0}, 0 , function() {
	$(this).appendTo('#banner').animate({opacity: 1}, 1000);
	})
}
$b(document).ready(function() {
	$('#banner div').each(function() {
		$(this).css({
		position: 'absolute'
		})
	})
		setInterval(animar, 3000);
});
</script>

Na primeira linha chamamos o jQueri direto do servidor do google, na linha 5 pegamos o id da div onde estará os banners, sua div poderá ter qualquer id, basta trocar nas linhas onde está id #banner para a id que vc quiser usar. Na linha 15 você poderá alterar o tempo do intervalo para cada banner.

No seu HMTL você usa assim:

<div id="banner">

<div><a href="#"><img src="images/banner_1.jpg" /></a></div>
<div><a href="#"><img src="images/banner_2.jpg" /></a></div>
<div><a href="#"><img src="images/banner_3.jpg" /></a></div>

</div>

Note que o id da div #banner é a mesma no script do jQuery.

Dentro da div #banner todas as imagens estão dentro de divs, você deverá usa-las para que o efeito funcione.

É isso ae, bem fácil, se tiver dificuldades comenta ae!

banner, jquery