jQuery: Click outside div then fadeout!?

JavaScript
1

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

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 :slight_smile:

2

Have you considered using the mouseleave event on the suggestions box to trigger it fading out?

3

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

It’s okay, I misunderstood what you’re needing.

Can you link us to a test page on the internet with the problem code?

5

Here you go: http://www.golfacross.com/TEST_searchform.php

6

From your test page, it seems that the setOnLoadCallback method is not being called because it doesn’t exist.


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.

Here’s the code:


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.

7

OH YES… Didn’t think of that… Works like a charm. Thank :wink: