Page 1 of 1

$(document).click() alternative.

Posted: Wed Feb 02, 2011 4:02 pm
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
	    });
	});		
		

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

Posted: Wed Feb 02, 2011 4:18 pm
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.

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

Posted: Wed Feb 02, 2011 4:33 pm
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.

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

Posted: Wed Feb 02, 2011 5:41 pm
by s.dot
http://api.jquery.com/hover/

You can pass two arguments, the mouse over function, and the mouse out function

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

Posted: Thu Feb 03, 2011 1:05 pm
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.

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

Posted: Fri Feb 04, 2011 3:29 pm
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]