Jump to content

jQuery hide CSS element when it looses focus

Recommended Posts

Hello here is my script which toggles a hidden class signin_bb to be displayed and in the same time changes signin css class to signin_o

$(".signin").click(function() {		$(this).toggleClass("signin_o");		$(".signin_dd").toggle();		});

The problem is that I want it when user click outs site of this menu that it vanishes, I tried jQuery's out of focus function, it worked but when u clicked on the signin_bb element which was changed from hidden to visible you would end up losing it and having to start over and even so you can never stay on it.So how would I could make it vanish if user mouse is no longer on it? And give it aroudn 1000 sec vanish point when mouse is moved away from it or no longer used.You can check my site http://otaku-plus.com/ and click sign in to see what I mean by this script and what it does, but as you will realise you will need to click Signin again to hide the thing which is not very good as its much easier to just move your mouse away from it or click on the page and have it vanish.So what can I do to achieve this?

Link to post
Share on other sites

Because you will have more than 2 events controlling the hiding of the sigin container, you can't really use toggle, as the event of the user leaving the sigin container, and it hiding will place the toggle effect out of sync of its current show() or hide() sequence. I.E even though its is hidden now, its still listed as showing, and you will have to click it twice to bring back it into sync.So you will have to use click function instead, and determine which state hidden or showing, and adjust.For when the users pointer leaves the signin container it would e best to use mouseleave, as it will only trigger when the mouse leaves this container, and not it child elements, unlike mouseout. It would be best also to use fadeOut(0), to hide this element, because with this you can now use delay(1000), which won't work with hide().with this script, it does work, but i doubt if a user usually have their mouse pointer within this area as they register/login.

$(document).ready(function(){var timedelay = 3000;	$("#signin_dd").hide();   	$(".signin").click(function() {		$(this).addClass("signin_o");		$("#signin_dd").css("display")=="none" ? $("#signin_dd").show() : $("#signin_dd").hide();	});      	$("#signin_dd").mouseleave(function () {   		$("#signin_dd").delay(timedelay).fadeOut(0);		$(".signin").removeClass("signin_o");	});		   	$("#signin_dd").mouseover(function () {		$("#signin_dd").stop().show();		$(".signin").addClass("signin_o");	   	});   });

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...