Biel.

.

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

washalbano, você fez o trabalho completo e funcionou muito bem, obrigado, mas o que quero saber é que código uso para dar um click na seta e ir para image2, depois dar outro click na seta e ir para image3, usando código javascript moda antiga com base no código que postei.

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

Carregar toda biblioteca consome muito do servidor e isso impacta no preço. Se eu não conseguir fazer não terei outra alternativa. Obrigado Tetsuo !

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>

Colocar active em um banner específico, para o que quero fazer, não fica bom. Veja: Assim que a página é atualizada o banner apareçe somente depois de 10 segundos de espera . Quero tirar esses 10 segundos de espera quando a página é atualizada, mas quero que o banner continue rotacionando de 10 em 10 segnudos

Esse active vai aonde tetsuo ? banner1.png não pode aparecer sempre que a página é atualizada, senão ele estará em vantagem em relação os outros banners. A coisa tem que ser tipo sorteio nunca se sabe qual banner vai aparecer quando a página for atualizada

washalbano, ficou muito bom , obrigado !

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>

Olá pessoal. EX1 é um banner aleatório em javascript e está funcionando normalmente. Quero muito fazer o seguinte: Toda vez que o banner aparecer não importa qual banner, o cadastro seja feito automaticamente pegando banner_nome e banner_link e cadastrando na tabela_aprendiz conforme exemplo abaixo . EX2 o código é em php para cadastrar automaticamente banner_nome e banner_link tabela_aprendiz banner_nome banner_link banner1 link1.php banner2 link2.php banner3 link3.php banner2 link2.php banner4 link4.php banner4 link4.php banner4 link4.php banner1 link1.php banner3 link3.php .... EX1 <style> .aprendiz {text-align: center;} .bannerSize {width:100px; height:100px; } .bannerSize:not([active=true]) {display:none; } </style> <div class="aprendiz"> <img src="banner1.png" class="bannerSize"> <img src="banner2.png" class="bannerSize"> <img src="banner3.png" class="bannerSize"> <img src="banner4.png" class="bannerSize"> </div> <script> function showSlides(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); } showSlides(".aprendiz", 5000); </script> .... EX2 <?php $ggCon = mysqli_connect("localhost", "root", "123", "bd_teste" ); if(mysqli_connect_error()){ echo "falha na conexão". mysqli_connect_error(); } else{ echo "CONEXAO OK"; } ?> <?php $phpSelf = $_SERVER['PHP_SELF']; if(isset($_POST["enviar"])){ @$banner_nome = $_POST['banner_nome']; @$banner_link = $_POST['banner_link']; $ggSql = mysqli_query($ggCon, "INSERT INTO tabela_aprendiz ( banner_nome , banner_link )VALUES( '".$banner_nome."' , '".$banner_link."' )"); } ?> <form action="<?php echo $phpSelf;?>" method="post" name="form1" id="form1" autocomplete="off"> banner_nome <input type="text" required name="banner_nome" value=""> banner_link <input type="text" required name="banner_link" value=""> <input type="submit" name="enviar" value="Salvar"> </form>

Olá pessoal. EX1 é um banner aleatório em javascript e está funcionando normalmente. Quero muito fazer o seguinte: Toda vez que o banner aparecer não importa qual banner, o cadastro seja feito automaticamente pegando banner_nome e banner_link e cadastrando na tabela_aprendiz conforme exemplo abaixo . EX2 o código é em php para cadastrar automaticamente banner_nome e banner_link tabela_aprendiz banner_nome banner_link banner1 link1.php banner2 link2.php banner3 link3.php banner2 link2.php banner4 link4.php banner4 link4.php banner4 link4.php banner1 link1.php banner3 link3.php .... EX1 <style> .aprendiz {text-align: center;} .bannerSize {width:100px; height:100px; } .bannerSize:not([active=true]) {display:none; } </style> <div class="aprendiz"> <img src="banner1.png" class="bannerSize"> <img src="banner2.png" class="bannerSize"> <img src="banner3.png" class="bannerSize"> <img src="banner4.png" class="bannerSize"> </div> <script> function showSlides(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); } showSlides(".aprendiz", 5000); </script> .... EX2 <?php $ggCon = mysqli_connect("localhost", "root", "123", "bd_teste" ); if(mysqli_connect_error()){ echo "falha na conexão". mysqli_connect_error(); } else{ echo "CONEXAO OK"; } ?> <?php $phpSelf = $_SERVER['PHP_SELF']; if(isset($_POST["enviar"])){ @$banner_nome = $_POST['banner_nome']; @$banner_link = $_POST['banner_link']; $ggSql = mysqli_query($ggCon, "INSERT INTO tabela_aprendiz ( banner_nome , banner_link )VALUES( '".$banner_nome."' , '".$banner_link."' )"); } ?> <form action="<?php echo $phpSelf;?>" method="post" name="form1" id="form1" autocomplete="off"> banner_nome <input type="text" required name="banner_nome" value=""> banner_link <input type="text" required name="banner_link" value=""> <input type="submit" name="enviar" value="Salvar"> </form>

Funcionou bem Marcos, obrigado. Um detalhe: E ao clicar fora do textarea ou em outro campo qualquer, como fazer a frase sumir?

Olá pessoal. Quero muito exibir dentro do (elemento p) a quantidade de caracteres que vai sendo digitado no campo de texto <textarea maxlength="100" onkeyup="funcContador()"> </textarea> <p id="idToto"></p> <script> function funcContador(){ var maximo = 100; var quantidadeDigitada = maximo.length; if (quantidadeDigitada ==0){ document.getElementById('idToto').innerHTML = ""; } if (quantidadeDigitada ==1){ document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracter digitado - máximo " + maximo; } if (quantidadeDigitada > 1){ document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracteres digitados - máximo " + maximo; } if (quantidadeDigitada >= maximo){ document.getElementById('idToto').innerHTML = "Limite de caracteres atingido !"; } } </script>

A solução realmente existe, vou estudar mais para entender melhor. Valeu !

Olá pessoal. Por padrão no visual studio code as pastas ficam na ordem alfabética EX: pasta1 pasta2 pasta3 pasta4 pasta5 É possível colocar as pastas na ordem desejada através de alguma regra json? EX: pasta3 pasta1 pasta5 pasta2 pasta4 * Não é pra deixar as pastas na ordem descendente ou ascendente e sim na ordem que for colocada através de alguma regra json. É possível ?

Olá pessoal. No Visual studio code, movo facilmente pra cima e pra baixo uma linha de código qualquer, usando apena alt+seta pra cima ou alt+seta pra baixo. Quero fazer a mesma coisa com as pastas ou seja mover as pastas pra cima ou pra baixo, mas não sei que extensão instalar no visual studio code. Alguém sabe?

Olá pessoal. No visual studio code as pastas criadas ficam na ordem alfabética. EX pastaCarro pastaLivro pastaMouze pastaProjetor pastaTeclado Existe alguma extensão para visual studio code que torne possivel deixar as pastas na ordem desejada ? EX: pastaProjetor pastaMouze pastaLivro pastaTeclado pastaCarro https://marketplace.visualstudio.com/

Com alt+seta movo facilmente uma linha de código qualquer para a posição desejada. Quero fazer a mesma coisa com as pastas ou seja mover para a posiçao desejada. Não quero que a pasta fique na ordem descendente ou ascendente e sim que seja movida para a posição desejada igual como se move uma linha de código qualquer. https://marketplace.visualstudio.com/

Olá pessoal. Ex1 encontra a palavra específica dentro de uma string. Até aqui tudo ok. EX1 <?php $text = "vamos caminhar para relaxar um pouco"; if (preg_match('/\caminhar\b/', $text)) { echo "correto"; } else { echo "incorreto"; } ?> ... Ex2 quero muito que aceite três palavras específica: cantar, brincar e pular EX2 <?php $string = 'cantar'; # cantar, brincar, pular $regra = '/^[a-z]$/i'; if( preg_match($regra, $string) == true){ print "correto"; } else{ print "incorreto"; } ?>

Marcos, funcionou bem. Obrigado !

washalbano, funcionou bem. Obrigado ! Marcos, funcionou bem. Obrigado !