I have taken a look at a few other threads and noticed that someone
posted a bubbledFromChild function. This function isn't working for
me and I'm not sure how to get around this issue. I'm attempting to
overlay a div over another div which contains a few elements. The
problem is that the mouseout even is firing when I move from the
container div to any of it's child elements.
I have tried the following to fix this problem.
1.) Use a bubbledFromChild event.
2.) Writing mouseover events for all child elements of the div that
triggers the overlay.
Thanks in advance.
-------------------------------------------------------------------------------
<div style="float:left;">
<div style="border:solid 1px black; width:300px; float:left;
clear:both;">
<a class="blarg" href="#" style="display:block; width:100%;">
<img src="someimage.jpg" />
<br />
<span>blah blah blah</span>
</a>
<div style="float:left;">
left
</div>
<div style="float:right">
right
</div>
</div>
<div style="border:solid 1px black; width:300px; float:left;
clear:both;">
<div class="blarg" href="#">
<img src="someimage.jpg" />
<br />
<span>blah blah blah</span>
</div>
<div style="float:left;">
left
</div>
<div style="float:right">
right
</div>
</div>
<div style="border:solid 1px black; width:300px;">
<div class="blarg">
<img src="someimage.jpg" />
<br />
<span>blah blah blah</span>
</div>
<div style="float:left;">
left
</div>
<div style="float:right">
right
</div>
</div>
</div>
<script type="text/javascript">
var elements = $$('.blarg');
for(var i = 0; i<elements.length; i++){
elements[i].observe('mouseover', function(event){
if(!bubbledEvent(event.element(),this) && $
(this.identify() + '-overlay') == null){
this.setStyle({border: 'solid 1px black'});
var rolloverElem = new Element('div',
{id:this.identify() + '-overlay'});
rolloverElem.setStyle({
height:'18px' ,
position:
'relative',
top:'0px',
left:'0px',
opacity: '0.5',
border:'solid 1px
green',
display:'block',
backgroundColor:'Blue'
});
this.insert({bottom: rolloverElem});
}
}.bindAsEventListener(elements[i]));
elements[i].observe('mouseout', function(event){
this.setStyle({border: 'none 0px white'});
$(this.identify() + '-overlay').remove();
alert('called 1');
}.bind(elements[i]));
elements[i].descendants().each(function(e){
e.observe('mouseout', function(event){alert('called');});
});
}
function bubbledEvent(element, parent){
var elems = parent.descendants();
boolReturn = false;
for(var j=0; j<elems.length; j++)
{
if(element == elems[j])
boolReturn = true;
}
return boolReturn;
}
</script>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
