Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="hours hours1 orange">A</div>
<div class="hours hours2 yellow">B</div>
<div class="hours hours3 blue">C</div>
<div class="hours hours4 green">D</div>
<div class="hours hours5 red">E</div>
<div class="hours hours6 grey">F</div>
<div class="hours hours7 black">G</div>  
<button class="collapse">collapse</button>
<button class="overlap1">sort</button>
<button class="reset">reset</button>
​
</body>
</html>
​
 
div.blue {
    background-color: #a4dcdf;
}
​
div.orange {
    background-color: #fd9226;
}
​
div.green {
    background-color: #88b37e;
}
​
div.yellow {
    background-color: #d8d03f;
}
​
div.red {
    background-color: #c16558;
}
div.grey {
    background-color: #cdcdcd;
}
div.black {
    background-color: #000;
}
div.hours1{
  top: 0px;
  left: 10px;
  width: 100px;//(110-10)
}
div.hours2{
  top: 30px;
  left: 80px;
  width: 50px;
}
div.hours3{
  top: 60px;
  left: 120px;
  width: 50px;
}
​
div.hours4{
  top: 90px;
  left: 5px;
  width: 70px;
}
​
div.hours5{
  top: 120px;
  left: 110px;
  width: 30px;
}
div.hours6{
  top: 150px;
  left: 130px;
  width: 70px;
}
div.hours7{
  top: 180px;
  left: 160px;
  width: 50px;
}
div.hours {
  position: absolute;
  height:20px;
  color: white;
  text-align:center;
  border:white;
  -webkit-box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  font: bold 18px Arial, Helvetica, Geneva, sans-serif;
  line-height:20px;     
}
​
button{
    position:static;
    margin-top:250px;
}
.collapse,
.overlap1,
.overlap2,
.overlap3,
reset{
    float:left;
}
​
 
data1 = [
  [1, 10, 110],
  [2, 80, 130],
  [3, 120, 170],
  [4, 5, 70],
  [5, 110, 140],
  [6, 130, 180],
  [7, 160, 210]
];
​
//just added for console output not needed
var divider="";
for (var i = 0; i < 80; i++) {
  divider += "_";
}
​
​
console.log(divider);
console.log("ORIGINAL ARRAY DATA1:", data1);
​
console.log(divider);
console.log("ORIGINAL dataA WITH ADDED COLUMN:", data1);
​
//add a column to keep track of the row, to start set it to  row 1
data1 = $.each(data1, function(index, value) {
  value[3] = 0;
});
​
function timelinesort(dataA){
​
//make a new Array to store the elements in with their new row number
var dataB = dataA.slice(0, 1);
​
console.log(divider);
console.log("INITIALIZED dataB WITH FIRST ELEMENT FROM dataA:", dataB);
​
​
//initialize the counter
var counter = 0;
​
console.log(divider);
console.log("INITIALIZED ROUNDS COUNTER:", counter);
​
​
dataA = $.map(dataA, function(value1, index1) {
​
//increment counter with 1 
counter++;
​
console.log(divider);
console.log("INCREMENTED ROUNDS COUNTER:", counter);
​
​
  dataA = $.map(dataA, function(value2, index2) {
​
​
    //exclude comparing an element with itself
    if(value2 != dataB[0]) {
      //check to see if elements overlap
      if(value2[2] >= dataB[0][1] && value2[1] <= dataB[0][2]) {
        console.log(divider);
        console.log("Round " + counter  + " from dataA: [" + value2 + "] overlaps with " + dataB[0] + " incrementing row counter with 1");
        //increment the value in column 3 (row counter) of the array
        value2[3]++;
        console.log(divider);
        console.log("Now the dataA has changed to this:", dataA);
        console.log("Meanwhile data1 has changed to this:", data1);
      } else {
        //if no overlap occurs check if the element is not already in the dataB array and if not check if it doesn't overlap with the existing elements
        if($.inArray(value2, dataB) == -1) {
          $.each(dataB, function(index3, value3) {
            if(value3[2] >= value2[1] && value3[1] <= value2[2]) {
              console.log(divider);
              console.log("Round " + counter + " from dataA: [" + value2 + "] overlaps with " + value3 + " incrementing row counter with 1");
              dataB.pop();
              //increment the value in column 3 (row counter) of the array
              value2[3]++;
            } else {
              //if no overlap occurs add the value to dataB
              dataB.push(value2);
              console.log(divider);
              console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
            }
          });
        } else {
          dataB.push(value2);
          console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
        }
      }
    }
    return [value2];
  });
  dataA = jQuery.grep(dataA, function(item) {
    return jQuery.inArray(item, dataB) < 0;
  });
  if(dataA.length >= 1) {
    dataB.unshift(dataA[0]);
    dataB = dataB.splice(0, 1);
  } else {
    dataA = [];
  }
  
});
​
}
//run the function
timelinesort(data1);
​
console.log(divider);
console.log("Finally the data1 has changed to this:", data1);
​
​
$(".collapse").click(function() {
  $.each(data1, function(index, value) {
    $("div.hours" + (index + 1)).animate({
      "top": 0
    }, "slow");
  });
​
});
​
$(".overlap1").click(function() {
  $.each(data1, function(index, value) {
    $("div.hours" + (index + 1)).animate({
      "top": (value[3]) * 30
    }, "slow");
  });
​
});
​
$(".reset").click(function() {
  $.each(data1, function(index, value) {
    $("div.hours" + (index + 1)).removeAttr('style');
  });
​
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
stofke72pro
0viewers