Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<table> <tr> <td><span class="day">27</span></td> <td><span class="day">28</span></td> <td><span class="day">29</span></td> <td><span class="day">30</span></td> <td><span class="day">1</span></td> <td><span class="day event">2</span></td> <td><span class="day event">3</span></td> </tr> <tr> <td><span class="day">4</span></td> <td><span class="day">5</span></td> <td><span class="day event">6</span></td> <td><span class="day event">7</span></td> <td><span class="day">8</span></td> <td><span class="day event">9</span></td> <td><span class="day event">10</span></td> </tr> <tr> <td><span class="day">11</span></td> <td><span class="day">12</span></td> <td><span class="day event">13</span></td> <td><span class="day event">14</span></td> <td><span class="day event">15</span></td> <td><span class="day event">16</span></td> <td><span class="day event">17</span></td> </tr> <tr> <td><span class="day">18</span></td> <td><span class="day event">19</span></td> <td><span class="day event">20</span></td> <td><span class="day">21</span></td> <td><span class="day">22</span></td> <td><span class="day event">23</span></td> <td><span class="day event">24</span></td> </tr> <tr> <td><span class="day">25</span></td> <td><span class="day">26</span></td> <td><span class="day event">27</span></td> <td><span class="day event">28</span></td> <td><span class="day">29</span></td> <td><span class="day">30</span></td> <td><span class="day">31</span></td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.day.event { background: #ffd2da; color: #fd7285; background: repeating-linear-gradient( -45deg , #ffd2da, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); } .day { position: relative; display: inline-block; text-align: center; background: #bee5ff; color: #587f99; background: repeating-linear-gradient( -45deg , #bee5ff, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); padding: 10px; width:100%; font-weight: 700; } .after-event .day{ color: black; background: #bee5ff; background-image: linear-gradient(145deg, #ffd2da 50%, transparent 50%); } td { width:45px; height:45px; padding:0px 10px; text-align:center; font-size:25px; font-weight:bold; } .black { background:#000; }
CSS
Autoformát
CSS reset
Až na konci
$('.day.event').first().css( 'background-image', 'linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%)' ); $('.day.event').parent().each(function (i, e) { var element = $(e); var nextElement=$(e).next(); if(nextElement.size() === 0) { nextRow = element.parent().next(); if(nextRow.size() === 0) { return; } nextElement = nextRow.children().first(); } if(nextElement.children().first().attr("class").indexOf("event") !== -1) { return; } nextElement.addClass('after-event'); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>