Make jQuery-Tools handle a team

Question

Make jQuery-Tools handle a team

Navigation

#1 by (5 votes)
#2 by (0 votes)

5

I use jQuery-Tools to create a custom effect of scroll on a div as in the following example :

"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><inputid="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>

The intention is to create a custom audio player, when you click play, the handle begins to move along with the count. Each column in the table represents 2 seconds.

Problem 1 : This example works for me locally, but I could not make it work online, either here in Stack Snippets, or at jsFiddle and as much as in codeOpen . The count starts but the handle does not start moving, I've created a zip for anyone test locally.

This is not even the main issue, but would you like to understand what is wrong so that in these online tools it does not work correctly?

Problem 2 : I know the constant handle speed should be: or 2/24 = 0,0834 . So, theoretically in the function start the calculation should be:

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

But it is not moving properly, it is moving very slowly, I have tried to adjust it more and less, but it always seems to be either very slow or very fast, it also affects problem 3.

Problem 3 : I want to make a handle that can be customized locally if I change the style of the handle, as in the following example:

"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><inputid="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>

The time of the handle movement when clicking the start button is strange and seems to be faster, since there is no change in the function:

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);
};

javascript html css

asked by anonymous 21.08.2015 / 17:24

2 answers

0

There is a blockage for running your jquery.tools script because of its output returning in an iframe, it becomes an HTML element rather than a js, I believe it is a problem easy to solve by dealing with another plugin, but another problem is the use of global variables , which interact in this script. I will redeclare the elements that are not being globally recognized, but even then, as there is an iframe output, of the script's movement, it locks, I do not know if there is a way to enable visualization of this, but here no script errors occurred : link

27.08.2015 / 16:51

IIS error when published application Is it a good idea to insert inline SVG files?

score 5 · Accepted Answer

Regarding problem 1:

your test link

My test link

Another important point within this plugin jquery.tools.min.js has implemented IFRAME thing that JSFiddle does not accept.

Regarding Problem 2:

We have the blocks with 23px + 1px of padding + 1px of border, 25px, but they are spaced because of the table so you have to take the cellspacing leaves it zeroed, so we will have 25px per block, then we can start to make a formula and some tests would look like this:

"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><linktype="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>

I tested it and it was almost there with a time around 0.12 to 0.13 there in the part range.style.left.substring(0, range.style.left.length-2) - 0.13; // por exemplo now I'm bad of math in my view would have to be a formula type 2/25 = 0.08, maybe it's that setInterval = 10 which is bugging your formula every 10 ms for both more and less, my contribution on the problem would be that, the sizes of the blocks and the spacings was wrong about them.

Note: Your marker is badly positioned in Start, it has to stay against the first block, I made a gambi there removing the word Start and moved to place it next to the first block, you either leave the word Start and position it, or remove it as I did ...