Mostrar/ocultar DIV

Olá! Muitas vezes, é necessário exibir certa informação apenas sob demanda do usuário, por exemplo, após o clique em um botão. Há diversas formas de fazê-lo. Aqui, apresento a forma mais simples e prática para executar o efeito, entendendo seu funcionamento.

Exemplo 1
Exemplo 2

New Dawn Fades
Joy Division

Change of speed, a change of style

A change of scene, with no regrets

A chance to watch, admire the distance

Still occupied, though you forget

Different colours, different shades

Over each mistakes were made, I took the blame

Directionless, so plain to see

A loaded gun won't set you free, so you say

We'll share a drink and step outside

An angry voice and one who cried

We'll give you everything and more

The strain's too much, can't take much more

Oh, I've walked on water, run through fire

Can't seem to feel it anymore

It was me, waiting for me

Hoping for something more

Me, see me in this time

Hoping for something else

Close

Candidate
Joy Division

Forced by the pressure, the territory's marked
No longer the pleasure, oh, I've since lost the heart
Corrupted from memory, no longer the power
It's creeping up slowly, that last fatal hour
Oh, I don't know what made me or what gave me the right
To mess with your values and change wrong to right

Please keep your distance, the trail leads to here
There's blood on your fingers brought on by fear
I campaigned for nothing, I worked hard for this
I tried to get to you, you treat me like this
It's just second nature, it's what we've been shown
We're living by your rules, that's all that we know

I tried to get to you
I tried to get to you
I tried to get to you
Oh, how I tried to get to you
Close

Veja como funciona:

Código (javascript):

function mostrar(id){
    document.getElementById(id).style.display = 'block';
}
function fechar(id){
    if(document.getElementById(id).style.display == 'block'){ 
        document.getElementById(id).style.display = 'none';
    }else{
        document.getElementById(id).style.display = 'block';
    }
}

Código do botão:

<span onclick="mostrar(id_do_elemento_a_ser_mostrado)">Mostrar/Ocultar</span>

Link Duplo - Abrir duas páginas com apenas um link

Algumas vezes, pode ser que seja necessário que apenas um link redirecione para duas páginas diferentes, por exemplo, quando um link deve abrir a página desejada e, ao mesmo tempo, abrir algum anúncio ou, ainda, quando o link principal é a página desejada e um texto de apoio é aberto.

Veja o exemplo abaixo:

Exemplo =) (nenhum arquivo será baixado)

Entenda o processo

Código utilizado: 

<a href="link_da_nova_pagina.html" target="_blank" onclick="location.href='link_da_mesma_página.html'">Texto do link</a>

Qualquer dúvida, basta comentar no vídeo do Youtube em: https://youtu.be/TW4kpa-0dYk.

Criando um Relógio Analógico com jQuery e PHP

Saudações! Ainda pretendo gravar um vídeo para este post, então por enquanto, vou deixar só na escrita mesmo.
Vamos ver, hoje, como criar um relógio analógico usando PHP para pegar a hora certa do servidor e jQuery para fazer a rotação do relógio.
Exemplo

Como verificar se jQuery está corretamente inserido

Saudações!!! Nesse rápido tutorial, nós vamos fazer uma verificação para saber se o jQuery está ok.
Como o jQuery ainda não foi inserido, é claro que vamos usar javascript puro. É um código bem simples:

if(typeof jQuery == "undefined"){
//Nesse caso, o método jQuery (ou $) não existe. Sendo assim, vamos inseri-lo:
document.write("<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'><"+"/script>");
//Note como o fechamento do script ficou <"+"/script> Isso é de extrema importância, já que se fosse colocado diretamente </script>, ele corresponderia ao fechamento do script atual, o que causaria erro, já que document.write(); não teria sido concluído.
}

Com esse pequeno código, você pode, por exemplo, prevenir contra servidores offline.
Veja:

<script src="http://localhost/jquery.min.js"></script>
<script>
if(typeof jQuery == "undefined"){
document.write("<script src='http://code.jquery.com/jquery.min.js'><"+"/script>");
}
</script>
<script>
if(typeof jQuery == "undefined"){

document.write("<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'><"+"/script>");
alert("local CDN error\njQuery OK: \n"+document.getElementById('script_jquery').src);
}
</script>
<script>
if(typeof jQuery == "undefined"){
alert("Google CDN jQuery error");
}
</script>

É isso aí. Até próximo tutorial do blog...

<Héliton Martyns>

Como colocar um Menu DropDown no BLOGGER

Saudações! Há um tempo atrás, gravei um vídeo com o mesmo propósito. O problema, é que o site que usei no tutorial, CSSMenuMaker, sofreu algumas atualizações, e, agora, teremos um pouco mais de trabalho.

Ainda não tive tempo de concluir as edições. O vídeo deve sair ainda esta semana.

► Siga em frente

Cores Aleatórias [CSS + PHP]

Saudações! Hoje, trago um tutorial sem vídeo por enquanto, já que estou sem tempo pra renderizar um que está atrasado sobre colocar um Menu DropDown no Blogger. De qualquer forma, hoje vamos ver como fazer um sistema de cores aleatórias.

Itens necessários:

1. Servidor PHP: Recomendo o WampServer, que pode ser instalado rapido e facilmente em Windows, Linux e MAC OS.
Nota: Caso utilize Windows XP ou anterior, use o WampServer 2.4 ou anterior.
(Links no fim da postagem)
--
Além disso, usaremos rgb() ao invés de #hexadecimais.

Recomendo o uso do Aptana Studio 3 (link no final), pois ele ajuda bastante e é gratuito.

Aprenda como utilizar AJAX, de forma simples.

Descrição: Executar uma requisição HTTP assíncrona por jQuery (AJAX).
O que é AJAX?

      O AJAX, sigla para Asynchronous Javascript and XML (Javascript Assíncrono e XML), é uma tecnologia que usa, metodologicamente, técnicas como javascript e XML para solicitar, de forma assíncrona, informações e tornar a página mais interativa. Com AJAX, é utilizado o método XMLHttpRequest.
Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações. Apesar do nome, a utilização de XML não é obrigatória (JSON é frequentemente utilizado) e as solicitações também não necessitam ser assíncronas.
      O AJAX, geralmente é utilizado para buscar algo no servidor, por exemplo, um arquivo PHP faz determinada ação no banco de dados e retorna algo. O AJAX pode executar este script, e receber o que ele retornar sem atualizar a página atual nem uma vez.

      Neste tutorial, você aprenderá a usar AJAX com jQuery, usando a função jQuery.ajax(); com as propriedades:
url, type, data, beforeSend, success, error.