Jquery Toggle Mouseup Conflict

[-Karl-]

Hello,

 

I'm trying to find a way to use jQuery to change a div to either display:none; or display:block;

 

So far the toggle function works fine, here's my code:

   <script type="text/javascript">
    $(document).ready(function() {
	    $("#login").click(function(e) {
		    $('.login-form').toggle();
	    });

	    $("#register").click(function(e) {
		    $('.register-form').toggle();
	    }); 
	    $(document).mouseup(function(e) {		
		    $('.register-form').hide();
	    });
    });
   </script>

 

As you can see, the #login just toggles between show and hide. Whereas register, simply shows when it's clicked once, but if it's clicked again it doesn't hide like the login. However, I need the mouseup on both so that it also hides if a visitor clicks off the div completely.

 

What's a work around for this?

[-Karl-]

Just had a mess around, what is wrong with this? Because it shows, but then it won't hide when it's clicked again. login is definitely set to true as I tested with alerts.

 

 $(document).ready(function() {
	 var login = false;
	 if ( login == false ) {
		 $("#login").click(function(e) {
			 $('.login-form').show();
			 login = true;
		 });
	 }
	 if ( login == true ) {
		 $("#login").click(function(e) {
			 $('.login-form').hide();
			 alert(login);
			 login = false;
			 alert(login);
		 });
	 }
   });

Edited October 4, 2012 by -Karl-

[Christian F.]

What you're doing here is that you're assigning one function to the login element, and this assignment happens once the document is ready. Depending upon the status of the login variable you're assigning either the "hide" or the "show" function.

Since the event function isn't changed, it'll always produce the same result.

 

What you want to do, is to move the checking of the status to inside the event function. So that the status gets checked every time you click it, instead of just once on the page load.

[-Karl-]

What you're doing here is that you're assigning one function to the login element, and this assignment happens once the document is ready. Depending upon the status of the login variable you're assigning either the "hide" or the "show" function.

Since the event function isn't changed, it'll always produce the same result.

 

What you want to do, is to move the checking of the status to inside the event function. So that the status gets checked every time you click it, instead of just once on the page load.

Ahh right, I'm quite new to jQuery, do you have any suggestions how I could go about doing this?

[derwert]

However, I need the mouseup on both so that it also hides if a visitor clicks off the div completely.

 

Before providing any code let me confirm with you I understand what you're trying to do.

 

You have a login and a register link. When they are clicked they will show their corresponding form. If they are clicked again they will hide div the form is in.

When the mouse leaves the div the form is in you want the div to hide? If so is "login-form" and "register-form" the classes for your divs the forms are located in?

Edited October 5, 2012 by derwert

[-Karl-]

Before providing any code let me confirm with you I understand what you're trying to do.

 

You have a login and a register link. When they are clicked they will show their corresponding form. If they are clicked again they will hide div the form is in.

When the mouse leaves the div the form is in you want the div to hide? If so is "login-form" and "register-form" the classes for your divs the forms are located in?

Almost correct, I don't want the form to close just if the mouse leaves, only when a person clicks off the form, anywhere else on the page.

[-Karl-]

After more messing around I've come up with:

 $(document).ready(function() {		
	 $('#login').toggle(function() {
		 $(".login-form").show();
		 $(".login").css("border-bottom","1px solid #add0d0");
	 }, function() {
		 $(".login-form").hide();
		 $(".login").css("border-bottom","1px solid #d1e8e8");
	 });

	 $(".login-form").mouseup(function() {
		 return false
	 });
	 $(document).mouseup(function(e) {
		 if($(e.target).parent("a.sign-in").length==0) {
			 $(".login-form").hide();
			 $(".login").css("border-bottom","1px solid #d1e8e8");
		 }
	 });		
	 $('#register').toggle(function() {
		 $(".register-form").show();
		 $(".login").css("border-bottom","1px solid #add0d0");
	 }, function() {
		 $(".register-form").hide();
		 $(".login").css("border-bottom","1px solid #d1e8e8");
	 });

	 $(".register-form").mouseup(function() {
		 return false
	 });
	 $(document).mouseup(function(e) {
		 if($(e.target).parent("a.reg").length==0) {
			 $(".register-form").hide();
			 $(".login").css("border-bottom","1px solid #d1e8e8");
		 }
	 });
 });

 

The only problem is, if you click on the link, then click off on to the document to hide the div, then click back on the link you need to click it twice for it to show again. Is there a way to reset toggle in order to avoid having to click twice?

Edited October 5, 2012 by -Karl-

[Christian F.]

You're making things way more complicated than what they need to be, remember: Simple is good.

 

$(document).ready (function () {
   // Whenever the #login element is clicked...
   $('#login').click (function () {
       // Reference the login form and save it for future reference.
       var loginForm = $('.login-form');

       // Check if it is hidden already.
       if (loginForm.css ("display") == 'none') {
           // Set the login form to be displayed, and exit the function.
           return loginForm.css('display', 'block');
       }

       // Otherwise hide the login form.
       return loginForm.css('display', 'none');
   });
});

[-Karl-]

You're making things way more complicated than what they need to be, remember: Simple is good.

 

$(document).ready (function () {
// Whenever the #login element is clicked...
$('#login').click (function () {
// Reference the login form and save it for future reference.
var loginForm = $('.login-form');

// Check if it is hidden already.
if (loginForm.css ("display") == 'none') {
// Set the login form to be displayed, and exit the function.
return loginForm.css('display', 'block');
}

// Otherwise hide the login form.
return loginForm.css('display', 'none');
});
});

Yeah but that doesn't work for when a user clicks off the div on the rest of the document. It also doesn't change the CSS style, the border is different for when the menu is open and when it's closed.

 

Also, if loginForm is displayed and regsiterForm is clicked, I need loginForm to hide. So that's not really possible by simply using returns.

Edited October 5, 2012 by -Karl-

[Zane]

In order to do the toggle from clicking outside the div, you will need a fixed position invisile overlay that covers the entire screen. So, whenever the login link is clicked, the overlay´s z-index is moved up above the rest of the page yet underneath your login/register boxes. This way you can have one single function to hide everything

 

The overlay would have a width and a height of 100%, its position would be fixed, with no margins, borders, or anything else. You COULD if you wanted to, make its background gray with a 50 to 60 percent opacity. Either way, when it is all said and done you would have a jQuery function like this

 

$("#overlay").click(function() {
    $(".login-form, .register-form").hide();
});

 

Or you could do it the risky way and hide upon the click of anything on the page, but you would have to list and rule out which elements should not trigger the hiding, like for instance, links, inputs, buttons, etcera, that are inside your login-form and register-form.

$("*").click(function() {
    if($(this).parent().className != "login-form") {
           $(".login-form, .register-form").hide();
    }
});

 

Furthormore, when I googled your problem, the very first result gave me this

http://stackoverflow.com/a/1403648/401299

 

which is WAY better than my solution.

Edited October 5, 2012 by Zane

[derwert]

Karl you can try some of the methods mentioned by Zane, I however favor the simplistic method and that would be to add a cancel button to your login and register forms. If you do that then you would only have to trigger the hide when the form is either submitted or the cancel button is clicked. Something along the lines of the below code.

 

<style type='text/css'>
.login { border-bottom: 1px solid red; }
.login-active-border { border-bottom: 1px solid lime ! important; }
</style>

<script type="text/javascript">

$(document).ready(function() {

 $('#login').click(function(e) {
		 $('.login-form').toggle();
		 $('.login').toggleClass('login-active-border');

		 if($('.login').hasClass('login-active-border')){
				 $('.register-form').toggle(false);
		 }

		 return false;
 });

 $('#register').click(function(e) {
		 $('.register-form').toggle();

		 if($('.login').hasClass('login-active-border')){
				 $('#login-cancel').click();
		 }

		 return false;
 });

 $('#register-cancel,#register-submit').click(function(e) {
		 $('.register-form').toggle(false);
 });

 $('#login-cancel,#login-submit').click(function(e) {
		 $('.login-form').toggle(false);
		 $('.login').toggleClass('login-active-border', false);
 });

});

</script>

[-Karl-]

Sorry but I'd prefer not to have a cancel button, it would make the drop down forms look untidy imo.