Ergebnis 1 bis 8 von 8
  1. #1
    MrGroove ist offline Grünschnabel
    registriert
    19-10-2010
    Beiträge
    6

    CSS-Box als "Dropdown"-Nachahmung

    Hallo,

    im Rahmen einer Autocomplete-Funktion, die per AJAX Werte aus einer Datenbank holt stehe ich vor folgendem Problem.

    Ich habe eine Liste
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>

    die bei Mouseover eine Highlightfarbe bekommen.

    Das funktioniert auch super, allerdings suche ich schon seit Stunden nach einer Lösung, um mit den Pfeiltasten in dieser Liste zu "navigieren".

    Ich möchte also ein Dropdown-Menü nachahmen mit den gleichen Funktionen.

    Die Pfeiltasten nach oben/nach unten bekomme ich schon abgefragt, allerdings weis ich nicht, wie ich in der Liste den Hover-Status verändern kann.

    Ich habe dabei mit jQuery gearbeitet.


    Über eine Hilfe wäre ich sehr sehr dankbar!

    Viele Grüße

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: CSS-Box als "Dropdown"-Nachahmung

    Wir helfen gerne. Nur wie? Ich sehe nichts wobei man dir helfen könnte.

  3. #3
    ABNetworks.DE ist offline Routinier
    registriert
    13-01-2003
    Beiträge
    338

    AW: CSS-Box als "Dropdown"-Nachahmung

    Wie bitte siehst du denn, dass das Navigieren mit Pfeiltasten funktioniert, wenn der hover nicht da ist? Drückst du dann irgendwann Enter und der Beitrag, zu dem du dich scheinbar hinnavigiert hast, erscheint dann? Wenn das der Fall ist, hast du doch schon einen Weg gefunden, dieses Element anzusprechen und kannst einfach über Styles die hover-Farbe hinzufügen.

  4. #4
    MrGroove ist offline Grünschnabel
    registriert
    19-10-2010
    Beiträge
    6

    AW: CSS-Box als "Dropdown"-Nachahmung

    also ich habe eine liste mit n <li> Tags, allerdings weis ich nicht, wie ich - wenn ich einen "Hover-Status", der mit li:hover definiert ist, per Javascript "entfernen" und auf den nächsten "zuweisen" kann.

    Ich habe einmal was gelesen von $(...).addClass('hover' ...

    habe aber nichts genaues gefunden, wie ich "vor-" und "zurück"- gehen kann.

  5. #5
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: CSS-Box als "Dropdown"-Nachahmung

    Du hast dir die jquery Doku mal angeschaut? Die Namen der Funktionen sind so naheliegend das es schwer sein dürfte die nicht zu finden.

  6. #6
    MrGroove ist offline Grünschnabel
    registriert
    19-10-2010
    Beiträge
    6

    AW: CSS-Box als "Dropdown"-Nachahmung

    könnt ihr mal ein Beispiel geben? Ich habe gestern sehr lange in der Doku geschaut aber scheinbar einen Denkfehler drin.

    Die li-Tags haben ja keine ID.

  7. #7
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: CSS-Box als "Dropdown"-Nachahmung


  8. #8
    MrGroove ist offline Grünschnabel
    registriert
    19-10-2010
    Beiträge
    6

    AW: CSS-Box als "Dropdown"-Nachahmung

    Vielen Dank, habe jetzt die grundlegende Funktion hinbekommen.

    Ein kleiner Schönheitsfehler bleibt allerdings noch:

    Wenn ich mit der Maus auf ein Listenelement gehe und Pfeiltaste nach unten drücke, "dominiert" immer noch die Maus.

    Kann ich irgendwie verhindern, dass Maus & Tastatur sich in die Quere kommen?

    Hier mein COde:
    Code:
    $("li").bind({
              mouseenter: function(){
                $(this).addClass("hover");
              },
              mouseleave: function(){
                $(this).removeClass("hover");
              }
    });
    
    
    $(document).keyup(function(event) {
    
        if(event.keyCode == 40) {
            $('li.hover').next().addClass('hover');
            $('li.hover').prev().removeClass('hover');
        } else if(event.keyCode == 38) {
            $('li.hover').prev().addClass('hover');
            $('li.hover').next().removeClass('hover');
        }
    
        });
    
    </script>

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 28-09-2010, 14:02
  2. "DropDown" problem
    Von h0Oray im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 30-10-2007, 09:52
  3. "setInterval" für ein DropDown-Menu.
    Von christian_r im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 18-08-2007, 06:25
  4. javascript dropdown-problem in "nicht-ie"
    Von Fungus im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 23-02-2005, 23:37
  5. Antworten: 6
    Letzter Beitrag: 22-05-2003, 12:20

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •