Categoria Atual: JavaScript / Ajax / DHTML
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 …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
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
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
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(){ …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
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: …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
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
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
Olá amigos, vejam como é simples colocar uma máscara em jQuery no seu formulário: Adicionamos o jQuery na página, no meu caso a versão 1.3.2 E o arquivo “maskedinput” que tem a versão 1.1.2. Chamo o jQuery no document e jogamos a função como se fosse um onload… $(document).ready(function(){ $(function(){ $.mask.addPlaceholder("~","[+-]"); $("#telefone").mask("(99) 9999-9999"); $("#cep").mask("99999-999"); $("#data").mask("99/99/9999"); $("#cpf").mask("999.999.999-99"); $("#cnpj").mask("99.999.999/9999-99"); }); }); A função é ativada com o.mask.addPlaceholder que chama os procedimentos necessários. Por final chamamos a mascara (.mask) de acordo com a …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
Função em jQuery para Notícias. O efeito mostrar quatro notícias, para aparecer as outras, a última recebe um fadeOut() e a nova notícia em cima aparece com fadeIn(). Segue o Código: $(function(){ $('ul.spy').simpleSpy(); }); (function($){ $.fn.simpleSpy = function (limit, interval) { limit = limit || 4; interval = interval || 4000; return this.each(function () { var $list = $(this), items = [], currentItem = limit, total = 0, height = $list.find('> li:first').height(); $list.find('> li').each(function () { items.push('<li>' + $(this).html() + …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
Default.asp <html> <head> <title>Teste Combo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript" src="ajax.js"></script> </head> <body> Categoria: <select name="categoria" onchange="alimentarCombo(this.value);"> <option value="">[ Selecione ]</option> <% set rs = conn.execute("SELECT codigo, nome FROM categoria ORDER BY nome ASC") if (not rs.eof) then while (not rs.eof) response.write("<option value="""&rs("codigo")&""">"&rs("nome")&"</option>") rs.moveNext : wend end if set rs = nothing %> </select> <br> Sub-Categoria: <div id="resultado"></div> </body> </html> ajax.js function GetXMLHttp() { if (navigator.appName == "Microsoft Internet Explorer") { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
Script simples em JavaScript usando jQuery para fazer efeito de fade em títulos de notícias, veja o exemplo: #noticias {list-style: none;font: 12px Arial;font-weight: bold;}#noticias li {padding: 5px;} $(document).ready(function() {$(“#noticias”).newsTicker();parseSamples();}); Campanha incentiva registro civil Carga de petróleo está avaliada em US$ 100 milhões. Alongamento previne lesões na ‘corrida’ Obama disputa com Lula preferência no Rio Para esse efeito usei um arquivo chamado “mask_news.js”, nele contem todas as informações necessárias para o desenvolvimento do script. Abrindo esse arquivo você perceberá …
Continue Lendo
Agência OFF, desenvolvimento de soluções web para as Agências Digitais