Jump to content
s3c0

[RESOLVIDO] DIV + JS

Recommended Posts

Amigo, estou com um probleminha e não consigo resolver...

 

já revirei a internet inteira, mas não encontrei nada parecido com o que preciso.

 

A questão é o seguinte. Queria executar um comando JS assim que uma div aparecer na tela.

 

Abaixo estou deixando os codes

 

<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
						#progress {
							width:100%;
							height:20px;
							border: solid #808080 2px;
						    border-radius: 5px;
							background-image: linear-gradient( 90deg, green, yellow, red );
						}
						#processador{
							width: 0%;
							height: 16px;
							background-color: rgba(0, 0, 0, 0.5);
						}
						#memoria{
							width: 0%;
							height: 16px;
							background-color: rgba(0, 0, 0, 0.5);
						}
						#hd{
							width: 0%;
							height: 16px;
							background-color: rgba(0, 0, 0, 0.5);
						}
						</style>
						Processador
						<span data-bind="Usage"><div id="progress"><div id="processador"></div></div><div style="text-align:right;">20%</div></span>
						
						Memória
						<span data-bind="Usage"><div id="progress"><div id="memoria"></div></div><div style="text-align:right;">50%</div></span>
						
						Hard Disk
						<span data-bind="Usage"><div id="progress"><div id="hd"></div></div><div style="text-align:right;">80%</div></span>

 

 

JS

 

<script type="text/javascript">
						$("#processador").html(function(){
								alert("ok");
								var width = 1;
								var id = setInterval(frame, 10);
								var id2 = setInterval(frame2, 10);
								var id3 = setInterval(frame3, 10);
								  function frame() {
									if (width >= 20) {
									  clearInterval(id);
									} else {
									  width++; 
									  document.getElementById("processador").style.width = width + '%';
									}
								  }
								  function frame2() {
									if (width >= 50) {
									  clearInterval(id2);
									} else {
									  width++; 
									  document.getElementById("memoria").style.width = width + '%';
									}
								  }
								  function frame3() {
									if (width >= 80) {
									  clearInterval(id3);
									} else {
									  width++; 
									  document.getElementById("hd").style.width = width + '%';
									}
								  }
							  
						});
						</script>

 

A "animação" em si, está funcionando perfeitamente, porém ao carregar a página e não no momento em que a DIV aparece na tela

Share this post


Link to post
Share on other sites
44 minutos atrás, Maujor disse:

Olá @2s3co

Precisamos mais informações para ajudar:

1-) "...e não no momento em que a DIV aparece na tela"
No seu HTML não consta o DIV que "vai aparecer" na tela.

2-)Qual é o evento que faz com que o DIV apareça?

 

Olá @Maujor boa noite e obrigado pela resposta.

 

o DIV está sim no HTML.

 

<div id="processador"></div>

 

Acho que não ficou muito claro o que estou tentando fazer...

 

Ao rolar a página, quando esse DIV aparecer na tela, automaticamente executa o JS.

 

Da forma que está o JS é executado assim que a página é carregada

Share this post


Link to post
Share on other sites

Se eu entendi direito acho que é isso mais ou menos algo como isso:

document.addEventListener('scroll', function () {
    console.log(window.pageYOffset);
}, false);

 

Mais informações sobre eventos de scroll caso seja necessário:

https://developer.mozilla.org/pt-BR/docs/Web/Events/scroll

Share this post


Link to post
Share on other sites
11 horas atrás, Omar~ disse:

Se eu entendi direito acho que é isso mais ou menos algo como isso:


document.addEventListener('scroll', function () {
    console.log(window.pageYOffset);
}, false);

 

Mais informações sobre eventos de scroll caso seja necessário:

https://developer.mozilla.org/pt-BR/docs/Web/Events/scroll

 

@Omar~ é isso mesmo que estava precisando. Muitíssimo obrigado

 

consegui adaptar no meu script e está como queria.

 

Porém me surgiu um outro problema. Tem como parar o JS assim que atingir aquela "linha"? Pois toda vez que passa por aquela "linha", o JS é executado novamente.

 

if (window.pageYOffset == 2800){
	//função
}

 

Share this post


Link to post
Share on other sites

Use o método removeEventListener()
https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/removeEventListener

document.addEventListener('scroll', function () {
   ...;   
 document.removeEventListener('scroll', function, false)   
}, false);

Share this post


Link to post
Share on other sites
7 minutos atrás, Maujor disse:

Use o método removeEventListener()
https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/removeEventListener


document.addEventListener('scroll', function () {
   ...;   
 document.removeEventListener('scroll', function, false)   
}, false);

 

Olá @Maujor obrigado pela resposta.

 

usei da forma orientada, porém dá erro na linha add

 

Uncaught SyntaxError: Unexpected token ,

 

 

Share this post


Link to post
Share on other sites

Já que você está usando jQuery veja a solução a seguir:

$( window ).scroll(function() {
  if ($(window).scrollTop() == 2800){
    $('#processador').show(function(){
      var width1 = 0; var width2 = 0; var width3 = 0;
      var id = setInterval(frame, 30);
      var id2 = setInterval(frame2, 30);
      var id3 = setInterval(frame3, 30);
        function frame() {
          if (width1 >= 20) {
            clearInterval(id);
          } else {
            width1++; 
            document.getElementById("processador").style.width = width1 + '%';
            document.getElementById("proc1").innerHTML = width1 + '%';
          }
        }
        function frame2() {
          if (width2 >= 50) {
            clearInterval(id2);
          } else {
            width2++; 
            document.getElementById("memoria").style.width = width2 + '%';
            document.getElementById("mem1").innerHTML = width2 + '%';
          }
        }
        function frame3() {
          if (width3 >= 80) {
            clearInterval(id3);
          } else {
            width3++; 
            document.getElementById("hd").style.width = width3 + '%';
            document.getElementById("hd1").innerHTML = width3 + '%';
          }
        }  
    })  
    $(window).off('scroll');  
  }
})

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By VCastilho
      Bom Dia
      Estou fazendo uma pagina do meu site via Elementor, e começou a aparecer alguns erros no console que não consigo localizar a raiz.
      Inclusive a função de Carrossel de Imagens não está funcionando, esta inserido na Div porém não funciona, poderia me ajudar?
      Segue o link referente ao site:
       
    • By Guss
      A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS,  deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
    • By mxclxrx
      l>
          <head>
              <title>Pergunta 1</title>
          </head>
          <body>
              
              <h3>Pergunta 1</h3>
              <form name="resp" action="pergunta2.php" method="POST">
                  O que é nanotecnologia?<br><br>
                      a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br>
                      b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br>
                      c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br>
                      d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br>
                      e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br>
                      
                      <br><br>
                      <input type="submit" name="confirmar" value="confirmar">
              </form>
              <?php
                  
                  if(isset($_POST['confirma'])){
                      $resposta= $_POST['resposta'];
                      $certa= $_POST['certa'];
                      $certa= "b";s
                  
                  if($resposta==$certa){
                      echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>');
                  }else{
                      header('location:pergunta1.php');
                  }
                  }
              ?>
              
          </body>
      </html>
×

Important Information

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