Seite 1 von 3
onblur Alternative?
Verfasst: 26.01.2011 20:44
von 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
Re: onblur Alternative?
Verfasst: 27.01.2011 22:40
von Gamesalert
-push- ?
Re: onblur Alternative?
Verfasst: 28.01.2011 21:44
von BNa
Wir müssten mal den kompletten Code sehen. So kann Dir niemand helfen.
Re: onblur Alternative?
Verfasst: 28.01.2011 23:30
von 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>
Re: onblur Alternative?
Verfasst: 29.01.2011 17:15
von 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
Re: onblur Alternative?
Verfasst: 29.01.2011 22:38
von 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..
Re: onblur Alternative?
Verfasst: 31.01.2011 21:25
von Gamesalert
-push-
Re: onblur Alternative?
Verfasst: 01.02.2011 15:46
von 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
Re: onblur Alternative?
Verfasst: 01.02.2011 21:56
von 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>
Re: onblur Alternative?
Verfasst: 01.02.2011 23:29
von cYbercOsmOnauT
erm.. ein anchor (a href) hat keinen Focus und somit keinen Blur. Sondern eher ein onmouseover und onmouseout. Teste es mal damit