Slider em JQuery

Desafio da vez: Slider utilizando JQuery.

Achei os dois demos abaixo:
Demo 1
Demo 2

Lado ruim: os efeitos são toscos e muito limitados.
Lado bom: ri horrores no escritório com os efeitos. Lembra aqueles efeitos do Power Point.

Lembrando, deixei uma marcação no JS para vocês testarem os efeitos e rirem um pouco.

<html>
	<head>
		<title></title>
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://www.tidbits.com.br/download/_scripts/cycle.js"></script>
		
		<style>
			dv.pics { display: none; }
			div.pics img {				
				height:271px; //Muda para o tamanho da imagem que estiver testando 				
				width: 211px; //Muda para o tamanho da imagem que estiver testando 
				overflow:hidden; //Limitando a div;
			}
		</style>
	</head>
	<body>
		<div class="pics" id="galeria1">
			<img src="01.jpg" alt="Teste de JQuery" />
			<img src="02.jpg" alt="Teste de JQuery" />
			<img src="03.jpg" alt="Teste de JQuery" />
			<img src="04.jpg" alt="Teste de JQuery" />
			<img src="05.jpg" alt="Teste de JQuery" />
		</div>
	</body>
	<script type="text/javascript">
			$(document).ready(function() {
				$('#galeria1').cycle({
					fx:'scrollLeft',
					speed:    1500, 
					timeout:  2000,
					height: 'auto',
					//Efeito
					fx: 'toss'
				});
			});
		</script>
</html>

Efeitos:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

Quando eu completei o script e me deparei com o problema de não ter o fadein, fiquei tão decepcionada. Então, eu fui atrás de um outro script e eu achei!
A Fonte e o Demo
Esse é um script de JQuery e pelo demo você pode alterar o código para esse abaixo:

jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
// Movimento circular
wrap: ‘circular’,
// Demilimita o número de imagens (foi o caso).
scroll: 1,
// Se o movimento é lento ou não.
animation: ‘slow’
});
});

Vantagem: os efeitos são bem mais suaves.
Desvantagens: achei um pouco difícil colocar o código para rodar. Não sei se o fato de ter estudado há algumas horas eu já estar um pouco cansado.

Anúncios

Paginação

Depois de muito tempo sem conseguir postar, hoje eu estou muito feliz. Quando eu trabalhava na agência eu tive o meu primeiro contato com JQuery. Assim, eu já tinha ouvido falar sobre (muito bem por sinal), mas nunca tinha chegado perto.
Como o meu primeiro contato foi na base do “Ou vai ou racha” tive um pouco de raiva por não conhecer.

Há poucos meses eu comecei a trabalhar em uma empresa muito legal e nesse lugar eu tive a oportunidade de conhecer melhor o JQuery. Só digo uma coisa: a cada dia que passa, eu aprendo mais, eu me apaixono mais e mais.

Hoje eu digo que foi uma vitória. Tinha o seguinte desafio em minhas mãos: fazer a paginação utilizando JQuery e eu consegui !!!! *\o/*

Vamos começar com o código.
O código PHP (utilizei um texto achado na internet):

	<?php
		$texto = array(
			0 => '1 - Transforma diretriz constante do EIA do empreendimento "Aprofundamento da Calha do Rio Tietê-Trecho I"em exigência.',
			1 => '2 - Aprova nova minuta de decreto para regulamentar as APAs de Jundiaí e Cabreúva.',
			2 => '3 - Avoca para análise da Câmara Técnica de Empreendimentos Imobiliários o Plano de Trabalho para elaboração do EIA/RIMA do "Parque Temático Great Adventure".',
			3 => '4 - Aprova minutas de decreto para criação das APAs de Itupararanga, Sertão da Bocaina e Sapucaí-Mirim e do Colegiado Gestor que integra esta última à APA de Campos do Jordão.',
			4 => '5 - Funde Comissões Especiais para coordenar a implantação de APAs.',
			5 => '6 - Atribui à Comissão Especial de Políticas Florestais a tarefa de acompanhar o processo de implementação do Programa de Preservação da Mata Atlântica-PPMA.',
			6 => '7 - Acolhe o Parecer Técnico CPRN/DAIA 137/98 sobre a "Usina Hidrelétrica de Porto Primavera", acrescentando-lhe exigências para a LO.',
			7 => '8 - Designa conselheiros para a Comissão Especial Processante no exercício 98/99.',
			8 => '9 - Aprova o empreendimento Usina Hidrelétrica de Piraju, de responsabilidade da Cia. Brasileira de Alumínio-CBA.',
			9 => '10 - Recomenda o prosseguimento de ações para a implantação da segunda etapa do Sistema Integrado de Esgotos da RMSP/Projeto Tietê.',
			10 => '11 - Designa representantes para a Comissão Mista Permanente de Articulação e Integração do Consema com o CRH e com o Conesan.',
			11 => '12 - Modifica a composição da Comissão Especial Processante para o exercício de 98/99.',
			12 => '13 - Aprova diretrizes do Plano Diretor de Uso/Disposição de Lodo das ETEs da RMSP apresentado pela Sabesp.',
			13 => '14 - Aprova o empreendimento "Aterro Industrial para Resíduos Perigosos (Classe I)", de responsabilidade da SASA/Sistemas Ambientais e Comércio Ltda.',
			14 => '15 - Aprova o empreendimento "SPAT-Sistema Produtor Alto Tietê-Barragens de Biritiba-Mirim, Paraitinga e Complementação da Barragem de Taiaçupeba", de responsabilidade do DAEE/Departamento de Água e Energia Elétrica.',
			15 => '16 - Aprova o documento "Diretrizes para uma Política Estadual de Ecoturismo".',
			16 => '17 - Aprova minuta de decreto que regulamenta a Lei Estadual 7.438/91 e complementa o Decreto Estadual 20.960/83 referentes às APAs de Piracicaba-Juqueri-Mirim e Corumbataí, Botucatu e Tejupá.',
			17 => '18 - Aprova o empreendimento "Aterro Sanitário e Industrial – Aterro Ventura", de responsabilidade da Tecilix-Serviços Urbanos S/C Ltda.',
			18 => '19 - Acrescenta parágrafos sobre pedido de vista de documentos ao Artigo 8º do Regimento Interno do Conselho.',
			19 => '20 - Aprova o "Plano de Recuperação dos Mananciais da RMSP" e homologa Deliberação CBH-AT, nº 9, de 29/09/98.',
			20 => '21 - Aprova o empreendimento "Central de Tratamento de Resíduos Sólidos Urbanos Lara", de responsabilidade de Lara-Comércio e Prestação de Serviços Ltda.',
			21 => '22 - Atribui à Comissão Especial de AIA nova tarefa.',
			22 => '23 - Aprova Anteprojeto de Lei que Institui Política de Resíduos Sólidos do Estado de São Paulo.',
			23 => '24 - Aprova o empreendimento "Extração de Areia para Uso na Construção Civil", de responsabilidade de José Aleixo Machado Iperó Ltda.',
			24 => '25 - Cria Comissão Especial para reelaborar Minuta de Projeto de Lei sobre o Acesso aos Recursos Genéticos do Estado de São Paulo.',
			25 => '26 - Estabelece horário e duração das reuniões plenárias.',
			26 => '27 - Avoca a participação do Consema na elaboração do Termo de Referência do EIA/RIMA do empreendimento "Fazenda Baronesa - Clube de Golfe e Loteamento Residencial", de responsabilidade de Alphaville Urbanismo S.A.',
			27 => '28 - Aprova "Proposta de Zoneamento Ambiental para o Trecho Jacareí-Pindamonhangaba" e a "Proposta de Alteração da Resolução SMA 26/93".',
			28 => '29 - Altera a redação do Parágrafo 4º do Artigo 19 do Anteprojeto que Institui a Política Estadual dos Resíduos Sólidos.',
			29 => '30 - Aprova o empreendimento "Centro Tecnológico de Resíduos - CTR", de responsabilidade da Cia. Auxiliar de Viação e Obras - CAVO.'
		);

		#Imprime os dados setados acima
		foreach($texto as $t){
	?>
			<div class="texto"><?php echo $t;?></div>
	<?php
		}
	?>

Logo depois de imprimir os dados, eu coloco a paginação. Lembrando que será dinâmico (eu não sei quantos dados tem):

	<div id="paginacao"></div>

Agora o “filé mignon” do código, o Jquery:
1 – Coloco o JQuery:

	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

2 – O JQuery:

	<script>
		$(function(){
			//URL
			var url = window.location.href;
			//Valor do GET
			var get = url.split("=");
			
			//Tamanho do texto
			var tam = $(".texto").length;
			
			//Escondendo o conteúdo
			for(var i = 0; i < $(".texto").length; i++){
				if( i < (parseInt(get[1])-1)*4 || i > parseInt(get[1])*4-1 ){
					$(".texto")[i].hidden = true;
				}
			}
			
			//Mostrando a paginação
			if(tam%4 == 0){
				var num_pag = tam/4;
			}else{
				var num_pag = (tam-(tam%4))/4+1;
			}
			
			var aux = "";
			for(var j = 1; j <= num_pag; j++){
				if(get[1] == j){
					aux = aux + "<li><a href='?pag="+j+"' style='color:red;'><strong>"+j+"</strong></a></li>";
				}else{
					aux = aux + "<li><a href='?pag="+j+"'>"+j+"</a></li>";
				}
			}
			
			$('#paginacao').html(aux);
		});
	</script>

Fiquei tão feliz com o que eu fiz. Uma vitória para a minha pessoa.

Centralizando (e facilitando) o JavaScript no seu WP

<?php
	function cliente_scripts() {		
		if(!is_admin()) {			
			wp_deregister_script('jquery');
			wp_register_script('jquery', get_bloginfo('template_url') . '/scripts/jquery-1.6.2.min.js' , false, '1.6.2', true);
			wp_enqueue_script('functions', get_bloginfo('template_url') . '/scripts/functions.js', array('jquery'), '1.0', true);
		}
		if(is_home()){
			wp_enqueue_script('functions_home', get_bloginfo('template_url') . '/scripts/functions_home.js', array('jquery'), '1.0', true);		
		}
	}
	# Adiciona a ação
	add_action('wp_print_scripts', 'cliente_scripts'); 
?>

Razão: O Admin do WordPress utiliza um JQuery diferente do indicado no código.
Vantagem: Você centraliza todo o JavaScript em um único lugar.
Detalhes:
1- Só funciona com mais de uma função de JavaScript;
2 – Coloque a function no functions.php.

Créditos ao Riccardo Benetti

Mostrando e escondendo conteúdo

Primeiro de tudo, incluindo o JQuery:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Depois o JavaScript:

<script>
	$(function(){
		//Esconde todas as tags <article>
		$('article').hide();
		$("article:first").show()
		
		//Mostra o primeiro elemento da tag <article>
		//$('article:first').show();
		
		//Quando clicar, vai aparecer o conteúdo das Aulas
		$("#AulasTitulo").click(function(){
			$("#AulasConteudo").show();
			$("#ConteudoConteudo").hide();
			$("#ReferenciaisConteudo").hide();
		});
		
		//Quando clicar, vai aparecer o conteúdo dos Conteúdo
		$("#ConteudoTitulo").click(function(){
			$("#AulasConteudo").hide();
			$("#ConteudoConteudo").show();
			$("#ReferenciaisConteudo").hide();
		});
		
		//Quando clicar, vai aparecer o conteúdo das Referências
		$("#ReferenciaisTitulo").click(function(){
			$("#AulasConteudo").hide();
			$("#ConteudoConteudo").hide();
			$("#ReferenciaisConteudo").show();
		});
	})
	
	
</script>

E o HTML

<strong>Desenvolvimento Web com HTML, CSS e JavaScript</strong>

<ul>
	<li><a id="AulasTitulo" href="#">Aulas</a></li>
	<li><a id="ConteudoTitulo" href="#">Conteudo</a></li>
	<li><a id="ReferenciaisTitulo" href="#">Referências</a></li>
</ul>

<section>
	<article id="AulasConteudo">
		<strong>Aulas</strong>
		<p>Um curso para quem quer dominar as melhores técnicas de desenvolvimento Web. Voltado ao programador de interfaces preocupado com a semântica perfeita, estilos CSS poderosos e JavaScripts corretos e funcionais. Um curso dedicado a criar interfaces Web com experiência rica do usuário, estruturação correta e otimizações.</p>
	</article>
	<article id="ConteudoConteudo">
		<strong>Conteudo</strong>
		<p>O conteúdo do curso aborda o domínio de HTML, incluindo alguns exemplos do novo HTML 5. Além, claro, de tirar o máximo proveito de CSS, também já conhecendo algumas das novas possíbilidades do CSS 3. Tudo com tableless, outras boas práticas e técnicas avançadas.</p>
	</article>
	<article id="ReferenciaisConteudo">
		<strong>Referencias</strong>
		<p>Também é necessário ao programador de interface/web master um bom conhecimento de programação JavaScript. Por isso, o curso aborda tópicos como linguagem JavaScript, manipulação dos elementos da página e enriquecimento da experiência do usuário com JQuery.</p>
	</article>
</section>

Relógio Binário (parte 2)

Há alguns meses atrás eu publiquei aqui o meu relógio binário. Diferente da primeira versão nessa eu adiciono:

  • Data na versão normal e binária;
  • Mais opções de cores nas caixas/boxes;
  • Mais opções de tamanho nas caixas/boxes;
  • Legenda nas caixas (quando vc passa o mousse sobre as caixas/boxes aparece o valor);

Clique no link abaixo para var o código+CSS. Antes que eu sofra retaliações ou castigos, eu não sei fazer FRONT !
Continue lendo “Relógio Binário (parte 2)”

Códigos – Relógio binário

Relógio binário funcionando!
Relógio binário funcionando!

O meu primeiro post vai ser um código de um relógio binário. Por que um relógio binário? Um belo dia eu vi um colega do trabalho com um de pulso. Queria saber como funciona e ter um também (mesmo que seja no computador, mesmo porque não existem modelos bunitinhos para mulheres).
Segue o código abaixo (comentado):

<html>
	<head>
		<title>Relogio binário</title>
		<script language="JavaScript">
		//Frescurinha, para evitar ficar digitando "document.getElementById"
		function $(variavel){
			return document.getElementById(variavel);
		}

		//Essa função que traz o relógio normal
		function moveRelogio(){
			momentoAtual = new Date();
			hora = momentoAtual.getHours();
			minuto = momentoAtual.getMinutes();
			segundo = momentoAtual.getSeconds();

			horaImprimivel = hora + " : " + minuto + " : " + segundo

			var clock = $('hourBox');
			clock.innerHTML = horaImprimivel;

			convert_dec_bin(hora,'hour');
			convert_dec_bin(minuto,'min');
			convert_dec_bin(segundo,'sec');

			//Função que carrega o relógio a cada 1 segundo. 1000 = 1 segundo.
			setTimeout("moveRelogio()",1000);
		}

		//Essa função traz o relógio binário
		function convert_dec_bin(time,type){
			var time_print = new Array();
			var print = "";

			switch(type){
				case "hour":
					var limite = 4;
					var time_show = $("hour_time");
					break;
				case "min":
					var limite = 5;
					var time_show = $("min_time");
					break;
				case "sec":
					var limite = 5;
					var time_show = $("sec_time");
					break;
			}

			//Converte o número decimal para binério. Para a hora tem um limite diferente dos minutos e segundos.
			for(var i = limite; i >= 0; i--){
				time_print[i] = time%2;

				if(time_print[i] == 1){
					time = time-1;
				}

				time = time/2;
			}

			//Converte o binário em imagem.
			for(var i = 0; i <= limite; i++){
				if(time_print[i] == 1){
					print += "<div style='background-color:#A020F0;height:15px;width:15px;float:left;margin:5px;'></div>";
				}else{
					if(time_print[i] == 0){
						print += "<div style='height:13px;width:13px;float:left;border:2px solid #A020F0;margin:5px;'></div>";
					}
				}
			}

			time_show.innerHTML = print;
			return time_print;
		}

		//Quando a página carregar, vai carregar junto o relógio
		window.onload = function(){
			moveRelogio()
		}
			</script>
	</head>

	<body>
		<div id="hourBox"></div><br/>
		Hora:
		<div id="hour_time"></div><br/><Br/>
		Minuto:
		<div id="min_time"></div><br/><br/>
		Segundo:
		<div id="sec_time"></div><br/><br/>
	</body>
</html>

Pronto! Agora eu tenho um relógio binário na cor que eu mais gosto: roxo.