OnBlur bei Button-Tag mit eingeschachtelten Tags?

[Mathias]

Hallo,

Ich möchte in meinem Projekt eine Buttonleiste implementieren, welche ich evtl. dann auch einzeln mal "disabled" setzen kann.

Jeder dieser Buttons löst ein Javascript bei onClick() aus.

Es gibt nun einen speziellen Button, in dem ich nun ein <div>-Tag einschachteln wollte. Bei Klick wird das div-Tag sichtbar, bei weiterem Klick unsichtbar und außerdem soll es bei einem onBlur() ebenfalls wieder unsichtbar werden.

Innerhalb dieses <div> befinden sich Hyperlinks die auch eine onClick()- JavaScript-Funktion auslösen sollen.

Fehlerhafter Code:

<button type="button" id="gb_color" title="Schriftfarbe &auml;ndern" value="Farbe" onclick="switchdisplay('gb_collist');" onblur="switchoff('gb_collist');">

<div id="gb_collist" style="display:none;">
  <a style="color:red;" href="javascript:fontformat('red');">red</a>
         <a style="color:blue;" href="javascript:fontformat('blue');">blue</a>
      </div>
</button>

Das klappt so aber nicht. Die eingeschachtelten Hyperlinks lösen ihr Javascript beim klicken nicht aus. Wahrscheinlich weil eines der Events vom übergeordneten Button zuerst greift.

.....................................................................

Selbst habe ich das nun so abgeändert:

<input type="button" id="gb_color" title="Schriftfarbe &auml;ndern" value="Farbe" onclick="switchdisplay('gb_collist');" onblur="switchoff('gb_collist');"/>

<div id="gb_collist" style="display:none;">
      <a style="color:red;" href="javascript:fontformat('red',);">red</a>
      <a style="color:blue;" href="javascript:fontformat('blue');">blue</a>
</div>

• nicht mehr eingeschachtelt im Button-Tag sondern unabhängig
• Alle Hyperlink-Scripte funktionieren jetzt
• onBlur()-Funktion des Input-Buttons löst jedoch nicht aus.

Die onBlur()-Funktion funktioniert nun nicht, weil das div-Tag wohl unabhängig vom Button ist.

So!... und nun frage ich Euch mal ganz lieb, wie ich so ein Verhalten mit onBlur-Funktionalität hinbekomme.

Auch für Ratschläge, ob verbesserter Programmiertechnik für so einen Anwendungsfall wäre ich dankbar.

Gruß der Matze

PS: Hoffe dad war nu nich zuviel Geschreibse...

[Genie]

Hi

Das erste Beispiel kann nicht funktionieren, da keine Elemente mit Verweis-Funktion innerhalb von <button> erlaubt sind. [SelfHTML]
Meinst statt onBlur vielleicht onMouseout?

mfg
Genie

[Mathias]

Hi

Das erste Beispiel kann nicht funktionieren, da keine Elemente mit Verweis-Funktion innerhalb von <button> erlaubt sind. [SelfHTML]
Meinst statt onBlur vielleicht onMouseout?

mfg
Genie

Danke für den Hinweis...

Also mouseout deswegen nicht, weil ein Besucher zwar über den Button das <div>-Tag sichtbar schalten kann, aber mit der Maus gar nicht über diesem sein muss. Sonst könnte ich im div-Tag ja das mouseout()-Event auslösen lassen. ...Glaube ich. :D

Das Verhalten soll nun also so sein..

Besucher klickt Button.. sieht Liste... entscheidet sich anders... klickt iiiiiirgendwo andershin in der Seite... und das sichtbar gewordene <div>-Tag verschwindet dann automatisch. Ich glaube das ist die Funktionalität von onBlur().

Grüße Matze.

[Genie]

Hi

Besucher klickt Button.. sieht Liste... entscheidet sich anders... klickt iiiiiirgendwo andershin in der Seite... und das sichtbar gewordene <div>-Tag verschwindet dann automatisch. Ich glaube das ist die Funktionalität von onBlur().

Ja, eigentlich schon. Poste nochmal deinen Quellcode, am besten mit JavaScript-Funktionen

mfg
Genie

[Mathias]

Hi

Besucher klickt Button.. sieht Liste... entscheidet sich anders... klickt iiiiiirgendwo andershin in der Seite... und das sichtbar gewordene <div>-Tag verschwindet dann automatisch. Ich glaube das ist die Funktionalität von onBlur().
Ja, eigentlich schon. Poste nochmal deinen Quellcode, am besten mit JavaScript-Funktionen

mfg
Genie

HTML-Code zum Button "Farbe" wie oben bereits gepostet und beschrieben:

<input type="button" id="gb_color" title="Schriftfarbe &auml;ndern" value="Farbe" onclick="switchdisplay('gb_collist');" onblur="switchoff('gb_collist');"/>

<div id="gb_collist" style="display:none;">
 <a style="color:red;" href="javascript:fontformat('red');"> red</a>
 <a style="color:blue;" href="javascript:fontformat('blue');"> blue</a>
</div>

................................................................

JS-Funktion switchdisplay(id) bei onClick() des Button:

function switchdisplay(id)
{
 var GECKO = document.getElementById? 1:0;
 var NS = document.layers? 1:0;
 var IE = document.all? 1:0;

if (GECKO)
 {
  document.getElementById(id).style.display=(document.getElementById(id).style.display=="block") ? "none" : "block";
 }
 else if (NS)
 {
  document.layers[id].display=(document.layers[id].display=="block") ? "none" : "block";
 }
   else if (IE)
 {
  document.all[id].style.display=(document.all[id].style.display=="block") ? "none" : "block";
 }
}
...............................................................

JS-Script switchoff(id) bei onBlur() des Button:

Dieselbe Struktur wie switchdisplay(id) nur die Ausführungszeilen

wurden von

... .display=="block") ? "none" : "block";

zu

...  .display=="block") ? "none" : "none";

abgeändert.

.................................................................

Ja und die Hyperlink-Scripte zur Farbe funktionieren ja wie erwähnt, diese haben mit dem sichtbar- und unsichtbar-schalten des <div>-Tags nichts am Hut.
Dort wird ein eventuell selektierter Text ermittelt und gegebenenfalls mit dem BBCode [color=<farbe>]selektierter text[/color] umschlossen.

Gruß Mathias

[Genie]

Hi

... .display=="block") ? "none" : "block";

entferne die Abfrage und setze direkt "none"
damit hat es bei mir geklappt. Neues Problem: Klickt man auf einen Link, verlässt man damit auch den Button, die Verweise werden ausgeblendet, und zwar bevor der Klick ausgeführt werden. Da musst du dir also was anderes ausdenken.
Beispiel:

  
<div id="farbe">  
Farbe ändern  
<ul>  
<li><a>Deine links</a><li>  
...  
</ul>  
<div>  

beim hovern wird die ul eingeblendet
[code lang=css]
#farbe ul
{
 display:none;
}
#farbe:hover ul
{
 display:block
}
[/code

mfg
Genie

[Mathias]

Hi

... .display=="block") ? "none" : "block";
entferne die Abfrage und setze direkt "none"
damit hat es bei mir geklappt. Neues Problem: Klickt man auf einen Link, verlässt man damit auch den Button, die Verweise werden ausgeblendet, und zwar bevor der Klick ausgeführt werden. Da musst du dir also was anderes ausdenken.
Beispiel:

<div id="farbe">
Farbe ändern
<ul>
<li><a>Deine links</a><li>
...
</ul>
<div>

> beim hovern wird die ul eingeblendet  
> ~~~css
  

> #farbe ul  
> {  
>  display:none;  
> }  
> #farbe:hover ul  
> {  
>  display:block  
> }  
> 

~~~br />  

>   
> mfg  
> Genie  
>   
>   
  
So ich habe diese Änderungen an meinem Projekt durchgeführt.  
  
Folgende Resultate:  
  
- gewünschter Blureffekt durch MouseOver erzielt  
- alle Javascripte der Hyperlinks in der UL können aktiviert werden  
- SwitchFunktionen über Javascript nicht länger nötig  
  
Folgende Probleme die es noch zu lösen gilt:  
  
(1)  
Da jetzt anstatt eines Buttons (<input> oder <button>) die UL-Liste in ein <div>-Tag geschachtelt...  
  
Frage: Wenn ich später eine Enable/Disable Funktion anwenden möchte, wie realisiere ich das ohne das Attribut "Disabled"?  
Bei den Button-Tags hatte ich so ein Attribut ja.  
  
(2)  
Also ich hab da jetzt nochmal bissl gegooglet.. und das ist exakt das Verhalten einer <select>-Dropdownauswahlliste.  
  
BeiKlickAUF-BeiAuswahlZU-BeiKlickWoAndersZU  
  
Ich habe also duch den CSS-Hover einen "Blureffekt"  
  
Ich wünsche kein automatisches Sichtbar-Schalten der UL, sondern erst nach einem Mausklick. Und ich wünsche,  dass nach erfolgter Auswahl aus der UL-Liste die UL wieder zugeklappt/unsichtbar wird.  
  
  
Vielen Dank für Ideen.  
  
Der Matze

[Genie]

Hi

ich hätte zu Deiner Problembeschreibung noch eine kurze, aber immens wichtige Rückfrage: Häh?
[Cheatah]
Außerdem: Bitte zitiere vernünftig

mfg
Genie