[FRAGE] aktuelle Einträge hervorheben

asterix3 · 22. Feb. 2015

Hallo zusammen
Ich möchte gerne eine Zeile per class hervorheben, wenn das Datum eine Woche vorher bis eine Woche nachher zum jetzigen Zeitpunkt ist.

HTML:

 <td width="150" height="30" class="unaktuell"><strong style="padding-left: 5px;">Ausstellung, 31.05.2015</strong></td>
          <td width="150" class="unaktuell"><strong style="padding-left: 5px;"><a href="http://www.blabla.de" target="_new">Link</strong></td>

wenn es aktuell ist möchte ich den Code geändert in

HTML:

 <td width="150" height="30" class="aktuell"><strong style="padding-left: 5px;">Ausstellung, 31.05.2015</strong></td>
          <td width="150" class="aktuell"><strong style="padding-left: 5px;"><a href="http://www.blabla.de" target="_new">Link</strong></td>

Wie lässt sich das per JavaScript bewerkstelligen?
Vielen Dank für die Hilfe!

ToM80 · 22. Feb. 2015

Du brauchst dazu folgende Funktionen:

Datumsberechnung: JavaScript/Objekte/Date
Zugriff auf das Element: JavaScript/Objekte/DOM/element/getElementsByTagName

Besser noch, du gibst entsprechende Ids mit, dann musst du nicht durch iterieren:
JavaScript/Objekte/DOM/document/getElementById

Mit diesen Funktionen solltest du deinen Wunsch erreichen können. BItte les erstmal, versuch zu basteln und stelle konkrete Fragen. Ein fertiges Script bekommt man hier nicht, es sei denn du stellst es unter "Jobs" ein.

SteelWheel · 22. Feb. 2015

Grüße Dich,

ein paar Fragen, die bei der Lösung hilfreich sind:
1. Inwiefern lässt sich der hier gezeigte Source verbessern/ändern/verwerfen? (da steinalt, inline-css, schlechter Stil durch Wiederholungen, unperformant)
2. Inwiefern lässt sich der Source erweitern? (würde man erweitern können, wäre es einfacher [explizit um semantische Helferlein])
3. Handelt es sich um eine extern erreichbare Ansicht? (könnte ich das sehen bzw. erreichen diese Informationen auch Suchmaschinen?)

Ok, das ist jetzt erstmal wieder mit dem nassen Lappen direkt ins Gesicht - es tut mir auch immer wirklich leid.

Zunächst: Ja, das lässt sich in JavaScript bewerkstelligen - aber hierfür wäre es VON VORTEIL, wenn Du gezeigten Source mind. "erweitern" könntest. Ich spiele explizit auf das Tag "timestamp" an. Du könntest nach (!) Rendern der Seite alle timestamps holen und Deinen Bedingungen unterwerfen und im Falle von "true" das Elterntag (td) um die Klasse "aktuell" erweitern. Das sähe bspw. so aus (jQuery zu Hilfe genommen) ...

Code:

// CSS
.strong { font-weight:bold; padding-left: 5px; }

// HTML
<td class="unaktuell strong">Ausstellung, <time datetime="2015-05-31T08:00+01:00">31.05.2015</time></td>

// JavaScript
$("time").each(function(){
  var thisWeek = false,
       curDate = $(this).attr('datetime');

  console.log( curDate );

  // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
  // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes
 
  if(thisWeek){
     var tdZelle = $(this).parent();
     tdZelle.removeClass('unaktuell').addClass('aktuell');
  }
});

Hab bitte Verständnis, dass dies von mir nun nicht auf Lauffähigkeit getestet ist, sondern "mal eben" hier in das Eingabefeld geknattert wurde.

Vielleicht ist das ein Ansatz und hilft Dir weiter.

Schönen Sonntag und viel Erfolg natürlich.

asterix3 · 27. Feb. 2015

Hallo zusammen
Vielen Dank für eure Hilfe, aber leider komme ich nicht weiter. Wie muss ich das genau implementieren, damit es funktioniert?
Ich habe nun schon Stunden probiert, aber leider erfolglos...

Sempervivum · 27. Feb. 2015

Dann zeig uns doch mal deinen letzten Versuch, dann können wir dir sagen, warum es nicht funktioniert.

asterix3 · 27. Feb. 2015

z-B. habe ich es so versucht:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

.aktuell {
	font-size: 15px;
	border: 2px solid #F00;	
}
.unaktuell {
		font-size: 15px;
}

</style>

</head>
<body>

<script type="text/javascript" language="JavaScript">
$("time").each(function(){
  var thisWeek = false,
       curDate = $(this).attr('datetime');

  console.log( curDate );

  // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
  // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes
 
  if(thisWeek){
     var tdZelle = $(this).parent();
     tdZelle.removeClass('unaktuell').addClass('aktuell');
  }
});

</script>

 <table>
<tr><td class="unaktuell">Ausstellung, <time datetime="2015-03-27T08:00+01:00">27.03.2015</time></td></tr>
<tr><td class="unaktuell">Ausstellung2, <time datetime="2015-02-27T08:00+01:00">27.02.2015</time></td></tr>

</table>

</body>
</html>

Sempervivum · 27. Feb. 2015

Der Vorschlag von Steelwheel war doch noch gar nicht fertig!
Zunächst musst du jQuery einbinden. Dann hast Du das Skript am Anfang des Body notiert. Zu diesem Zeitpunkt ist das DOM noch gar nicht fertig aufgebaut. Du musst das Skript entweder am Ende des Body notieren oder im Head und document-ready verwenden.
Dann musst Du die aktuelle Zeit ermitteln und, um einen einfachen Vergleich zu ermöglichen, beide Zeiten in Millisekunden umwandeln:
SELFHTML: JavaScript / Objektreferenz / Date
Schließlich beide Zeiten vergleichen ob der Unterschied kleiner als eine Woche ist.
So funktioniert's:

Code:

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <style type="text/css">

        .aktuell {
        	font-size: 15px;
        	border: 2px solid #F00;	
        }
        .unaktuell {
        		font-size: 15px;
        }

        </style>

        </head>
        <body>


         <table>
        <tr><td class="unaktuell">Ausstellung, <time datetime="2015-03-27T08:00+01:00">27.03.2015</time></td></tr>
        <tr><td class="unaktuell">Ausstellung2, <time datetime="2015-02-27T08:00+01:00">27.02.2015</time></td></tr>

        </table>

         <script type="text/javascript">
             now = new Date().getTime();
             oneweek = 1000 * 60 * 60 * 24 * 7;
             $("time").each(function () {
                 var thisWeek = false,
                 curDate = new Date($(this).attr('datetime')).getTime();

                 if (Math.abs(curDate - now) < oneweek) thisWeek = true

                 // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
                 // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes

                 if (thisWeek) {
                     var tdZelle = $(this).parent();
                     tdZelle.removeClass('unaktuell').addClass('aktuell');
                 }
             });

        </script>
       </body>
        </html>

Wenn es sehr viele Zellen sind, könnte man, um die Zeit nicht doppelt eingeben zu müssen, daran denken, auf das time-Tag zu verzichten und die Zeit direkt aus dem Text zu ermitteln. Dann müsste das Format aber in allen Zellen exakt gleich sein!

asterix3 · 27. Feb. 2015

Vielen, vielen Dank Sempervivum.
Aber: Bei mir funktioniert es trotzdem nicht :-(
Ich sollte dieses Skript hier kopieren und laufen lassen können, oder?
Bei mir wird der Rand nicht rot, auch wenn das Datum heute ist... Was mache ich nun noch falsch?
Vielen Dank für Anfängerhilfe!

Sempervivum · 27. Feb. 2015

Hallo Asterix3,
die Seite, die ich gepostet habe, habe ich getestet und sie hat funktioniert. Wenn Du das Skript in eine andere Seite übertragen hast, musst Du einen Fehler gemacht haben. Poste doch mal deine Seite oder besser, wenn sie denn online ist, die Adresse.

asterix3 · 28. Feb. 2015

Ich habe sie genau so übernommen:

HTML:

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <style type="text/css">

        .aktuell {
        	font-size: 15px;
        	border: 2px solid #F00;	
        }
        .unaktuell {
        		font-size: 15px;
        }

        </style>

        </head>
        <body>


         <table>
        <tr><td class="unaktuell">Ausstellung, <time datetime="2015-03-27T08:00+01:00">27.03.2015</time></td></tr>
        <tr><td class="unaktuell">Ausstellung2, <time datetime="2015-02-28T08:00+01:00">28.02.2015</time></td></tr>

        </table>

         <script type="text/javascript">
             now = new Date().getTime();
             oneweek = 1000 * 60 * 60 * 24 * 7;
             $("time").each(function () {
                 var thisWeek = false,
                 curDate = new Date($(this).attr('datetime')).getTime();

                 if (Math.abs(curDate - now) < oneweek) thisWeek = true

                 // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
                 // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes

                 if (thisWeek) {
                     var tdZelle = $(this).parent();
                     tdZelle.removeClass('unaktuell').addClass('aktuell');
                 }
             });

        </script>
       </body>
       </html>

Müsste ich noch etwas ändern, oder warum läuft sie bei mir nicht? Es müsste doch auch lokal laufen, oder?
Vielen Dank!

Sempervivum · 28. Feb. 2015

Verstehe ich nicht, dieser Code funktioniert bei mir einwandfrei. Lokal getestet, in FF, Chrome und IE.

asterix3 · 28. Feb. 2015

aha, ja. Mit Chrome und FF geht es! Ich habe aber mit meinem Standardbrowser Safari getestet und da geht es nicht. Weiss jemand warum?
Herzlichen Dank für deine super Hilfe Sempervivum!

SteelWheel · 28. Feb. 2015

Sempervivum schrieb:
Der Vorschlag von Steelwheel war doch noch gar nicht fertig!

Doch, der Vorschlag (!!!, aka Ansatzmöglichkeit) war fertig - das steht auch darunter und aus den Kommentaren geht hervor, dass es eben nicht mit Copy/Paste laufen würde (Stichwort "thisWeek"). Auch der Hinweis auf jQuery ist enthalten, dass es keine lauffähige Seite selbst ist, sieht man (!) etc. ... wie der Name sagt: einfach nur ein Vorschlag, wie man es lösen könne - null Anspruch, dass es nicht irgendwie besser geht! Aber: Ich werbe um Verständnis, dass ich nicht gewillt bin, ständig lauffähigen Code für Copy/Paste zu schreiben, sondern lieber (!) dem TE gedanklich auf die Sprünge helfe. Davon hat der TE schlichtweg mehr - ist nur nicht so bequem!

U. U. hilfreich beim Safari-Problem: Sorge dafür, dass Dein Script auch wirklich erst läuft, wenn das DOM fertig ist! Auch das Einbinden von jQuery im head ist nicht erforderlich und kann "unten" erfolgen (aber vor $(function()) - aber das wird jetzt Haarspalterei.

Noch ein Tipp: Statt rechnen zu lassen, kannst das Ergebnis auch direkt eintragen.

Code:

$(function(){
   var now = new Date().getTime(),
        oneweek = 604800000;

   $("time").each(function () {
        // ... usw.
   });
});

asterix3 · 28. Feb. 2015

Danke auch dir!
hm. Verstehe es leider nicht ganz.
Habe es nun so probiert, aber das Resultat ist das gleiche: mit Firefox, Chrome läuft es, aber mit Safari nicht.
Wie genau sagst du, müsste ich es ändern, damit es auch mit Safari läuft?

Ich habe es so versucht (aber wie gesagt nicht wirklich verstanden, was du meintest - da völliger Anfänger..)

HTML:

  <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </head>
        <body>

         <table>
        <tr><td class="unaktuell">Ausstellung, <time datetime="2015-03-27T08:00+01:00">27.03.2015</time></td></tr>
        <tr><td class="unaktuell">Ausstellung2, <time datetime="2015-02-22T08:00+01:00">22.02.2015</time></td></tr>

        </table>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

         <script type="text/javascript">
             now = new Date().getTime();
             oneweek = 1000 * 60 * 60 * 24 * 7;
             $("time").each(function () {
                 var thisWeek = false,
                 curDate = new Date($(this).attr('datetime')).getTime();

                 if (Math.abs(curDate - now) < oneweek) thisWeek = true

                 // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
                 // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes

                 if (thisWeek) {
                     var tdZelle = $(this).parent();
                     tdZelle.removeClass('unaktuell').addClass('aktuell');
                 }
             });

        </script>
                <style type="text/css">

        .aktuell {
        	font-size: 15px;
        	border: 2px solid #F00;	
        }
        .unaktuell {
        		font-size: 15px;
        }

        </style>
       </body>
       </html>

SteelWheel · 28. Feb. 2015

asterix3 · 28. Feb. 2015

also hab ich versucht.
Bin aber nicht sicher, ob das richtig ist so:
Habe im Script console.log() eingefügt (und geflickt, wie du es sagtest)

HTML:

         <script type="text/javascript">
         console.log(this)
           $(function(){   now = new Date().getTime();
             oneweek = 1000 * 60 * 60 * 24 * 7;
             $("time").each(function () {
                 var thisWeek = false,
                 curDate = new Date($(this).attr('datetime')).getTime();

                 if (Math.abs(curDate - now) < oneweek) thisWeek = true

                 // Vergleichsmaßnahmen auf curDate zum aktuellen Datum und setzen
                 // von thisWeek = true, wenn innerhalb des gewünschten Zeitraumes

                 if (thisWeek) {
                     var tdZelle = $(this).parent();
                     tdZelle.removeClass('unaktuell').addClass('aktuell');
                 }
             });
             });

        </script>

Nun im KonsolenLog von Safari-Entwickler:
Fehler werden keine angezeigt.
Was müsstest du aus 'ALLES' oder 'Protokolle' wissen?

Sempervivum · 28. Feb. 2015

Da wo Du jetzt das console.log hast, macht es keinen Sinn. Probier es mal hier:

Code:

if (Math.abs(curDate - now) < oneweek) thisWeek = true;
console.log(curDate);
console.log(now);
console.log(thisWeek);

Aber wenn Safari dein bevorzugter Browser ist und wenn Du dich weiter mit Javascript beschäftigen willst, würde ich dir empfehlen, dich mal mit den Entwicklertools vertraut zu machen. Wahrscheinlich gibt es da auch einen Debugger, mit dem Du den Code schrittweise untersuchen kannst, Variablen anzeigen, etc.

asterix3 · 01. März 2015

Habe ich gemacht und nun bekomme ich das hier:
NaN
test.html:371425202684157
test.html:38false
test.html:36NaN
test.html:371425202684157
test.html:38false

Sempervivum · 01. März 2015

Dann ist wohl das erste und das vierte der Knackpunkt:
NaN
test.html:36NaN
Das wäre dann curDate. NaN bedeutet "not a number". Das musst Du jetzt versuchen, weiter einzukreisen, z. B. durch dieses:

Code:

                 var thisWeek = false,
                 curDate = new Date($(this).attr('datetime')).getTime();
                 console.log("datetime=" + $(this).attr('datetime'));
                 console.log("Date=" + new Date($(this).attr('datetime')));
                 console.log("Date2=" + new Date($(this).attr('datetime').replace(/-/g, " "));

Hiernach:
http://caniuse.com/#feat=html5semantic
müsste Safari das time-Tag eigentlich unterstützen.
Habe da jedoch einen Verdacht:
Laut dem ersten Link hier:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date
(RFC) wird das Datum ohne Minuszeichen notiert.
Laut dem zweiten Link (ISO) jedoch mit Minuszeichen. Möglicher Weise versteht dein Safari nur die RFC-Notation.

asterix3 · 01. März 2015

hm. Und was heisst das nun?
Kann ich etwas ändern, damit es auch mit Safari funktioniert?

Vielen, vielen Dank für deine Hilfe.

[FRAGE] aktuelle Einträge hervorheben

New member

ToM80

Guest

New member

New member

Banned

New member

Banned

New member

Banned

New member

Banned

New member

New member

New member

New member

New member

Banned

New member

Banned

New member