SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery focus / blur

    I have an input text field that when clicked, I want a div to apprear and then when you click off of the input field, I want to hide the div. The trick is, If you click on the input field and then click on the div, I don't want to hide it.

    This only works in FF, but not IE and I need to it to be cross-browser compatible.

    Code JavaScript:
    $('#div').hide();
     
    $('#input_textfield').focus(function() {
    	$('#div').fadeIn('slow');
    }).blur(function() {
    	$('#div').fadeOut('slow');
    });

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any jQuery experts know how to do this?

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Really, any advice on how I should go about this is appreciated. I've tried to wrap my head around it and haven't been able to get it to work properly yet. Thanks!

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the blur function call in a timeout and cancel it if the div is clicked or moused over etc.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding a click event to the #div:
    $('#input_textfield').focus(function() {
    $('#div').fadeIn('slow');
    }).blur(function() {
    $('#div').fadeOut('slow');
    $('#div').click(function(){
    $('#div').show();
    });
    });


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
  •