Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Mouseover when hovering an inner div (http://www.velocityreviews.com/forums/t926831-mouseover-when-hovering-an-inner-div.html)

pamelafluente@libero.it 09-06-2006 11:01 PM

Mouseover when hovering an inner div
 
Hi dears,

I have a DIV (with some colorful background). On top of this DIV I
have another
DIV entirely contained and having a transparent background.

Both div absolutely positioned.

onmouseover quits working on the inner div, even though this is
somehow "visually"
counterintuitive. Perhaps, even a mouseout event is issued (not
sure).

Is there some elegant way to keep the onmouseover event even in the
inner (background-transparent) DIV and prevent possible onmouseout ?

I way would seem to duplicate the handler in the inner DIV, but
repetition would
seem quite awkward ... :)

-P


pamelafluente@libero.it 09-07-2006 08:54 AM

Re: Mouseover when hovering an inner div
 

I have prepared a test code for my problem.

I would like the cells to change style (back/forecolor) when the mouse
is over but this happens only for a second when the mouse is entering
the outmost DIV.

This is usually logical but in my case being the inned DIV transparent
we
have a behavior that "visually" seems strange.

How would I correct the code below?



SAMPLE
----------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:outset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
</style>
</head>
<body>


<script language="javascript" >


var previousStyle;
function mOver(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff99";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}

}

</script>


<div id ="RG1,89,1" enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)">
<div class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:112px;width:89px;height:20px; "></div><div
class=c1fg style="top:12px;left:114px;"><table><tr><td width=83px
height=14px
valign=middle>San&nbsp;Crist&oacute;bal</td></tr></table></div>
</div>
<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)">
<div class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:204px;width:270px;height:20px ;"></div><div
class=c1fg style="top:12px;left:206px;"><table><tr><td width=264px
height=14px
valign=middle>Carrera&nbsp;22&nbsp;con&nbsp;Ave.&n bsp;Carlos&nbsp;Soublette&nbsp;#8-35</td></tr></table></div>
</div>

</body>
</html>


----------------------------------------------




pamelafluente@libero.it ha scritto:

> Hi dears,
>
> I have a DIV (with some colorful background). On top of this DIV I
> have another
> DIV entirely contained and having a transparent background.
>
> Both div absolutely positioned.
>
> onmouseover quits working on the inner div, even though this is
> somehow "visually"
> counterintuitive. Perhaps, even a mouseout event is issued (not
> sure).
>
> Is there some elegant way to keep the onmouseover event even in the
> inner (background-transparent) DIV and prevent possible onmouseout ?
>
> I way would seem to duplicate the handler in the inner DIV, but
> repetition would
> seem quite awkward ... :)
>
> -P



ASM 09-07-2006 11:20 AM

Re: Mouseover when hovering an inner div
 
pamelafluente@libero.it a écrit :
> I have prepared a test code for my problem.


Boudiou ! Ma che face ?
What a lot of complications !
(css rules non understood, redondant divs, long js functions)

What is enabledActions ?

> I would like the cells to change style (back/forecolor) when the mouse
> is over


and why events detection aren't on this td ?

> but this happens only for a second when the mouse is entering
> the outmost DIV.


you could ask to Google about
- event handler
- event propagation

> How would I correct the code below?


To avoid problems the simplest way is to give mouse events to the
element on forground level, preferably TD but last div runs too.

here you are :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:outset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
..clg td { white-space: nowrap; }
</style>
</head>
<body>

<script type="text/javascript"><!-- and not language="javascript" -->

function cellClick(event,what) {
alert(what.id)
}
function mOnOver(MyDiv) {
var b = MyDiv.style;
b.backgroundColor = b.backgroundColor==''? '#ff9' : '';
}
</script>

<div id ="RG1,89,1"
enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)">
<div class=c1bg
style="top:10px;left:112px;width:89px;height:20px; ">
</div>
<div class=c1fg style="top:12px;left:114px;"
onmouseover="mOnOver(this)" onmouseout="mOnOver(this)">
<table>
<tr><td width=83px height=14px valign=middle>
San Crist&oacute;bal
</td></tr>
</table>
</div>
</div>
<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)">
<div class=c1bg
style="top:10px;left:204px;width:270px;height:20px ;">
</div>
<div class=c1fg style="top:12px;left:206px;"
onmouseover="mOnOver(this)" onmouseout="mOnOver(this)">
<table>
<tr><td width=264px height=14px valign=middle>
Carrera 22 con Ave. Carlos Soublette #8-35
</td></tr>
</table>
</div>
</div>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

pamelafluente@libero.it 09-07-2006 11:33 AM

Re: Mouseover when hovering an inner div
 
Hi stephane!! :)

> Boudiou ! Ma che face ?
> What a lot of complications !
> (css rules non understood, redondant divs, long js functions)


Yes it's a mess I need to take care of it. Please advice!!

> What is enabledActions ?


it's an attribute I am adding to define some code action for
interaction
on each cell.

> To avoid problems the simplest way is to give mouse events to the
> element on forground level, preferably TD but last div runs too.


Thanks. I have seen I can:
1. Remove the outer div
2. Place the handlers in the second changing the coordinates top/left
3. Place the 3rd div within the second

This way it simplifies a lot and works fine.

\\

There is a remaining question. How do I get rid of that (damn) TABLE
structure
which I am using on to vertically center the text ??? Is there a
cleaner (css) way
to position vertically the text ?? I need to be able to do all:
TOP/MIDDLE/BOTTOM.

//

Here is the revised code:

------------------------



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:outset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
</style>
</head>
<body>

<script language="javascript" >

var previousStyle;
function mOver(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff99";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}

}


</script>

<div id ="RG1,89,1" enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)" class=c1bg onmouseover = "mOver(this)"
onmouseout = "mOut(this)"
style="top:10px;left:112px;width:89px;height:20px; ">
<div class=c1fg style="top:2px;left:2px;">
<table><tr><td width=83px height=14px
valign=middle>San&nbsp;Crist&oacute;bal</td>
</tr></table>
</div>
</div>

<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)"
class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:204px;width:270px;height:20px ;">
<div class=c1fg style="top:2px;left:2px;">
<table><tr><td width=264px height=14px
valign=middle>Carrera&nbsp;22&nbsp;con&nbsp;Ave.&n bsp;Carlos&nbsp;Soublette&nbsp;#8-35</td>
</tr></table>
</div>
</div>

</body>
</html>



All times are GMT. The time now is 07:17 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.