BetterPHP

How can I bind two on blur events?

I have a link that has a UL drop down. When I click off of both the link and the UL I want the drop down to disappear. Right now it only disappears after I click off of the link.

allLinks.onblur = function()
{
var divId 			= this.id.substr(10);
var list 			= document.getElementById('identifier_' 	+ divId);
var uncompleted 	= document.getElementById('uncompleted_' 	+ divId);
var on_hold 		= document.getElementById('on_hold_' 		+ divId);
var cancelled 		= document.getElementById('cancelled_' 		+ divId);
var completed 		= document.getElementById('completed_' 		+ divId);

removeClass(list, 'block');

}

you can just set the event equal the same function.

Eg

allLinks.onblur = single_link.onblur = function() {
    alert('things');
}

jacek wrote:you can just set the event equal the same function.

Eg

allLinks.onblur = single_link.onblur = function() {
    alert('things');
}

Your example doesn't seem to be working for me. I don't want both elements to use the action, but rather, if you click an each other don't do anything and if you click anything else, do something.

uncompleted.onblur = on_hold.onblur = function()
{	
	removeClass(list, 'block');
}

oh right, well you can use an element that contains both elements and the onmouseout action I guess.

I made a JS Fiddle of my issue.

If the menu is shown and I click away from it, I want it to disappear.

http://jsfiddle.net/gxDK6/

jacek wrote:oh right, well you can use an element that contains both elements and the onmouseout action I guess.

Did you try this ?

Yes, but it's not really what I want. I don't want an onmouseout... I want an onblur and I couldn't get that working.

What did you try and in what way was it not working ?

jacek wrote:What did you try and in what way was it not working ?

I think that your idea would work, but I can't figure the JS out. I have wrapping elements so I should be able to do what you suggest, but I can't figure out how to loop through all the div elements and then say... now that you're in the div reference the link in that div.

JS confuses me.

why can't you just apply the function to the onblur event of the wrapper element

jacek wrote:why can't you just apply the function to the onblur event of the wrapper element

I could, but then I don't know how to access the link which has the onclick that shows the drop down.

Maybe I could just put the onclick on the parent wrapper, but does that even make sense? Put an onclick on a div?

Well I think it is allowed, if it makes sense or not is another matter.

What are you even trying to do here ?

jacek wrote:Well I think it is allowed, if it makes sense or not is another matter.

What are you even trying to do here ?

Please view the JS Fiddle link I previously posted. When to drop down button is shown and I click off of the menu, I want the menu to disappear.

unemployment wrote:Please view the JS Fiddle link I previously posted.

It's not easy to work out from the code.

unemployment wrote:When to drop down button is shown and I click off of the menu, I want the menu to disappear.

another way to do that would be to put a div behind the menu when you show it that covers the entire page, and use the onclick event for that to close the menu.

The onmouseout even doesn't work because the list drops below the containing div. I also don't think the creating of a background element will work, but that element would have to be created during the onclick event making it a child of the on clicked element.

unemployment wrote:but that element would have to be created during the onclick event making it a child of the on clicked element.

It would only be a child element of the clicked element if you append it there. you could just add it to the body, or have it there allt he time bug hidden.

jacek wrote:

unemployment wrote:but that element would have to be created during the onclick event making it a child of the on clicked element.

It would only be a child element of the clicked element if you append it there. you could just add it to the body, or have it there allt he time bug hidden.

I wanted to just use document.body.onclick, but that it's not letting me access the list I need.

If I have...

                var allDivs = document.getElementsByTagName('div');
		for (var i=0; i< allDivs.length; i++)
		{
			if (allDivs.className.indexOf('goal_icon_holder') != -1)
			{
                                 document.body.onclick = function()
				{
					var divId 			= this.id.substr(12);
					var list 			= document.getElementById('identifier_' 	+ divId);
					
					if (link.className == 'goal_icon_button hover')
					{
						removeClass(link, 'hover');
						removeClass(list, 'block');
						addClass(list, 'dn');
					}
				}
                         }
                }

var divId = this.id.substr(12);

I need to replace THIS with allDiv, but it doesn't work.

Attaching it to all of the divs on the page won't really work

you could use window.onclick and then use the coords of the mouse click to see if it was on or off the menu, but that would be pretty awkward.