SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX hide Div Without Link

    Hey guys. I have an autocomplete search menu. It's working, but I want the div to disappear when the user clicks outside the div area. A perfect example of this is on facebook. When your searching for a name, the menu comes up and when you click away, it dissapears!
    I live in Madison. Where in the W1RLD do you live?

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think you want to setup an event handler on the 'blur' event.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Something like the following will do the trick, with an appropriate class called "hidden" to hide the div.

    Code javascript:
    document.getElementById('mySearch').onblur = function () {
        document.getElementById('searchDiv').className = 'hidden';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help. I got it working. I simply add an onclick to my body. that way when the click anywhere on the body it will go away. not tough at all.
    I live in Madison. Where in the W1RLD do you live?

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the mouse events and setTimeout to handle this.

    When leaving the control or the div you have created, it would wait a specified time and then hide. If you move back into the controls, it would stop the count down and stay open, until you move out again or click on a link.



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
  •