$(document).click() alternative.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

$(document).click() alternative.

Post by spedula »

I have a side panel that slides out when you click on the handle and back in when you click it again. I need a way to make it slide back in if any thing else is clicked.

$(document).click() works, but I don't want to bind .click() to the whole document. I've also tried $('div').not('. sliding-div').click() but that binds a click function to every single other element in the document, causeing massive delays in the sliding function executing.

Is there any other way to get the panel to close when something other than itself is clicked or am I stuck using $(document).click()?

Here is the actual sliding div function.

Code: Select all

        // Side bar
         $('.slide-out-div').css({
	    'left': '-392px',
	    'top': '100px',
	    'position': 'absolute'
	}).find('.handle').css ({
            'background' : 'url(\'../styles/images/contact_tab.gif\') no-repeat',
            'width' : '40px',
            'height': '122px',
	    'display': 'block',
            'textIndent' : '-99999px',
            'outline' : 'none',
            'position' : 'absolute',
            'left' : '390px',
	    'top' : '-1px'
	});
	$('.handle').click(function() {
	    var $lefty = $('.slide-out-div');
	    $lefty.animate({
		left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :	0
	    });
	});		
		
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: $(document).click() alternative.

Post by Jade »

Most people use a setTimeout to make it slide back in but you can also put a parent div around the sidebar and put an onMouseOut on it. Any time they move out of the side bar area the parent's onMouseOut will be triggered.
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

Re: $(document).click() alternative.

Post by spedula »

That would work. Two minor things though.

With out testing it I already know that if mouseout() is triggered then the setTimeout will execute the code even if the user brought the mouse back into the parent div. Is there a way to clear a setTimeout if the user moves the mouse back into the div?

Also, there are fields in this side panel and some of them invoke a color picker menu to popup on focus. How can I make the function to close the panel only fire on mouseout() but only if the mouse isn't over the color picker.

Code: Select all

$('.slide-out-div').mouseout( function() {
   if ( mouse isn't over $('.colorpicker') ) {
      closeDiv()
   }
}
Something like that, but I don't know what code would placed in there instead of "mouse isn't over"

Thanks.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: $(document).click() alternative.

Post by s.dot »

http://api.jquery.com/hover/

You can pass two arguments, the mouse over function, and the mouse out function
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

Re: $(document).click() alternative.

Post by spedula »

I'm still completely lost as to how I can get it to function the way I need it to. The logic is lost to me with passing two argument to hover.
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: $(document).click() alternative.

Post by Jade »

It's all right there in the documentation:

[text]hover( handlerIn(eventObject), handlerOut(eventObject) )

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);[/text]
Post Reply