onblur Alternative?

[Gamesalert]

Hallo
Ich wollte ein Fenster machen wie bei Facebook wenn man auf "Konto" klickt. Das heißt beim klick öffnet es sich und sobald man irgendwo anders hinklickt verschwindet es wieder.
Den Javascript fürs anzeigen habe ich schon. Mein Code sieht momentan so aus : <a href="javascript:anzeigen('box')" onblur="javascript:anzeigen('box')">Text</a>.
Das Problem bei diesem Code ist, dass die Box auch verschwindet, wenn man in die Box klickt.

Ich hoffe ihr versteht alles.

Danke schonmal

--Matz

[Gamesalert]

-push- ?

[BNa]

Wir müssten mal den kompletten Code sehen. So kann Dir niemand helfen.

[Gamesalert]

Code: Alles auswählen

<!-- IF S_USER_LOGGED_IN --> <a href="javascript:show();" onfocus="javascript:anzeigen('profil');" onblur="javascript:anzeigen('profil');"><div class="menu">Profil</div></a><!-- ELSE --><a href="./ucp.php?mode=login"><div class="menu">Einloggen</div></a><!-- ENDIF -->

und der Inhalt der Box sieht so aus:

Code: Alles auswählen

<div id="profil"style="display:none;background-image:url(http://img.webme.com/pic/v/vbanana/profilbox.png);width:150px;min-height:99px;position:absolute;z-index:1;left:50%;top:14px;margin-left:287px;"><div style="text-align:right;padding-top:7px;padding-right:11px;"> <font style="font-size:14px;color:#000;text-shadow:1px 1px 2px #FFF;text-align:right;font-weight:bold;">Profil</font></div>
<div style="background-color:#ccc;border-right:1px solid #333;border-bottom:1px solid #333;border-left:1px solid #333;margin-top:23px;">
<div class="menupunkt"><a href="{U_DOWNLOADS}" title="{L_DOWNLOADS}">{L_DOWNLOADS}</a></div>
<div class="menupunkt"><a href="./ucp.php?i=174">Einstellungen</a></div>
<div class="menupunkt"><a href="./ucp.php">Persönlicher Bereich</a></div>
<div class="menupunkt"><a href="{U_LOGIN_LOGOUT}">Abmelden</a></div>
</div>
</div>

Der Javascript dafür ist Folgender:

Code: Alles auswählen

<script type="text/javascript">
function anzeigen(x){
if(document.getElementById(x).style.display=='none')
document.getElementById(x).style.display='block';
else document.getElementById(x).style.display='none';}
</script>

[cYbercOsmOnauT]

Hallo Gamesalert,

Ich würde es so lösen

Code: Alles auswählen

onfocus="javascript:anzeigen('profil', true);" onblur="javascript:anzeigen('profil', false);"

Code: Alles auswählen

function anzeigen(x, switcher){
if (typeof switcher == 'undefined') {
if(document.getElementById(x).style.display=='none')
document.getElementById(x).style.display='block';
else document.getElementById(x).style.display='none';
}
else
document.getElementById(x).style.display=(switcher?'block':'none');
}

Meine Version forziert ein Sichtbar/Unsichtbar und falls das zweite Argument nicht mitgeschickt wurde, wird die Sichtbarkeit umgekehrt.

Grüße,
Tekin

P.S.: Wobei ich persönlich würde eher jQuery nehmen

[Gamesalert]

jQuery habe ich auch auf meiner Seite integriert aber habe einfach kein passendes Plugin gefunden. Uch falls ihr es noch nicht gemerkt habt, ich habe nicht soo die Javascript Kenntnisse

Also Danke schonmal für deinen Code. Der hat bei mir aber leider nicht geklappt..

[Gamesalert]

-push-

[cYbercOsmOnauT]

Mea culpa... es muss natürlich so lauten

Code: Alles auswählen

onfocus="anzeigen('profil', true);" onblur="anzeigen('profil', false);"

Und wenn Du jQuery wirklich integriert hast, dann sieht die Funktion so aus

Code: Alles auswählen

function anzeigen(x, switcher){
var divobj = $('#'+x);
if (typeof switcher == 'undefined') {
if(divobj.is(':hidden'))
divobj.show();
else divobj.hide();
}
else
switcher ? divobj.show() : divobj.hide();
}

Grüße,
Tekin

[Gamesalert]

hmn tut mir echt leid vielleicht mache ich auch irgendwas falsch aber ich bekomme es einfach nicht hin. Habe jetzt genau das da stehen:

der Java Code:

Code: Alles auswählen

<script type="text/javascript">
function anzeigen(x, switcher){
var divobj = $('#'+x);
if (typeof switcher == 'undefined') {
if(divobj.is(':hidden'))
divobj.show();
else divobj.hide();
}
else
switcher ? divobj.show() : divobj.hide();
}
</script> 

die Box:

Code: Alles auswählen

<div id="profil"style="display:none;background-image:url(http://img.webme.com/pic/v/vbanana/profilbox.png);width:150px;min-height:99px;position:absolute;z-index:1;left:50%;top:14px;margin-left:287px;"><div style="text-align:right;padding-top:7px;padding-right:11px;"> <font style="font-size:14px;color:#000;text-shadow:1px 1px 2px #FFF;text-align:right;font-weight:bold;">Profil</font></div>
<div style="background-color:#ccc;border-right:1px solid #333;border-bottom:1px solid #333;border-left:1px solid #333;margin-top:23px;">
<div class="menupunkt"><a href="{U_DOWNLOADS}" title="{L_DOWNLOADS}">{L_DOWNLOADS}</a></div>
<div class="menupunkt"><a href="./ucp.php?i=174">Einstellungen</a></div>
<div class="menupunkt"><a href="./ucp.php">Persönlicher Bereich</a></div>
<div class="menupunkt"><a href="{U_LOGIN_LOGOUT}">Abmelden</a></div>
</div>
</div>

und der Link:

Code: Alles auswählen

<a href="#" onfocus="anzeigen('profil', true);" onblur="anzeigen('profil', false);"><div class="menu">Profil</div></a>

[cYbercOsmOnauT]

erm.. ein anchor (a href) hat keinen Focus und somit keinen Blur. Sondern eher ein onmouseover und onmouseout. Teste es mal damit