Manipular DIVs e Executar Funções Fora do Iframe
Pessoal, mesmo usando Iframes em situações muito específicas (mas muito mesmo!), vou dar duas dicas bem úteis para manipular alguma div ou chamar alguma função da janela Pai, ou seja, que não esteja dentro do Iframe e sim na janela da qual o Iframe faz parte.
Atenção: Estas dicas pressupõe que o Jquery esteja sendo incorporado dentro do Iframe.
Dica 1 (Manipulando DIV na janela Pai): Vamos supor que você tenha uma div na janela Pai de id “div_do_frame” deva “sumir” (display: none) da página Pai, mas a chamada para esta mudança deva acontecer automaticamente dentro do Iframe, então…
<script>
$(document).ready(function(){
$('#div_do_frame', window.parent.document).css('display','none');
});
</script>
Dica 2 (Chamando Função na janela Pai): Vamos supor que você tenha uma função declarada na janela Pai chamada “AtualizaPagina()” a qual é responsável por atualizar a janela Pai, mas esta função deverá ser chamada dentro do Iframe, então…
<script>
$(document).ready(function(){
window.parent.AtualizaPagina();
});
</script>
Vale lembrar que nestas duas dicas os eventos ocorrem de forma automática, mas podem ser mudados dependendo de suas necessidades.
É isso… Abraço!
13/09 – Dia do Programador
Para quem não sabe 13/09 é o dia do programador. Parabéns a todos os programadores!
Para comemorar essa data o site vidadeprogramador.com.br preparou duas super tirinhas, e colocamos aqui pra descontrair o dia um pouquinho.
Abraços!
#DiaDoProgramador
Por que hoje é dia do programador?
Height 100% com CSS e/ou JQUERY
Pessoal, vou dar duas dicas simples envolvendo a propriedade height de qualquer div, uma dica de CSS e outra de JavaScript, sabemos que por default quando definimos simplesmente o style de uma div como “width: 100%; height: 100%” apenas o width obedece à definição, o height não.
Dica 1 (CSS): Para que o height passe a obedecer a condição passada, antes faça a seguinte definição em sua folha de estilos:
html, body {
height: 100%;
}
Mas claro, nem sempre isso resolve, quando por exemplo você que definir que uma div ocupe toda a tela (width e height em 100%), porém existe uma div do lado, abaixo ou acima que também precisa ser mostrada, e agora? É aí que entra o nosso querido Jquery, ele irá calcular, depois do HTML ter sido gerado o tamanho da tela do usuário e redefinir os tamanhos para as divs em questão. Esta é a segunda dica:
Dica 2 (JQUERY): Neste exemplo tenho uma div que precisa preencher a tela toda, mas que tem de ficar a 40px da margem superior, então no CSS defini o “margin-top: 40px;” e o script abaixo fará o resto depois da página ter sido carregada.
<script>
$(document).ready(function() {
var Height = $(document).height()-40;
$('#base_conteudo').css({'height':Height});
});
</script>
Bem, o Felipe Elia diz ter tido problemas com navegadores diferentes, eu não tive, mas se você também estiver tendo problemas depois destas dicas, a dica do Felipe Elia pode ser valiosa.
Abraços!
Fotos “Ilimitadas” em Formulários com Ajax, Jquery e PHP
Há algum tempo atrás estive procurando algum script Jquery para resolver o problema do envio de quantas fotos fossem necessárias em um formulário, mas não queria usar nenhuma solução em flash ou Iframe que simularia um Ajax, queria enviar as fotos juntamente com todos os outros dados do formulário.
Na época até cheguei a encontrar e fazer uso do Hiddenfile do Renato Ferraz, mas depois resolvi criar uma variação utilizando o velho Ajax e Jquery, e com esta técnica você poderá criar formulários dinâmicos mesmo depois que estes já estejam na tela do navegador.
1º Passo – Para começar, como sempre, incorpore o Jquery à sua página do formulário, se não sabe como leia aqui.
2º Passo – Dentro do escopo do formulário criar a seguinte div, como exemplo esta página (index.php):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fotos Ilimitadas com Ajax e Jquery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<form name="fotos" action="grava_fotos.php" method="post" enctype="multipart/form-data">
<div id="varias_fotos" class="varias_fotos">
<?php $num_fotos = 0; ?>
<a class="input_link" href="#" id="insere_foto">Clique para inserir a <?php echo ($num_clausulas+1); ?>ª foto</a>
<script>
$(document).ready(function(){
$('#insere_foto').click(function(evento){
evento.preventDefault();
$('#varias_fotos').load('addfoto.php',{num_fotos: '<?php echo $num_fotos; ?>'});
});
});
</script>
</div>
<input type="submit" value="Enviar"/>
</form>
</body>
</html>
3º Passo – Criar o arquivo responsável por fazer a criação dos campos files que será puxado por Ajax (addfoto.php):
<input type="file" name="nova_foto_<?php echo ($_POST['num_fotos']+1) ?>" value="" />
<?php $num_fotos = ($_POST['num_fotos']+1); ?>
<div id="fotos<?php echo ($num_fotos+1) ?>">
<a class="input_link" href="#" id="insere_foto">Clique para inserir <?php echo ($num_fotos+1); ?>ª foto</a>
<script>
$(document).ready(function(){
$('#insere_foto').click(function(evento){
evento.preventDefault();
$('#fotos<?php echo ($num_fotos+1) ?>').load('addfoto.php',{num_fotos: '<?php echo $num_fotos; ?>'});
});
})
</script>
<input type="hidden" name="num_fotos" value="<?php echo $num_fotos; ?>"/>
</div>
4º Passo – Criar o arquivo (grava_fotos.php) para recuperar as fotos basta um for com o número de fotos passados pelo campo hidden:
<?php
//cadastra todas as fotos
//numero de fotos
$novas_fotos = $_POST['num_fotos'];
for ($i=1; $i<=$novas_fotos; $i++) {
//se tiver arquivos para ser carregado...
if($_FILES["nova_foto_".$i]["name"] != '') {
//define arquivo
$foto = $_FILES["nova_foto_".$i];
//Pega extensão da imagem
preg_match("/\.(gif|bmp|png|jpg|jpeg){1}$/i", $foto["name"], $ext);
//Gera um nome único para a imagem
$nome_imagem = md5(uniqid(time())) . "." . $ext[1];
//Caminho de onde ficará a imagem
$caminho_imagem = "imagens/" . $nome_imagem;
//Faz o upload da imagem para seu respectivo caminho
move_uploaded_file($foto["tmp_name"], $caminho_imagem);
}
}
echo "Feito!";
?>
Abraços!
AJAX com JQUERY
Já perceberam que gosto muito de AJAX não? Mas não foi sempre assim. Antes de aprender autilizá-lo integrado ao JQUERY isso era uma dor de cabeça.
Quer aprender a usar Ajax de forma simples? Vou lhe dar quatro dicas básicas para que entendendo o conceito você possa adaptar ao seu código. Não se esqueça: antes certifique-se de que já incorporou o Jquery em sua página, se não sabe como faze-lo leia aqui.
Dica 1 – Puxando um arquivo para uma div:
(Neste exemplo, ao clicar no link de id “teste1”, a div de id “id_div” irá receber o arquivo “pagina_nova.php”)
<script>
$(document).ready(function() {
$("#teste1").click(function(evento) {
$('#id_div').load('pagina_nova.php');
});
});
</script>
Dica 2 – Puxando arquivo para uma div passando parâmetros por POST:
(Neste exemplo, ao clicar no link de id “teste2”, a div de id “id_div” irá receber o arquivo “pagina_nova.php”, mas será passado antes a variável “var1” e a variável “var2” para este arquivo)
<script>
$(document).ready(function() {
$("#teste2").click(function(evento) {
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'});
});
});
</script>
Dica 3 – Puxando arquivo para uma div, passando parâmetros por POST e executando uma função ao final:
(Neste exemplo, ao clicar no link de id “teste3”, a div de id “loading” ficará visível, a div de id “id_div” irá receber o arquivo “pagina_nova.php”, mas será passado antes a variável “var1” e a variável “var2” para este arquivo, e ao final será ocultada a div “loading”)
<script>
$(document).ready(function() {
$("#teste3").click(function(evento) {
$('#loading').css('display','block');
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'}, function() {
$('#loading').css('display','none');
});
});
});
</script>
Dica 4 – E fazer tudo isso sem que a página se mova:
<script>
$(document).ready(function() {
$("#teste4").click(function(evento) {
evento.preventDefault();
$('#loading').css('display','block');
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'}, function() {
$('#loading').css('display','none');
});
});
});
</script>
Página completa com todos os exemplos (index.php) :
(Não se esqueça do jquery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com Jquery</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#teste1").click(function(evento) {
$('#id_div').load('pagina_nova.php');
});
});
$(document).ready(function() {
$("#teste2").click(function(evento) {
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'});
});
});
$(document).ready(function() {
$("#teste3").click(function(evento) {
$('#loading').css('display','block');
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'}, function() {
$('#loading').css('display','none');
});
});
});
$(document).ready(function() {
$("#teste4").click(function(evento) {
evento.preventDefault();
$('#loading').css('display','block');
$('#id_div').load('pagina_nova.php', {var1: 'qualquer_coisa1', var2: 'qualquer_coisa2'}, function() {
$('#loading').css('display','none');
});
});
});
</script>
</head>
<body>
<div id="loading" style="display: none;">Carregando...</div>
<div id="id_div">Este Conteúdo será substituído.</div>
<br/>
<a href="#" id="teste1">Testar Exemplo 1</a>
<br/>
<a href="#" id="teste2">Testar Exemplo 2</a>
<br/>
<a href="#" id="teste3">Testar Exemplo 3</a>
<br/>
<a href="#" id="teste4">Testar Exemplo 4</a>
</body>
</html>
Página que será puxada no exemplo anterior (pagina_nova.php) :
<?php echo "O arquivo pagina_nova.php foi carregado para esta div por Ajax."; echo "<br/>variavel var1: ".$_POST['var1']; echo "<br/>variavel var2: ".$_POST['var2']; ?>
Abraços!
CAPTCHA com PHP e JQUERY
Para quem quer entender ou apenas implementar o tal do CAPTCHA para evitar spans em seus formulários vou tentar aqui descrever o passo-a-passo para a implementação utilizando PHP, JQUERY e AJAX , enfim, Javascript.
O CAPTCHA nada mais é do que um arquivo chamado por Ajax que gera, neste caso dois conjuntos de letras aleatórias e, com estes conjuntos gera uma SESSION e uma imagem levemente distorcida. Quando o usuário tentar submeter o formulário as letras digitadas devem ser conferidas com a SESSION. O conceito é este, as variações ficam por conta de cada um.
A intenção aqui não foi fazer uma interface bonita pronta para a utilização, a ideia é destrinchar como criar uma imagem CAPTCHA e como fazer sua verificação.
Ao final teremos quatro arquivos:
- O arquivo do formulário em si que vou chamar aqui de index.php;
- O arquivo que gera o código CAPTCHA: gera_captcha.php;
- O arquivo para puxar a confirmação: confirmacao.php;
- O arquivo da fonte que será usada para gerar as letras, no caso do exemplo eu utilizei a fonte tpf display.ttf disponível para download aqui.
Vamos começar com o arquivo index.php, acrescentando dentro de sua tag Header o jquery, que no caso estou utulizando a versão 1.2.6 . E para quem não sabe incluir o Jquery pode aprender aqui.
Inclua também este script após a incorporação do Jquery:
<script>
$(document).ready(function() {
/*troca palavras do captcha ao clicar*/
$('#captcha-troca').click(function() {
change_captcha();
});
});
/*troca palavras do captcha efetivamente e desabilita submit*/
function change_captcha()
{
document.getElementById('captcha-imagem').src="captcha/gera_captcha.php?rnd=" + Math.random();
$('#enviar').attr('disabled','disabled');
}
/*traz input hidden para dentro do formulário*/
function Verifica() {
$('#confirmacao').load('captcha/confirmacao.php', function(){
$('#enviar').removeAttr('disabled');
});
}
/*Verifica o formulário antes de enviar*/
function Envia(formulario){
if (formulario.codigo.value != formulario.verificacao.value) {
alert("O seu código de verificação não confere.");
change_captcha();
formulario.codigo.focus();
return (false);
}
return (true);
}
</script>
A abertura de seu formulário deverá ser algo parecido com isto:
<form name="formulario" onsubmit="return Envia(this)" method="post" action="#" enctype="multipart/form-data">
Não irei explicar aqui cada parte, o importante é que a com o onsubmit declarado, a função Envia será chamada antes do envio do formulário, e é ela a responsável por conferir se os dados do formulário estão ok, e inclusive (neste caso, unicamente) se o código de verificação está correto.
Bem, depois de seus inputs, selects, texteareas, etc, acrescente a div para mostrar o código CAPTCHA. É importante também que esta div esteja dentro do formulário, ou seja, antes do fechamento da tag form (</form>).
<div id="captcha"> <img src="captcha/gera_captcha.php" alt="" id="captcha-imagem" /><br/> <a href="#" id="captcha-troca">Trocar Palavras</a><br/> Escreva as duas palavras:<br/> <input name="codigo" type="text" onblur="Verifica(this)"/> <div id="confirmacao"></div> </div>
Desta forma fechamos o arquivo index.php, o arquivo do formulário em si.
Os outros arquivos ficando assim (códigos comentados):
gera_captcha.php
<?php
session_start(); //inicia dados de sessões
for ($i = 0; $i < 8; $i++) //escolhe 8 letras aleatórias
{
if($i == "4") {
$palavra .= " "; //acrescenta um espaço depois das 4 primeiras letras
}
$palavra .= chr(rand(97, 122));
}
$_SESSION['randomico'] = $palavra; //cria a session com a palavra gerada
$diretorio = 'fonts/'; //diretório da fonte
$nova_imagem = imagecreatetruecolor(165, 50); // cria imagem com 165x50px
$fonte = "TPFDisplay.ttf"; // fonte usada
$cor = imagecolorallocate($nova_imagem, 0, 0, 0); // cor da letra
$fundo = imagecolorallocate($nova_imagem, 201, 108, 30); // cor do background
imagefilledrectangle($nova_imagem, 0,0, 165, 50, $fundo); //cria retângulo no fundo da imagem
$rotacao = rand(-5, 5); //rotação aleatória para as letras
imagettftext($nova_imagem, 22, $rotacao, 5, 30, $cor, $diretorio.$fonte, $_SESSION['randomico']); //escreve no retângulo
header("Content-type: image/png");
imagepng($nova_imagem); //imprime imagem png
?>
confirmacao.php
<?php session_start(); //inicia dados de sessões echo "<input type='hidden' name='verificacao' value='".$_SESSION['randomico']."'/>"; //input hidden para verificação ?>
exemplo completo do index.php (página do formulário):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aprendendo Captcha</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
/*troca palavras do captcha ao clicar*/
$('#captcha-troca').click(function() {
change_captcha();
});
});
/*troca palavras do captcha efetivamente e desabilita submit*/
function change_captcha()
{
document.getElementById('captcha-imagem').src="captcha/gera_captcha.php?rnd=" + Math.random();
$('#enviar').attr('disabled','disabled');
}
/*traz input hidden para dentro do formulário*/
function Verifica() {
$('#confirmacao').load('captcha/confirmacao.php', function(){
$('#enviar').removeAttr('disabled');
});
}
/*Verifica o formulário antes de enviar*/
function Envia(formulario){
if (formulario.codigo.value != formulario.verificacao.value) {
alert("O seu código de verificação não confere.");
change_captcha();
formulario.codigo.focus();
return (false);
}
return (true);
}
</script>
</head>
<body>
<form name="formulario" onsubmit="return Envia(this)" method="post" action="#" enctype="multipart/form-data">
Nome:<br/>
<input type="text" name="nome" value=""/><br/>
Data de Nascimento:<br/>
<input type="text" name="data_nascimento" value=""/><br/>
Estado Civil:<br/>
<select name="estado_civil">
<option value="" selected>Selecione...</option>
<option value="Solteiro(a)">Solteiro(a)</option>
<option value="Casado(a)">Casado(a)</option>
<option value="Divorciado(a)">Divorciado(a)</option>
<option value="Viúvo(a)">Viúvo(a)</option>
</select>
<hr>
<div id="captcha">
<img src="captcha/gera_captcha.php" alt="" id="captcha-imagem" /><br/>
<a href="#" id="captcha-troca">Trocar Palavras</a><br/>
Escreva as duas palavras:<br/>
<input name="codigo" type="text" onblur="Verifica(this)"/>
<div id="confirmacao"></div>
</div>
<br/>
<button id="enviar" disabled>Enviar</button></td>
</form>
</body>
</html>
Salve os arquivos seguindo a estrutura de pastas passada, terá o código funcionando e poderá entender como funciona o CAPTCHA. Agora, por fim, basta adaptar seu formulário, criar um estilo CSS e pronto!
Abraços!
Fique Por Dentro
O TIOBE Programming Community Index é um indicador da popularidade das linguagens de programação. O índice é atualizado uma vez por mês e as classificações são baseadas no número de engenheiros qualificados em todo o mundo, cursos e fornecedores terceirizados. Os motores de busca populares como Google, Bing, Yahoo, Wikipedia, YouTube e Baidu são usados para calcular as classificações. Não confunda! O índice TIOBE não é sobre a melhor linguagem de programação ou a língua em que a maioria das linhas de código foram escritas.
O índice pode ser usado para verificar se suas habilidades de programação ainda estão atualizados ou para fazer uma decisão estratégica sobre qual linguagem de programação deve ser adotada quando começar a construir um novo sistema de software.
Abaixo a tabela com a pesquisa mais recente (Agosto de 2011)
Atenção especial para a linguagem F# que entra no TOP20 pela primeira vez, contrariando algumas espectativas de que outras linguagens como Scala, Clojure, Haskell ou Erlang seriam as primeiras a chegarem lá. O F# vem no pacote Visual Studio da Microsoft (versão 2010+).
Entenda o Conceito Tableless
Vou tentar em síntese explicar este conceito de Tableless, como e porque surgiu e o porquê de utilizá-lo.
Nos primórdios da internet, quando sites ainda eram meros textos sem quase nada de formatação de layouts, os programadores não tinham muita liberdade de criação, pois para eles haviam poucas opções de navegadores (Lynx, Mozaic e Netscape Navigator). Com a entrada da Microsoft na briga por este mercado, com o Internet Explorer, a história começou a mudar.
Neste meio tempo, os sites foram se modificando e os navegadores tinham que se adequar à esta nova onda dos layouts, mas como o W3C (World Wide Web Consortium – os padrões para web) ainda não passava de rascunho, cada navegador tinha os seus próprios padrões, o que faziam com que os sites formatados para um navegador, não funcionassem bem no outro.
“Entre as muitas idéias que surgiram para ultrapassar ao ambiente de ‘apenas texto’ da internet, estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões proprietários traziam. A esse tipo de técnica, que foi usada pela maior parte dos websites, chamamos de layout com tabelas.” (fonte: http://www.tableless.com.br/o-que-etableless)
Enfim, no ano de 1995 o W3C nascia e pouco tempo depois, no mesmo ano foi apresentado e aprovado o projeto CSS (Folhas de estilos), o que proporciona aos sites que seguem esses padrões web ter o seu layout modificado por um arquivo separado do HTML e uma das melhorias foi a formatação de layout sem o uso de tabelas. Todo o site que não utiliza tabelas e tem seu layout definido por um arquivo .css está em acordo com os padrões W3C e utiliza o conceito TABLELESS.
Agora sim! Os navegadores atuais devem seguir estes padrões estabelecidos e acabar com o problema dos desenvolvedores de ter que pensar em várias formas de fazer a mesma coisa, para vários navegadores diferentes.
Abraço!
refatorar 