Posts na categoria ‘Javascript’
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
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
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
19jan2012
Muito bom o plugin jQuery de lightbox do brasileiro Leandro Vieira:
leandrovieira.com/projects/jquery/lightbox/
é verdade que o projeto está ‘sem atualizações’, mas também nem precisa.
O plugin cumpre o papel dele, funciona perfeitamente e para um simples modal de imagens funciona muito bem, obrigado.
Precisei ontem, de uma galeria, onde várias classes seriam as disparadoras. Este html:
<ul class="fotos">
<li class="lightbox"><a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Primeira Diretoria Eleita da ABTF">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a><p>Primeira Diretoria Eleita da ABTF</p>
<div style="display: none;">
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 4">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox"><a href="images/banner-presidentes-da-abtf.jpg" title="Presidentes da ABTF">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a><p>Presidentes da ABTF</p>
<div style="display: none;">
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox last"><a href="images/banner-diretoria-atual.jpg" title="Diretoria Atual">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a><p>Diretoria Atual</p>
<div style="display: none;">
<a href="images/banner-diretoria-atual.jpg" title="Imagem 2">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a>
</div><!-- /none -->
</li>
</ul><!-- /fotos -->
Não achei nenhuma configuração de galeria no plugin.
Então ao disparar da maneira básica:
jQuery(document).ready(function(){
jQuery('.lightbox a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
O que o plugin fez, foi juntar todas as imagens numa única galeria de 9 imagens no total.
Mas na verdade, eu queria que cada LI, fosse um album separado dos demais.
Sendo a primeira galeria, com 4 imagens, a segunda com 3, e a ultima com 2 imagens.
Bom, eu poderia muito bem trocar de plugin, usar um fancybox, ou sei lá.. porém apenas pelo desafio, resolvi de uma maneira bem simples essa situação de: criar galerias diferentes para uma mesma classe html, com o plugin jQuery.lightBox:
jQuery(document).ready(function(){
jQuery('.lightbox').each(function(){
$( this ).find('a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
});
Dessa forma, o plugin vai rodar um grupo(cada li), um de cada vez, e vai separou como eu queria.
é isso. =)
Link deste post
Tags: lightbox
29dez2011
Dúvida que vi no fórum.
Pegar o valor da tag title de um iframe, e colocar ele em um titulo do lado de fora, do documento pai.
Não é ‘tão simples’ assim, e notei um probleminha: ‘o iframe precisa ser carregado antes de tentarmos pegar o conteúdo dele’.
Bom, resolvi dessa forma:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu a').click(function( e ){
jQuery('#content').load(function(){
var titulo = jQuery('#content').contents().find('title').text();
jQuery('#titulo').text( titulo );
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="home.html" target="content">Home</a></li>
<li><a href="cadastro.html" target="content">Cadastro</a></li>
<li><a href="contato.html" target="content">Contato</a></li>
</ul><!-- /menu -->
<h1 id="titulo">Home</h1>
<iframe name="content" id="content" src="home.html" width="99.9%" frameborder="0" scrolling="no" ></iframe>
</body>
</html>
Por esse motivo, depois do clique, eu aguardo o evento ‘onload’ do iframe:
jQuery('#content').load(function(){
Sse vc não quiser incorporar a lib jQuery, e também para provar que jQuery é apenas javascript, segue a mesma funcionalidade, usando apenas js puro:
function id( el )
{
return document.getElementById( el );
}
window.onload = function()
{
id('content').onload = function()
{
var titulo = this.contentWindow.document.getElementsByTagName('title')[0].innerHTML;
id('titulo').innerHTML = titulo;
};
}
é isso =)
Se for útil, comente e compartilhe. Esse é o único ‘pagamento’ que peço pelos códigos(conhecimento) que disponibilizo.
Link deste post
29dez2011
Eu já postei aqui no meu blog, como carregar conteudo com ajax em div, daí, aprimorei aquele código, e mostrei como carregar conteudo com ajax, colocando também um gif de loading.. e também como fazer tudo isso de cima, ainda trocando a URL, e usando um plugin na página interna.
Hoje é dia de carregar várias divs ‘separadas’, várias áreas diferentes com ajax.
Já vi no fórum um cara(com dúvida) resolvendo isso, de uma forma ‘natural’ do ponto de vista de pensamento humano, mas terrível para performance e manutenção do site.
O código que ele usou era mais ou menos assim:
jQuery(document).ready(function(){
var sidebar = jQuery('#sidebar');
var content = jQuery('#content');
var other = jQuery('#other');
jQuery('#menu a').click(function( e ){
e.preventDefault();
if( jQuery( this ).attr('href')=='home.html' )
{
sidebar.load('home_sidebar.html');
content.load('home_content.html');
other.load('home_other.html');
}
else if( jQuery( this ).attr('href')=='cadastro.html' )
{
sidebar.load('cadastro_sidebar.html');
content.load('cadastro_content.html');
other.load('cadastro_other.html');
}
});
});
Ou seja, a cada clique em um link do menu, ele fazia 3 requests. Um para cada ‘área’ do site.
Tinha que manter 3 arquivos distintos para cada link, e esse jogo de if/else para saber quais arquivos ele deve invocar.
Isso deve ter um ‘mau cheiro’.
A cada clique fazer 3 requisições, e ter que manter 3 arquivos separados para cada área.. além de que o site ‘não vai funcionar corretamente’, se o suporte a js estiver desabilitado… muitos motivos para evidenciar que algo está errado.
Mas então, o que podemos fazer?
A minha sugestão, é aproveitar o ótimo parser de HTML da lib jQuery, fazer um único request, e então direcionar cada conteúdo para o local específico.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var sidebar = jQuery('#sidebar');
var content = jQuery('#content');
var other = jQuery('#other');
request( 'home.html' );
function m_load( data )
{
var text = jQuery( '<div>'+data+'</div>' );//forçando o parser
sidebar.html( text.find('#sidebar').html() );
content.html( text.find('#content').html() );
other.html( text.find('#other').html() );
jQuery(document).attr( 'title', text.find('title').html() );
}
function request( file )
{
jQuery.ajax({
url: file,
success: function( data )
{
m_load( data );
}
});
}
jQuery('#menu a').click(function( e ){
e.preventDefault();
request( jQuery( this ).attr('href') );
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="cadastro.html">Cadastro</a></li>
<li><a href="contato.html">Contato</a></li>
</ul><!-- /menu -->
<div id="sidebar">
</div><!-- /sidebar -->
<div id="content">
</div><!-- /content -->
<div id="other">
</div><!-- /other -->
</body>
</html>
Note que além de fazer o parser do retorno:
var text = jQuery( '<div>'+data+'</div>' );//forçando o parser
sidebar.html( text.find('#sidebar').html() );
content.html( text.find('#content').html() );
other.html( text.find('#other').html() );
eu também faço a troca do title do documento:
jQuery(document).attr( 'title', text.find('title').html() );
Se vc tiver o firebug instalado, confira na aba Net|Rede -> xhr que faço apenas uma requisição.
Link deste post
7dez2011
Boas !
Utilizando hoje o evento window.onresize.
Deixei 800px de largura como sendo a nossa largura inicial. Apartir dela, vou aumentar a fonte do documento, conforme a janela adquira mais largura, e caso seja menor que 800px; volto ao meu inicial…
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('result').innerHTML = document.body.offsetWidth;
}
window.onresize = function(){
document.getElementById('result').innerHTML = document.body.offsetWidth;
var bodyWidth = document.body.offsetWidth;
if( bodyWidth>800 )
fs = ( bodyWidth-800 )/10;
else
fs = 0;
document.getElementsByTagName('h1')[0].style.fontSize = (fs+20)+'px';
document.body.style.fontSize = (fs+12)+'px';
}
</script>
<style type="text/css">
body { font-size: 12px; }
h1 { font-size: 20px; }
</style>
</head>
<body>
<h1>Algum texto aqui</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a leo dolor. Etiam fermentum mi metus,
vel dignissim dui. Sed non adipiscing risus. Suspendisse sed massa ac ipsum consequat ornare. Donec pretium
urna at ipsum adipiscing ut sagittis ligula malesuada. Mauris nec quam fringilla massa hendrerit consequat.
Aenean congue porta consectetur. In pellentesque auctor elementum. Curabitur eleifend, ante eget fringilla
tempus, metus sem viverra enim, eu ullamcorper urna neque non ante. In sagittis malesuada faucibus. Nam nec
malesuada nulla. Suspendisse semper suscipit lacinia. Etiam commodo tellus nec eros auctor ac malesuada arcu
rutrum. Quisque tortor sapien, volutpat at consequat sed, dapibus tincidunt libero. Quisque malesuada est at
erat suscipit sit amet suscipit dui blandit.</p>
<p>Quisque in nulla hendrerit arcu facilisis hendrerit vitae sit amet massa. Suspendisse fermentum ligula
congue sem fringilla sit amet pulvinar sem iaculis. Donec turpis orci, tempor sit amet sodales eu, cursus a
nunc. Nulla sagittis velit id lorem dignissim porta. In congue ipsum ut ligula elementum suscipit nec sed ante.
Cras felis eros, faucibus quis malesuada non, aliquet sed risus. Nullam pellentesque dui ligula. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Sed neque metus, posuere porta luctus eget, molestie non lectus. </p>
<div id="result"></div>
</body>
</html>
Link deste post
Tags: fontsize
