Toggle not working after adding another event

JavaScript
1

Updating with code to reproduce and clarify…

I have tried to recreate the problem in jsfiddle, but it wont run at all… problem detailed below.

My body has:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="js/jquery-1.11.1.min_1.js"></script>
<script src="js/lr-form-inview.js"></script>

…among other libraries for nav/search bar…

html:

<div id="lr-form">
  <div id="lr-form-inner">

form info here

  </div><!--end lr-form-inner-->
</div><!--end lr-form-->



<div id="full-width-topbar-container">

  <div id="userin"><span id ="user"><h4>Hello Guest!</h4></span>
  <span id="lr-action"><a href="#" onclick="toggle_visibility('lr-form');"><h4>Sign In / Register</h4></a></span></div>

</div>

…css

#full-width-topbar-container{
    width:100%;
    height:18px;
    background-color:#bcbcbc;}


#userin{
float:left;
display:inline-block;
width:40%;
margin-left:2px;
}

#user{
float:left; 
display:inline-block;
border-right:2px solid #FF0004;
width:auto;
padding-right:8px;
}

#lr-action{
float:left;
display:inline-block;
width:auto;
padding-left:8px;
}


#lr-form{

    position:relative;
    width:100%;
    display:none;
    background-color:#8E8E8E;
    color:white;
    height: 110px;
    overflow:hidden;
}

#lr-form-inner{

    width:100%;
    position:relative;
margin-top:10px;
}

JS further down…

Problem: The form shows fine on toggle. It closes fine if clicked outside of lr-form. It will not close if the toggle is clicked again when form is open.

I have played around with the && descendants clause, to no avail.

Thought I fixed it, but I havent :frowning:

I don’t really do/get javascript, but I googled 1 or 2 code snippets and put them together. The toggle event was working fine until I put a close on click outside of form event. Now, the toggle will open the form, the click outside of container will close the form, but the toggle will not close the form. Any help greatly appreciated

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
		  }
		  
		  
		  $(document).mouseup(function (d)
{
    var container = $("#lr-form");

    if (!container.is(d.target ) // if the target of the click isn't the container...
	
        && container.has(d.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});
2

Hi pr0c3ss,

So, if I understand correctly, when the form is shown you want to be able to click the ‘Sign In / Register’ link and have it hide the form?

The reason that doesn’t work is because clicking on the link always triggers both handlers, with the mouseup event firing first. This means that a second click on the link will hide the form, but the toggle_visibility function will run immediately after and re-show the form.

My suggestion would be to rewrite your code like this:

var container = $("#lr-form"); // Assigning var here avoids reassignment every time the handler fires

$('#lr-action a').click(function(event){
    container.toggle(); // jQuery method to replace your show/hide IF statement
    event.stopPropagation(); // prevents event from bubbling up and triggering the document.click handler
});

$(document).click(function (d) { // Changing to a click event stops this handler from running before the other
    if (!container.is(d.target ) && container.has(d.target).length === 0) {
        container.hide();
    }
});

Now you can remove the inline JS from your HTML (it’s good practice to avoid mixing the two together):

<span id="lr-action"><a href="#"><h4>Sign In / Register</h4></a></span>

Note: I also notice that you’re including jQuery twice at the top of your page, which isn’t necessary.

3

Thanks a lot fretburner.

This is my first time using jq/js, so I’m not really clued up on it. Pullo also said about using inlines. Note taken. As for the jq include, the end version figures are slightly different, so I thought both would be needed. Once this page is complete, I’ll remove jq includes one at a time to see if all functions still work

1.11.1.min.js
1.11.1.min_1.js

thanks again