djbepy: Item Liste mit Scrollbar -> Wie?

Hoi zäme,

ich möchte gerne eine Liste von Items erstellen, in den man eins auswählen kann und das bleibt dann auch ausgewählt SingleSelect).

Ursprung der Items ist ne Abfrage auf ne MySql-DB via PHP. Mit onClick auf ein Item, werden dann über eine JavaScript-Function und Ajax weitere Daten aus der DB abgefragt und angezeigt.

Bis auf die Item-Liste steht alles, aber die bekomme ich nicht hin. Jemand ne Idee, wie man so etwas auf die Beine stellt? Habe auch schon die Forums-Suche bemüht, nutze aber wohl die falschen Suchbegriffe.

Habe es schon mit per FOR-Schleife generierten DIVs probiert. Bekomme nur das Ausgewählt bleiben irgendwie nicht hin.

Bin Dankbar für jeden Lösungsansatz.

  1. Liebe(r) djbepy,

    Hoi zäme,

    Schwabe?

    Bekomme nur das Ausgewählt bleiben irgendwie nicht hin.

    Verleihe dem <div> über Dein onclick einen passenden Klassennamen (z.B. class="chosen"). Mittels CSS kannst Du diese Klasse dann schön gestalten.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Liebe(r) djbepy,

      Hoi zäme,

      Schwabe?

      Bekomme nur das Ausgewählt bleiben irgendwie nicht hin.

      Verleihe dem <div> über Dein onclick einen passenden Klassennamen (z.B. class="chosen"). Mittels CSS kannst Du diese Klasse dann schön gestalten.

      Liebe Grüße,

      Felix Riesterer.

      Hoi Felix,

      nein Schweizer :-)

      Danke für den Tipp. Habe mal bissl gegoogelt und bin über folgendes Beispiel mit Hilfe von jquery gestossen:

        
      div.tab {  
          background: white;  
          width: 100px;  
          border: 1px solid grey;  
          padding-left:5px;  
      }  
      div.tab.active {  
          background: blue;  
      }  
      div.tab:hover {  
          background: aqua;  
      }  
      .blue {background: blue;}  
      
      
        
              <div class="tab" style="float:right;">Tab 3</div>  
              <div class="tab" style="float:right;">Tab 2</div>  
              <div class="tab active" style="float:right;">Tab 1</div>  
      
      
        
      $('.tab').click(function() {  
          $(this).addClass('active').siblings().removeClass('active');  
      })  
      
      

      Jedoch blicke ich nicht, wo ich das jquery einbinden muss, damit es funzt. Auf der Beispiel-Seite geht es ohne Probleme:
      http://jsfiddle.net/AYRh6/26/

      Wo sehe ich den Wald vor lauter Bäumen mal wieder nicht?

      Viele Grüsse,
      Benny

      1. Hi,

        Danke für den Tipp. Habe mal bissl gegoogelt und bin über folgendes Beispiel mit Hilfe von jquery gestossen:

        Schau dir doch nochmal meine Lösung an, die erreicht das ganze komplett ohne JavaScript.

        Und verzichte bitte auf TOFU.

        Bis die Tage,
        Matti

        1. Schau dir doch nochmal meine Lösung an, die erreicht das ganze komplett ohne JavaScript.

          Hoi Matti,

          Danke für deine Antwort.

          Ich habe mal versucht und per klapt es super. Jedoch habe ich das Problem, das links neben dem Text jeweils ein Punkt ist. Wie bekomme ich den weg?

          Viele Grüsse,
          Benny

          1. Om nah hoo pez nyeetz, djbepy!

            Ich habe mal versucht und per klapt es super. Jedoch habe ich das Problem, das links neben dem Text jeweils ein Punkt ist. Wie bekomme ich den weg?

            CSS hilft auch hier: Listenformatierung

            Matthias

            --
            1/z ist kein Blatt Papier.

  2. مرحبا

    ich möchte gerne eine Liste von Items erstellen, in den man eins auswählen kann und das bleibt dann auch ausgewählt SingleSelect).
    Ursprung der Items ist ne Abfrage auf ne MySql-DB via PHP. Mit onClick auf ein Item, werden dann über eine JavaScript-Function und Ajax weitere Daten aus der DB abgefragt und angezeigt.

    Du könntest das ganz einfach mit einer Liste von Links lösen, so das auch User ohne Javascript die Inhalte sehen können. Den Links kannst du dann, wie Felix schon schrieb, bei klick eine Klasse verpassen.

    Bis auf die Item-Liste steht alles, aber die bekomme ich nicht hin. Jemand ne Idee, wie man so etwas auf die Beine stellt?

    Es ist eine Liste von Links. Was Javascript daraus macht, ist eine andere Geschichte, primär ist es aber eine Liste. Auf keinen Fall ist es eine Div-Suppe.

    mfg

  3. Hi,

    ich möchte gerne eine Liste von Items erstellen, in den man eins auswählen kann und das bleibt dann auch ausgewählt SingleSelect).

    Eine Liste ist eine Liste, und wenn man von einer Auswahl nur ein Item erlauben will, bleiben Radio-Buttons und deine select-Box.

    Die Lösung mit der select-Box ist klar, deswegen gehe ich nicht drauf ein. Die Liste mit Radio-Buttons ist aber auch nicht viel schwerer, schau, dir z.B. mal das Beispiel an:

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset='UTF-8' />  
    <title>TTT</title>  
    <style type='text/css'>  
    [code lang=css]ul input {  
    	display: none;  
    }  
      
    input:checked ~ label {  
    	border: 1px solid red;  
    }
    

    </style>
    </head>
    <body>
    <form method='POST' action=''>
    <ul>
    <li><input type='radio' value='1' id='item-1' name='ig' /><label for='item-1'>1</label></li>
    <li><input type='radio' value='2' id='item-2'  name='ig'/><label for='item-2'>2</label></li>
    <li><input type='radio' value='3' id='item-3'  name='ig'/><label for='item-3'>3</label></li>
    <li><input type='radio' value='4' id='item-4'  name='ig'/><label for='item-4'>4</label></li>
    <li><input type='radio' value='5' id='item-5'  name='ig'/><label for='item-5'>5</label></li>
    </ul>

    </form>
    </body>
    [/code]

    Per CSS blendest du den Radio-Button aus, und mit dem Sibling-Selector kannst du das Label noch umformatieren. Da der Radio-Button nicht mehr da ist, kannst du nur noch das Label zu auswählen nutzen. Dein JavaScript kannst du nun z.B. mit einem onchange auf die radio-Buttons aktivieren.

    Ohne es gerade testen zu können, solltest du hier nicht die IE-"Probleme" mit change/focus haben, da der radio-Button keinen focus haben kann.

    Bis die Tage,
    Matti