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 lang="de">
  <head>
    <meta name="description" content="Timeline" />
    <!-- CSS -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
    <!-- Javascript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
    <script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
    <script src="https://raw.github.com/dmotz/maskew/master/maskew.min.js"></script
    <title>Timeline</title>
  </head>
  
  <body class="container">
    <!-- Help Area-->
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Help:</a>
        <ul class="nav">
          <li><a href="http://twitter.github.io/bootstrap/" target="_blank">Bootstrap</a></li>
          <li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a></li>
        </ul>
      </div>
    </div>
    
    <div class="row-fluid">
      <div class="span12 timeline-container">
        <h1>Die Jahreszeiten unseres Sortiments</h1>
         <div class="row-fluid">
          <!--Zoom Controls-->
           <div class="btn-group controls">
             <button type="button" class="btn" id="zoom-out">-</button>
             <button type="button" class="btn" id="zoom-in">+</button>
           </div>
         </div>
         <div class="timeline-container row-fluid">
           <div class="legende span2" style="position: relative; top: 210px;">
              <h2>Legende</h2>
              <ul>
                <li class="row-fluid">
                  <span class="span9">eigene Salat- und Gemüseernte</span>
                  <span class="span2 pull-right green parallelogram-right"></span>
                </li>
                <li class="row-fluid">
                  <span class="span9">Salat- und Gemüseernte</span>
                  <span class="span2 pull-right raport-timeline parallelogram-right"></span>
                </li>
                <li class="row-fluid">
                  <span class="span9">eigene Obsternte</span>
                  <span class="span2 pull-right green parallelogram-left"></span>
                </li>
                <li class="row-fluid">
                  <span class="span9">Obsternte</span>
                  <span class="span2 pull-right raport-timeline parallelogram-left"></span>
                </li>
              </ul>
            </div>
            <div class="timeline">
              <ul class="intervals">
                <li class="span1">Januar</li>
                <li class="span1">Februar</li>
                <li class="span1">März</li>
                <li class="span1">April</li>
                <li class="span1">Mai</li>
                <li class="span1">Juni</li>
                <li class="span1">Juli</li>
                <li class="span1">August</li>
                <li class="span1">September</li>
                <li class="span1">Oktober</li>
                <li class="span1">November</li>
                <li class="last span1">Dezember</li>
              </ul>
            <ul class="tl-events">
<!-- 1. Block -->  
              <li class="row-fluid">
                <span class="span1 offset8 timeline-link"><a href="#">Feldsalat</a></span>
                <span class="span3 raport-timeline parallelogram-right">
                  <span class="no-skew-right">01.10 – 01.04</span>
                </span>
              </li>
              <li class="row-fluid">
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
<!-- 2. Block -->  
              <li class="row-fluid baseline">
                <span class="span1 offset2 timeline-link"><a href="#">Spinat</a></span>
                <span class="span3 raport-timeline parallelogram-right">
                  <span class="no-skew-right">01.10 – 01.04</span>
                </span>
                <span class="span4 pull-right raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset2">Spargel</span>
                <span class="span3 green parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset2">Kohlrabi</span>
                <span class="span8 raport-timeline parallelogram-right"></span>
              </li>
<!-- 3.Block -->
              <li class="row-fluid baseline">
                <span class="span1 offset3">Kopfsalat</span>
                <span class="span8 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset3">Radieschen</span>
                <span class="span8 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset3">Rettich</span>
                <span class="span8 raport-timeline parallelogram-right"></span>
              </li>
<!-- 4. Block -->                         
              <li class="row-fluid baseline">
                <span class="span1 offset4">Blumenkohl</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Bohnen</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Erbsen</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Erdbeeren</span>
                <span class="span3 green parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Eisbergsalat</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Endiviensalat</span>
                <span class="span6 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Gurken</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Johannisbeeren</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Kartoffeln</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Mangold</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Möhren</span>
                <span class="span6 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Pflaumen</span>
                <span class="span5 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Süßkirschen</span>
                <span class="span2 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset4">Weißkohl</span>
                <span class="span6 raport-timeline parallelogram-right"></span>
              </li>
<!-- 5. Block -->
              <li class="row-fluid baseline">
                <span class="span1 offset5">Aprikosen</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Brokoli</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Brombeeren</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Heidelbeeren</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Lauch</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Paprika</span>
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Rotkohl</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Steinpilze</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Tomaten</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset5">Zucchini</span>
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
<!-- 6. Block -->
              <li class="row-fluid baseline">
                <span class="span1 offset6">Äpfel</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset6">Birnen</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset6">Fenchel</span>
                <span class="span5 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset6">Mirabellen</span>
                <span class="span3 raport-timeline parallelogram-left"></span>
              </li>
<!-- 7. Block -->
              <li class="row-fluid baseline">
                <span class="span1 offset7">Kürbis</span>
                <span class="span3 green parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset7">Rote Beete</span>
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset7">Rosenkohl</span>
                <span class="span4 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset7">Sellerieknollen</span>
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
<!-- 8. Block -->
              <li class="row-fluid baseline">
                <span class="span1 offset8">Grünkohl</span>
                <span class="span2 raport-timeline parallelogram-right"></span>
              </li>
              <li class="row-fluid">
                <span class="span1 offset8">Schwarzwurzel</span>
                <span class="span3 raport-timeline parallelogram-right"></span>
              </li>
            </ul>
        </div>  
      </div>
    </div>
  </body>
</html>
 
ul li
{
  list-style: none;
}
​
h1
{
font-family: 'Droid Sans', arial, normal, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
color: #628f2c;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
margin-bottom: 12px;  
}
​
h2 {
font-family: 'Droid Sans', arial, normal, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
color: #628f2c;
border-bottom: 1px solid #000;
margin-bottom: 12px;
}
​
.row-fluid [class*="span"] {
  min-height: 10px !important;
  line-height: 12px !important;
  margin-top: 0.5em !important;
}
​
.raport{
   background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVUlEQVQYV2M8c+bMfwYgkFWQBFEo4PGD53A+I0ghIUUg1Ywv3zwFm4gMkE2CiWMoxKYIZCOKQlyKUKzGpwiukJAisEJY8CB7BlsoYCjEFVQoCvGFJwCJ9z6XnBRqpAAAAABJRU5ErkJggg==
   ) repeat;
}
​
.raport-timeline{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQYV2PcfWDTfwY04Orgx4guxjiqEBYk9AkeAD7HKAtD78X0AAAAAElFTkSuQmCC
   ) repeat;
}
​
 .parallelogram-left {
    -webkit-transform: skew(45deg);
       -moz-transform: skew(45deg);
        -ms-transform: skew(45deg)  
         -o-transform: skew(45deg);
}
​
.parallelogram-right {
    -webkit-transform: skew(-45deg);
       -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg)  
         -o-transform: skew(-45deg);
}
​
.timeline-link:hover + span .no-skew-right {
    display: inline-block;
}
​
.no-skew-right,
.no-skew-left
{
  display: none;
  -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
     -ms-transform: skew(45deg)  
      -o-transform: skew(45deg);
  background-color: #fff;
  padding: 0 6px 0 10px;
  margin-left: -10px
}
​
.no-skew-left:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 6.5px solid #fff;
    border-right: 6.5px solid transparent;
    position: absolute;
    top: 0;
    right: -12px;
}
​
.no-skew-right:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 12px solid #fff;
    border-right: 12px solid transparent;
    position: absolute;
    top: 0;
    right: -12px;
}
​
​
.baseline
{
  margin-top: 30px;
}
​
.legende
{
  background-color: #fff;
  font-size: 0.6em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}
​
.show-grid
{
  background-color: #ccc;
}
​
.no-margin
{
  margin: 0 !important;
}
​
.controls
{
  margin-bottom: 20px;
}
​
/* Timeline */
.timeline-container
{
  margin-bottom: 14px;
}
​
.timeline 
{
  height: 375px; /* fixed */
  overflow: auto; /* changed to hidden via JavaScript */
  cursor: move;
}
​
.green
{
  background-color: #6D9829;
}
​
ul
{
  margin-left:0 !important;
}
​
ul.intervals
{
  list-style-type: none;
  padding: 0;
  display: block;
  width: 1170px;
}
​
ul.intervals li {
    border-left: 1px solid #ccc;
    color: #000;
    float: left;
    font-size: 0.6em;
    margin: 0 0 30px 0 ;
    padding: 0 0 0 10px;
}
​
.tl-events { /* the UL */
  width: 1170px; /* the width required to hold all the info */
 
}
​
.tl-events li {
  float: left; /* allows the lis to stack against eachother */
  font-size: 0.8em;
}
​
 
$('.timeline').css({overflow: 'hidden'});
​
var clicking = false;
var previousX;
var previousY;
​
$('.timeline').mousedown(function(e) {
​
    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});
​
$('.timeline').mouseup(function() {
    clicking = false;
});
​
$('.timeline').mousemove(function(e) {
    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $('.timeline').scrollLeft($('.timeline').scrollLeft() + 10 * directionX);
        $('.timeline').scrollTop($('.timeline').scrollTop() + 10 * directionY);
        previousX = e.clientX;
        previousY = e.clientY;
    }
});
​
//Zoomfunction
$('#zoom-in').click(function() {
   updateZoom(0.1);
});
​
$('#zoom-out').click(function() {
   updateZoom(-0.1);
});
​
zoomLevel = 1;
​
var updateZoom = function(zoom) {
   zoomLevel += zoom;
   $('.timeline').children().css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
};
Output

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

Dismiss x
public
Bin info
janpro
0viewers