Zeitgesteuertes Einblenden von Bereichen

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Zeitgesteuertes Einblenden von Bereichen

      Hallo

      Mit folgendem habe ich realisiert, das Bereiche nur zu bestimmten Zeiten eingebelndet werden. Sie werden nich einfach nur per css ausgebelndet sonder sind einfach nicht da.

      Als erstes habe ich eine php-Datei mit folgendem Inhalt erstellt.

      PHP-Quellcode

      1. <?php
      2. function showDatum($start, $end, $show) {
      3. $now = date("YmdHi");
      4. $isInRange = ($start <= $now) && ($now <= $end);
      5. if($show) {
      6. return $isInRange;
      7. } else {
      8. return !$isInRange;
      9. }
      10. }
      11. function showStunden($start1, $end1, $show1) {
      12. if($start1 > $end1)
      13. {
      14. $now1 = date("Hi");
      15. $isInRange1 = ($start1 <= $now1) || ($now1 <= $end1);
      16. if($show1) {
      17. return $isInRange1;
      18. } else {
      19. return !$isInRange1;
      20. }
      21. }
      22. else
      23. {
      24. $now1 = date("Hi");
      25. $isInRange1 = ($start1 <= $now1) && ($now1 <= $end1);
      26. if($show1) {
      27. return $isInRange1;
      28. } else {
      29. return !$isInRange1;
      30. }
      31. }
      32. }
      33. ?>
      Alles anzeigen


      Diese heist bei mir times.php und die liegt in einem Ordner phps.

      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 Ausgebeldt 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-Quellcode

      1. <?php include('phps/times.php');
      2. ?>
      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-Quellcode

      1. <?php if(showDatum('201506011022','201506242355',true)): ?>
      Erst kommt der Starzeitpunkt und dann der Endpunkt.

      Für den Stundenvergleich:

      PHP-Quellcode

      1. <?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-Quellcode

      1. <?php endif; ?>
      Das ist alles.

      Mal noch ein Beispielbild:

      zeit001.JPG


      Gruß Rainer
      ----------------
      Wenn Dir der Hund das liebste ist, denk nicht das wäre Sünde.
      Der Hund bleibt Dir im Sturme treu, der Mensch nicht mal im Winde.
    • WICHTIG WICHTIG WICHTIG WICHTIG WICHTIG


      Ich habe noch eine wichtige Datei vergessen. 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

      JavaScript-Quellcode

      1. /**
      2. * Passt die im Array angegebenen HTML Elemente in der ihrer Höhe an.
      3. * Der grösste Wert wird auf den Elementen als Inline-CSS gesetz.
      4. *
      5. */
      6. function fitHeight(){
      7. var elements = new Array(document.getElementById('imPgMn'), document.getElementById('imContent'));
      8. var tallestHeight = 0;
      9. for(var i = 0; i < elements.length; ++i) {
      10. if (elements[i] == null) continue;
      11. elements[i].style.minHeight = '600px';
      12. }
      13. for(var i = 0; elements.length != i; i++) {
      14. if (elements[i] == null) continue; // Prüft ob das HMTL-Element existiert
      15. var currentBoxHeight;
      16. currentBoxHeight = getComputedHeight(elements[i]);
      17. tallestHeight = Math.max(tallestHeight, currentBoxHeight);
      18. }
      19. for(var i = 0; i < elements.length; ++i) {
      20. if (elements[i] == null) continue;
      21. elements[i].style.height = tallestHeight + 'px';
      22. }
      23. }
      24. /**
      25. * Gibt die Höhe des Elmentes zurück als Int.
      26. * @retrun Höhe des Elementes als Int.
      27. */
      28. function getComputedHeight(element) {
      29. if( window.getComputedStyle ) {
      30. var elemHeight = window.getComputedStyle(element, null).height;
      31. return Math.ceil(separatePXFromValue(elemHeight));
      32. } else {
      33. // only for IE
      34. return parseInt(element.offsetHeight);
      35. }
      36. }
      37. /**
      38. * Wandelt den mitgegebenen PX-Wert in einen Int ohne Masseingeit um.
      39. * @retrun Int Wert.
      40. */
      41. function separatePXFromValue(value) {
      42. return parseInt(value.split('px')[0]);
      43. }
      44. /**
      45. * Cross-Browser Ereignis-Registrierung
      46. *
      47. * @param eventType
      48. * @param eventListener Funktion die ausgeführt werden soll
      49. * @param useCaption
      50. */
      51. function addEvent(eventType, eventListener, useCaption) {
      52. if (window.addEventListener) {
      53. window.addEventListener(eventType, eventListener, useCaption);
      54. return true;
      55. }
      56. if (window.attachEvent) {
      57. var result = window.attachEvent("on"+eventType, eventListener);
      58. return result;
      59. }
      60. return false;
      61. }
      62. addEvent("load", fitHeight, false);
      Alles anzeigen

      Eingebunden wird der Script im Header mit


      PHP-Quellcode

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


      Gruß Rainer

      ----------------
      Wenn Dir der Hund das liebste ist, denk nicht das wäre Sünde.
      Der Hund bleibt Dir im Sturme treu, der Mensch nicht mal im Winde.