Gunnar: Formular im CSS-Menü

Ich habe ein CSS-Menü, in dem in einem DIV ein Login-Formular eingebettet ist.

  
<ul id="mainmenu">  
	...  
	<li class="sub"><ul><li><a href="forum.php">Forum</a>  
		<ul><li>  
			<div src="menuLogin.php?url=forum.php"></div>  
		</li></ul>  
	</li>  
	...  
</ul>  

Das Login-Formular (menuLogin.php) wird per JS in den div mit id="forum" nachgeladen.

Das funktioniert soweit auch prima; nur wenn man den Usernamen mit der Maus aus den Vorgaben auswählt, klappt das Menü zu. Hat irgend jemand eine Idee, ob und wie sich das verhindern lässt?

  1. Das Login-Formular (menuLogin.php) wird per JS in den div mit id="forum" nachgeladen.

    Das funktioniert soweit auch prima; nur wenn man den Usernamen mit der Maus aus den Vorgaben auswählt, klappt das Menü zu. Hat irgend jemand eine Idee, ob und wie sich das verhindern lässt?

    Ich habe dazu jede Menge Ideen. Aber welche davon die zutreffende sein könnte kann ich mangels zielführender Informationen nicht wissen.

    Jörg Reinholz

    1. zielführende Informationen ...

      Der div verschwindet, sobald die Maus über den Vorschlägen schwebt (im FF wie im IE), obwohl dabei der Bereich des div nicht verlassen wird. Im Safari verschwindet der div erst, _nachdem_ ein Vorschlag angeklickt wurde.

      1. @@Gunnar:

        nuqneH

        zielführende Informationen ...

        Der div verschwindet, sobald die Maus über den Vorschlägen schwebt (im FF wie im IE), obwohl dabei der Bereich des div nicht verlassen wird. Im Safari verschwindet der div erst, _nachdem_ ein Vorschlag angeklickt wurde.

        Das sind keine zielführende Informationen!

        Eine zielführende Information ist die Verlinkung deiner problematischen Seite. Oder ein Nachbau des problemtischen Teils in Dabblet o.ä. Online-Tools.

        Oder zumindest die Angabe der DOM-Struktur (salopp gesagt: des HTML, nachdem das Menü per JavaScript nachgeladen wurde) und des zugehörigen CSS. Vorzugsweise aber Online-Beispiel, woran man das Problem sofort sehen kann.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Eine zielführende Information ist die Verlinkung deiner problematischen Seite. Oder ein Nachbau des problemtischen Teils in Dabblet o.ä. Online-Tools.

          Das ganze ist noch nicht online ... aber hier per Dabblet: Der Code und in Aktion

          Einmal Username und Passwort eingeben & abschicken; danach könnt Ihr das Problem nachvollziehen.

          1. sehe gerade dass es auch in kurz geht: http://dabblet.com/gist/a0aa03011061f57ada28

            1. sehe gerade dass es auch in kurz geht: http://dabblet.com/gist/a0aa03011061f57ada28

              Wenn ich das richtig gesehen habe, so wird das Formular innerhalb von einer Liste der Klasse hmenu angezeigt.

              Die ist wie folgt mit CSS formatiert:

              .hmenu ul { position: absolute; padding: 0; display: none; list-style: none; }
              .hmenu li:hover ul { display: block; }

              Logisch: Wenn die Maus aus dem Block raus geht wird dieser nicht mehr angezeigt. Wann die Maus aus dem Block geht, darüber haben die Entwickler einerseits FF und IE, anderereseits Safari Deiner Schilderung eben andere Vorstellungen.

              Vorschläge habe ich übrigens gar keine gesehen.

              Ratschlag: Räum auch mal den Code ein wenig auf und validiere ihn.

              Jörg Reinholz

              1. Vorschläge habe ich übrigens gar keine gesehen.

                Ratschlag: Räum auch mal den Code ein wenig auf und validiere ihn.

                Hallo Jörg; danke für die Antwort.

                Vorschläge vom Browser gibt es natürlich erst, wenn Du selbst einmal einen eingegeben hast. Daher schrieb ich:

                Einmal Username und Passwort eingeben & abschicken; danach könnt Ihr das Problem nachvollziehen.

                hier nochmal in validiert: http://dabblet.com/gist/7fbb0228ad9699110b39
                ändert am Problem leider nichts. Sobald die Maus über dem Vorschlag ist, ist sie nicht mehr über dem div bzw. li. :-|

                Eine Lösung gibt es da wohl nicht ... workaround in JS?
                Hat´s sowas überhaupt schon mal gegeben? (falls nicht, weiß ich jetzt warum)

                1. Om nah hoo pez nyeetz, Gunnar!

                  Eine Lösung gibt es da wohl nicht ... workaround in JS?
                  Hat´s sowas überhaupt schon mal gegeben? (falls nicht, weiß ich jetzt warum)

                  eine Lösung, die in genau die andere Richtung zielt, könnte autocomplete="off" sein. Wahrscheinlich musst du aber vorher die Chronik löschen.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ober und Oberleitung.

                  1. eine Lösung, die in genau die andere Richtung zielt, könnte autocomplete="off" sein. Wahrscheinlich musst du aber vorher die Chronik löschen.

                    Dann muss ich mir wohl was ganz anderes einfallen lassen. Ich kann schlecht alle User auffordern, ihre Chronik zu löschen und künftig ihr Passwort von Hand einzugeben.

                    Danke.

                    1. Om nah hoo pez nyeetz, Gunnar!

                      eine Lösung, die in genau die andere Richtung zielt, könnte autocomplete="off" sein. Wahrscheinlich musst du aber vorher die Chronik löschen.
                      Dann muss ich mir wohl was ganz anderes einfallen lassen. Ich kann schlecht alle User auffordern, ihre Chronik zu löschen und künftig ihr Passwort von Hand einzugeben.

                      Ich wusste nicht, dass es bereits ein Produktivsystem ist.

                      Du könntest mit JavaScript eine entsprechende Klasse setzen.

                      Was machst du mit Nutzern ohne Maus?

                      Matthias

                      --
                      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wand und Wanderung.

                      1. Du könntest mit JavaScript eine entsprechende Klasse setzen.

                        öhm ... wie was? eine entsprechende Klasse?
                        Momentan sehe ich nur die Möglichkeit, dem Feld für den Usernamen einen neuen Namen zu geben.
                        Hab schon ein paar andere Ideen von stackoverflow durch; helfen aber alle nicht.

                        Was machst du mit Nutzern ohne Maus?

                        Für die gibt es einen einfachen Link. Ich halte es für unwahrscheinlich, dass der gebraucht wird; aber er ist da.

                        1. Naja ... das Problem wird nur bei den Usern auftreten, die mehrere Usernamen haben.
                          Vielleicht einfach mal schauen, wie viele das sind.

                        2. Om nah hoo pez nyeetz, Gunnar!

                          Du könntest mit JavaScript eine entsprechende Klasse setzen.
                          öhm ... wie was? eine entsprechende Klasse?

                          Wenn der entsprechende Menüpunkt gehovert wird, setzt du für das Formular die Klasse „show“ oder was anderes sprechendes

                          .show { display: block; }

                          Dann gibt es die dritte Möglichkeit: Abbruch

                          Bei Klick auf eine der drei Möglichkeiten entfernst du die Klasse wieder.

                          Momentan sehe ich nur die Möglichkeit, dem Feld für den Usernamen einen neuen Namen zu geben.

                          Ja, einen zufälligen.

                          Was machst du mit Nutzern ohne Maus?
                          Für die gibt es einen einfachen Link. Ich halte es für unwahrscheinlich, dass der gebraucht wird; aber er ist da.

                          Tablet, Handy?

                          Matthias

                          --
                          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Spitz und Spitzer.

                2. Eine Lösung gibt es da wohl nicht ... workaround in JS?

                  Dabblet: JS-Workaround tut es auch nicht :(

                  1. Om nah hoo pez nyeetz, Gunnar!

                    Eine Lösung gibt es da wohl nicht ... workaround in JS?
                    Dabblet: JS-Workaround tut es auch nicht :(

                    Ja, weil onmouseout und „nicht mehr :hover“ identisch reagieren. Das hatte ich gestern auch schon mal schnell getestet.

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kolk und Kolkrabe.

                  2. Eine Lösung gibt es da wohl nicht ... workaround in JS?
                    Dabblet: JS-Workaround tut es auch nicht :(

                    ... es sei denn, ich baue noch eine Bedingung ins onMouseOut ein (onFocus/onBlur im <input name="uname"> Variable setzen, die beim obMouseOut des div abgefragt wird);
                    dann gibt es aber wieder Probleme, wenn zwar der div verlassen wird, aber nicht das Eingabefeld ... es sei denn, ich baue noch ein MouseOver in alle anderen Menüpunkte, eigentlich in alle anderen Elemente, ein.
                    Uff.

      2. zielführende Informationen ...

        Der div verschwindet, sobald die Maus über den Vorschlägen schwebt (im FF wie im IE), obwohl dabei der Bereich des div nicht verlassen wird. Im Safari verschwindet der div erst, _nachdem_ ein Vorschlag angeklickt wurde.

        Das ist nicht "zielführend". Zielführend ist wenn wir das Problem nachvollziehen können. Stell eine Seite mit dem Problem online. Eventuell als Fiddle.

        Jörg Reinholz

  2. Hi

      	<div src="menuLogin.php?url=forum.php"></div>  
    
      
    geht das ?  
    Cool - brauchts gar kein iframe mehr ;-)  
      
    Viele Grüße aus LA
    
    -- 
    ralphi
    
    1. Hi

        	<div src="menuLogin.php?url=forum.php"></div>  
      
      
      >   
      > geht das ?  
      > Cool - brauchts gar kein iframe mehr ;-)  
      >   
      > Viele Grüße aus LA  
      
      nein, das geht so nicht .... nicht ohne JavaScript.  
      JQuery z.B. bringt dazu die Methode "load" mit.
      
  3. @@Gunnar:

    nuqneH

    <div src="menuLogin.php?url=forum.php"></div>

    Das ist kein gültiges HTML; div darf kein src-Attribut haben. Verwende data-src.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. Hab es jetzt ganz anders gelöst: im Menü gibt es nur noch einen Button "bitte einloggen"; onClick wird ein DIV mit dem Login-Formular eingeblendet und der Fokus auf das Usernamen-Feld gesetzt.

    Danke fürs Mittdenken ... und für dabblet.