Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > Grafisch

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

krijgertje - 30/06/2016 22:13
Nieuw 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

Thomas - 01/07/2016 14:23
Moderator		Welke (serverside) (programmeer)technieken heb je tot je beschikking en/of met welke van deze heb je ervaring?

krijgertje - 01/08/2016 18:30
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.

Joel - 02/08/2016 14:05
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

Thomas - 02/08/2016 14:12

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:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>progress bar</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.bar-container  { position: relative; width: 750px; height: 25px; background-color: #ffcccc; }
.bar            { background-color: #ff0000; width: 0%; height: 100%; }
.bar-percentage { position: absolute; top: 0; left: 0; width: 750px; height: 25px; text-align: center; line-height: 25px; }
</style>
</head>

<body>
<div class="bar-container">
    <div class="bar" id="bar"></div>
    <div class="bar-percentage" id="percentage">0%</div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var now;
    // gotcha: months start counting at ZERO
    // note that this is LOCAL time
    var startDate = new Date(2016, 7, 2, 14, 11, 0, 0);
    var endDate   = new Date(2016, 7, 2, 14, 12, 0, 0);

    function drawBar() {
        now = new Date();
        if (now.getTime() < startDate.getTime()) {
            // we haven't started yet
        } else if (now.getTime() > endDate.getTime()) {
            // we are finished (already)
            $('#bar').css('width', '100%');
            $('#percentage').html('100%');
        } else {
            // bar progress is ongoing
            // parseInt strips "px" and converts it to a number
            // totalBarWidth = parseInt($('#bar').css('width'), 10);
            totalSeconds = endDate.getTime() - startDate.getTime();
            secondsUnderway = now.getTime() - startDate.getTime();
            fillWidth = parseInt((secondsUnderway / totalSeconds) * 100);
            $('#bar').css('width', fillWidth+'%');
            $('#percentage').html(fillWidth+'%');

            // call routine again in one second
            setTimeout(function() {
                drawBar();
            }, 1000);
        }
    }
    // give routine initial push
    drawBar();
});
//]]>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>progress bar</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.bar-container  { position: relative; width: 750px; height: 25px; background-color: #ffcccc; }
.bar            { background-color: #ff0000; width: 0%; height: 100%; }
.bar-percentage { position: absolute; top: 0; left: 0; width: 750px; height: 25px; text-align: center; line-height: 25px; }
</style>
</head>
 
<body>
<div class="bar-container">
    <div class="bar" id="bar"></div>
    <div class="bar-percentage" id="percentage">0%</div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var now;
    // gotcha: months start counting at ZERO
    // note that this is LOCAL time
    var startDate = new Date(2016, 7, 2, 14, 11, 0, 0);
    var endDate   = new Date(2016, 7, 2, 14, 12, 0, 0);
 
    function drawBar() {
        now = new Date();
        if (now.getTime() < startDate.getTime()) {
            // we haven't started yet
        } else if (now.getTime() > endDate.getTime()) {
            // we are finished (already)
            $('#bar').css('width', '100%');
            $('#percentage').html('100%');
        } else {
            // bar progress is ongoing
            // parseInt strips "px" and converts it to a number
            // totalBarWidth = parseInt($('#bar').css('width'), 10);
            totalSeconds = endDate.getTime() - startDate.getTime();
            secondsUnderway = now.getTime() - startDate.getTime();
            fillWidth = parseInt((secondsUnderway / totalSeconds) * 100);
            $('#bar').css('width', fillWidth+'%');
            $('#percentage').html(fillWidth+'%');
 
            // call routine again in one second
            setTimeout(function() {
                drawBar();
            }, 1000);
        }
    }
    // give routine initial push
    drawBar();
});
//]]>
</script>
</body>
</html>

Bedankt door: Joel

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten