May/106
Bloquei o IE6 em seu site de forma simples com JavaScript e HTML
Uma maneira simples de bloquear o Internet Explorer 6 para não acessar teu site é usando JavaScript!
Em todas as páginas adicione o seguinte código dentro da tag head:
<!--[if IE 6]> <script type="text/javascript">window.location.href = "atualize-navegador.html";</script> <![endif]-->
Adicionei uma página chamada atualize-navegador.html (clique para acessar) para deixar o usuário mais alerta e mostrar o porque ele foi impedido de acessar o site! Sempre deixe o usuário informado!
Segue abaixo o link para o download da página ou você pode colocar o link absoludo para não precisar fazer o download do arquivo!
Oct/090
jQuery Lightbox Clone
Imagem do Lightbox
Script que chama o pretty photo.
$(document).ready(function(){
$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});
Mais antes exite o arquivo que completa a janela: jquery.pretty-photo.js
O script completo fica assim:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>
<script type="text/javascript" src="js/pretty-photo/jquery.pretty-photo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});
</script>
Existe ainda o arquivo de configuração do css que é indispensável para a jenela.
Script demo para visualização: CLIQUE AQUI
Script completo: CLIQUE AQUI
Oct/091
z-index com jQuery Galeria funcional
Script:
$(document).ready(function(){
var z = 0;
var inAnimation = false;
$("#fotos img").each(function(){
z++;
$(this).css("z-index", z);
});
function swapFirstLast(isFirst){
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst){
processZindex = z; direction = "-"; newZindex = 1; inDeCrease = 1;
}
else {
processZindex = 1; direction = "-"; newZindex = z; inDeCrease = -1;
}
$("#fotos img").each(function(){
if($(this).css("z-index") == processZindex){
$(this).animate({"top" : direction + $(this).height() + "px"}, "slow", function(){
$(this).css("z-index", newZindex)
.animate({"top" : "0"}, "slow", function(){
inAnimation = false;
});
});
} else {
$(this).animate({"top" : "0"}, "slow", function(){
$(this).css("z-index", parseInt($(this).css("z-index")) + inDeCrease);
});
}
});
return false;
}
$("#proximo a").click(function(){
return swapFirstLast(true);
});
$("#anterior a").click(function(){
return swapFirstLast(false);
});
});
Script Completo CLIQUE AQUI
Oct/092
Carregando o jQuery das APIs AJAX do Google.
Para suas aplicações ficarem sempre atualizadas utilize as APIs AJAX do Google para isso! E como fazer da maneira mais fácil e ainda deixar o código limpo?
Vamos lá para a resposta.
Primeiro vamos para a definição do Google para isso!
A API AJAX de bibliotecas é uma rede de distribuição de conteúdo e arquitetura de carregamento das bibliotecas JavaScript de código aberto mais populares.
As APIs AJAX do Google trabalham com variadas bibliotecas como citado acima, segue uma delas:
Dentre outras...
Para a nossa aplicação vamos usar o jQuery.
Primeiro carregamos o jQuery e logo em seguida a função google.load() com o nome do jQuery e a versão.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
Logo depois você joga a função ou script de jQuery que deseja chamar
Para o jQuery temos as seguintes versões:
versões: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
Para cada versão você também pode usar a uncompressed fazendo assim no script
<script type="text/javascript">
google.load("jquery", "1.3.2", {uncompressed:true});
</script>
O google dar a seguinte informações para os usuários do jQuery:
Nas versões 1.2.5 e 1.2.4 não são hospedadas devido aos seus curtos e instáveis ciclos de vida.
Mais informações acesse o site do jQuery Google para isso:
Uma observação para isso bem interessante e fundamental:
Se os servidores do Google sair do ar, o pior acontece hehe!
Abraços a todos!
Oct/0912
Trocando o texto quando dar foco em campo
Script simples:
<script type="text/javascript">
function limpar(campo){
if (campo.value == campo.defaultValue){
campo.value = "";
}
}
function escrever(campo){
if (campo.value == ""){
campo.value = campo.defaultValue;
}
}
</script>
Como ficará no campo de texto:
<input type="text" name="nome_campo" id="nome_campo" value="Clique Aqui para o texto sair!" onfocus="limpar(this);" onblur="escrever(this);" />
Veja o Script rodando: CLIQUE AQUI
