5

Utilizo o jQuery-Tools pra criar um efeito personalizado de scroll em uma div como no exemplo a seguir:

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 20px;">start</td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option = "play";
  }
}

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};

function stop(){
  range.style.left = 0;
  cronometroAtivo = false;
  countms = 0;
  id_label_ms.innerHTML = countms + " s";

  clearInterval(counterms);
  cronometroAtivo = false;
};
.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;
  margin-left:10px;
  overflow:hidden;
  width: 1000px;
  margin-left:5px;
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 115px;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<body>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;">
    <tr>
      <td name="btStart"><img src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>

A intenção é criar um player de áudio personalizado, quando clicar em play, o handle começar a se movimentar junto com o count. Cada coluna da tabela representa 2 segundos.

Problema 1: Esse meu exemplo funciona localmente, mas não consegui fazer funcionar online, tanto aqui no Stack Snippets, quanto no jsFiddle e tanto quanto no codeOpen. A contagem inicia mas o handle não começa a se mover, criei um zip pra quem quiser testar localmente.

Essa nem é a questão principal, mas gostaria de entender o que há de errado pra que nessas ferramentas online ele não funcione corretamente?

Problema 2: Sei que a velocidade constante do handle deveria ser: Calculo da Velocidade Média ou seja 2/24 = 0,0834. Então, teoricamente na função start o calculo deveria ser:

range.style.left = range.style.left.substring(0, range.style.left.length-2) - 0,0834;

Porém não está se movimentando corretamente, está se movimentando muito devagar, tentei ajustar para mais e para menos, mas sempre parece ficar ou muito lento, ou muito rápido, isso também afeta o problema 3.

Problema 3: Desejo fazer um handle que possa ser personalizado, localmente se eu altero o estilo do handle, como no exemplo a seguir:

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 20px;">start</td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option = "play";
  }
}

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};

function stop(){
  range.style.left = 0;
  cronometroAtivo = false;
  countms = 0;
  id_label_ms.innerHTML = countms + " s";

  clearInterval(counterms);
  cronometroAtivo = false;
};
.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;
  margin-left:10px;
  overflow:hidden;
  width: 1000px;
  margin-left:5px;
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 55px;
  border: rgb(161, 233, 240) solid;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
  box-shadow:  0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<body>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;">
    <tr>
      <td name="btStart"><img src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>

O tempo do movimento do handle ao clicar no botão start fica estranho e aparentemente fica mais rápido sendo que não há alteração nenhuma na função:

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};
3
  • Eu posso te ajudar, por 50 pontos a resolver 1 dos 3 problemas...rsrssr pode até escolher qual deseja resolver, se a recompensa for 150 resolvo os 3 problemas, brincadeiras a parte, você poderia abrir 3 perguntas né, para que não fique tão amplo as respostas. 25/08/2015 às 14:42
  • Então @SneepSNinja, com exceção do problema 1, que é mais uma curiosidade propriamente dita, os outros 2 problemas eu tenho uma sensação que estão intrinsecamente ligados, achei melhor colocar tudo em uma questão só, mas não sei, se for necessário eu divido eles 25/08/2015 às 14:53
  • referente ao problema 3, poderia usar o jQuery, colocar um botão para mudar o tema e fazer uma simples troca de classes entre os elementos html é algo bem simples, acho que nem vale uma resposta, um comentário acho que já da p/ entender da uma olhada lá jqueryui.com/toggleClass 26/08/2015 às 12:22

2 Respostas 2

5
+50

Referente ao problema 1:

seu teste https://jsfiddle.net/xjyofffu/

meu teste https://jsfiddle.net/nq72w31a/

Ambos não funcionando porém da p/ ter uma idéia que a ordem de execução dos scripts faz diferença, e o jsfiddle esta arbitrando isso.

Outro ponto importante, dentro desse plugin jquery.tools.min.js tem implementado IFRAME coisa que o JSFiddle não aceita.

Referente ao Problema 2:

Temos os blocos com 23px + 1px de padding + 1 px de borda, da 25px, mas eles estão espaçados por causa do table então tens que tirar o cellspacing deixa ele zerado, então teremos 25px por bloco, ai podemos começar a fazer uma formula e alguns testes ficaria assim:

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
  //iniciar( document.getElementById("teste") );
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table" cellspacing="0">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 13px;"></td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option = "play";
  }
}

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 0.129;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};

function stop(){
  range.style.left = 0;
  cronometroAtivo = false;
  countms = 0;
  id_label_ms.innerHTML = countms + " s";

  clearInterval(counterms);
  cronometroAtivo = false;
};
.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;  
  overflow:hidden;
  width: 1000px;  
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 115px;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
  left: 13px;
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<html>
<head>


<link type="text/css" rel="stylesheet" href="style-teste.css" />


</head>
<body>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;" >
    <tr>
      <td name="btStart"><img id="teste" src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>
  <script src="script-teste.js"></script>
</body>
</html>

eu testei e ficou quase lá com um tempo em torno de 0.12 a 0.13 lá na parte range.style.left.substring(0, range.style.left.length-2) - 0.13; // por exemplo agora sou ruim de matemática ao meu ver teria que ser uma formula tipo 2/25 = 0.08, talvez seja esse setInterval=10 que esteja bugando sua formula a cada 10 mms tanto para mais quanto para menos, minha contribuição sobre o problema seria isso, os tamanhos dos blocos e o espaçamentos estava equivocado sobre eles.

Obs: Seu marcador esta mal posicionado no Start, ele tem que ficar encostado no primeiro bloco, fiz uma gambi ai removendo a palavra Start e mexi para posicionar ele ali rente ao primeiro bloco, vai de você ou deixar a palavra Start e posicionar ele, ou remover como eu fiz...

3
  • E no codeOpen? é o mesmo problema? 25/08/2015 às 16:01
  • 1
    É que ambos usam Iframe, o JSfiddle bloqueia a tag o codeOpen não bloqueia, mas deve dar algum pau na hora de rodar o seu codigo que usa iframe dentro do iframe de exibição do codeOpen 25/08/2015 às 17:33
  • Apesar de não me sentir 100% satisfeito, foi a melhor resposta rs 30/08/2015 às 4:26
0

Existe um bloqueio para a execução do seu script jquery.tools devido a sua saída retornar em um iframe, ele passa a ser um elemento em HTML e não um js, eu acredito que seja um problema fácil de resolver, tratando isso com outro plugin, porém outro problema é o uso de variáveis globais, que interagem nesse script. Eu redeclarei os elementos que não estão sendo reconhecidos globalmente, mas mesmo assim, como há uma saída em iframe, do movimento do script, ele bloqueia, eu não sei se há uma maneira de habilitar a visualização disso, mas aqui não ocorreu erros de script: https://jsfiddle.net/ivanferrer/037j5ua6/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .