Schriftgröße der Anzeige eines Aufenthaltszählers ändern

[andrsapp]

Hallo zusammen,

ich möchte einen Zähler für die Aufenthaltsdauer eines Besuchers auf eine Seite einer Homepage einbauen. Leider zeigt dies Javascript die Zeitdauer immer in einer Standard-Schriftgröße an.

Mit diesem HTML-Code wird die Aufenthaltsdauer ausgegeben:
<p><form name="Anzeige" action="">
 <input type="text" size="2" name="Zeit" value="00:00">
 </form></p>

Auf Formatierungsversuche mittels des Absatzlayout (auch CSS) und auch font-size:... reagiert dieser Zähler überhaupt nicht.

Kann mir bitte jemand incl. Codebeispiel zeigen, wie man die Schrift und die Schriftgröße einer Uhr bzw. eines Zeit-Zählers ändert.

Im Archiv fand ich hierzu leider nichts.

Schon mal im Voraus vielen Dank

andrsapp

[Ingo Turski]

Hi,

ich möchte einen Zähler für die Aufenthaltsdauer eines Besuchers auf eine Seite einer Homepage einbauen. Leider zeigt dies Javascript die Zeitdauer immer in einer Standard-Schriftgröße an.

Mit diesem HTML-Code wird die Aufenthaltsdauer ausgegeben:
<p><form name="Anzeige" action="">
<input type="text" size="2" name="Zeit" value="00:00">
</form></p>

Auf Formatierungsversuche mittels des Absatzlayout (auch CSS) und auch font-size:... reagiert dieser Zähler überhaupt nicht.

form ist in p nicht zulässig. Erstelle zunächst mal validen HTML-Code.
Sofern es sich um HTML handelt, setzt ein Browser diesen Code standardkonform so um:

<p><form name="Anzeige" action=""></p>  
  <input type="text" size="2" name="Zeit" value="00:00">  
  </form>

Das folgende </p> wäre dann ein grober Fehler und ein CSS-Selektor wie p form input würde nicht matchen.

Abgesehen davon würde hier immer nur "00:00" angezeigt. Da Du Deine Frage unter "Javascript" gestellt hast, wird diese Ausgabe vermutlich hierüber noch geändert - den Code dazu hast Du jedoch nicht angegeben.

freundliche Grüße
Ingo

[andrsapp]

Abgesehen davon würde hier immer nur "00:00" angezeigt. Da Du Deine Frage unter "Javascript" gestellt hast, wird diese Ausgabe vermutlich hierüber noch geändert - den Code dazu hast Du jedoch nicht angegeben.

Hallo Ingo,
danke für Deine Antwort.

Das Javascript funktioniert einwandfrei, und so postete ich es nicht.
Dies Script zählt von 5 Minuten bis null, und zeigt dem Besucher, wie lange er noch auf dieser speziellen Seite verweilen kann, bis er automatisch auf die Zielseite weitergeleitet wird.

Wird evtl. in diesem Script die Schrift festgelegt?

Danke für Deine Hilfe

andrsapp

Nach gleich noch das Script:

<script language="JavaScript" type="text/javascript">
<!--
function wechsel() {
var auswahl, seite;
auswahl=document.liste1.wahl.selectedIndex;
seite=document.liste1.wahl.options[auswahl].value;
if (seite=="nichts") {
document.liste1.reset();
return false;
}
else {
location.href=seite;
}
}
//-->
   function Wunsch () {
     var Ziel = window.prompt("Ihr Wunsch-URL:", "");
   window.location.href = "http://" + Ziel;

}

var Jetzt = new Date();
var Start = Jetzt.getTime();
var sizes = ("1");

function ZeitAnzeigen () {
  var absSekunden = Math.round(ZeitBerechnen());
  var relSekunden = absSekunden % 60;
  var absMinuten = Math.abs(Math.round((absSekunden - 30) / 60));
  var anzSekunden = "59" - ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
  var anzMinuten = "04" - ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
  window.document.Anzeige.Zeit.value = anzMinuten + ":" + anzSekunden;
  window.setTimeout("ZeitAnzeigen()", 1000);
}

function ZeitBerechnen () {
  var Immernoch = new Date();
  return ((Immernoch.getTime() - Start) / 1000);
}
</script>

[Der Martin]

Hallo Ingo,

<p><form name="Anzeige" action="">
<input type="text" size="2" name="Zeit" value="00:00">
</form></p>

form ist in p nicht zulässig. Erstelle zunächst mal validen HTML-Code.

gut, das hätte ich auch gesagt.

Sofern es sich um HTML handelt, setzt ein Browser diesen Code standardkonform so um:
<p><form name="Anzeige" action=""></p>

Nein, sondern eher so:

<p></p><form name="Anzeige" action="">

Ach so, andrsapp: Warum versuchst du denn, das p-Element zu formatieren, wenn du eigentlich das input-Element meinst? Und willst du das umschließende Formular nicht gleich ganz weglassen? Es hat ja doch keinerlei Funktion.

So long,
 Martin

[andrsapp]

Hallo Martin,

danke für Deine Antwort.

Du fragtest:

Ach so, andrsapp: Warum versuchst du denn, das p-Element zu formatieren, wenn du eigentlich das input-Element meinst? Und willst du das umschließende Formular nicht gleich ganz weglassen? Es hat ja doch keinerlei Funktion.

Das p-Element verwendete ich in der Hoffnung, damit eine Formatierung auf den Ausgabetext erreichen zu können.

Wenn ich den Zähler formatieren könnte, wäre mir schon weitergeholfen.

Vielen Dank für eure Mühe

andrsapp

[ChrisB]

Hi,

Ach so, andrsapp: Warum versuchst du denn, das p-Element zu formatieren, wenn du eigentlich das input-Element meinst? Und willst du das umschließende Formular nicht gleich ganz weglassen? Es hat ja doch keinerlei Funktion.

Das p-Element verwendete ich in der Hoffnung, damit eine Formatierung auf den Ausgabetext erreichen zu können.

"Hoffnung" ersetzt kein Wissen im Umgang mit einer Technik ...

Browser haben Defaultstyles fuer so gut wie alle Elemente, auch fuer Inputfelder. Und so lange du die nicht gezielt ueberschreibst, kannst du nicht auf Vererbung der Eigenschaften von Vorfahrenelementen "hoffen".

Wenn ich den Zähler formatieren könnte, wäre mir schon weitergeholfen.

Ja dann mach's doch einfach.

Wenn deine Zaehler-Ausgabe in einem Inputfeld steht, dann formatiere eben dieses Inputfeld.

MfG ChrisB

[andrsapp]

Hallo ChrisB,

danke für Deine Infos bezüglich der Browser.

Auf Dein:

Ja dann mach's doch einfach.

Muss ich Dir leider sagen, dass mir dies nicht gelungen ist, sonst müsste ich nicht hier diese Frage posten.

Könntest mir ja mal schreiben, wie Du denn ein Inputfeld formatieren kannst, vielleicht klappt es ja bei mir auch.

Danke schon mal für Deine Hilfe

andrsapp

[ChrisB]

Hi,

Könntest mir ja mal schreiben, wie Du denn ein Inputfeld formatieren kannst,

So, wie *jedes* andere Element auch.

CSS interessiert sich nicht dafuer, von welchem Typ ein Element ist - du kannst jedes Element mit jeder CSS-Eigenschaft versehen. Bzw., genaugenommen ist es das sogar bereits, da CSS-Eigenschaften ja Defaultwerte haben.

Dass gewisse CSS-Eigenschaften/-Werte je nach Element/Konstellation keine Wirkung haben (duerfen), ist eine andere Geschichte.
Und dass manche Browser sich bei bestimmten Kombinationen straeuben, noch eine andere.

Grundlegende Schriftformatierungen fuer ein Text-Inputfeld sollten jedoch kein Problem sein in aktuellen Browsern.

input.irgendEineKlasse { font-family:verdana, sans-serif; font-weight:bold; color:#f00; background-color:#000; }

vielleicht klappt es ja bei mir auch.

Wir sind gespannt.

MfG ChrisB

[andrsapp]

Hi ChrisB,

input.irgendEineKlasse { font-family:verdana, sans-serif; font-weight:bold; color:#f00; background-color:#000; }

es hat bestens geklappt.

Vielen vielen Dank.

Grüße und alles Gute

andrsapp

[Michael R.]

Formatiere das Input-Feld einfach direkt mit CSS:
Ich würde es dazu um ein class-Attribute erweitern:
<form name="Anzeige" action="">
  <input class="Ausgabe" type="text" size="2" name="Zeit" value="00:00">
</form>

Und es im Head formaieren:
<style type="text/css">
.Ausgabe { font-size: 200%; }
</style>

Du kannst aber auch z.B. per getElementById() im JavaScript die Zeit in ein <span> oder <div> Element schreiben, dann brauchst du nicht das Inputfeld.

GRuß Michael R.