Posts na categoria ‘js’
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
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
22nov2011
Dúvida rápida no fórum..
Será que é possível saber, se um documento foi aberto diretamente ? ou se ele foi aberto ‘como popup’ ?
b.html
<script type="text/javascript">
alert( window.opener );
</script>
Qndo acessarmos diretamente esse arquivo, o alert irá mostrar: null (digitando na url, ou copiando e colando daqui)
http://wbruno.com.br/scripts/b.html
e agora:
a.html
<script type="text/javascript">
window.open( 'b.html', '', 'width=300, height=200;')
</script>
ao acessarmos o arquivo a.html, o alert do nosso b.html, que foi aberto como popup, irá mostrar: [Object Window]
Link deste post
Tags: window.open
19nov2011
boas pessoal!
Eu já tinha colocado aqui, um suggest jQuery com ajax. Pensando como eu poderia deixar o usuário se movimentar pela lista de suggest, usando as setas do teclado, me dei conta que era desnecessário, tentar ficar trocando o .focus() dos elementos.
Na verdade, eu só preciso ‘fingir’ isso. Mostrar no input, o .text(), do item do suggest, e mostrar com um background em qual está.
Foi oq eu fiz. Bem simples.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var active = -1;
jQuery("input[name='autocomplete']").keypress(function( event ){
var suggest_a = jQuery('#suggest a');
var qnts_a = suggest_a.length;
if( 40==event.keyCode )//seta baixo
active = active>=(qnts_a-1) ? 0 : active+1;
else if( 38==event.keyCode )//seta cima
active = ( active<=0 ) ? qnts_a-1 : active-1;
var a = suggest_a.removeClass('active').eq( active ).addClass('active');
jQuery( this ).val( a.text() );
});
});
</script>
<style type="text/css">
label { position: relative; }
#suggest {
position: absolute;
top: 20px;
left: 0;
}
.active {
background: #ccc;
}
</style>
</head>
<body>
<label>
<input type="text" name="autocomplete" />
<ul id="suggest">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul><!-- /suggest -->
</label>
</body>
</html>
