none
Div piscando/trocando de cor RRS feed

  • Pergunta

  • Bom dia Pessoal.

     

    Tenho o seguinte problema, tenho várias div's em minha tela, e estou usando um timer para a cada 5 segundos atualizar a página sem dar o Refresh, até ai, tudo perfeito.

    porém, agora eu preciso que meu div, fique "piscando" a cada segundo, sem ter que acessar o servidor e atualizar, quero simplesmente que ele pisque/troque de cor a cada segundo.

    Tem como fazer isso?

     

    Muito obrigado !

    quinta-feira, 25 de agosto de 2011 13:54

Respostas

  • é que ta acontecendo é o seguinte

    O script esta sendo excecutado assim que requisita a pagina.aspx. Aí sua função executará e tentará instanciar sua div pelo id. Aí está o problema. Pq o documento ainda não foi inicializado e por isso a variavel pisca retornará undefined. Voce deve só chamar essa função após o documento ter sido iniciado. Pra isso deve atribuir o evento seguinte :

    window.onload = function () { // aqui dentro chame a função setInterval }

    Ps: vc está fazendo assim na hora de instanciar

     var pisca = document.getElementById(divFase2);

    O correto é string, assim:

    var pisca = document.getElementById("divFase2");

    Se der erro será por outro motivo agora. É só postar. Abraço!

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:30
  • vai fazendo aos poucos, testando etapas.

    primeiro teste assim:

       function trocaCor()
    {
    alert('está funcionando');
    }

    depois tenta assim:

    function trocaCor()
    {
    var pisca = document.getElementById("divFase2");
    alert(pisca.id); // testa se a div esta sendo instanciada corretamente.
    }
    e assim por diante. Poderia postar o codigo pra vc completo, mas aí vc não tira suas duvidas...
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:43
  • Programador.C,

    Troque a chamada de pisca.style.color por pisca.style.backgroundColor. Isso funcionou nos testes que fiz aqui.

    Abs!

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:49
  • Tente desta maneira:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication_CSS.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>Untitled Page</title>
    
      <script type="text/javascript" language="javascript">
        window.onload = function(){setInterval("trocaCor()", 1000);}
       
        function trocaCor()
        {
          var pisca = document.getElementById("divFase2");
          if(pisca.style.backgroundColor == "green")
          {
           pisca.style.backgroundColor = "black";
           setTimeout("trocaCor();", 1000);
          }    
          else
          {
           pisca.style.backgroundColor = "green";
           setTimeout("trocaCor();", 1000);
          }
        }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <div id="divFase2" style="background-color: Green;">
        <br />
        <br />
        <br />
      </div>
      </form>
    </body>
    </html>
    
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:54
  • na verdade tem de ser esse nome (o ultimo). Pq o javascript é executado client-side. Então na hora que ele for procurar o elemento ele procurará pelo id do elemento renderizado na tela do usuario.  Então vc deve sempre colocar o id do elemento renderizado, senao dará erro quando estiver utilizando, por exemplo, MasterPages que alteram os nomes dos controles com runat=server.

    Esse primeito teste deu certo, então testa a condição agora, o if.

    faz a comparação das cores. Mas primeiro verifica qual é a que ele retorna.

    da um alert na propriedade style.backgroundColor.

    Ps: na div que vc ta querendo que mude de cor inicie ela com alguma cor de fundo. No html da pagina coloca um style pra ela e seta um background-color. Coloca White por exemplo. Aí na hora de testar ele deve alertar "White ou o código hexadecimal da cor";

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:54
  • Cara,

    Deixa a variavel pisca como estava, sem o .id no final.

    Outro erro que encontrei é que vc não estava fazendo a atribuição dentro do if e do else, pois a operação estava com == ao invés de =.

    Tem que ficar assim:

     

    <script type="text/javascript">
      
      window.onload = function(){setInterval("trocaCor()", 1000);} // trocará de cor a cada segundo
      
      function trocaCor()
      {
      var pisca = document.getElementById("divFase2");
      if(pisca.style.backgroundColor=="Green")
      {
       pisca.style.backgroundColor="Black";
      }  
      else
      {
       pisca.style.backgroundColor="Green";
      }
      }
    </script>
    

     


    Aqui está mudando de cor!

    E o id que vc tem que colocar é o que fica depois de compilado! No seu caso, ctl00_cphConteudo_divFase1.

    Abs!


    • Editado Vinicius TR quinta-feira, 25 de agosto de 2011 14:59 Informações adicionais.
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:56
  • Consegui !

    HAHAHA

     

    O erro era simples, meu "Green" estava em maiusculo, e ele não aceita, foi só colocar tudo em minusculo que ele mudou a cor.

     

    PERFEITO !

    Muuito obrigado a todos, de verdade !

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:16
    quinta-feira, 25 de agosto de 2011 15:15

Todas as Respostas

  • olá amigo,

    vc deve fazer uma função javascript que execute em intervalos de tempo que definir. Para isso vc deve chamar a função setInterval. Faz assim:

    <script type="text/javascript">

    setInterval("trocaCor()", 1000); // executará a função trocaCor a cada segundo

    function trocaCor()

    {

    // sua logica pra trocar de cor aqui

    }

    </script>

    quinta-feira, 25 de agosto de 2011 14:06
  • Olá!

    Para evitar o acesso ao servidor, você precisa implementar toda a lógica de mudança de cor no cliente, usando javascript e CSS.

    Abs!

    quinta-feira, 25 de agosto de 2011 14:08
  • Como seria essa lógico de troca de cor?

     

    Assim estaria correto?

     

    var

    ob = document.getElementById(ctl00_cphConteudo_divFase4);

    if

    (ob.style.color=="green"){

    ob.style.color=

    "black";

    }

    else{

    ob.style.color=

    "green";

    }

    }

    

    estou meio perdido em relação a isso...

    quinta-feira, 25 de agosto de 2011 14:13
  • Ja fiz minha lógica, e está dando errado =/
    quinta-feira, 25 de agosto de 2011 14:14
  • a propriedade color do style altera a cor do texto presente na div. Pra alterar a cor de fundo é backgroundColor. Seu codigo ta dando erro ou não ta fazendo o esperado?

    se tiver dando erro adiciona um "try" pra conseguir capturar o erro e ir testando. tambem coloca alguns "alerts" estrategicos para saber o valor que ta retornando na propriedade ou se ta entrando em determinado bloco de codigo. Coloca isso englobando tua logica:

    try

    {

    // tenta executar bloco de codigo. se der erro pula pro catch

    }

    catch(e)

    {

    alert(e); // alerta o erro se houver

    }

    quinta-feira, 25 de agosto de 2011 14:19
  • Seguinte, ficou assim meu script:

     <script type="text/javascript">
          setInterval("trocaCor()", 1000); // trocará de cor a cada segundo
          function trocaCor()
          {
            var pisca = document.getElementById(divFase2);
            if(pisca.style.backgroundColor=="Green")
            {
              pisca.style.backgroundColor=="Black";
            }        
            else
            {
              pisca.style.backgroundColor=="Green";
            }
          }
      </script>
    

    Porém, na variável pisca, está me retornando Undefinied =/

    E mesmo pegando o nome quando é compilado que fica outro, a variavel me retorna NULL, não sei o que pode ser.

    Está faltando alguma coisa?

    quinta-feira, 25 de agosto de 2011 14:23
  • é que ta acontecendo é o seguinte

    O script esta sendo excecutado assim que requisita a pagina.aspx. Aí sua função executará e tentará instanciar sua div pelo id. Aí está o problema. Pq o documento ainda não foi inicializado e por isso a variavel pisca retornará undefined. Voce deve só chamar essa função após o documento ter sido iniciado. Pra isso deve atribuir o evento seguinte :

    window.onload = function () { // aqui dentro chame a função setInterval }

    Ps: vc está fazendo assim na hora de instanciar

     var pisca = document.getElementById(divFase2);

    O correto é string, assim:

    var pisca = document.getElementById("divFase2");

    Se der erro será por outro motivo agora. É só postar. Abraço!

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:30
  • Agora ficou assim:

     

    Pisca ainda sim, continua setado como NULL e o projeto para =/

    <script type="text/javascript">
          
          window.onload = function(){setInterval("trocaCor()", 1000);} // trocará de cor a cada segundo
            
          function trocaCor()
          {
            var pisca = document.getElementById("divFase2");
            if(pisca.style.color=="Green")
            {
              pisca.style.color=="Black";
            }        
            else
            {
              pisca.style.color=="Green";
            }
          }
      </script>
    

     

    quinta-feira, 25 de agosto de 2011 14:34
  • agora eu coloquei o nome que ele fica quando compilado:

    ctl00_cphConteudo_divFase1

     

     

    Parou de dar o erro, porém, não está piscando :@@

    quinta-feira, 25 de agosto de 2011 14:36
  • vai fazendo aos poucos, testando etapas.

    primeiro teste assim:

       function trocaCor()
    {
    alert('está funcionando');
    }

    depois tenta assim:

    function trocaCor()
    {
    var pisca = document.getElementById("divFase2");
    alert(pisca.id); // testa se a div esta sendo instanciada corretamente.
    }
    e assim por diante. Poderia postar o codigo pra vc completo, mas aí vc não tira suas duvidas...
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:43
  • Ele passou pelo primeiro ALERT e pelo segundo, retornou o ID correto do div.

     

    Mas eu mudei o nome, estou colocando o nome que ele vira quando é compilado ctl00_cphConteudo_divFase1

    Não tem problema né?
    quinta-feira, 25 de agosto de 2011 14:48
  • Programador.C,

    Troque a chamada de pisca.style.color por pisca.style.backgroundColor. Isso funcionou nos testes que fiz aqui.

    Abs!

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:49
  • Agora ele passou bonitinho, só botei assim:

    var pisca = document.getElementById('ctl00_cphConteudo_divFase1').id;
    

     

    Porém, está dando erro no style.backgroundColor estão dizendo que ele é nulo ou não é um objeto =/

     

    to quase lá HAHAHA

    quinta-feira, 25 de agosto de 2011 14:52
  • Tente desta maneira:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication_CSS.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>Untitled Page</title>
    
      <script type="text/javascript" language="javascript">
        window.onload = function(){setInterval("trocaCor()", 1000);}
       
        function trocaCor()
        {
          var pisca = document.getElementById("divFase2");
          if(pisca.style.backgroundColor == "green")
          {
           pisca.style.backgroundColor = "black";
           setTimeout("trocaCor();", 1000);
          }    
          else
          {
           pisca.style.backgroundColor = "green";
           setTimeout("trocaCor();", 1000);
          }
        }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <div id="divFase2" style="background-color: Green;">
        <br />
        <br />
        <br />
      </div>
      </form>
    </body>
    </html>
    
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:54
  • na verdade tem de ser esse nome (o ultimo). Pq o javascript é executado client-side. Então na hora que ele for procurar o elemento ele procurará pelo id do elemento renderizado na tela do usuario.  Então vc deve sempre colocar o id do elemento renderizado, senao dará erro quando estiver utilizando, por exemplo, MasterPages que alteram os nomes dos controles com runat=server.

    Esse primeito teste deu certo, então testa a condição agora, o if.

    faz a comparação das cores. Mas primeiro verifica qual é a que ele retorna.

    da um alert na propriedade style.backgroundColor.

    Ps: na div que vc ta querendo que mude de cor inicie ela com alguma cor de fundo. No html da pagina coloca um style pra ela e seta um background-color. Coloca White por exemplo. Aí na hora de testar ele deve alertar "White ou o código hexadecimal da cor";

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:54
  • Cara,

    Deixa a variavel pisca como estava, sem o .id no final.

    Outro erro que encontrei é que vc não estava fazendo a atribuição dentro do if e do else, pois a operação estava com == ao invés de =.

    Tem que ficar assim:

     

    <script type="text/javascript">
      
      window.onload = function(){setInterval("trocaCor()", 1000);} // trocará de cor a cada segundo
      
      function trocaCor()
      {
      var pisca = document.getElementById("divFase2");
      if(pisca.style.backgroundColor=="Green")
      {
       pisca.style.backgroundColor="Black";
      }  
      else
      {
       pisca.style.backgroundColor="Green";
      }
      }
    </script>
    

     


    Aqui está mudando de cor!

    E o id que vc tem que colocar é o que fica depois de compilado! No seu caso, ctl00_cphConteudo_divFase1.

    Abs!


    • Editado Vinicius TR quinta-feira, 25 de agosto de 2011 14:59 Informações adicionais.
    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:17
    quinta-feira, 25 de agosto de 2011 14:56

  • Vinicius, verdade.

    Essa parte já arrumei, obrigado !

     

    Porém, o erro ainda está no style-backgroundColor, está dizendo que é nulo ou não é um objeto.

     

    =/

    quinta-feira, 25 de agosto de 2011 14:59
  • Posta aí seu codigo. talvez tenha alguma besteirinha errada.
    quinta-feira, 25 de agosto de 2011 15:06
  • Agora está assim meu código:

     <script type="text/javascript">
          
          window.onload = function(){setInterval("trocaCor()", 1000);} // trocará de cor a cada segundo
            
          function trocaCor()
          {              
            var pisca = document.getElementById('ctl00_cphConteudo_divFase1').id;
                    
            if(pisca.style.backgroundColor=="Green")        
            {
              pisca.style.backgroundColor="Black";
            }        
            else
            {
              pisca.style.backgroundColor="Green";
            }
          }
      </script>
    

     

    O erro está dando logo na 1º linhda do IF =/
    quinta-feira, 25 de agosto de 2011 15:06
  • e tem mesmo uma besteirinha errada. Na hora de instanciar. O codigo fica assim:

    <script type="text/javascript">

    window.onload = function(){setInterval("trocaCor()", 1000);} // trocará de cor a cada segundo

    function trocaCor()
    {
    var pisca = document.getElementById('ctl00_cphConteudo_divFase1'); // como tava a variavel pisca tava recebendo o id do elemento e não a instancia

    if(pisca.style.backgroundColor=="Green")
    {
    pisca.style.backgroundColor="Black";
    }
    else
    {
    pisca.style.backgroundColor="Green";
    }
    }
    </script>
    quinta-feira, 25 de agosto de 2011 15:08
  • Cara, é só tirar o .id da variável pisca. Assim:

    var pisca = document.getElementById('ctl00_cphConteudo_divFase1');
    

    quinta-feira, 25 de agosto de 2011 15:09
  • Realmente, agora parou de dar o erro.

     

    Porém, não está piscando =/ kkkkkk, não acontece nada..

    Infernoo !

    quinta-feira, 25 de agosto de 2011 15:10
  • Consegui debugar o script e dei QuikWatch e consegui ver o que me retorna, está retornando a cor certinha, porém, nada acontece ao executar o projeto =/
    quinta-feira, 25 de agosto de 2011 15:13
  • Qual o browser que vc está usando?
    quinta-feira, 25 de agosto de 2011 15:14
  • coloca um tempo maior, 3 segundos por exemplo, e ver se ta trocando de cor
    quinta-feira, 25 de agosto de 2011 15:14
  • Consegui !

    HAHAHA

     

    O erro era simples, meu "Green" estava em maiusculo, e ele não aceita, foi só colocar tudo em minusculo que ele mudou a cor.

     

    PERFEITO !

    Muuito obrigado a todos, de verdade !

    • Marcado como Resposta Progamador.C quinta-feira, 25 de agosto de 2011 15:16
    quinta-feira, 25 de agosto de 2011 15:15
  • Só mais uma coisa, quero passar esse script, pro .CS, como posso fazer?

     

    Usando o ScriptManager.RegisterStartupScript, dá certo?

     

    Como ficaria?

     

    Valeeu

    quinta-feira, 25 de agosto de 2011 16:13
  • Só você colocar o seu script no overload script, veja esta exemplo abaixo:

    ScriptManager.RegisterStartupScript(this, this.GetType(), "qualquerNome", "alert('Deu certo');", true);
    

    No caso o retira o script altert e coloque o seu, eu recomendo você usar o StringBuilder para deixar mais organizado, caso não consiga, você pode postar seu script para tentarmos fazer.
    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    quinta-feira, 25 de agosto de 2011 16:23
  • No alert eu coloco minha função toda do javascript?

     

    Ou só a chamado do onload?

     

    quinta-feira, 25 de agosto de 2011 17:02
  • só o  chamado para o onload
    quinta-feira, 25 de agosto de 2011 17:04
  • e vc não vai colocar dentro do alert. Esse alert é uma função que emite uma mensagem no browser. vc coloca assim:

    ScriptManager.RegisterStartupScript(this, this.GetType(), "qualquerNome", "window.onload = function() { //Minha Funcao };", true);

     

    quinta-feira, 25 de agosto de 2011 17:05
  • Perfeito !

     

    Mas só quero executar esse scrip agora através de uma condição dentro do meu .CS, como posso fazer pra não rodar sempre esse script?

    quinta-feira, 25 de agosto de 2011 17:07
  • é só vc colocar alguma condição,

     

    if(Minha condicao...)

    ScriptManager.RegisterStartupScript(this, this.GetType(), "qualquerNome", "window.onload = function() { //Minha Funcao };", true);
    quinta-feira, 25 de agosto de 2011 17:10
  • Qual seria essa condição ?? teria como detalhar melhor ??

    if ("A" == "A")
    {
      ScriptManager.RegisterStartupScript(this, this.GetType(), "qualquerNome", "window.onload = function() { //Minha Funcao };", true);
    }
    
    

     
    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/
    quinta-feira, 25 de agosto de 2011 17:10