Binding two onblur events

JavaScript related questions should go here.
Post Reply
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Binding two onblur events

Post by unemployment »

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');

}
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

you can just set the event equal the same function.

Eg
allLinks.onblur = single_link.onblur = function() {
    alert('things');
}
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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');
}
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

oh right, well you can use an element that contains both elements and the onmouseout action I guess.
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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/
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

jacek wrote:oh right, well you can use an element that contains both elements and the onmouseout action I guess.
Did you try this ?
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

What did you try and in what way was it not working ?
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

why can't you just apply the function to the onblur event of the wrapper element :?
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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?
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

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

What are you even trying to do here ? :lol:
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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 ? :lol:
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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

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.
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

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.
Image
unemployment
Posts: 165
Joined: Fri May 06, 2011 5:02 pm

Re: Binding two onblur events

Post by unemployment »

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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Binding two onblur events

Post by jacek »

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.
Image
Post Reply