Aug/100
O que seria o DOM?
Muitos programadores fazem confusão de que o DOM (Document Object Model, em ptBR, Modelo de Objetos de Documentos) faz parte do JavaScript, não é assim "totalmente".
O DOM é uma especificação da W3C que não depende de plataforma ou de NENHUMA LINGUAGEM.
É usado para fazer alterações em documentos como HTML e XML
É uma API bem usual que temos... segue algum exemplo em JavaScript de onde o DOM está presente!
var teste = document.getElementById("id").innerHTML = "Texto ok";
Essa propriedade "document.getElementById()" e todas as suas "ramificações" são os elementos DOM!
Qualquer dúvida podem postar...
Abraços
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!
May/103
Usando o jQuery s3Slider para SlideShow de Notícias
Esse Artigo é baseado em exemplos retirados da internet, só que de modo mais simplificado.
Vejam o modo mais simples de utilizar o "s3Slider" para Notícias.
Importe o arquivo "s3Slider.js" e depois chame a função com o ID geral que engloba o banner, exemplo:
$(document).ready(function(){
$("#banner").s3Slider({
timeOut: 4000
});
});
Use as marcações < ul > / < li > para lista as Fotos, Títulos e Descrições. Segue exemplo:
<ul id="bannerContent"> <li class="bannerImage"> <img src="images/wide/1.jpg" /> <span class="left"> <strong>Title text 1</strong> <br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form... </span> </li> <li class="bannerImage"> <img src="images/wide/2.jpg" /> <span class="right"> <strong>Title text 2</strong> <br />There are many variations of passages of Lorem Ipsum available... </span> </li> </ul>
OBS: Crie as classes sempre começando com o nome da ID que engloba todo o banner, no meu caso usei o ID "banner", repare em "bannerContent" e "bannerImage", sempre iniciam com a palavra "banner", pois o código que está no arquivo "s3Slider.js" vai reconhecer sempre a palavra que foi padrão na função inicial no artigo. Veja na linha abaixo:
$("#banner").s3Slider({
Criei uma classe "left" e outra "right" para posicionar as divs onde contém os Títulos de cada Foto. Veja o arquivo "style.css"
Veja print Abaixo:
Veja o EXEMPLO:
Baixe o SCRIPT AQUI.
Nov/090
Criando Classes em JavaScript com o recurso prototype
A utilização de Classes é uma maneira pratica de ter um bom rendimento e organização em suas aplicações web.
A estrutura de Classes em JavaScript é a mesma que usamos em linguagens de programação como ASP ou PHP.
Nesse artigo você irá aprender a usar Classes com o uso da prototype. Vamos a definição do que é a prototype no JavaScript
prototype é um recurso do JavaScript (nesse caso não estou falando do Framework Prototype) que possibilita modificar uma Classe depois que ela foi criada.
Vamos criar uma classe chamada DadosPessoais e dentro dela colocar as variáveis "nome" e "telefone";
function DadosPessoais(){
var nome;
var telefone;
}
Para dar inicio ao processo das funções dentro da classe usamos a prototype assim:
DadosPessoais.prototype.campos = function(){
this.nome = "Menu Nome";
this.telefone = "(99) 9999-9999";
}
var obj = new DadosPessoais();
obj.campos();
No final, criamos o objeto e chamamos ele...
O Script completo fica assim:
<script language="javascript">
function DadosPessoais(){
var nome;
var telefone;
DadosPessoais.prototype.campos = function(){
this.nome = "Menu Nome";
this.telefone = "(99) 9999-9999";
}
}
var obj = new DadosPessoais();
obj.campos();
</script>
Nome: <script>document.write(obj.nome);</script>
<br>
Telefone: <script>document.write(obj.telefone);</script>
Creio que ficou um bom entendimento para todos de como usar Classes no JavaScript usando o recurso prototype.
Abraços a todos.
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
