Adventkalender

Kalender für OGE Ablauf: - Aktuelles Datum auslesen und prüfen ob zwischen 1.12.15 und heutigem Datum vorangegangene Tage liegen - vorangegangene Tage erweitern: Video-Teaser wird sichtbar - aktuellen Tag geschlossen lassen, bei Klick: Video-Teaser wird sichtbar - Klick auf zukünftige Tage: Meldung? - Klick-Event auf Video-Teaser legen: toggelt Video-Layer (Ressourcen für Video-Layer kommen per Skript, eingebunden im gleichem Template) später: - check ob andere Layer offen, diese schließen - prüfen, ob alles responsiv OK

by Fiddel

HTML

Heute: <h1></h1>


<div class="brick" id="day17">17</div>
<div class="brick" id="day10">10</div>
<div class="brick" id="day14">14</div>
<div class="brick" id="day4">4</div>
<div class="brick" id="day2">2</div>
<div class="brick" id="day23">23</div>
<div class="brick" id="day19">19</div>
<div class="brick" id="day18">18</div>
<div class="brick" id="day7">7</div>
<div class="brick" id="day22">22</div>
<div class="brick" id="day16">16</div>
<div class="brick" id="day11">11</div>
<div class="brick" id="day3">3</div>
<div class="brick" id="day9">9</div>
<div class="brick" id="day21">21</div>
<div class="brick" id="day13">13</div>
<div class="brick" id="day5">5</div>
<div class="brick" id="day1">1</div>
<div class="brick" id="day15">15</div>
<div class="brick" id="day24">24</div>
<div class="brick" id="day12">12</div>
<div class="brick" id="day8">8</div>
<div class="brick" id="day6">6</div>
<div class="brick" id="day20">20</div>

CSS

h1 {
    font:600 2em/1 Arial;
}
div {padding:1em;float:left;}

div.previous {
    text-decoration:line-through; color:#aaa;
}
div.today {
    background-color:red;color#fff;
}
div[id$="24"]{
    color:red;font-weight:bold;}
}

JavaScript

var currentDay = new Date().getDate();
$("h1").html( currentDay );

$(".brick[id*=" + currentDay + "]").addClass('today');

var divs = $('.brick').map(function(){
                if (this.id.replace('day','') < currentDay) return '#'+this.id;
           }).get().join(',');
$(divs).toggleClass("previous");