Postagens

Selecionando o elemento pai com Jquery

Imagem
Olá, bom dia pessoal, nesta bela manhã de terça feira venho aqui com mais um tutorial, quantas vezes você precisou selecionar o elemento pai de um elemento ? ou seja, o elemento onde ele está contido. veja a seguinte situação: O elemento com cor de laranja (p) é o elemento pai e o elemento em tom de cinza (span) o elemento filho, vamos selecionar o elemento span e através dele nós mudaremos a cor do elemento pai: See the Pen Selecionando elemento pai com Jquery by Cícero Joceilton ( @joc01 ) on CodePen . Veja acima o código do projeto, colocaremos sempre a partir de agora nossos códigos no Codepen para que possamos ver em execução. Bom até aqui tudo bem nada de muito novo, utilizamos o parent para selecionar o elemento pai, mas agora teremos uma situação onde nosso elemento pai estará dentro de duas divs, entao o elemento p estará dentro de duas divs e precisamos alterar a cor da ultima div: Nosso elemento p está com cor branca e precisamos alterar a cor da div azul, p...
Postar um comentário
Leia mais

Baixar MP3 de vídeos do youtube com Jquery

Hoje venho apresentar a vocês um ótima API para baixar vídeos do yotube, utilizaremos jquery para adaptar nosso código e dar uma boa expereiência aos usuários, se trata de baixar o vídeo do youtube em MP3, apenas o aúdio, nosso código apenas vai trabalhar a montagem do link para que a API faça exatamente o download que o usuario indicou. Teremos um campo de texto para o usuario inserir a url do vídeo, também receberemos um json da API para mostrar informações do vídeo. Este será um exemplo simples, mas funcional, espero qaue acompanhem os posts deste blog, pois melhorarei este código para exibir a imagem do vídeo e algumas implementações para baixar vídeos vindos de outros aplicativos, como o app do youtube entre outros. Vamos criar um campo de texto: <input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar"> Agora vamos a parte interessante:  ...
Postar um comentário
Leia mais

Função para enviar qualquer formulário html

Bom dia pessoal, hoje eu estava pensando, como sou webdesigner e sempre preciso criar vários sites, tem projetos que sempre tem um formulário diferente, como é chato você criar aquele esquema para todos os formulários do site, claro se seu site só tem aquele formulário de envio de email simples, mas se tem vários tipos de formulário com campos diferentes, você pode utilizar a função serialize do jquery, a qual já pega todos os dados do seu formulário e monta uma string, esta string é recebida pelo php ou outra linguagem do servidor que esteja a utilizar. Daí você pergunta: e a validação do lado cliente não vai ficar mais complicada? Bom faz muito tempo que não precisamos fazer a validação do lado cliente, você pode perceber como é rápida a resposta do servidor, a não ser que seu site seja muito acessado, porém, não fica dificil não, você pode fazer a validação tranquilamente do lado cliente, se for o caso eu posso até fazer um outro tutorial ensinando como fazer esta validação, ma...
Postar um comentário
Leia mais

Mostrar e Ocultar Senha com Jquery

Imagem
Você já viu aqueles formulários de login em sites, onde você pode visualizar a senha que digitou? isso evita que ocorra erros de digitação e o usuario venha a ter que redigitar a senha e também evita bloqueio da senha se seu sistema tiver esta funcionalidade. Utilizaremos a versão 2.0.2 do jquery, nosso formulário vai mostrar a senha e ocultar quando o usuário desejar, bastando clicar em uma imagem de um olho ao lado do campo de digitação da senha. Obiviamente existe a maneira de exibir a senha também quando o usuário segura o botão do mouse, porém particularmente eu prefiro desta forma. Vamos começar? Primerio precisamos de um formulário html <form> <p> Login </p> <p> <label> Login </label> <input type="text" name="login" id="login"> </p> <p> <label> Senha </label> <input type="password" name="senha" id="senha"> <img id="olho...
Postar um comentário
Leia mais

Cálculo de frete dos correios

Hoje eu trago um tutorial sobre como calcular o frete de um produto dos correios com jquery, com base no valor e peso do mesmo, utilizaremos uma API que retorna um arquivo Json, o que vai deixar nossa aplicação mais rápida, a api retorna o frete para envio sedex ou pac, você pode adaptar para seu tipo de website e fazer as devidas adaptações. vamos começar mostrando como sera a url que utilizaremos, a API http://developers.agenciaideias.com.br/correios/frete/json/cep origem/cep destino/peso/valor o cep sempre formatado assim: 05311900 o peso :  O valor mínimo para o cálculo do frete nos Correios é 300g, se o somatório dos pesos dos itens for diferente de zero e menor que 300g, o frete será calculado utilizando o valor mínimo (300g). O valor máximo que pode ser utilizado no cálculo do frete é 30Kg (30.000g), se o somatório do peso dos itens ultrapassar este valor, o frete não será calculado e será assumido o valor zero. valor : O valor máximo do somatório dos itens que p...
Postar um comentário
Leia mais

exibir tags ao digitar em campo de texto input jquery

Olá amigos hoje trago para vocês um tutorial bem interessante, sobre o jquery, vamos fazer um exemplo bem simples se talvez você já qeubrou cabeça pra fazer aquelas tag´s que surgem quando o usuario digita um termpo por exemplo "javascript". Bom, se quiser algo mais avançado, sugiro que continue acompanhando o blog porque irei postar um código bem diferente deste futuramente, algo que seja mais interessante e integrado ao php, mas neste exemplo vou trazer um digamos: "quebra galho" para você que quer algo bem simples e que nem utilize o php, basta você colocar as palavras em um array, ou melhor as tag´s. vamos começar !!! primeiro criamos um array com as tags que seram sugeridas para o usuario: var sugst = ["html", "jquery", "php", "css", "javascript"]; Capturamos o que foi digitado pelo usuario e jogamos em uma variável: $("#tags").keyup(function () { var valor = $(this).val(); Detectamos se...
Postar um comentário
Leia mais

Mascara de Telefone com jquery

Muitas pessoas podem ter problemas ao tentar criar uma máscara com Jquery, bom felizmente existe um plugin muito bom e prático para fazer este tipo de tarefa. o jQuery Mask bastando para isso fazer isso aqui: $("#telefone").mask("(99)9999-9999"); Fazendo isso já temos uma mascara do tipo telefone, que só recebe números de 1 a 9 e deve obedecer a esta regra que criamos, quando o usuário clicar no campo ficará assim: (  )____-____ Nosso tutorial não se resume a isso, eu quero fazer um algo a mais aqui, bom, alguns estados agora tem o 9º digito, então para este tipo de telefone teremos que ter esta outra máscara: $("#telefone").mask("(99)99999-9999"); Agora veio um pequeno problema, pois se o usuário digitar o telefone sem o nono digito, automaticamente o jquery vai apagar o campo, portanto vamos ver uma pequena solução para este problema, quero lhe apresentar o evento .focusout() do jquery, ele é acionado assim que um campo perde o f...
Postar um comentário
Leia mais

Navegador php

Vou partilhar com vocês um pequeno script que faz uma navegação simples na sua página, basta ter as páginas em uma pasta modulos e ele vai exibir o conteúdo das mesmas na área onde você inseriu este código, para fazer a chamada basta colocar no href do link a variavel pag e o nome da página chamada   ex:  <a href="?pag=home"> Inicio </a>  Daí será exibida a página home.php o código está logo abaixo: <?php $filename = "modulos/".$pag.".php"; if ($pag == "") { $filename = "modulos/home.php"; } if (file_exists($filename)) { include_once $filename; } else { echo "<p class='no'> Página não encontrada </p>"; } ?> Você pode jogar suas páginas na pasta módulos apenas com o conteúdo html, você não precisa incluir nelas o <!DOCTYPE> apenas o conteudo que será exibido na area de conteúdo do seu website. você pode baixar o exemplo completo no link  Clique aqui
Postar um comentário
Leia mais