Jump to content

Search the Community

Showing results for tags 'h1'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 206 results

  1. Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ? <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>
  2. Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>
  3. Biel.

    transição suave

    Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado ! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>
  4. Biel.

    banner

    Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>
  5. Olá pessoal. O banner abaixo está funcionando normalmente,, mas quero fazer o seguinte: Colocar as imagens diretamente no html e mostrar o link da imagem que está passando. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>colocar imagens do banner no html</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"></div> <!-- <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> --> <script> // const images = document.querySelectorAll('.banner-img'); // const randomIndex = Math.floor(Math.random() * images.length); const images = [ "imagem1.png", "imagem2.png", "imagem3.png", "imagem4.png", "imagem5.png" ]; const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const imageUrl = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = imageUrl; imgElement.alt = "Random Image"; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); linkElement.classList.add('banner-link'); linkElement.href = randomIndex + 1; linkElement.appendChild(imgElement); banner.innerHTML = ''; // Limpa o conteúdo anterior banner.appendChild(linkElement); } showRandomImage(); // Exibir uma imagem aleatória inicial setInterval(showRandomImage, 2000); // Alterar a imagem aleatória a cada 2 segundos </script> </body> </html>
  6. Biel.

    Carregar imagem

    Olá pessoal. Ao selecionar uma imagem qualquer no input1, estou tentando carregar automaticamente a mesma imagem no input2 input1 <input type="file" id="id1" name="input1" onchange="teste()"> <br> <br> input2 <input type="file" id="id2" name="input2"> <script> function teste(){ var x = document.getElementById('id1'); x.files; document.getElementById('id2').files.x; } } </script>
  7. Olá pessoal. pagina1.php está no servidor de Minas Gerais e pagina2.php está no servidor da Bahia. É possível inprimir na página2 o mesmo resultado que a pagina1? pagina1.php <?php $a = 7; $b = 3; $c = $a*$b; print $c; // imprime 21 ?> pagina2.php <?php include('pagina1.php'); // imprime 21 ?>
  8. Biel.

    aes_encrypt

    Olá pessoal. O código abaixo faz cadastro normalmente, até aqui tudo ok. Quero muito encriptar os dados com AES_ENCRYPT, mas não estou conseguindo ligar AES_ENCRYPT('nome', UNHEX(SHA2('senhatete' , 512))) nome com o código abaixo AES_ENCRYPT('nome', UNHEX(SHA2('senha123' , 512))) nome AES_DECRYPT(nome, UNHEX(SHA2('senha123' , 512))) nome ... <?php $PHP_SELF = $_SERVER['PHP_SELF']; ?> <?php if(isset($_POST["enviar"])){?> <?php @$nome = $_POST['nome']; ?> <?php $ggSql = mysqli_query($ggCon, " INSERT INTO tab_aprendiz ( nome )VALUES( '".$nome."' )"); ?> <?php print "cadastro realizado com sucesso"; ?> <?php }?> <form action="<?php echo $PHP_SELF; ?>" method="post" > nome <input type="text" name="nome" value="" > <br> <br> <input type="submit" name="enviar" value="Salvar"> </form>
  9. Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a e não do javascript . Como resolver? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido, Obrigado a todos !
  10. Biel.

    imprimir dados na ordem alfabética

    Olá pessoal. Minha tab_aprendiz está assim: id nome 1 KRdaniel 2 HMedmundo 3 FXbruno 4 WNfernando 5 PZandre 6 YVcarlos Como imprimir os dados na ordem alfabética, depois de tirar as duas primeiras letras de cada nome, dessa forma: andre bruno carlos daniel edmundo fernando ... <?php $ggSql = mysqli_query($ggCon, "SELECT * FROM tab_aprendiz "); while (@$ggLinha = mysqli_fetch_array($ggSql)) { @$nome = $ggLinha['nome']; $nome=substr($nome,2); print $nome.'<br>'; } ?>
  11. Biel.

    pegar valor do botão

    Olá pessoal. Ao pressionar o botão uma vez quero pegar o valor do botao e jogar no doc1. Ao pressionar o botão duas vez quero pegar duas vezes o valor do botao e jogar no doc1. Ao pressionar o botão três vezes quero pegar três vezes o valor do botao e jogar no doc1 e assim por diante ... <button style="padding:10px;" onclick="funcClick()" id="botao">1</button> <input type="text" id="doc1" readonly value=""> <!-- <p id="doc745"></p> --> <script> function funcClick(){ var xx = document.getElementById('botao'); var xx = xx.value; var x = document.getElementById('doc1'); // x.value=xx; x.value="teste"; // for(var i=0; i<x.length; i++){ // x[i].value = "teste"; // } } </script>
  12. Olá pessoal. O código abaixo dar submit na pagina1 sem refresh e o valor digitado não é resetado. Até aqui tudo ok. Quero dar submit na página1 e ir para pagina333 e capturar o valor digitado da pagina1 e mostrar no campo input que está na pagina333 pagina1.php <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>pegar valor digitado</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <style type="text/css"> .margem { margin-bottom: 20px; } label { font-weight: bold; } </style> <body> <div class="container"> <div class="alert" id="alert" role="alert"></div> <form action="" id="name_form" autocomplete="on"> <label>Nome</label> <input type="text" name="nome" id="nome" class="form-control margem"> <input type="button" name="submit" id="submit" class="btn btn-info" value="Avançar"> </form> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function(){ var nome = $('#nome').val(); $('#alert').html(''); $.ajax({ url:'pagina2.php', method: 'POST', data: {nome: nome}, success: function(result) { //$('form').trigger("reset"); $('#alert').fadeIn().html(result); } }); }); }); </script> ... pagina2.php <?php if (isset($_POST["nome"])){ print $_POST["nome"]; } ?> ... pagina333.php <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>...</title> </head> <style type="text/css"> .margem { margin-bottom: 20px; } label { font-weight: bold; } </style> <div class="container"> <div class="alert" id="alert" role="alert"></div> <form action="" id="name_form" autocomplete="on"> <label>Nome</label> <input type="text" name="nome" id="nome" class="form-control margem"> <input type="button" name="submit" id="submit" class="btn btn-info" value="Avançar"> </form> </div> </body> </html> ... rascunho para estudo <script> var btn = document.querySelector("#inputButton"); btn.addEventListener("click", function () { var text = document.querySelector("#inputText").value; localStorage.setItem('valueText', text); }) </script> <script> var btn2 = document.querySelector("#inputButton2"); btn2.addEventListener("click", function () { var paragrafo = document.querySelector("#viewSessionSotorage"); paragrafo.textContent = localStorage.getItem('valueText'); }) </script>
  13. Alessandro Bodão

    H1 que preencha toda a largura da container

    Fala galerinha, Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
  14. Biel.

    pegar ref da url

    Olá pessoal.pagina1 está assim pagina1.php?ref=444 e a página2 está em branco. Quando submit for pressionado quero pegar ref da pagina1 que está na url e exibir na url da pagina2 ficando assim -> pagina2.php?ref=444 ... Está é a pagina1 <?php @$ref = $_GET['ref']; $sqlVF = mysqli_query($ggCon, "SELECT * FROM tab_aprendiz WHERE ref='".$ref."' "); while($ggLinha = mysqli_fetch_array($sqlVF)): @$ref = $ggLinha['ref']; endwhile; ?> <?php if(isset($_POST["MM_ACAO"])){?> <?php @$ref = $_POST['ref']; @$email = $_POST['email']; @$nome = $_POST['nome']; ?> <?php $ggSql = mysqli_query($ggCon, "INSERT INTO tab_aprendiz ( nome )VALUES( '".$nome."' )"); ?> <?php header("Location: pagina2.php?ref=".$ref); ?> <?php }?> <?php $phpSelf = $_SERVER['PHP_SELF'];?> <form action="<?php echo $phpSelf;?>" method="post" name="form1" > nome <input type="text" required name="nome" value="joao" /> <input type="submit" name="MM_ACAO" value="Cadastrar" /> </form> <a href="pagina1.php?ref=444">Acessar página1</a> ... esta é a página2 e está em branco .
  15. Biel.

    url

    Olá pessoal. Ao pressionar o botão, estou tentando jogar na url o valor do input, ficando assim: pagina1.php?id=valorDoInput pagina1.php <input type="text" name="nome" id="doc1" readonly value="valorDoInput"> <input type="text" name="nome" id="doc2" readonly value=""> <p id="doc3"></p> <button onclick="aprendiz()">click</button> <script> function aprendiz(){ var doc1 = document.querySelector('#doc1'); var doc1 = doc1.value; //============================ var doc2 = document.querySelector('#doc2').value=doc1; //doc2.value=doc1; //============================ var doc3 = document.querySelector('#doc3').innerText=doc1; //doc3.innerText=doc1; } </script>
  16. Biel.

    pegar nome digitado

    Olá pessoal. Abaixo temos pagina1 que está dentro de um form e pagina2. Quero fazer o seguinte: Digitar um nome qualquer na página1 e pressionar Avançar e o nome que foi digitado na pagina1 quero muito que apareça na pagina2 dentro do campo nome pagina1.php <form action="pagina2.php" method="post" name="form1"> nome <br> <input type="text" name="nome" required value=""> <input type="submit" value="Avançar"> </form> pagina2.php nome <br> <input type="text" name="nome" required value="">
  17. Biel.

    login, senha e captcha

    Olá pessoal O sistema de login e senha abaixo está funcionando normalmente. O script captcha também está funcionando. Quero ligar o captcha com o sistema de login e senha e que funcione da seguinte forma: Se login, senha e captcha não forem digitados corretamente, impedir usuario de logar acessar link e fazer download dos arquivos captcha tag_logar gg_id ggLogin ggSenha 1 joao 123 ... <?php $ggCon = mysqli_connect("localhost", "root", "759", "bd_teste" ); if(mysqli_connect_error()){ echo "falha na conexão". mysqli_connect_error(); } else{ echo "CONEXAO OK 1"; } $phpSelf = $_SERVER['PHP_SELF']; ?> <?php function funcCaptcha($text){ $width = 200; $height = 100; $fontfile = "OpenSans-Regular.ttf"; $image = imagecreatetruecolor($width, $height); $white = imagecolorallocate($image, 255, 255, 255); $black = imagecolorallocate($image, 0, 0, 0); imagefill($image, 0, 0, $white); imagettftext($image, 25, rand(-20,20), $width/4, 60, $black, $fontfile, $text); $warped_image = imagecreatetruecolor($width, $height); imagefill($warped_image, 0, 0, imagecolorallocate($warped_image, 255, 255, 255)); for ($x=0; $x < $width; $x++) { # code... for ($y=0; $y < $height; $y++) { # code... $index = imagecolorat($image, $x, $y); $color_comp = imagecolorsforindex($image, $index); $color = imagecolorallocate($warped_image, $color_comp['red'], $color_comp['green'], $color_comp['blue']); $imageX = $x; // $imageY = $y + sin($x / 10) * 10; $imageY = $y + sin($x / 10) ; imagesetpixel($warped_image, $imageX, $imageY, $color); } } $path = "capacha.jpg"; imagejpeg($warped_image,$path); imagedestroy($warped_image); imagedestroy($image); return $path; } $text88 = rand(10000,99999); $myimage = funcCaptcha($text88); // file_put_contents($filename, $text88); ?> <?php if(isset($_POST["enviar"])){?> <?php @$gg_id = $_POST['gg_id']; @$ggLogin = $_POST['ggLogin']; @$ggSenha = $_POST['ggSenha']; @$ggCaptcha = $_POST['ggCaptcha']; ?> <?php $sqlVF = mysqli_query($ggCon, "SELECT * FROM tab_logar WHERE ggLogin = '".$ggLogin."' AND ggSenha = '".$ggSenha."' "); $AcompararDados = mysqli_num_rows($sqlVF); ?> <?php if($AcompararDados == true){ $_SESSION['gg_id'] = $gg_id; print "usuário logado"; } else{ print "não logou"; } // $filename = session_id(); // if(count($_POST)>0){ // $ggCaptcha = file_get_contents($filename); // if($_POST['ggCaptchak'] == $ggCaptcha){ // print "usuário logado"; // } // else{ // print "não logou"; // } // } // $text = rand(10000,99999); // $myimage = funcCaptcha($text); // file_put_contents($filename, $text); ?> <?php }?> <form action="<?php echo $phpSelf;?>" method="post" name="form1" id="tete" autocomplete="on" style="margin:auto; width: 200px; padding: 1em;"> <h1 class=" e10CENTRO_h1_1">Acessar painel</h1> Login <input type="text" name="ggLogin" value="" /> Senha <input type="text" name="ggSenha" value="" /> Digite o código<input type="text" name="ggCaptcha" value="" /> <img src="capacha.jpg" style="width:150px;" alt="código captcha"><br> <input type="submit" name="enviar" value="Acessar" /> </form>
  18. Biel.

    submit sem refresh

    Resolvido. Obrigado ! <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>...</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <div class="teste"> <form action="" id="name_form" autocomplete="on"> <input type="text" name="nome" id="nome" class="form-control margem"> <input type="submit" name="submit" value="Avançar"> </form> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function(){ var nome = $('#nome').val(); $('#alert').html(''); $.ajax({ data: {nome: nome}, success: function(result) { $('#alert').fadeIn().html(result); } }); }); }); </script>
  19. Biel.

    próxima image

    Olá pessoal. O link abaixo tem três image e de inicio aparece image1. Quero fazer o seguinte: dar um click na seta e ir para image2, depois dar outro click na seta e ir para image3 . Somente isso . Obrigado! . acessa jsbin
  20. Biel.

    lightbox

    Olá pessoa. Ligthbox no link abaixo tem 10 imagens, está funcionando e quero manter a dimensão de todos os elementos. Estou tentando fazer o seguinte: Ao avançar com a seta para image 5 quero muito que dentro da toto_div_1 apareça (image5,image6, image7, image8) e ao avançar com a seta para image 9, quero que apareça dentro da .toto_div_1 (image9, image10). Para voltar a idéia é a mesma: Ao voltar com a seta para image 8 quero muito que apareça dentro da .toto_div_1 (image5,image6, image7, image8) Ao voltar com a seta para image 4, quero que apareça dentro da class .toto_div_1 (image1,image2, image3, image4) . acessar lightBox
  21. Biel.

    Mudar url

    Olá pessoal. O efeito lightbox abaixo está na pagina1.php e está funcionando normalmente. Quero que ao clicar na imagem o efeito lightbox aconteça e a url mude para pagina2.php . Resolvido , obrigado a todos ! <style> body { font-family: Verdana, sans-serif; margin: 0; } .div_pai{ display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(41, 37, 37, 0.9); } .close { text-align: right; float: right; color: #FFF; position: absolute; top: 2px; font-size: 50px; font-weight: bold; background: #d40000; border: 1px solid #d40000; } .close:hover, .close:focus { color: #FFF; text-decoration: none; cursor: pointer; border: 1px solid #FFF; } .div_1 { display: flex; flex-wrap: wrap; background-color: #fefefe; margin: auto; max-width: 600px; width: 100%; } .img_1 { margin: auto; max-width: 600px; width: 100%; border-radius: 8px; transition-delay: 1s; } .mySlides { max-width: 600px; display: none; } .cursor { cursor: pointer; } img { margin-bottom: -4px; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } </style> <h2 style="text-align:center">Lightbox</h2> <img src="img1.png" style="width:200px" onclick="openModal()" class="hover-shadow cursor"> <div id="myModal" class="div_pai"> <div class="div_1"> <span class="close" onclick="closeModal()">×</span> <img class="img_1" src="img2.jpg" style="width:100%" alt="Nature and sunrise"> </div> </div> <script> function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } } </script> Resolvido , obrigado a todos !
  22. Biel.

    link

    Olá pessoal. EX1 está com efeito hover e sem link. Quando coloco link no EX2 o texto quebra e fica debaixo da imagem. Quero colocar link no EX2 e obter o mesmo resultado que EX1 <style> .div_principal{ display: flex; flex-wrap: wrap; align-items: center; margin: auto; width: 100%; max-width:900px ; padding: 10px; border: 4px solid red; } .div_tete, .div_toto{ flex: 1; display: flex; flex-wrap: wrap; align-items: center; padding: 4px; margin-right: 10px; background: #d6d6d6; } .div_tete:link, .div_tete:visited{text-decoration: none; background: #d6d6d6;} .div_tete:hover{background: #c1c1c1; color: black; cursor: pointer; } img{ width: 170px; } p{flex:1; color:#000; text-decoration: none;} a:link, a:visited{text-decoration: none; background: #d6d6d6;} a:hover{background: #c1c1c1; color: black;} </style> ... <hr> EX1 <div class="div_principal"> <div class="div_tete"> <img src="img1.png" alt=""> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <div class="WAS_div_preco">R$ 190,00</div> </div> <div class="div_tete"> <img src="img1.png" alt=""> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <div class="WAS_div_preco">R$ 190,00</div> </div> </div> <hr> EX2 <div class="div_principal"> <a href="teste.php"> </a> <div class="div_toto"> <img src="img1.png" alt=""> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <div class="WAS_div_preco">R$ 190,00</div> </div> <a href="teste.php"> </a> <div class="div_toto"> <img src="img1.png" alt=""> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <div class="WAS_div_preco">R$ 190,00</div> </div> </div>
  23. Biel.

    Flutuar itens

    Olá pessoal. ao selecionar sim, os itens ficam um abaixo do outro. Como fazer os itens flutuar quando item sim for selecionado? <style> #divPai{ display: flex; flex-wrap: wrap; align-items: center; border: 1px solid red; padding: 6px; } .item1, .item2, .item3, .item4, .item5, .item6{ flex:1; max-width: 90px; border: 1px solid green; margin-right: 10px; } </style> <div style="width:100%;"> <b>Quer mostrar?</b> <select id="itemSelecionado" required onchange="funcAprendiz();" > <option value=""></option> <option value="Sim" style="font-size:18px;">Sim</option> <option value="Não" style="font-size:18px;">não</option> </select> </div> <div id="divPai"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5">item5</div> <div class="item6">item6</div> </div> <script> document.getElementById("divPai").style.display='none'; function funcAprendiz(){ var itemSelecionado = document.getElementById("itemSelecionado"); if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='block'; } else if(itemSelecionado.value == "Não"){ document.getElementById("divPai").style.display='none'; } else if(itemSelecionado.value == ""){ document.getElementById("divPai").style.display='none'; } } </script>
  24. Olá pessoal. O banner está funcionando, mas tem um intervalo de 10 segundos para aparecer quando a página é atualizada. isso não é bom ! Quero tirar os 10 segundos de espera quando a página é atualizada, mas quero que o banner continue rotacionando de 10 em 10 segnudos <style> .divTotoPai { width:100%; border: 4px solid red; } .divToto {text-align: center;} .imgToto {width:240px; height:240px; } .imgToto:not([active=true]) {display:none; } </style> <div class="divTotoPai"> <div class="divToto"> <a href="link1.php" target="_blank"><img src="banner1.png" class="imgToto" /></a> <a href="link2.php" target="_blank"><img src="banner2.png" class="imgToto" /></a> <a href="link3.php" target="_blank"><img src="banner3.png" class="imgToto" /></a> <a href="link4.php" target="_blank"><img src="banner4.png" class="imgToto" /></a> <a href="link4.php" target="_blank"><img src="banner5.png" class="imgToto" /></a> </div> </div> <script> function funcToto(containerId, intervalTime) { let elementSlider = document.querySelector(containerId); let intervalRef = setInterval(() => setActiveSlide(containerId), intervalTime); enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime); } function setActiveSlide(container) { let images = document.querySelectorAll(`${container} img`); let removeActiveAttribute = () => { images.forEach(image => image.removeAttribute("active")); }; let toggleSlide = (indexImageToActive) => { removeActiveAttribute(); images[indexImageToActive].setAttribute("active", true); }; let indexActive = Math.floor(Math.random() * images.length); toggleSlide(indexActive); } funcToto(".divTotoPai", 10000); </script>
  25. Biel.

    separar html do javaScript

    Olá pessoal. Abaixo temos dois banners funcionando. O primeiro banner está na divTotoPai e o segundo banner está na divTetePai. Quero que na divTotoPai fique somente HTML e na divTetePai fique somente javascript e os dois banners continue funcionando. A idéia é que o javaScript enxergue apenas o elemento que ele pertence. <style> .divTotoPai { width:100%; border: 4px solid red; } .divToto {text-align: center;} .imgToto {width:240px; height:240px; } .imgToto:not([active=true]) {display:none; } /* ======================================= */ .divTetePai { width:100%; border: 4px solid blue; } .divTete {text-align: center;} .imgTete {width:400px; height:120px; } .imgTete:not([active=true]) {display:none; } </style> ... <div class="divTotoPai"> <div class="divToto"> <a href="link5.php" target="_blank"><img src="banner5.png" class="imgToto" /></a> <a href="link6.php" target="_blank"><img src="banner6.png" class="imgToto" /></a> <a href="link7.php" target="_blank"><img src="banner7.png" class="imgToto" /></a> <a href="link8.php" target="_blank"><img src="banner8.png" class="imgToto" /></a> </div> <script> function funcBanner1(containerId, intervalTime) { let elementSlider = document.querySelector(containerId); let intervalRef = setInterval(() => setActiveSlide(containerId), intervalTime); enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime); } function setActiveSlide(container) { let images = document.querySelectorAll(`${container} img`); let removeActiveAttribute = () => { images.forEach(image => image.removeAttribute("active")); }; let toggleSlide = (indexImageToActive) => { removeActiveAttribute(); images[indexImageToActive].setAttribute("active", true); }; let indexActive = Math.floor(Math.random() * images.length); toggleSlide(indexActive); } funcBanner1(".divTotoPai", 1000); </script> </div> ... <div class="divTetePai"> <div class="divTete"> <a href="link1.php" target="_blank"><img src="banner1.png" class="imgTete" /></a> <a href="link2.php" target="_blank"><img src="banner2.png" class="imgTete" /></a> <a href="link3.php" target="_blank"><img src="banner3.png" class="imgTete" /></a> <a href="link4.php" target="_blank"><img src="banner4.png" class="imgTete" /></a> </div> <script> function funcBanner2(containerId, intervalTime) { let elementSlider = document.querySelector(containerId); let intervalRef = setInterval(() => setActiveSlide(containerId), intervalTime); enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime); } function setActiveSlide(container) { let images = document.querySelectorAll(`${container} img`); let removeActiveAttribute = () => { images.forEach(image => image.removeAttribute("active")); }; let toggleSlide = (indexImageToActive) => { removeActiveAttribute(); images[indexImageToActive].setAttribute("active", true); }; let indexActive = Math.floor(Math.random() * images.length); toggleSlide(indexActive); } funcBanner2(".divTetePai", 1000); </script> </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.