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

Anúncios

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.