login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Bewegende tijdlijn over afbeelding...(door tijd aangestuurd)

Offline krijgertje - 30/06/2016 22:13
Avatar van krijgertjeNieuw lid Op een sportsite wil ik over het profiel (afbeelding) van het parcours een rode streep laten bewegen. Deze streep geeft aan waar de deelnemers zijn.
Deze rode streep moet op een bepaald tijdstip op een bepaalde positie op de afbeelding zijn.
Ook als de pagina gerefresht wordt.

De streep begint bijvoorbeeld om 14.00 uur op zaterdag 2 juli 2016 (met als start de linker zijde van de afbeelding) te bewegen en is om 16.35 uur op zaterdag 2 juli 2016 aan de rechterkant van de afbeelding gekomen.

Weet iemand hoe ik dit kan realiseren?
 

4 antwoorden

Gesponsorde links
Offline Thomas - 01/07/2016 14:23
Avatar van Thomas Moderator Welke (serverside) (programmeer)technieken heb je tot je beschikking en/of met welke van deze heb je ervaring?
Offline krijgertje - 01/08/2016 18:30
Avatar van krijgertje Nieuw lid Ha Thomas...
Het maakt me niet veel uit welke techniek je gebruikt.
PHP - JAVA - Html of een andere.
Ik ben bereid die te leren als het nodig is.
Daar zoek ik dan ook de best passende provider voor...
Belangrijk is dat het gerealiseerd kan worden.   
Offline Joel - 02/08/2016 14:05
Avatar van Joel Eigenaar Dit lijkt me wel iets dat je met javascript kan bekomen. Je zou een element over de image kunnen plaatsen dmv css (position: absolute) en dan zou je de breedte van dit element kunnen laten veranderen op tijdsbasis. In javascript kan je gebruik maken van setInterval(), deze functie wordt dan om de zoveel seconden uitgevoerd. In deze functie kan je dan een berekening doen op basis van tijd, en het element vergroten.

Het zal wel niet simpel worden om dit te realiseren vrees ik met weinig tot geen javascript ervaring. Succes in ieder geval 
Offline Thomas - 02/08/2016 14:12
Avatar van Thomas Moderator Is de snelheid waarmee deze streep beweegt lineair? Dan lijkt mij dit redelijk makkelijk te realiseren met JavaScript, HTML en CSS.

Het idee:
Je neemt de starttijd en de eindtijd. Hier zitten een totaal aantal seconden tussen (zeg Y). Dan pak je de huidige tijd. Deze is alleen relevant als deze tussen de start- en eindtijd valt. Als dit het geval is dan verstrijkt er, relatief gezien, tijd vanaf de starttijd. Dit is huidige tijd - starttijd (met de aanname dat de huidige tijd tussen begin- en eindtijd zit). Noem dit X.

Vervolgens heb je dan een balk die gevuld moet worden met een kleur. De breedte van de balk die gevuld moet worden is gelijk aan (X / Y) * breedte van de balk. Immers, indien de eindtijd is bereikt (huidige tijd = eindtijd) dan is X gelijk aan Y.

Het enige wat je nu nog hoeft te doen is, als je dit zou willen, de balk dynamisch updaten. Dit zou je simpelweg kunnen doen door een routine aan te roepen die de balk opnieuw tekent, of liever gezegd, de breedte van de balk (opnieuw) berekent. Dit doe je ook bij initialisatie wanneer je de balk voor het eerst tekent. Dit kun je altijd nog uitbreiden met animaties en andere toeters en bellen.

Voorbeeld implementatie:
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>progress bar</title>
  4. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  5. <style type="text/css">
  6. .bar-container { position: relative; width: 750px; height: 25px; background-color: #ffcccc; }
  7. .bar { background-color: #ff0000; width: 0%; height: 100%; }
  8. .bar-percentage { position: absolute; top: 0; left: 0; width: 750px; height: 25px; text-align: center; line-height: 25px; }
  9. </head>
  10.  
  11. <div class="bar-container">
  12. <div class="bar" id="bar"></div>
  13. <div class="bar-percentage" id="percentage">0%</div>
  14. </div>
  15. <script type="text/javascript">
  16. //<![CDATA[
  17. $().ready(function() {
  18. var now;
  19. // gotcha: months start counting at ZERO
  20. // note that this is LOCAL time
  21. var startDate = new Date(2016, 7, 2, 14, 11, 0, 0);
  22. var endDate = new Date(2016, 7, 2, 14, 12, 0, 0);
  23.  
  24. function drawBar() {
  25. now = new Date();
  26. if (now.getTime() < startDate.getTime()) {
  27. // we haven't started yet
  28. } else if (now.getTime() > endDate.getTime()) {
  29. // we are finished (already)
  30. $('#bar').css('width', '100%');
  31. $('#percentage').html('100%');
  32. } else {
  33. // bar progress is ongoing
  34. // parseInt strips "px" and converts it to a number
  35. // totalBarWidth = parseInt($('#bar').css('width'), 10);
  36. totalSeconds = endDate.getTime() - startDate.getTime();
  37. secondsUnderway = now.getTime() - startDate.getTime();
  38. fillWidth = parseInt((secondsUnderway / totalSeconds) * 100);
  39. $('#bar').css('width', fillWidth+'%');
  40. $('#percentage').html(fillWidth+'%');
  41.  
  42. // call routine again in one second
  43. setTimeout(function() {
  44. drawBar();
  45. }, 1000);
  46. }
  47. }
  48. // give routine initial push
  49. drawBar();
  50. });
  51. //]]>
  52. </body>
  53. </html>
Bedankt door: Joel
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2019 Sitemasters.be - Regels - Gehost door: FireMultimedia - Laadtijd: 0.159s