Posts arquivados do autor
22fev2012
Bem simples, só editei o trecho que era necessário para enviar um history.pushState, no final da requisição ajax, que carrega a página em uma div, sem dar refresh no restante do site.
http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var response = $( '<div>'+response+'</div>' );
var data = response.find('#content').html();
//apenas atrasando a troca, para mostrarmos o loading
window.setTimeout( function(){
content.fadeOut('slow', function(){
content.html( data ).fadeIn();
var title = response.find('title').text();
window.history.pushState( href, title, href );
document.title = title;
});
}, 500 );
}
});
Notem a linha:
window.history.pushState( href, response.find('title'), href );
É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.
Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/
É isso. Dúvidas ? pergunte, comente!
Link deste post
Tags: pushState
22fev2012
Boas galera!
Precisei disso recentemente, e como não trabalho muito com flash, e nunca programei nada de verdade em ActionScript, pedi socorro ao mestre do flash: Thiago Cruz.
No blog dele, ele já postou ótimos exemplos, de utilizar a class externalinterface, então deixo por aqui também, o exemplo do código fonte que ele fez para mim.
O javascript fica assim:
function onFlashReady() {
sendToAS("another test message");
}
function callJS(value) {
onFlashReady();
return "Hi Flash.";
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToAS(value) {
thisMovie("externalclass").callAS(value);
}
e o action script:
import flash.external.*;
play();
System.security.allowDomain("*");
ExternalInterface.addCallback("callAS", this, func);
ExternalInterface.call("callJS", 1);
function func(n:Number) {
gotoAndStop(n);
}
Vlw pela ajuda Thiago!!
Link deste post
Tags: action script, externalinterface, flash, swf
14fev2012
Registrando um widget do WordPress, para listar ultimos posts, com data.
O widget padrão, não tem essa opção, então criei um novo bem simples.
function ultimos_posts_display() {
// print some HTML for the widget to display here
echo '<div class="sidebar-box ultimos-posts"><strong>Últimos posts</strong>
<ul>';
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li><span>'.preg_replace( '/([0-9]{4})-([0-9]{2})-([0-9]{2})([\s0-9:]+)?/', '$3-$2-$1', $recent['post_date'] ).'</span>
<a href="' . get_permalink($recent["ID"]) . '" title="Look '.$recent["post_title"].'" >' . $recent["post_title"].'</a></li> ';
}
echo '</ul></div>';
}
wp_register_sidebar_widget(
'ultimos_posts_1', // your unique widget id
'Ultimos posts', // widget name
'ultimos_posts_display', // callback function
array( // options
'description' => 'Widget dos ultimos posts com data'
)
);
Link deste post
2fev2012
Boas!!
apenas para deixar registrado mesmo..
Album de fotos, baseado em um escode/mostra, com a propriedade display.
Fiz em javascript puro, em poucos minutos. Foi mais dificil achar as imagens, e mais trabalhoso redimensionar elas, do que fazer o código js.. hehe
Enfim, online:
script usado:
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function hide_all(){
var els = id('content').getElementsByTagName('ul');
for( var i=0; i<els.length; i++ )
{
els[i].style.display = 'none';
}
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
var evt = window.event || e
if (evt.preventDefault) //supports preventDefault?
evt.preventDefault()
else //IE browser
return false
}
function palco( src ){
id('palco').innerHTML = '<img src="'+src+'" alt="" />';
}
window.onload = function(){
hide_all();
var as = id('lista').getElementsByTagName('a');
for( var i=0; i<as.length; i++ )
{
as[i].onclick = function( e ){
hide_all();
var id_el = this.href.split('#')
id( id_el[1] ).style.display = 'block';
return disablelink( e );
}
}
var as = id('content').getElementsByTagName('a');
for( var i=0; i<as.length; i++ )
{
as[i].onclick = function( e ){
palco( this.href )
return disablelink( e );
}
}
}
</script>
Link deste post
Tags: album
1fev2012
<script type="text/javascript">
var _write = document.write;
document.write('1');//vai funcionar normal
document.write = function(){
//não faz nada
}
document.write('2');//não vai funcionar
document.write('2');//não vai funcionar
document.write('2');//não vai funcionar
document.write('2');//não vai funcionar
document.write('2');//não vai funcionar
document.write = _write;
document.write('3');//voltou a funcionar
</script>
Link deste post
26jan2012
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.
Fiz vários tipos de carouseis, porém por serem diferentes um dos outros, e alguns possuirem algumas peculiaridades, configurações extras, estilizações fora dos padrões, acabei fazendo os meus próprios códigos, e não usando nenhum plugin pronto.
Nesse post, vou deixar o start de um plugin de jQuery, que rapidamente fiz aqui.
Muitas melhorias precisam ser feitas, como:
-> possibilitar scroll vertical
-> não limitar a marcação a ser usada
-> permitir uso do easing..
e por ai vai.. nisso, eu acabaria recriando o cycle(ou chegando perto do efeito Hz dele). Não é essa a intenção.
Até agora é para ser simples mesmo, e muito mais simples de usar também.
Como todos os meus efeitos, esse não foge do meu padrão: resolvi as partes mais complicadas no css.
O js é simples. O instanciamento ainda mais.
É isso, sem mais, segue o código, e logo abaixo a demonstração.
A grande ‘sacada’, é deixar o plugin se virar com a animação, (setas prev e next), e termos uma chamada simples e limpa assim:
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
=) Vejam como fiz:
<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">
/* carousel */
jQuery.fn.carousel = function( settings ){
var $this = jQuery( this );
var defaults = {
prev: '.nav-left',
next: '.nav-right',
pos: 0,
speed: 1000
}
settings = jQuery.extend(defaults, settings);
var lis = $this.find('li');
var width_li = lis.eq(0).width()+ parseInt( lis.eq(0).css('marginLeft') )+parseInt( lis.eq(0).css('marginRight') );
var ul = $this.find('ul');
var prev = $this.find( settings.prev );
var next = $this.find( settings.next );
ul.css({width: (width_li*lis.length)+'px'});
/* .nav-left */
prev.click(function(){
if( settings.pos>0 ){
settings.pos--;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* .nav-right */
next.click(function(){
if( lis.length-1>settings.pos ){
settings.pos++;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* funcoes privadas */
_move = function( ul, pos, width_li, speed ){
var new_left = -1*pos*width_li;
ul.animate({left:new_left+'px'},settings.speed);
}
return $this;
};
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#slide { width: 460px; height: 300px; }
#slide li { width: 460px; height: 300px; }
#slide2 { width: 140px; height: 105px; padding: 10px 25px; background: #000; }
#slide2 li { width: 140px; height: 105px; }
hr { margin: 50px; }
/* css do plugin */
.carousel { position: relative; }
.overflow { overflow: hidden; height: 100%; position: relative; }
.carousel ul { position: absolute; top: 0; left: 0; }
.carousel li { float: left; }
.nav { position: absolute; top: 50%; z-index: 3;
background: url('images/nav.png') no-repeat;
width: 36px; height: 36px; margin-top: -18px;
cursor: pointer;
}
.nav-left { left: 10px; }
.nav-right { right: 10px; background-position: right top; }
.nav-left:hover { background-position: left -36px; }
.nav-right:hover { background-position: right -36px; }
/* css do plugin */
</style>
</head>
<body>
<div id="slide" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
<hr />
<div id="slide2" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/mini1.jpg" alt="" /></li>
<li><img src="images/mini2.jpg" alt="" /></li>
<li><img src="images/mini3.jpg" alt="" /></li>
<li><img src="images/mini4.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
</body>
</html>
Link deste post
25jan2012
Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; }
</style>
<script type="text/javascript">
function sizeIframe( w, h )
{
document.getElementById('yt').width = w;
document.getElementById('yt').height = h;
}
window.onload = function(){
sizeIframe( document.body.offsetWidth, document.body.offsetHeight-30 );
}
</script>
</head>
<body>
<iframe width="420" height="315" src="http://www.youtube.com/embed/tvaPMNq4Ey0" frameborder="0" allowfullscreen id="yt"></iframe>
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 600, 480 )" />
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 420, 315 )" />
<input type="button" name="mudar" value="300x240" onclick="sizeIframe( 300, 240 )" />
</body>
</html>
É isso. Me diga se vc usar.
Link deste post
Tags: embed
25jan2012
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>
Link deste post
Tags: esconde mostra
24jan2012
Bom, eu já tinha lido O Design do Dia a Dia, e quase sem querer acabei tendo em mãos pedindo uma indicação sobre oque ler, o “próximo” livro do Donald A. Norman.
Muito bom esse livro também. Podemos lê-lo como um complemento do outro.
Uma decisão tem que dar a sensacão de que é boa.
O pensamento vai sendo construido ao longo do livro.
Emoções norteiam as nossas escolhas. Primeiro inconscientemente, e muito depois de forma lógica, decidimos oque queremos, e oque vamos fazer.
Olhar o Design das coisas sob essa perspectiva, te faz refletir, como que algo além de ser bonito, usável, tb pode ser agradável.
Ou então como temos coisas que nos agradam, nos fazem sentir bem, mas não as usamos.
Realmente um mundo se abre, qndo vc nota que por mais que algo seja prático, não usamos se for feio, se não nos fizer sentir bem. E se algo for realmente bonito, e nos transmitir boas sensações, usaremos, apesar dos defeitos.
Norman nos apresenta nesse livro, 3 tipos de Design: Viceral, Comportamental e Reflexivo.
Vale muito a pena. Eu indico.
Link deste post
Tags: donald norman
23jan2012
Talvez esteja faltando algo “simples”, situações “cotidianas”, ou sei lá oque.
Estou vendo muitas pessoas no fórum com a mesma dúvida: “usar o objeto Deferred do jQuery”, “pegar o retorno de uma requisição ajax”, e coisas relacionadas.
Eu sempre indico o ótimo tutorial do Maujor:
http://www.maujor.com/blog/2011/02/01/o-objeto-deferred-da-jquery-1-5, porém talvez por ser tão completo, e ter tantas informações, alguns iniciantes podem não estar “entendendo”.
Vou deixar alguns exemplos práticos(todos com o mesmo resultado), de algumas formas de usar o Deferred:
<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(){
/* retorna undefined */
jQuery('#ajax_form_undefined').submit(function(){
var form = jQuery( this );
var ret = envia_form_nao_funciona( form );
alert( ret );
return false;
});
/* enviando ajax_form com done */
jQuery('#ajax_form').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.done(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form2 com then */
jQuery('#ajax_form2').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.then(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form3 com success */
jQuery('#ajax_form3').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.success(function( dados ){
alert( dados );
});
return false;
});
});
function envia_form_nao_funciona( form )
{
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function( dados ){
return dados
}
});
}
function envia_form( form )
{
return jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
});
}
</script>
</head>
<body>
<h2>Exemplo do que "não funciona"(retorna undefined)</h2>
<form method="post" action="processa.php" id="ajax_form_undefined">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome1" /></label>
<label>Email: <input type="text" name="email" value="email1" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com done</h2>
<form method="post" action="processa.php" id="ajax_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome2" /></label>
<label>Email: <input type="text" name="email" value="email2" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com then</h2>
<form method="post" action="processa.php" id="ajax_form2">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome3" /></label>
<label>Email: <input type="text" name="email" value="email3" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com success</h2>
<form method="post" action="processa.php" id="ajax_form3">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome4" /></label>
<label>Email: <input type="text" name="email" value="email4" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
</body>
</html>
Convém lembrar que “precisamos” do deferred por causa do assincronismo das requisições, ou seja, o objeto ajax, envia para o servidor, o servidor processa, e o objeto ajax trás o retorno, sem refresh, porém também, sem que o restante do script aguarde esse retorno.
É essa diferença entre “sincrono” e “assincrono”. Note que enviando em modo sincrono async: false,, eu consigo “pegar o retorno” do ajax.
jQuery(document).ready(function(){
/* retorna undefined */
jQuery('#ajax_form_sincrono').submit(function(){
var form = jQuery( this );
var ret = envia_form_sincrono( form );
alert( ret );
return false;
});
});
function envia_form_sincrono( form )
{
var ret = '';
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
async: false,
success: function( dados ){
ret = dados;
}
});
return ret;
}
E ai ? qual dos dois usar ? sincrono ? ou assincrono com o deffered ?
Não sei, isso depende da sua aplicação, e é assunto para um próximo post talvez.
Usou ? comente.. este é o “meu pagamento” pelo que escrevo: o teu comentário.
Link deste post
Tags: deferred
