[HTML/JS] Een custom selectbox op keybord laten reageren

[Rashann]

Hoi,

Ik heb het volgende probleem waar ik niet uit kom:
Een klant van ons heeft in z'n webpagina een formulier waarin zijn klant een transport kan aanvragen. Dit formulier is helemaal gestyled met ronde hoeken en shadowen e.d. en dit werkt allemaal goed. Ook de selectbox werking zoals deze er nu in zit (door DIV's opgebouwd) werkt zoals het hoort.

Echter, in deze selectbox zit een hele lijst met landen, en de klant wil nu graag de functionalitiet dat als de gebruiker op de 'D' drukt, de scrolldiv ook naar de 'D' toe springt... ik heb echter geen idee hoe ik dat zou kunnen doen.

code:

<input type="hidden" name="afhaalland" id="afhaalland" value="NL">
<div class="form_rond">
  <div class="form_rond_left"></div>
  <div id="select_container">
    <div class="select_text" id="selected_1" OnClick="onmenu = 1; showSelect('selected_1', 1);">
      <span id="selected_text_1">Netherlands</span>
    </div>
    <div class="select_arrow" id="selected_arrow_1" onMouseOver="onmenu = 1; showSelect('selected_1', 1);" onMouseOut="onmenu = 0;">
      <img src="images/rond_select_arrow.jpg" border="0">
    </div>
  </div>
  <div class="form_rond_right">
    <div class="selected_fields" style="display:none; height: 180px; overflow: auto;" onMouseOver="onmenu = 1;" onMouseOut="onmenu = 0;" id="menu_selected_1" name="menu_selected_1">
      <div><a onMouseOver="this.className='select_link_act'" onMouseOut="this.className='select_link'" class="select_link" href="javascript:;" onClick="selectItem('afhaalland', 'AF', 'selected_text_1', 'Afghanistan', 'selected_1');">Afghanistan</a></div>
      <div><a onMouseOver="this.className='select_link_act'" onMouseOut="this.className='select_link'" class="select_link" href="javascript:;" onClick="selectItem('afhaalland', 'AL', 'selected_text_1', 'Albania', 'selected_1');">Albania</a></div>
      ....
      <div><a onMouseOver="this.className='select_link_act'" onMouseOut="this.className='select_link'" class="select_link" href="javascript:;" onClick="selectItem('afhaalland', 'ZW', 'selected_text_1', 'Zimbabwe', 'selected_1');">Zimbabwe</a></div>
    </div>
  </div>
</div>

Dit is de code van de styled selectbox.

Wat ik heb gebrobeerd:

• Proberen de DIV naar een <a name=""> te laten gaan, maar ik kan niet iets vinden waarmee in binnen een DIV kan aangeven dat ie naar de <a> moet scrollen.
• De scrolldiv via de style een andere top geven, maar als dit lijkt alleen te werken op de "selected_fields" div, niet op een container div als ik die daarbinnen plaats. (en daarbij zou ik ook niet weten hoe ik de offset zou moeten berekenen voor iedere nieuwe letter).
• Op google gezocht naar een HTML/Javascript selectbox waarbij de toetsenbordwerking wel is geimplementeerd, maar deze blijken lastig te vinden

De beste oplossing lijkt me het mogelijk maken dat ik via Javascript de keycode afvang en dan de scrolldiv naar die <a name> kan laten springen, maar deze oplossing krijg ik niet uitgewerkt.

Iemand die weet hoe ik het wel uitgewerkt krijg, of een andere oplossing kan bedenken?

[Blaise]

Kan het niet met scrollTop? met item nummer * hoogte item

De beste oplossing lijkt me het mogelijk maken dat ik via Javascript de keycode afvang en dan de scrolldiv naar die <a name> kan laten springen, maar deze oplossing krijg ik niet uitgewerkt.

Deze oplossing lijkt me het eenvoudigst. Waarom krijg je het niet uitgewerkt?

[ Voor 70% gewijzigd door Blaise op 15-05-2007 16:18 ]

[Rashann]

Die oplossing krijg ik niet uitgewerkt, omdat ik niet naar de #name kan toespingen in die scrollable DIV. Ik krijg het wel voor het document aan de gang met de location.hash, en dit zou ik voor een iframe ofzo ook wel aan de gang krijgen, maar die DIV heeft geen location waar ik naar kan wijzen (en het document gebruiken voor de hash werkt niet, want die scrolled de DIV niet mee, maar scrolled alleen het document naar de DIV toe (aangezien de #name daar binnen zit))

[Verwijderd]

document.onkeydown = function()
{
if(event.keyCode=="13")
{
/*do iets */
}
}

en vervolgens met anchors werken in je div lijstje... en dan met een url via #anchornaam er naar toe laten scrollen.... zou moeten werken

[ Voor 0% gewijzigd door Verwijderd op 17-05-2007 22:27 . Reden: keyCode 13 = enter..dus eff zoeken naar degene die je nodig hebt ]

[BikkelZ]

RainManX schreef op woensdag 16 mei 2007 @ 13:57:
Die oplossing krijg ik niet uitgewerkt, omdat ik niet naar de #name kan toespingen in die scrollable DIV. Ik krijg het wel voor het document aan de gang met de location.hash, en dit zou ik voor een iframe ofzo ook wel aan de gang krijgen, maar die DIV heeft geen location waar ik naar kan wijzen (en het document gebruiken voor de hash werkt niet, want die scrolled de DIV niet mee, maar scrolled alleen het document naar de DIV toe (aangezien de #name daar binnen zit))

Een <DIV> bevindt zich toch in dezelfde location? Daar hoef je toch niets voor aan te passen? En je kunt altijd een <DIV> in een <A> doen of vice versa natuurlijk.

[BikkelZ]

Hmm in het geval dat hij inderdaad niet springt in een scrollbare div moet je dus gaan springen met javascript.

Oud maar bruikbaar (fijne site):

http://www.quirksmode.org/js/layerscroll.html

------------

Wat betreft die landen, die komen waarschijnlijk ook uit een database. Vies en bruikbaar: gooi ergens een <SCRIPT> tag tussen je HTML waarin de eerste twee a drie letters van die landen staan met de corresponderende ID's in een array. Rol bij iedere toetsaanslag door je array heen en kijk wanneer de eerst substring matcht.

[ Voor 46% gewijzigd door BikkelZ op 17-05-2007 23:24 ]

[Urk]

Grappig, toevallig kwam ik dit topic tegen bij het browsen door active topics en toevallig ben ik ook net bezig met het maken van een customized select menu.

Wanneer ik kom bij keyboard shortcuts laat ik dat weten als ik een goede oplossing heb...

Reeleezee, een online administratie pakket heeft dit trouwens wel werkend....