JavaScripte stören sich gegenseitig @ tutorials.de: Tutorials, Forum & Hilfe

Sprint · 06.07.10 11:26

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-Code:

<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?

***deepthroat*** · 06.07.10 11:42

Hi.

Zitat von Sprint

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?

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ß

rd4eva · 06.07.10 11:44

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.

ripkens · 06.07.10 11:53

HTML-Code:

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

Sven Mintel · 06.07.10 11:53

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>

Sprint · 06.07.10 14:21

Zitat von rd4eva

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.

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-Code:

<body onload="document.getElementById('filterbox').style.display = 'none';">

Danke für den Tip.

***deepthroat*** · 06.07.10 15:19

Zitat von Sprint

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

Wie bereits gesagt, ist der Standardwert für die display Eigenschaft für Block-Level-Elemente wie div oder p "block".

Gruß

Sprint · 06.07.10 15:35

Zitat von deepthroat

Wie bereits gesagt, ist der Standardwert für die display Eigenschaft für Block-Level-Elemente wie div oder p "block".

Gruß

Schon klar, aber warum funktioniert es dann, wenn das Kalender Script nicht eingebunden ist, ohne die Initialisierung? Das meinte ich damit.

Maik · 06.07.10 15:45

Hi,

Zitat von Sprint

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?

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-Code:

<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-Code:

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

mfg Maik

Sprint · 06.07.10 16:29

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.

Back2toxic · 06.07.10 16:59

Ich würde standardmäßig aber nicht unbedingt display:none verwenden.
Sollte bei einem Benutzer JS deaktiviert sein wird er die Filterbox nie zu Gesicht bekommen.

Alternativ kannst du display initial auf inline setzen und in einem onload-Event auf none.
So sehen Benutzer ohne Javascript die Filterbox, Benutzer mit Javascript sehen sie nicht, haben aber die Möglichkeit die box ein- und auszublenden.

Edit: Gerade nachgesehen: Tigra ist ein JS-Kalender.. na dann isses bei Nutzern ohne JS eh Wurst

Sprint · 06.07.10 17:13

Zitat von Back2toxic

Ich würde standardmäßig aber nicht unbedingt display:none verwenden.
Sollte bei einem Benutzer JS deaktiviert sein wird er die Filterbox nie zu Gesicht bekommen.

Alternativ kannst du display initial auf inline setzen und in einem onload-Event auf none.
So sehen Benutzer ohne Javascript die Filterbox, Benutzer mit Javascript sehen sie nicht, haben aber die Möglichkeit die box ein- und auszublenden.

Edit: Gerade nachgesehen: Tigra ist ein JS-Kalender.. na dann isses bei Nutzern ohne JS eh Wurst

Spielt in dem Fall keine Rolle, da es eine interne Firmenseite ist. Aber danke, daß du dir da Gedanken gemacht hast.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Javascripte behindern sich - Alternative?

Google Visualization API und Prototype (Javascripte überschreiben sich gegenseitig?)

Scripts "stören sich gegenseitig"

Problem mit W-Lan-Verbindung - können mehrere W-Lans sich gegenseitig stören?

Apache2 & PHP <--> XAMPP (stören sich)

E-Mail:

Abonnieren Abbestellen