JavaScript clearTimeout Methode

Mit Hilfe der Methode clearTimeout aus dem unter JavaScript vordefinierten Window-Objekt läßt sich ein zuvor mit setTimeout gestarteter zeitverzögerter JavaScript-Aufruf stoppen. Die Methode benötigt als Parameter die ID des zuvor gestarteten Timeouts, welcher gestoppt werden soll. Diese ID wird beim Start eines Timeouts von der Methode setTimeout als Rückgabewert zurückgeliefert.

JavaScript clearTimeout Beispiel: Tooltip

Im folgenden Beispiel wird eine einfache JavaScript-Lösung zur interaktiven Anzeige von Tooltips realisiert. Tritt der Benutzer mit dem Mauszeiger in den Anzeigebereich eines HTML-Elements (hier ein SPAN-Tag) ein, so wird nach Ablauf von einer Sekunde ein DIV-Fenster angezeigt, in dem eine kurze Erläuterung des jeweiligen Begriffs steht. Verlässt der Besucher den Anzeigebereich mit der Maus, so wird das DIV-Fenster unverzüglich ausgeblendet.

Der obere Bereich im Script definiert einige StyleSheets, die das Aussehen der einzelnen Elemente bestimmen. Begriffe zu denen eine Beschreibung existiert werden weiter unten in einem SPAN-Tag untergebracht. Um diese auf der Seite kenntlich zu machen, werden diese Begriffe mit einer gestrichelten Linie versehen (Style span.tooltip). Danach werden die Formatierungen der Tooltip-DIVs, die eine Überschrift und Textabsätze enthalten, definiert. Wichtig ist hier, dass die DIVs zunächst unsichtbar sein sollen. Zu diesem Zweck wird die visibility der DIVs (in Style div.tooltip) auf hidden gesetzt. Damit sind alle DIV-Fenster mit den Beschreibungen (alles was sich im HTML-Code innerhalb dieser DIVs befindet), die später definiert werden, beim Aufruf der Seite unsichtbar.

Auf die StyleSheets folgt ein kurzer Text, der die beiden SPAN-Elemente mit den IDs js und html enthält. Diese SPAN-Elemente enthalten die Begriffe, zu denen es weiter unten die entsprechenden Tooltips in Form von DIV-Fenstern gibt. Die SPAN-Elemente erhalten durch die Zuweisung bei der CLASS-Eigenschaft das im StyleSheet definierte Aussehen. Zusätzlich werden die beiden Events onmouseover und onmouseout mit den entsprechenden Funktionsaufrufen belegt. Tritt der Mauszeiger in den Bereich eines dieser SPAN-Elemente ein, so wird die Funktion tooltipMouseOver aufgerufen, während beim Austritt des Mauszeigers die Funktion hideTooltip aufgerufen wird.

Als nächstes folgt die Definition der DIV-Fenster mit den entsprechenden Beschreibungen zu den Begriffen JavaScript und HTML. Die ID des DIV-Elements setzt sich zur eindeutigen Unterscheidung der Tooltip-DIVs aus der jeweiligen SPAN-ID und dem Zusatz "_tooltip" zusammen. Mit Hilfe dieser IDs wird im JavaScript-Code das dem jeweiligen Begriff entsprechende DIV-Fenster ermittelt, welches angezeigt werden muss. Durch die CLASS-Eigenschaft wird das Tooltip-Layout bestimmt und die Anzeige, da dieses Element "hidden" ist, zunächst unterdrückt.

Darauf folgend werden im JavaScript-Block die benötigten Funktionen definiert. Aufgabe der Funktion tooltipMouseOver ist es, die für die Anzeige der Tooltips benötigten Informationen zusammenzustellen und anschließend mit einer Zeitverzögerung von einer Sekunde die Funktion showTooltip aufzurufen. Die Parameter für die Funktion sind zum einen die ID des SPAN-Elements, in den der Mauszeiger eingetreten ist, und zum anderen das zugehörige Event-Objekt. Beide Parameter werden beim Aufruf der Funktion übergeben, wenn das Event onmouseover des jeweiligen SPAN-Elements auftritt (s. Definition der SPAN-Elemente). Der Parameter eid enthält die ID des SPAN-Elements, bei dem das Ereignis onmouseover aufgetreten ist. Diese Information wird benötigt, um später in der Funktion showTooltip bzw.hideTooltip das richtige DIV-Fenster sichtbar/unsichtbar zu machen. Im Parameter event sind unter anderem Informationen zur Position des Mauszeigers (zum Eintrittszeitpunkt des Events onmouseover) enthalten, die benötigt werden, um das DIV mit dem Tooltip korrekt zu positionieren. Bei der Ermittlung der Position des Mauszeigers muss zwischen dem Internet Explorer und anderen Browser unterschieden werden, da es hier Unterschiede zwischen den Browsern gibt. Der Internet Explorer speichert seine Mauskoordinaten (relativ zur oberen, linken Ecke des Anzeigefensters) in den Event-Eigenschaften clientX und clientY, während diese Werte bei Netscape und kompatiblen Browsern in den Event-Eigenschaften pageX und pageY stehen. Zur Unterscheidung wird hier einfach auf Existenz der Event-Eigenschaft pageX geprüft. Die entsprechenden Positionswerte werden in den Varaiblen xpos und ypos gespeichert. Am Ende der Funktion wird – mit Hilfe von setTimeout nach einsekündigem Timeout – die Funktion showTooltip mit den ermittelten Parametern aufgerufen.

Die Funktion showTooltip blendet das entsprechende Tooltip-DIV gemäß den übergebenen Parametern ein. Der Parameter id enthält die ID des SPAN-Elements, dessen Tooltip angezeigt werden soll und die Parameter xpos und ypos enthalten die Koordinaten, an denen das DIV-Fenster angezeigt werden soll. Als erstes prüft die Funktion ob ein Tooltip-Element zum SPAN-Element mit der übergebenen ID – wir erinnern uns: Die übergebene ID mit Prefix "_tooltip" bezeichnet das zu einem SPAN-Element gehörige Tooptip-Element – existiert (mit Hilfe der Methode getElementById(), welche Bestandteil des Objekts Document ist). Ist dies der Fall, so wird die Visibility-Eigenschaft des entsprechenden Tooltip-Elements auf visible gesetzt – das Element wird sichtbar gemacht. Danach wird das Tooltip-Element mit Hilfe der Positionseigenschaften auf die angegebene Position gesetzt.

Aufgabe der Funktion hideTooltip ist es, ein Tooltip-Element – dessen ID übergeben wird – auszublenden. Hierzu wird als erstes ein eventuell noch laufender Timeout abgebrochen, was für den Fall wichtig ist, wenn die Maus den entsprechenden SPAN-Bereich verlässt, bevor das Tooltip-DIV angezeigt wurde. In diesem Falle hat sich die Anzeige des Tooltips erledigt – das entsprechende DIV-Fenster muss gar nicht erst angezeigt werden. Danach wird wiederum auf Existenz des passenden Tooltip-Elements geprüft, bevor das DIV-Fenster wiederum über die Visibility-Eigenschaft versteckt wird.

<!-- Styles für das Layout der Tooltips -->
<style type="text/css">
  /* Formatierung der Tooltip-SPANS im Text */
  span.tooltip {
    border-bottom:1px dashed black;
  }
  /* Formatierung des Tooltip-DIVs */
  div.tooltip {
    /* DIV-Fenster mit Tooltips sollen zunächst nicht
       angezeigt werden */
    visibility:hidden;
    position:absolute;
    width:11em;
    border:1px solid black;
    padding:10px;
    opacity:0.9;
    background-color:#eee;
    color:#a00;
  }
  /* Formatierung der Überschriften im Tooltip-DIV */
  div.tooltip h1 {
    margin:0;
    font-size:1.3em;
    text-decoration:underline;
    background-color:#eda;
  }
  /* Formatierung der Textabsätze im Tooltip-DIV */
  div.tooltip p {
    color:#00a;
    margin:0;
    background-color:#ade;
    text-align:justify;
  }
</style>
Mit
<!-- Bereich, zu dem ein Tooltip angeboten wird
     Die ID legt fest, welches Tooltip-DIV zu diesem Element
     gehört. Die Events mouseover und mouseout rufen die
     entsprechenden Funktionen zum Anzeigen bzw. Verstecken
     der Tooltip-DIVs auf. This.id enthält die ID des Elements,
     über dem sich die Maus befindet (hier "js") und event enthält
     unter anderem Informationen zur Position des Mauszeigers.
     Tritt die Maus in den Anzeigebereich des SPAN-Elements ein,
     so wird die Funktion tooltipMouseOver, wenn sie diesen verlässt
     wird die Funktion hideTooltip aufgerufen. -->
<span id="js" class="tooltip"
  onmouseover="tooltipMouseOver (this.id, event)"
  onmouseout="hideTooltip (this.id)">JavaScript
</span>
kann man die statischen Möglichkeiten von
<span id="html" class="tooltip"
  onmouseover="tooltipMouseOver (this.id, event)"
  onmouseout="hideTooltip (this.id)">HTML
</span>
ein wenig auflockern.
<!-- HTML-Code des DIV-Fensters mit dem Tooltip für JavaScript
     Die ID des Elements, für den der Tooltip gedacht ist, wird um den
     Prefix "_tooltip" erweitert. Später wird im Code das entsprechende
     DIV zum SPAN-Element aus dem Namen des Elements, über dem sich die
     Maus befindet, ermittelt und angezeigt. -->
<div id="js_tooltip" class="tooltip">
  <h1>JavaScript</h1>
  <p>
       Javascript ist eine Skriptsprache, die von Browsern interpretiert
       wird. Ursprünglich wurde Javascript von Netscape entwickelt.
  </p>
</div>
<!-- HTML-Code des DIV-Fensters mit dem Tooltip für HTML -->
<div id="html_tooltip" class="tooltip">
  <h1>HTML</h1>
  <p>
    Die HyperText Markup Language ist eine einfache
    Beschreibungssprache zur formatierten Ausgabe von Texten
    wie auch multimedialen Inhalten, die mit Hilfe eines Browsers
    dargestellt werden können.
  </p>
</div>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion ermittelt die für showTooltip nötigen Parameter und
// startet das Timeout nach dem der Tooltip angezeigt werden soll.
// Mit dem Parameter eid erhält die Funktion die ID des SPAN-Elements,
// zu dem der entsprechende Tooltip angezeigt werden soll.
// Der Parameter event wird benötigt, um die Position zu ermitteln,
// an der das DIV-Fenster mit dem Tooltip angezeigt werden soll.
function tooltipMouseOver (eid, event) {
  // Handelt es sich bei dem vom Besucher genutzten Browser
  // um einen Internet Explorer?
  if (!event.pageX) {
    // Positionsangabe für den Microsoft-Browser
    xpos = event.clientX;
    ypos = event.clientY;
  }
  else {
    // andere Browser
    xpos = event.pageX;
    ypos = event.pageY;
  }
  // Nach Ablauf des Timeouts von einer Sekunde soll der Tooltip
  // zum Element mit der ID eid an Position xpos, ypos angezeigt werden
  t = window.setTimeout ('showTooltip (\'' + eid + '\', ' +
                         xpos + ', ' + ypos + ')', 1 * 1000);
}

// Funktion zum Einblenden eines DIVs mit der übergebenen id an
// der ebenfalls übergebenen Position (xpos, ypos)
function showTooltip (id, xpos, ypos) {
  // Wenn der entsprechende Tooltip existiert
  if (document.getElementById (id + '_tooltip')) {
   // DIV-Fenster mit dem Tooltip einblenden
   document.getElementById (id + '_tooltip').style.visibility = 'visible';
   // und entsprechend positionieren
   document.getElementById (id + '_tooltip').style.left = xpos + 'px';
   document.getElementById (id + '_tooltip').style.top = ypos + 'px';
  }
}

// Funktion zum Ausblenden eines DIVs
function hideTooltip (id) {
  // Timeout muss beim Verlassen abgebrochen werden, wenn
  // es noch läuft
  window.clearTimeout (t);
  // Wenn das entsprechende Tooltip existiert
  if (document.getElementById (id + '_tooltip'))
    // DIV-Fenster mit dem Tooltip ausblenden
    document.getElementById (id + '_tooltip').style.visibility = 'hidden';
}
// -->
</script>

Mit JavaScript kann man die statischen Möglichkeiten von HTML ein wenig auflockern.

JavaScript

Javascript ist eine Skriptsprache, die von Browsern interpretiert wird. Ursprünglich wurde Javascript von Netscape entwickelt.

HTML

Die HyperText Markup Language ist eine einfache Beschreibungssprache zur formatierten Ausgabe von Texten wie auch multimedialen Inhalten, die mit Hilfe eines Browsers dargestellt werden können.

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht