Postagens

Mostrando postagens de junho, 2016

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

Primeiro e ultimo elemento com css

Hoje vou ensinar uma maneira de acessar o primeiro e o último elemento de uma lista em html, isso é muito importante, quando precisamos aplicar uma configuração específica a estes elementos, por exemplo, sempre iniciar o primeiro link de um menu com uma cor de destaque, ou retirar a margem do último elemento, você pode precisar em diversas situações. Bom o primeiro elemento é acessado por first-child e o ultimo por last-child vamos criar uma lista em html onde vamos alterar a cor do primeiro e último elemento <ul> <li> parte 1 </li> <li> parte 2 </li> <li> parte 3 </li> <li> parte 4 </li> <li> parte 5 </li> <li> parte 6 </li> </ul> No css eu acesso os primeiro e ultimo elemento <style> ul {border:1px #ccc solid; padding:20px; list-style-type:none;} ul li:first-child {background-color:#c30;} ul li:last-child {background-color:#f00;} ul li {background-color:#ddd; padding:5px; fo...
Postar um comentário
Leia mais

Posicionar objetos com jquery - drag and drop

Olá, hoje postarei um código com jquery e php para posiciobar objetos com drag and drop do jquery ui, neste exemplo podemos ver os elementos subindo ou descendo e atualizando em tempo real no nosso banco de dados, assim se o usuario tiver algum problema na hora com a internet ou o pc desligar, rss tudo é possível, mas ao menos terá as posições dos objetos salvas. Podemos imaginar inúmeras possibilidades de utilizarmos esta aplicação, um menu personalizado, uma galeria de imagens, um jogo de quebra cabeça, um programa online de criação de sites. Para nosso exemplo vou criar uma ul, com as letras a,b e c, nesta ordem, mas podemos mudar esta posição apenas clicando e arrastando as letras, Para começar vamos chamar o jquery e o jquery ui <script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <li...
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