gleichmäßiger Abstand von HTML-Elementen entlang der Zeitachse

Question

Ich versuche, eine Zeitleiste zu erstellen, die skaliert wird, und fügt entlang der "Zeitleiste" Markierungen mit gleichem Abstand hinzu, sodass der Benutzer zusätzliche Zeiten innerhalb eines Admin-Bereichs hinzufügen kann.

Wenn zum Beispiel 4 Marker vorhanden waren, würden sie unabhängig von der Breite automatisch über 1/4 der Timeline aufgeteilt.

So wie diese < - | - | - | - | ->

Hier ist der Code:

<style> 

    body { 
     background: black; 
    } 
#timeline { 
    width:49.5%; 
    background: url(http://brendonwells.co.uk/CPD/ice-training/img/timeline.png) center center no-repeat; 
    background-size: 100%; 
    height: 30px; 
    position: relative; 
} 

.checkpoint { 
    position: absolute; 
    width: 1px; 
    height: 13px; 
    top: 13px; 
    margin-left: auto; 
    margin-right: auto; 
    background: white; 
    cursor: pointer; 
} 

.checkpoint:hover { 
    background: white; 
} 

.checkpoint p { 
    position: absolute; 
    height: 30px; 
    width:0; 
    bottom: -35px!important; 
    margin-left: auto; 
    margin-right: auto; 
    opacity: 0; 
    transition: 0.4s; 
    -o-transition: 0.4s; 
    -ms-transition: 0.4s; 
    -moz-transition: 0.4s; 
    -webkit-transition: 0.4s; 
} 

.checkpoint:hover p { 
    opacity: 1; 
} 

</style> 

<div id="timeline"> 
         <div class="checkpoint" > 
          <div class="rel"> 
           <p>5 Minutes</p> 
          </div> 
         </div> 

         <div class="checkpoint" > 
          <p>10 Minutes</p> 
         </div> 

         <div class="checkpoint" > 
          <p>15 Minutes</p> 
         </div> 

         <div class="checkpoint" > 
          <p>20 Minutes</p> 
         </div> 

         <div class="checkpoint" > 
          <p>25 Minutes</p> 
         </div> 

         <div class="checkpoint" > 
          <p>30 Minutes</p> 
         </div> 

         <div class="checkpoint" > 
          <p>35 Minutes</p> 
         </div> 
        </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

     <script> 


     //Set slide times 
     var time1 = 300; 
     var time2 = 600; 
     var time3 = 900; 
     var time4 = 1200; 
     var time5 = 1500; 
     var time6 = 1800; 
     var time7 = 2100; 

     //Array to keep all the times 
     var times = [time1, time2, time3, time4, time5, time6, time7]; 

     //variable to iterate through all of them 
     var chosenTime = 0; 

     //placement needs multiplier 
     var multiplier = 1; 

     function deliverTimes() { 
      $('.checkpoint').each(function() { 
       $(this).data("time", times[chosenTime]); 
       //console.log("The data is " + $(this).data('time')); 
       chosenTime++; 
       //console.log('running'); 
       placement($(this)); 
      }); 
     } 

     //Call the function 
     deliverTimes(); 

     //Clicking checkpoints 
     $('.checkpoint').click(function() { 
      video.currentTime = $(this).data("time"); 
     }); 

     //place the checkpoints 

     function placement($div) { 
      var width = $('#timeline').width(); 

      var margin = ((width/$('.checkpoint').length) - 10) * multiplier; 
      console.log(margin); 
      $div.css("left", margin + "px"); 
      multiplier++; 
     } 
       </script> 

http://brendonwells.co.uk/timeline.html

ich auch bereit, einen Link so dass die CSS mit etc werden könnte ..

Dank messed

Answer 1

Sie können Ihr gewünschtes Aussehen mit CSS3 flexbox erreichen, um den Abstand und die Breite zu behandeln. Hinzufügen und Entfernen von Checkpoints im HTML und CSS den Rest erledigen. Kein JS erforderlich.

HTML

<div id="timeline"> 
    <div class="checkpoint"> 
     <div class="rel"> 
      <p>5 Minutes</p> 
     </div> 
    </div> 

    <div class="checkpoint" > 
     <p>10 Minutes</p> 
    </div> 

    <div class="checkpoint" > 
     <p>15 Minutes</p> 
    </div> 

    <div class="checkpoint" > 
     <p>20 Minutes</p> 
    </div> 

    <div class="checkpoint" > 
     <p>25 Minutes</p> 
    </div> 

    <div class="checkpoint" > 
     <p>30 Minutes</p> 
    </div> 

    <div class="checkpoint" > 
     <p>35 Minutes</p> 
    </div> 
</div> 

CSS

body { 
    background: #000; 
} 

#timeline { 
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff; 
    color: #fff; 
    height: 30px; 
    display: flex; 
    position: relative; 
} 
#timeline::after { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    border-top: 1px dashed #fff; 
    top: 50%; 
    left: 0; 
} 
#timeline .checkpoint { 
    flex: 1; 
    position: relative; 
    height: 50%; 
    margin-top: 15px; 
    border-right: 1px solid #fff; 
} 
#timeline .checkpoint:last-child { 
    border-right: none; 
} 
#timeline .checkpoint p { 
    width: 0; 
    margin: 0; 
    cursor: pointer; 
    opacity: 0; 
    transition: all .3s ease; 
} 
#timeline .checkpoint p:hover { 
    opacity: 1; 
} 

https://jsfiddle.net/s5rL5eja/

Answer 2

Sie m Sie können dieses System hier Responsivegrid.css verwenden, um sie gleichmäßig zu verteilen, andernfalls könnten Sie eine Funktion verwenden, die die Breite für jeden der Prüfpunkte auf einen Prozentsatz von 100% einstellt. Also, wenn Sie 5 Kontrollpunkte haben, kann die Breite 19% pro Kontrollpunkt/Kind sein, mit einer Marge, die 1% der Gesamtbreite ist, und dann geben Sie entweder checkpoint:first-child oder checkpoint:last-child eine Marge von 0% (ich bin mir nicht sicher welche Klasse jeder Ihrer Checkpoints hat, aber Sie ersetzen einfach checkpoint mit welcher Klasse auch immer)

TLDR: Geben Sie jedem Kontrollpunkt einen Prozentsatz der gesamten Breite basierend auf einer js-Funktion. Machen Sie entweder den ersten oder den letzten Prüfpunkt mit einer Marge von 0%.