Zeitgesteuerte Darstellung von Bereichen

Möchte man Bereiche einer Seite nur zu bestimmten Zeiten angezeigt haben, gibt es in WebSite X5 dafür keine Funktion und keine anderen Möglichkeiten. Ich habe mir dafür mal wieder etwas mit php programmiert. Es erfolgt kein einfaches Ausblenden mit display:none sondern die Bereiche welche zu Zeit nicht angezeigt werden sollen, werden vom Server erst gar nicht bereit gestellt.

Als erstes habe ich eine php-Datei mit dem Namen times.php erstellt und in den Ordner phps gespeichert. Hier der Inhalt von times.php.

<?php
function showDatum($start, $end, $show) {
 $now = date("YmdHi");
 $isInRange = ($start <= $now) && ($now <= $end);
 if($show) {
return $isInRange;
 } else {
return !$isInRange;
 }
}
function showStunden($start1, $end1, $show1) {
if($start1 > $end1)
{
$now1 = date("Hi");
$isInRange1 = ($start1 <= $now1) || ($now1 <= $end1);
if($show1) {
 return $isInRange1;
} else {
return !$isInRange1;
}
}
else
{
$now1 = date("Hi");
$isInRange1 = ($start1 <= $now1) && ($now1 <= $end1);
if($show1) {
return $isInRange1;
} else {
return !$isInRange1;
}
}
}
?>

Die Funktion schowDatum vergleicht ein komplettes Datum im Format “YmdHi”.

Die Funktion showStunden vergleicht nur das Zeitformat “Hi”. Das verwende ich, wenn etwas jeden Tag zur gleichen Zeit Ein- und Ausgeblendet werden soll. Zum Beispiel Angebote ab Ü18 ab 22.00 Uhr bis 6.00 Uhr. Hier musste ich noch einen Vergleich einbauen ob die Starzeit größer als die Endzeit ist z.B 22.00 Uhr ist größer als 06.00 Uhr.

Nun zum Einbau in wsx5.

Auf der Seite wo es eingebaut werden soll kommt ganz am Anfang ein html-Feld mit der Höhe 0 und folgendem Inhalt:

<?php include('phps/times.php'); ?>

Dies holt sich den php-Code.

Möchte man nun einen Bereich haben, welcher Zeitgesteuert angezeigt werden soll erstellt man wieder ein html-Feld mit der Höhe 0 und folgendem Inhalt: Für die komplette Datum und Zeit abfrage:

<?php if(showDatum('201506011022', '201506242355',true)): ?>

Erst kommt der Starzeitpunkt und dann der Endpunkt mit folgender Reihenfolge JahrMonatTagStundeMinute. Für den Stundenvergleich:

<?php if(showStunden('2200', '0600',true)): ?>

Erst die Starzeit dann die Endzeit. Nun kann man ganz normal weitermachen wie man es von wxs5 gewohnt ist. Ist der zeitgesteuerte Bereich zu Ende, fügt man wieder ein html-Feld mit der Höhe 0 und folgendem Inhalt ein.

<?php endif; ?>

Das ist alles. Mal noch ein Beispielbild:

BILD

Hier noch eine wichtige Datei. Beim erstellen der Seite geht WSX5 davon aus, das alles dargestellt wird. Wird nun was ausgeblendet entsteht viel leerer Platz. Der folgende Java-Script, passt die Seitenhöhe automatisch an. Die Datei heist bei mir fitBoxHeight.js und liegt in einem Ordner mit dem Namen js. Eingebunden wird der Script im Header mit

<script src="js/fitBoxHeight.js" type="text/javascript"></script>

Code:

/**
 * Passt die im Array angegebenen HTML Elemente in der ihrer Höhe an.
 * Der grösste Wert wird auf den Elementen als Inline-CSS gesetz.
 *
 */
function fitHeight(){

  var elements = new Array(document.getElementById('imPgMn'), document.getElementById('imContent'));
  var tallestHeight = 0;

  for(var i = 0; i < elements.length; ++i) {
    if (elements[i] == null) continue;     	 
	 elements[i].style.minHeight = '400px';
  }

  for(var i = 0; elements.length != i; i++) {  
    if (elements[i] == null) continue; // Prüft ob das HMTL-Element existiert

    var currentBoxHeight;

    currentBoxHeight =  getComputedHeight(elements[i]);

    tallestHeight = Math.max(tallestHeight, currentBoxHeight);
  }

  for(var i = 0; i < elements.length; ++i) {
    if (elements[i] == null) continue;     	 
	 elements[i].style.height = tallestHeight + 'px';

  }
}


/**
 * Gibt die Höhe des Elmentes zurück als Int.
 * @retrun Höhe des Elementes als Int.
 */
function getComputedHeight(element) {
  if( window.getComputedStyle ) {
    var elemHeight = window.getComputedStyle(element, null).height;
    return Math.ceil(separatePXFromValue(elemHeight));
  } else {
    // only for IE
    return parseInt(element.offsetHeight);
  }
}

/**
 * Wandelt den mitgegebenen PX-Wert in einen Int ohne Masseingeit um.
 * @retrun Int Wert.
 */
function separatePXFromValue(value) {
  return parseInt(value.split('px')[0]);
}

/**
 * Cross-Browser Ereignis-Registrierung
 *
 * @param eventType
 * @param eventListener   Funktion die ausgeführt werden soll
 * @param useCaption
 */
function addEvent(eventType, eventListener, useCaption) {
  if (window.addEventListener) {
    window.addEventListener(eventType, eventListener, useCaption);
    return true;
  }

  if (window.attachEvent) {
    var result = window.attachEvent("on"+eventType, eventListener);
    return result;
  }	   
  return false;
}

addEvent("load", fitHeight, false);
Top