Openingsuren met puur html/css

Door Jan R op 03-05-2020 09:14

1.471 views

Hi,

ik zou zoiets willen maken met puur html en css. Iemand een idee hoe dit kan.

via google vind ik bibliotheken en ing maar niets wat help :)

De foto is gemaakt met php imagecreate
De data komt uit een array
<?php
$uren[1] = array(array('start'=> 9, 'einde'=>12), array('start'=>13.5, 'einde'=>18), array('start'=>20, 'einde'=>24));
$uren[2] = array();
$uren[3] = array(array('start'=>11, 'einde'=>13.5), array('start'=>15, 'einde'=>20.5));
$uren[4] = array(array('start'=> 7, 'einde'=>12), array('start'=>14, 'einde'=>18));
$uren[5] = array(array('start'=> 6, 'einde'=>12), array('start'=>14, 'einde'=>19.334));
$uren[6] = array(array('start'=> 5, 'einde'=>12), array('start'=>14, 'einde'=>18));
$uren[7] = array(array('start'=> 8, 'einde'=>12), array('start'=>14, 'einde'=>18));
?>
Jan

- Ariën -

03-05-2020 10:06

Is het niet een idee om eerst een statische mockup-up te maken in HTML en CSS?

Vanuit daar kan je dit dan dynamisch maken met PHP.

R Rob Doemaarwat

03-05-2020 10:57

Een div met position: relative per dag, voor de volledige 24 uur. In die div kun je dan absolute de "open" blokken gaan positioneren (100%/24 = 4,16666% = 1 uur, dus weer vermenigvuldigen met je tijd in uren).


  <style>
    div.day{
      position: relative;
      font-size: 0; /* om geen last te hebben van de white-space tussen de div.hour's */
    }
    div.hour{
      display: inline-block;
      box-sizing: border-box;
      width: 4.16666666%;
      height: 24px;
      border-left: 2px solid lime;
      padding-left: 3px;
      font-size: 16px;
    }
    div.open{
      position: absolute;
      top: 2px;
      bottom: 2px;
      background: red;
    }
  </style>
  <div class="day">
    <div class="hour">0</div>
    <div class="hour">1</div>
    <div class="hour">2</div>
    <div class="hour">3</div>
    <div class="hour">4</div>
    <div class="hour">5</div>
    <div class="hour">6</div>
    <div class="hour">7</div>
    <div class="hour">8</div>
    <div class="hour">9</div>
    <div class="hour">10</div>
    <div class="hour">11</div>
    <div class="hour">12</div>
    <div class="hour">13</div>
    <div class="hour">14</div>
    <div class="hour">15</div>
    <div class="hour">16</div>
    <div class="hour">17</div>
    <div class="hour">18</div>
    <div class="hour">19</div>
    <div class="hour">20</div>
    <div class="hour">21</div>
    <div class="hour">22</div>
    <div class="hour">23</div>
    <div class="open" style="left: 35.416666667%; width: 14.58345%"></div>div>
    <div class="open" style="left: 54.1671%; width: 20.8335%"></div>
  </div>

Thomas van den Heuvel

03-05-2020 12:38

Wie gaat dit gebruiken? Een grafiek is dan misschien leuk, maar als ik wil weten wat de openingstijden van een winkel zijn heb ik liever een concrete lijst met tijden dan een grafische/abstracte voorstelling hiervan.

Een gebruiker zou niet hoeven te puzzelen om te achterhalen wanneer een filiaal geopend is, dit moet direct duidelijk zijn.

Je zou ook kunnen nadenken over een andere indeling, met een nauwkeurigheid van een half uur ofzo. 19.334 is bijvoorbeeld wel èrg specifiek.

Jan R

03-05-2020 14:00

19.3334 = 19u20. Dat was uitsluitend als een testje. De weergave is zowel tekst als grafisch. Misschien is mktime beter.

Werken met blokjes had ik ook al in gedachte maar ik zag nog niet echt hoe. Die 14% is zeker een goed idee.

Jan

Reageren

Inloggen om te reageren