SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover effect with Keyboard

    Hello

    First please note that I am not using jQuery nor, I want to use.

    Now, I have a script that has auto complete thing with the help of Javascript and DOM and AJAX, and I follow this tutorial http://www.nodstrum.com/2007/09/19/autocompleter/.

    Well everything working great, but, I want 1 thing. When the Suggestion box is visible, and has all the options, and If I mouse over them, it will show the hover effect. I want to achieve the same with keyboard. Like if I press down for the first time, the first option will be selected, and then if i press down again, it will select (hover) the next and so on, and similar is the case with up arrow key. Now, when i press enter, the selected option should go to the text box as if I click on a item.

    Please guide me how I can achieve this.

    thanks
    Zeeshan

  2. #2
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Run the same function you're running onmouseover on onfocus.

  3. #3
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I am not running any function.

    It has <p> in a <div> and for every <p> in that div, i have a css to make it hover.

    Play, with every <p> i have an onclick fucntion to put the contnets of <p> on the textbox.

  4. #4
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using the :active psuedo on the textbox then. If that doesn't work, then you'll have to write a function.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It has <p> in a <div> and for every <p> in that div, i have a css to make it hover.

    Play, with every <p> i have an onclick fucntion to put the contnets of <p> on the textbox.
    For this reason I do not put onclick events on unclickable items. I will always either have an anchor in there, or will make Javascript generate one.

    So if I already had a <p> in my HTML, I'll
    create and anchor
    append it as child of the p
    set onclick function onto that anchor.

    This means I can have css do :focus styles. :active will imitate :focus for IE6, otherwise it means "while clicking" (so long as either the finger is holding down the key or the mouse button). As soon as said finger lets up, :active is lost, although some browsers place a :focus on elements who have been clicked (FF, Opera, IE) while others don't (Safari, Chrome).

  6. #6
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes

    Thanks a lot, you understand my problem and suggested something really good.

    So you mean instead of <p> i should use <a> ??? Right ?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Not "instead"... but it's valid to have <p><a href="somewhere">Text</a></p>

    If users without Javascript can't make anything useful happen with those anchors, then I would have just the P to start and make Javascript create the anchors. Otherwise, if the anchors can take all users somewhere useful, you can have them sitting in the HTML in the first place.

    Since it looks like they would only be there to be clickable, I'd have JS create them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •