/    Sign up×
Community /Pin to ProfileBookmark

Evnent bubbling

Copy linkTweet thisAlerts:
Mar 01.2010

hey,
i have menu:

[CODE]
 <div id=”offer”>
<ul>
<li><a href=”<?php echo $this->url(array(“controller”=>”offers”, “action”=>”add”), null, true);?>”> Add </a></li>
<li><a href=”<?php echo $this->url(array(“controller”=>”offers”, “action”=>”search”), null, true);?>”>Search</a></li>

</ul>
</div>
[/CODE]

what i want to do, if i leave the div id=’offer’ menu
disappears but i cannot handle the bubbling events
in JS.
If i do onmouseout on ‘offer’ and get mouse off any <li>
the event is bubbling from ‘offer’ and menu disappers.
this make me not able to navigate on menu.

Any help would be much appreciated.
Thanks. ..

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMar 01.2010 — We see no onmouseover event , nor any javascript code who might attach it, so far.
Copy linkTweet thisAlerts:
@kubasauthorMar 01.2010 — [CODE]onmouseout="document.getElementById('offer').style.display='none';"[/CODE]

here you go.
Copy linkTweet thisAlerts:
@KorMar 01.2010 — [CODE]onmouseout="document.getElementById('offer').style.display='none';"[/CODE]

here you go.[/QUOTE]
And this event is attached on which element?
Copy linkTweet thisAlerts:
@kubasauthorMar 01.2010 — [COLOR="Blue"]If i do onmouseout on 'offer' and get mouse off any <li>

the event is bubbling from 'offer' and menu disappers.

this make me not able to navigate on menu.[/COLOR]

it would be <div id="offer">.
Copy linkTweet thisAlerts:
@KorMar 01.2010 — Could be something like this:
<i>
</i>&lt;script type="text/javascript"&gt;
document.onmouseout=off;
function off(e){
var target = (e &amp;&amp; e.target) || (event &amp;&amp; event.srcElement);
checkParent(target)?checkParent(target).style.display='none':null;
}
function checkParent(t){
while(t.parentNode){
if(t==document.getElementById('offer')){
return t
}
t=t.parentNode
}
return false
}
&lt;/script&gt;

But how do you show the div?
Copy linkTweet thisAlerts:
@kubasauthorMar 02.2010 — Ain't working. I did it similiar as you post.

here is my slide menu function

[CODE]
function slideMenu(obj, id, event){
var element = id && id.style ? id : document.getElementById(id);
// hide other's div menu if active.
if(active != null){
if(active == element) {
clearInterval(t);
return;
}
active.style.display = 'none';
active = null;
}
active = element;
var e = event || window.event;

var slideHeight = divHeight;//* element.getElementsByTagName('div').length;
var left = obj.offsetLeft // + obj.offsetWidth;

element.style.height = 0 + "px";
element.style.display = "block";
element.style.left = left + "px";
element.style.top = obj.offsetHeight + "px";

t = setInterval(function(){
with(element.style){
var currentHeight = parseInt(height, 10);

if(slideHeight - currentHeight > 0) {
height = currentHeight + jump;
} else {
clearInterval(t);
t = null;
}
}
}, anim);
}
[/CODE]

the complete HTML

[CODE]
 <div class="menu_dot" onclick="slideMenu(this, 'category', event);">Categories</div>
<div id="category">
<ul>
<li><a href="<?=$this->url(array("controller"=>"categories", "action"=>"addcat"), null, true);?>">Add Category</a></li>
<li><a href="<?=$this->url(array("controller"=>"categories", "action"=>"addsub"), null, true);?>">Add Subcategory</a></li>
</ul>
</div>
[/CODE]

Doing it your way causes the same problem

which i've already described. if you put mouse over

menu, it hides. it should be that if you leave the div

'offer' it hides. 'offer' is default hidden.
×

Success!

Help @kubas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...