Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

LuanMartinsTI

loop de botão com javascript

Por , em Javascript

Recommended Posts

LuanMartinsTI    0

LuanMartinsTI
Postado

galera, tudo bem? Então é muito fora da minha area de atuação javascript, então preciso de ajuda para algo que é bem simples de se fazer com java, ou c, mas como não atuo com javascript não consigo fazer, eu estou desenvolvendo um player, mas preciso fazer com que o botão de player e stop seja sempre ativo, digo da seguinte forma, quando a pessoa carrega o player ele vem com o botão de de player aparecendo, mas se clicar da stop, e o botão de player fica com a imagem do stop e a musica para, isso eu consigofazer, o problema é quando o cara tenta da play para escutar novamente, minha função falta um loop que sempre inverte, oque eu tenho é o seguinte:

  

function PlayerPlay(){
                document.getElementById('player2').muted = false;
                event.preventDefault();
                $("#pause").css({"transition":"1s","display":"block", "z-index":"2"});
            }
            function PlayerPause(){
                document.getElementById('player2').muted = true;
                event.preventDefault();
                $("#play").css({"transition":"1s","display":"block", "z-index":"1"});
            }

botão 

<td colspan="2">
                                            <a onclick="PlayerPause()" id="pause"></a>
                                            <a onclick="PlayerPlay()" id="play"></a>
                                            <!--   -->
                                        </td>

então se vocês conseguiram entender a gambiarra, mas para quem não vou explicar, eu fiz as duas funções, e tem dois botoes, porem um vem com z-index inferior e aparece atras do outro, e quando clica ele recebe um z-index maior, é provavelmente errado isso, como eu deveria fazer?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

Pelo que entendi você precisa de apenas um botão, porém com duas funções. É isso?

A maneira que creio ser mais efetiva seria inverter a classe do botão a cada click.

Para isso eu faço assim:

 

1 - Crio apenas um elemento <a>, com a seguinte classe e id: 

<a class="play" title="Play" id="play-pause"></a>

2 - Depois eu crio um estilo para este elemento, onde teria os atributos genéricos, seguido dos atributos específicos para cada classe. Por exemplo: 

a#play-pause{       /*ESTILOS PARA O OBJETO, INDEPENDENTE SE FOR PLAY OU PAUSE*/
  display: block; 
  width: 64px;
  height: 64px;
  cursor: pointer;
}
 
#play-pause.play{     /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PLAY*/
  background: url(url da sua imagem "play") no-repeat;
}

#play-pause.pause{    /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PAUSE*/
  background: url(url da sua imagem "pause") no-repeat;
}

Aqui vem o script que alterna as classes, entre "play" e "pause": (usando a biblioteca jQuery). 

$('#play-pause').click(function(){
  var classeAtual = $(this).attr('class');
  
  if (classeAtual=='play'){
    
    // coloque aqui o que quer que faça quando clicar no play
    
  } else
  {
    
    // coloque aqui o que quer que faça quando cliar no pause;
    
  }    
  $(this).toggleClass('play').toggleClass('pause');
  $(this).attr('title', classeAtual=='play'? 'Pause':'Play');
});

Exemplo prático:

http://codepen.io/Eziquiel/pen/peGVex

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

LuanMartinsTI    0

LuanMartinsTI
Postado

Quando vi o codigo, e fui la na exibição pensei, certamente vai funcionar, mas para minha surpresa não, não sei algo que tenha feito aqui, então criei até outro arquivo e fiz exatamente como na exibição do Pen e mesmo assim não foi.

  

<!DOCTYPE html>
<html lang="en">
    <head>       
        <script src="js/jquery-1.11.3.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script>
            $('#play-pause').click(function(){
                var classeAtual = $(this).attr('class');

                if (classeAtual=='play'){
                  alert('Clicou no Play');
                }
                else
                {
                  alert('Clicou no Pause');
                }    
                $(this).toggleClass('play').toggleClass('pause');
                $(this).attr('title', classeAtual=='play'? 'Pause':'Play');
              });
        </script>
    </head>
    <body style="overflow: hidden;">
        <style>    
            a#play-pause{
              display: block;
              width: 64px;
              height: 64px;
              cursor: pointer;
              border-radius: 50%;
            }
            /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PAUSE*/
            #play-pause.play{
              background-image: url(http://png-2.vector.me/files/images/6/9/695406/icon_set_player_thumb);
              background-position: -82px -12px
            }
            #play-pause.pause{
              background-image: url(http://png-2.vector.me/files/images/6/9/695406/icon_set_player_thumb);
              background-position: -82px -78px
            }
        </style>
        <a class="play" title="Play" id="play-pause"></a>
    </body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

Deixe assim o seu script. Implementei a função $(document).ready pra resolver esse problema.

 

 

  

<script>
   $(document).ready(function(){
      $('#play-pause').click(function(){
    	var classeAtual = $(this).attr('class');

    	if (classeAtual=='play'){
          alert('Clicou no Play');
        }
        else
        {
          alert('Clicou no Pause');
        }    
        
        $(this).toggleClass('play').toggleClass('pause');
        $(this).attr('title', classeAtual=='play'? 'Pause':'Play');
      });
   });
</script>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

LuanMartinsTI    0

LuanMartinsTI
Postado

Cara funcionou perfeitamente, vlw, á a manha de quem entende o que fala!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

Reparei que você está chamando duas vezes a biblioteca JQuery. Use apenas uma delas. Veja:

 

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

 

São a mesma biblioteca. A diferença é que uma delas está formatada com identação, espaços, quebra de linhas, etc... enquanto a outra não está formatada. Ambas são idênticas em conteúdo. 

 

A questão do seu problema é a seguinte: como você criou seu script no inicio (antes do elemento <a> ser criado), então não funcionou. Com esta função o seu script foi carregado somente depois que todo o documento foi criado, resolvendo o problema.

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito