Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>
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 é carregadaSe 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](https://developer.mozilla.org/pt-BR/docs/Web/Events/scroll)>
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](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
}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);>
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 ,Poste os códigos no JSFiddle ( https://jsfiddle.net/ ) e passe o link
@Maujor segue link
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');
}
})@Maujor e @Omar~, muitíssimo obrigado amigos. Agora ficou perfeito.
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?