De PHPhulp kroeg
Openingsuren met puur html/css
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
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?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));
?>
$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
Vanuit daar kan je dit dan dynamisch maken met PHP.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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>
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>
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.
Werken met blokjes had ik ook al in gedachte maar ik zag nog niet echt hoe. Die 14% is zeker een goed idee.
Jan