Biel.

Olá pessoal. Ao pressionar o botão, estou tentando deixar selected todos os itens de todos os select. <select id="mySelect1" size='3'> <option >aa</option> <option >bb</option> <option >cc</option> </select> <select id="mySelect2" size='3'> <option >dd</option> <option >ee</option> <option >ff</option> </select> <select id="mySelect3" size='3'> <option >gg</option> <option >hh</option> <option >ii</option> </select> <button onclick="myFunction()">botão</button> <script> function myFunction() { //document.getElementById("mySelect").selectedIndex = "2"; document.getElementById("mySelect").selected = true; } </script>

Wanderval, funcionou. Obrigado !

Olá pessoal, estou tentando imprimir este resultado. Alguma dica? aprendiz1 aluno2 aprendiz2 aluno1 <?php for($a=1; $a<=2; $a++){ ?> aprendiz<?=$a?><br> <?php } for($b=2; $b>=1; $b--){ ?> aluno<?=$b?><br> <?php }?>

Funcionou incrivelmente bem Omar, mas para fechar com chave de ouro e nota 10 pra você faltou o seguinte: Ao encostar o cursor sobre o slide1 ou slide2 ou slide3 ou slide4 tem que aparecer o link certo da imagem.

Olá pessoal . Como adicionar os eventos onmouseover e onmouseout no código abaixo ? Estou tentando parar o slide ao colocar o cursor sobre a imagem e ao tirar o cursor da imagem voltar a funcionar normalmente. <style> #boxPrincipal { max-width: 1024px; width: 100%; height: 100px; margin: auto; padding: 0px; text-align: center; background-color: #FFA; border: 1px solid blue; } #box1 { width: 100%; max-width: 190px; height: 60px; /* position: relative; */ bottom: 0; } #imgtete { /* position: absolute; */ bottom: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 800ms; } #imgtete.selected { opacity: 1; } </style> ... <div id="boxPrincipal"> <div id="box1"> <a href="link1"> <img src="slide1.png" id="imgtete"> </a> <a href="link2"> <img src="slide2.png" id="imgtete"> </a> <a href="link3"> <img src="slide3.png" id="imgtete"> </a> <a href="link4"> <img src="slide4.png" id="imgtete"> </a> </div> </div> ... <script> contador = 0, images = document.querySelectorAll("#imgtete") quantidade = images.length; //quantidade = 4; let rrr; rrr = setInterval(function () { images[contador] .classList.remove("selected") contador++ if(contador >= quantidade) contador = 0 // volta para o começo images[contador] .classList.add("selected") ; }, 1000); // clearInterval(rrr); </script>

Olá pessoal. Ao arrastar o scroll pra baixo o height do box1 aumenta e ao arrastar pra cima o height do box1 diminue. Como parar o height do box1 em 100px ? Mesmo continuando arrastando o scroll pra baixo? <style> .box1 { width:500px; background:green; } #b1{ margin-top:800px; display:block;} .hr1{margin-top:5000px;margin-bottom:5000px;display:block;} </style> <hr style="display:block; width:100%; margin-top:200px;" /> <div class="box1" id="box1">box1</div> <hr style="display:block; width:100%; margin-top:200px;" /> <p id="p2"></p> <script> window.onscroll = function() {arrastar()}; function arrastar(){ let tete = document.body.scrollTop; document.getElementById("p2").innerHTML = tete; let limite = 100; let box1 = document.getElementById('box1').style.height=tete; } </script> <b id="b1">contéudo</b>

Olá pessoal. O código abaixo rotaciona números sem parar. Como fazer para rotacionar imagens sem parar ? <style> #boxPrincipal{ max-width:1650px; width:100%; height:200px; margin:auto; padding:0px; text-align:center; background-color:#FFA; border:1px solid blue; } #box1 { width: 190px; height:60px; } #imgTete{ width:100%; height:100%; opacity: 0; transition: opacity 900ms; } </style> .... <!-- <div id="boxPrincipal"> <div id="box1"> <a href="link0"><img src="image1.png" id="imgTete" />link0</a> <a href="link1"><img src="image2.png" id="imgTete" />link1</a> <a href="link2"><img src="image3.png" id="imgTete" />link2</a> <a href="link3"><img src="image4.png" id="imgTete" />link3</a> <a href="link4"><img src="image5.png" id="imgTete" />link4</a> </div> </div> --> <p id="idggg"></p> <script> var executa; intervalo = 500, maximo = 10, element = document.getElementById('idggg'); // imagens = document.querySelectorAll('#imgtete'); function funcStart() { var contador = 0; executa = setInterval(function () { contador++; element.innerHTML += contador; if(contador == maximo){ contador=0; element.innerHTML = ' ' + contador; } }, intervalo); } funcStart(); </script> .....

Esqueci de um detalhe importante: No css esqueci de trocar o seletor img por .imgAprendiz . Fiz alteração no css e javascript e alterei img por .imgAprendiz e o slide parou de funcionar . Como sou iniciante em javascript não conseguir fazer funcionar. Manda uma luz ae pessoal. Obrigado !

Olá pessoal. Estou tentando abrir php no browser através do vs code shift+f6 . instalei Open PHP/HTML/JS In Browser e não deu certo - o script não é executado , pelo contrário, tudo aparece no formato texto. Alguém sabe o que está faltando fazer ou o que foi feito errado? Obrigado !

Perfeito. Funcionou muito bem. Obrigado Omar .

Olá pessoal. O código abaixo, à ação é disparada assim que a página é carregada e para sempre no 10. Como fazer com que fique rotacionando sem parar de 1 a 10 ? <p id="idggg"></p> <script> var executa, intervalo = 100, maximo = 10, element = document.getElementById('idggg'); // --------------------------------------------------- function func1() { var contador = 0; executa = setInterval(function () { contador++; element.innerHTML += ' - ' + contador; if(contador == maximo){ func2(); } }, intervalo); // executa } // func1 // --------------------------------------------------- function func2() { clearInterval(executa); } // --------------------------------------------------- func1(); </script>

Olá pessoal. O código abaixo, à ação é disparada assim que a página é carregada. Como para à ação quando chegar no nº 20 ? <p id="idggg"></p> <script> var maximo = 20; var intervalo = 500; element = document.getElementById('idggg'); var contador=1; setInterval(function () { //var cont = contador++; element.innerHTML += contador++ + '<br>' ; }, intervalo); // for($i=1; $i<=20;$i++) // clearInterval(maximo); // window.stop(); </script>

Me perdi nos códigos. Funcionou perfeitamente. Obrigado !

.. ...

Olá pessoal o slide abaixo está funcionando, mas os links não funcionam. Como fazer os links funcionar ? Obrigado ! <style> #boxPrincipal{ max-width:1024px; width:100%; height:100px; margin:auto; padding:0px; text-align:center; background-color:#FFA; border:1px solid blue; } #box1 { width: 100%; max-width: 190px; height:60px; position: relative; bottom:0; } #imgtete{ position: absolute; bottom:0; width: 100%; height: 100%; opacity: 0; transition: opacity 800ms; } #imgtete.selected{ opacity: 1; } </style> <div id"boxPrincipal"> <div id="box1"> <a href="link1"> <img src="slide1.png" title="link1" target="_blank" id="imgtete"> link 1 </a> <a href="link2"> <img src="slide2.png" title="link2" target="_blank" id="imgtete"> link 2 </a> <a href="link3"> <img src="slide3.png" title="link3" target="_blank" id="imgtete"> link 3 </a> <a href="link4"> <img src="slide4.png" title="link4" target="_blank" id="imgtete"> link 4 </a> </div> </div> <script> inicioDaAcao = 0, images = document.querySelectorAll("#imgtete") quantidade = images.length; function nextImage() { images[inicioDaAcao] .classList.remove("selected") inicioDaAcao++ if(inicioDaAcao >= quantidade) inicioDaAcao = 0 images[inicioDaAcao] .classList.add("selected") } setInterval(function() { nextImage() }, 1000); </script>

.

não funcionou , mas vou continuar tentando

Compreendo wanderval. Não sei nada de javascript e gostaria de mais tempo para aprender. Tudo que agrega, valorizo, desde uma "simples dica" do ponto de vista de muitos, até uma dica incrível. O que posto na maioria das vezes está mais de 90% pronto. Se uma dica sua ou de qualquer outra pessoa ajudar no fechamento da tarefa é só alegria. As dicas de todos vocês tem me ajudado muito. Obrigado !

Olá pessoal. Ao pressionar start à ação é disparada normalmente. Ao pressionar stop como parar à ação? <button onclick="func1()">start</button> <button onclick="func2()">stop</button> <p id="idggg"></p> <script> function func1() { var intervalo = 1000; var element = document.getElementById("idggg"); setInterval(function(){ element.innerHTML += " Hello " }, intervalo); } function func2() { clearInterval(intervalo); // window.stop(); } </script>

Perfeito Omar. Obrigado !

Olá pessoal. EX1 e EX2 o nome da function e a mesma e quero manter os nomes iguais. Quando clico no botao1, imprime aluno ao invés de aprendiz, porque javascript pega sempre o último valor. Existe alguma forma do EX1 não enxergar nenhum dado do EX2, mesmo os dados sendo iguais ? EX1 <button onClick="myFunction1()">botao1</button> <p id="toto"></p> <script> function myFunction1() { var x = document.getElementById("toto").innerHTML = 'aprendiz'; } </script> <hr> EX2 <button onClick="myFunction1()">botao2</button> <p id="toto"></p> <script> function myFunction1() { var x = document.getElementById("toto").innerHTML = 'aluno'; } </script>

Ótima dica. Vou colocar o manipulador de evento sempre depois do document e nunca antes. Obrigado !

Queria colocar algum tipo de bloqueador no final do script 1 e impedir script 1 de enxergar algum dado do script 2 e fazer a mesma coisa com script 2 - colocar um bloqueador no final do script 2 e impedir script 2 de enxergar algum dado do script 3 e assim por diante .

Funcionou perfeitamente com duas imagens. Com base no seu script, vou tentar fazer com for porque o banner tem mais de 200 imagens . Também vou tentar parar o banner ao colocar o cursor por cima do mesmo. Obrigado !

Olá pessoal. O banner abaixo está funcionando normalmente, mas quero faze algumas alterações da seguinte forma: Tirar onload no body e colocar diretamente no javascript e tirar banner01 e banner02 do javascript e colocar na div class="principal" <style> .principal{ width:300px; height: 60px; overflow:hidden; margin:0 auto; padding:0px; background:pink; text-align:center; } #imgTete{ width:190px; height: 60px; } </style> <!--<body>--> <body onLoad="slide1()"> <div class="principal"> <img id="imgTete"> <!-- <img src="banner01.png" id="imgTete"> --> <!-- <img src="banner02.png" id="imgTete"> --> </div> </body> <script type="text/javascript"> function slide1(){ var tete=document.getElementById("imgTete"); tete.src="banner01.png"; tete=setTimeout("slide2()", 1000); } function slide2(){ var tete=document.getElementById('imgTete'); tete.src="banner02.png"; tete=setTimeout("slide1()", 1000); } </script>