Make jQuery-Tools Handle accompany a team

Question

Make jQuery-Tools Handle accompany a team

Asked 9 years, 3 months ago

Viewed 138 times

5

I use the jQuery-Tools to create a custom effect scroll in 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>
  <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>

The intention is to create a custom audio player, when you click play, Handle starts to move along with Count. Each column of the table represents 2 seconds.

Problem 1: This example of mine works locally, but I couldn’t make it work online, both here on the Stack Snippets and on jsFiddle and as far as in the codeOpen. The count starts but Handle doesn’t start to move, I created a zip for those who want to test locally.

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

Problem 2: I know the constant speed of Handle should be: that is to say 2/24 = 0,0834. So, theoretically in function start the calculation should be:

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

But it’s not moving properly, it’s moving very slowly, I tried to adjust for more and for less, but it always seems to stay either too slow, or too fast, it also affects problem 3.

Problem 3: I wish to make an Handle that can be customized locally if I change the style of 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>
  <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>

The time of Handle movement when clicking the button start gets weird and apparently gets faster when there is no change in 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);
};

I can help you, for 50 points to solve 1 of the 3 problems...rsrssr can even choose which one you want to solve, if the reward is 150 solve the 3 problems, jokes aside, you could open 3 questions right, so that it is not so broad the answers.

– SneepS NinjA

2015/08/25 at 14:42
So @Sneepsninja, except for problem 1, which is more a curiosity itself, the other 2 problems I have a feeling that are intrinsically linked, I thought it best to put everything in a question only, but I do not know, if it is necessary I share them

– MarceloBoni

2015/08/25 at 14:53
concerning problem 3, could use jQuery, put a button to change the theme and make a simple exchange of classes between the html elements is something very simple, I think it is not worth an answer, a comment I think already gives p/ understand a look there https://jqueryui.com/toggleClass/

– SneepS NinjA

2015/08/26 at 12:22

2 answers

5

Referring to problem 1:

your test https://jsfiddle.net/xjyofffu/

my test https://jsfiddle.net/nq72w31a/

Both not working but p/ have an idea that the order of execution of the scripts makes a difference, and jsfiddle is arbitrating it.

Another important point, within this plugin jquery.tools.min.js has implemented IFRAME which Jsfiddle does not accept.

Referring to Problem 2:

We have the blocks with 23px + 1px padding + 1 px edge, 25px, but they are spaced because of the table so you have to take the cellspacing let it zero, then we’ll have 25px per block, then we can start making 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>


<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>

I tested and stayed 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 at math in my view it would have to be a formula type 2/25 = 0.08, maybe it is this setInterval=10 that is bugging its formula every 10 mms both for more and for less, my contribution on the problem would be this, the sizes of the blocks and the spacing was wrong about them.

Obs: Your marker is poorly positioned in Start, it has to stand against the first block, I made a Ambi ai removing the word Start and I moved to position it there near the first block, it goes from you or leave the word Start and position it, or remove as I did...

And in codeOpen? is the same problem?

– MarceloBoni

2015/08/25 at 16:01
1

It is that both use Iframe, Jsfiddle blocks the tag codeOpen does not block, but should give some stick when running its code that uses iframe within the iframe of the codeOpen display

– SneepS NinjA

2015/08/25 at 17:33
Although not feeling 100% satisfied, was the best response rs

– MarceloBoni

2015/08/30 at 04:26

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Ivan Ferrer • **12,096** points · Answer 1 · 2015-08-27T14:51:57+00:00

There is a lock for the execution of your script jquery.tools due to its output returning in an iframe, it becomes an element in HTML and not a js, I believe it is an easy problem to solve, treating this with another plugin, but another problem is the use of variables global, that interact in this script. I redeclared the elements that are not being recognized globally, but even so, as there is an iframe output, the script movement, it blocks, I do not know if there is a way to enable the visualization of this, but here no script errors occurred: https://jsfiddle.net/ivanferrer/037j5ua6/