SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: Click outside div then fadeout!?

    I can't seem to get this to work. I want to be able to fade div out if inactive or if a user clicks outside the div.,..

    Here is the script using jquery 1.3.1
    Code JavaScript:
    jQuery.noConflict();
    google.setOnLoadCallback(function()
    {
    	// Fade out the suggestions box when not active 
    	 jQuery("input").blur(function(){
    	 	jQuery('#suggestions').fadeOut();
    	 });
     
            // Fade out the suggestions box when click outside 
    	 jQuery("input").click(function(){
    	 	jQuery('#suggestions').fadeOut();
    	 });
    });
     
    function lookup(inputString) {
    	if(inputString.length == 0) {
    		jQuery('#suggestions').fadeOut(); // Hide the suggestions box
    	} else {
    		jQuery.post("frontsearch.php", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call
    			jQuery('#suggestions').fadeIn(); // Show the suggestions box
    			jQuery('#suggestions').html(data); // Fill the suggestions box
    		});
    	}
    }

    Everything works fine ecxept it doesnt fadeout...?

    Thanks in advance :-)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Have you considered using the mouseleave event on the suggestions box to trigger it fading out?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Have you considered using the mouseleave event on the suggestions box to trigger it fading out?
    Have been searching around trying to figure out how to aproach this "mouseleave" been can't figure it out... Can somebody please help i regards to my script...?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jmansa View Post
    Have been searching around trying to figure out how to aproach this "mouseleave" been can't figure it out...
    It's okay, I misunderstood what you're needing.

    Quote Originally Posted by jmansa View Post
    Can somebody please help i regards to my script...?
    Can you link us to a test page on the internet with the problem code?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It's okay, I misunderstood what you're needing.
    Can you link us to a test page on the internet with the problem code?
    Here you go: http://www.golfacross.com/TEST_searchform.php

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    From your test page, it seems that the setOnLoadCallback method is not being called because it doesn't exist.

    Code:
    jQuery.noConflict();
    google.setOnLoadCallback(function()
    You do not have the google library loaded, so setOnLoadCallback cannot work.

    I suggest that since you're already using jQuery code in there, that you use the jQuery callback to run the code when the DOM is ready.

    There is a post in our tips & tricks section about doing that in relation to jQuery's noConflict.
    http://www.sitepoint.com/forums/show...&postcount=102

    Here's the code:

    Code javascript:
    jQuery.noConflict();
    jQuery(function ($) {
        // jQuery code in here
    });

    Because of that $ symbol in the function argument, you can also still safely use $ inside the function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    From your test page, it seems that the setOnLoadCallback method is not being called because it doesn't exist.

    Code:
    jQuery.noConflict();
    google.setOnLoadCallback(function()
    You do not have the google library loaded, so setOnLoadCallback cannot work.

    I suggest that since you're already using jQuery code in there, that you use the jQuery callback to run the code when the DOM is ready.

    There is a post in our tips section about doing that in relation to jQuery's noConflict.
    http://www.sitepoint.com/forums/show...&postcount=102

    Here's the code:

    Code javascript:
    jQuery.noConflict();
    jQuery(function ($) {
        // jQuery code in here
    });

    Because of that $ symbol in the function argument, you can also still safely use $ inside the function.
    OH YES... Didn't think of that... Works like a charm. Thank ;-)


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
  •