Binding two onblur events
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Binding two onblur events
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.
[syntax=javascript]
allLinks[i].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');
}
[/syntax]
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.
[syntax=javascript]
allLinks[i].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');
}
[/syntax]
Re: Binding two onblur events
you can just set the event equal the same function.
Eg
[syntax=javascript]allLinks[i].onblur = single_link.onblur = function() {
alert('things');
}[/syntax]
Eg
[syntax=javascript]allLinks[i].onblur = single_link.onblur = function() {
alert('things');
}[/syntax]
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
jacek wrote:you can just set the event equal the same function.
Eg
[syntax=javascript]allLinks[i].onblur = single_link.onblur = function() {
alert('things');
}[/syntax]
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.
[syntax=javascript]uncompleted.onblur = on_hold.onblur = function()
{
removeClass(list, 'block');
}[/syntax]
Re: Binding two onblur events
oh right, well you can use an element that contains both elements and the onmouseout action I guess.
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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/
If the menu is shown and I click away from it, I want it to disappear.
http://jsfiddle.net/gxDK6/
Re: Binding two onblur events
jacek wrote:oh right, well you can use an element that contains both elements and the onmouseout action I guess.
Did you try this ?
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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.
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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.
Re: Binding two onblur events
why can't you just apply the function to the onblur event of the wrapper element ![Confused :?](./images/smilies/icon_e_confused.gif)
![Confused :?](./images/smilies/icon_e_confused.gif)
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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?
Re: Binding two onblur events
Well I think it is allowed, if it makes sense or not is another matter.
What are you even trying to do here ?![Laughing :lol:](./images/smilies/icon_lol.gif)
What are you even trying to do here ?
![Laughing :lol:](./images/smilies/icon_lol.gif)
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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.
Re: Binding two onblur events
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.
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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.
Re: Binding two onblur events
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.
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Binding two onblur events
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...
[syntax=javascript]
var allDivs = document.getElementsByTagName('div');
for (var i=0; i< allDivs.length; i++)
{
if (allDivs[i].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');
}
}
}
}
[/syntax]
var divId = this.id.substr(12);
I need to replace THIS with allDiv[i], but it doesn't work.
Re: Binding two onblur events
Attaching it to all of the divs on the page won't really work ![Confused :?](./images/smilies/icon_e_confused.gif)
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.
![Confused :?](./images/smilies/icon_e_confused.gif)
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.