✔ JavaScripte stören sich gegenseitig

Sprint

Sprint

Erfahrenes Mitglied
Hallo,

in einer Seie verwende ich als Popup Kalender den Tigra Calender. Damit ein Steuerblock, in dem dieser kalender verwendet wird, nicht ständig im Blickfeld liegt, will ich ihn mit diesem Script ein- bzw. ausblenden.
HTML: 
<script language="JavaScript">
function einblenden() {
  with(document.getElementById('filterbox').style){
    if(display=="none"){
      display="inline";
    }
    else{
      display="none";
    }
  }
}
</script>
<a href="#" onClick="einblenden(); return false;"> Ein-/Ausblenden </a>
Das Script an sich funktioniert, wenn aber der Kalender eingebunden ist, muß ich beim ersten Einblenden zwei Mal auf den Link klicken. Bei jedem weiteren Aufruf reicht dann ein Klick.
Wie kann ich diesen ersten Doppelklick vermeiden?
 
Hi.
Sprint hat gesagt.:
Das Script an sich funktioniert, wenn aber der Kalender eingebunden ist, muß ich beim ersten Einblenden zwei Mal auf den Link klicken. Bei jedem weiteren Aufruf reicht dann ein Klick.
Wie kann ich diesen ersten Doppelklick vermeiden?
Zum Vergrößern anklicken....
Die CSS display Eigenschaft kann grundsätzlich 3 Einstellungen haben: block, inline, none. Vermutlich wird der Kalender als div Element eingebunden, welches standardmäßig als block angezeigt wird.

Gruß
 
Ich könnte mir vorstellen das vor dem ersten Aufruf die display Eigenschaft trotz unsichtbarkeit != none ist.
Was dazu führt das beim ersten klick else{ display="none"; } ausgeführt wird und display auf none gesetzt wird.
Und damit erst beim zweiten klick if(display=="none"){ ausgeführt wird.

Folglich solltest du mal den Initialwert von display checken.
 
HTML: 
<script type="text/javascript">
function einblenden(link) {
  var display = document.getElementById('filterbox').style.getAttribute("display", false);
  if(display=="inline"){
      document.getElementById('filterbox').style.setAttribute("display", "none", true);
      link.title = "Kalender einblenden";
  }
  else{
      document.getElementById('filterbox').style.setAttribute("display", "inline", true);
      link.title = "Kalender ausblenden";
  }
  return false;
}
</script>
<a id="CalSwitch" href="Kalender Ein-/Ausblenden" title="Kalender Einblenden" onclick="return einblenden(this);" Ein-/Ausblenden </a>
 
Zuletzt bearbeitet:
Drehe den Spiess einfach mal um, und nehme als Bedingung, dass display nicht 'none' ist:
Code: 
function einblenden() {
  with(document.getElementById('filterbox').style){
    if(display!="none"){
      display="none";
    }
    else{
      display="inline";
    }
  }
}

Wenn es nicht angezeigt wird, ist display ja "none".
Wenn es aber angezeigt wird, ist nicht eindeutig, was display ist, es kann einen der von deepthroat genannten Werte haben oder auch garkeinen(JS liefert ja nicht den default-Wert, wenn keiner per inline-CSS gesetzt ist, sondern garnichts)

<edit>Wobei, wenn ichs recht überlege, ist das auch Quatsch :-)</edit>
 
rd4eva hat gesagt.:
Ich könnte mir vorstellen das vor dem ersten Aufruf die display Eigenschaft trotz unsichtbarkeit != none ist.
Was dazu führt das beim ersten klick else{ display="none"; } ausgeführt wird und display auf none gesetzt wird.
Und damit erst beim zweiten klick if(display=="none"){ ausgeführt wird.

Folglich solltest du mal den Initialwert von display checken.
Zum Vergrößern anklicken....

Genau das war es. Mir ist zwar noch immer nicht klar, was das Kalender-Script damit zu tun hat, da weder in dem Script noch im dazugehörenden CSS die display Eigenschaft eingestellt wird, aber egal. Mit einer Zuweisung im Body-Tag geht es jetzt.
HTML: 
<body onload="document.getElementById('filterbox').style.display = 'none';">
Danke für den Tip.
 
Sprint hat gesagt.:
Genau das war es. Mir ist zwar noch immer nicht klar, was das Kalender-Script damit zu tun hat, da weder in dem Script noch im dazugehörenden CSS die display Eigenschaft eingestellt wird
Zum Vergrößern anklicken....
Wie bereits gesagt, ist der Standardwert für die display Eigenschaft für Block-Level-Elemente wie div oder p "block".

Gruß
 
Hi,
Sprint hat gesagt.:
Das Script an sich funktioniert, wenn aber der Kalender eingebunden ist, muß ich beim ersten Einblenden zwei Mal auf den Link klicken. Bei jedem weiteren Aufruf reicht dann ein Klick.
Wie kann ich diesen ersten Doppelklick vermeiden?
Zum Vergrößern anklicken....

ich nehme an, dass die Formatierung (display:none) für #filterbox in einem zentralen Stylesheet hinterlegt ist.

In diesem Fall müssen in dem Script die display-Werte getauscht werden, damit hier kein doppelter Klick vonnöten ist, bis der Funktionsaufruf greift.

HTML: 
<script type="text/javascript">
function einblenden() {
  with(document.getElementById('filterbox').style){
    if(display=="inline"){
      display="none";
    }
    else{
      display="inline";
    }
  }
}
</script>


Im Umkehrschluß heißt das, dass deine vorgestellte Variante beim ersten Klick ihren Job erledigt, wenn die Formatierung stattdessen im style-Attribut des Elements angegeben wird:

HTML: 
<div id="filterbox" style="display:none;">...</div>


mfg Maik
 
Stimmt, die Formatierung ist in einem zentralen Stylesheet. Die style Variante hab ich gar nicht probiert, da irgendwann es immer dann nicht funktionierte, wenn die JS Datei eingebunden war. Ich habe es jetzt mal direkt per style eingesetzt und da klappt es auch ohne Initialisierung per JS. Muß sich wohl saublöd überschnitten haben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück