Pesquisar na Comunidade
Mostrando resultados para as tags ''h1''.
Encontrado 200 registros
-
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>
-
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>
-
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>
-
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>
-
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>
-
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>
-
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 ?>
-
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>
-
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 !
-
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>'; } ?>
-
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>
-
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>
-
H1 que preencha toda a largura da container
Alessandro Bodão postou um tópico no fórum Desenvolvimento frontend
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. -
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 .
-
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>
-
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="">
-
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>
-
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>
-
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
-
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
-
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 !
-
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>
-
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>
-
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>
-
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>
