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 andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By Wilson Fernandes
      Olá! Preciso de ajuda para começar a construir gráficos de funções quadráticas em plano cartesiano. Já procurei várias fontes, mas nenhuma explica como construir um bom gráfico.
    • By luigiferrari
      Criei um Form para fazer Cadastro, sempre que o usuário clica no botão para cadastrar é enviado um e-mail para o ADM.
      O meu problema é o seguinte, quando tem algum campo não preenchido e o usuário clica em cadastrar, o email é enviado e só depois o alert do campo obrigatório aparece.
      Gostaria de um JS que desativa o botão cadastrar até todos os campos estarem preenchidos corretamente.
      E também que quando a pessoa clicasse no Botão cadastrar, ele iria desativar novamente, para evitar o usuário de clicar mais de uma vez e acabar enviando mais emails...
       
      Segue o meu form...
       
    • By penelopevitoria_
      Pessoal,
       
      estou com muitos problemas de layout em minhas páginas AMP. O que rola é que vários elementos estão saindo compridos ou esticados. Enfim, o AMP estraga coisas como formulário também. Vocês sabem se existe uma maneira massiva de corrigir esses problemas pelo plugin? Tenho muitas páginas com o layout comprometido e não achei nada na internet que me ajudasse a corrigir. 
       
      Aguardo retorno :D
    • By Chead
      Galera, aos trancos e barrancos consegui criar um formulário que seleciona o valor de um ingresso de acordo com a empresa que é associada.
      Para isso, ele seleciona no campo droplist "É associado?" e é retornado para ele mu droplist com o preço.
       
      Se não for associado retorna outro preço.
       
      Basicamente isso.
       
      Após isso, quando o formulário é enviado, ele vai diretamente para a página de pagamento(abrindo uma nova janela), e os dados da pessoa chega por email para mim.
       
      Até aí ok. Agora vai o problema:
       
      Gostaria de alterar parar ele ser redirecionado e não abrir uma nova janela.
      Meu código está aqui no github:
      https://gist.github.com/LucasMorato/6e6ac480aeebf3ba5f011e93ffadd3c7
       
      Sou novo no mundo do javascript, estou fazendo um curso mas por enquanto ainda estou no modulo básico(se deus quiser até o fim do ano estou no avançado hehe).
       
      Podem me ajudar? Desde já agradeço. 
×

Important Information

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