How add mouseenter/leave behaviors just for ie (re z-index)

[Barry]

Hi,

My code move divs up/down using z-index, and works fine for other browser,
but ie7 the display 'judders up/down' because ie fires mouseover/mouseout
when moving between childs of the parent div.

Is there a simple way to use mouseenter/leave just for ie.
The code snippet is shown below.

ALSO - I tried fireing event with an absolute div placed over the
appropraite place - but if you have a div with just a border - ie seems to
fire the mouseover/out when the mouse enters/leaves the border!! - not (as I
expected) when it enters /leaves the rectangular area. Is this correct?

Snippet
<div id="menu1mousemove" style="background-color:blue;left: 164px; top:
19px; z-index:4;position:absolute;width:400px;height:270px;border: thick
orange solid; "
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')"
onmouseout="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')"
onmouseup="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0')"
onmouseover="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >

[senn]

Post by Barry
Hi,
My code move divs up/down using z-index, and works fine for other browser,
but ie7 the display 'judders up/down' because ie fires mouseover/mouseout
when moving between childs of the parent div.
Is there a simple way to use mouseenter/leave just for ie.
The code snippet is shown below.
ALSO - I tried fireing event with an absolute div placed over the
appropraite place - but if you have a div with just a border - ie seems to
fire the mouseover/out when the mouse enters/leaves the border!! - not (as I
expected) when it enters /leaves the rectangular area. Is this correct?
Snippet
19px; z-index:4;position:absolute;width:400px;height:270px;border: thick
orange solid; "
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')"
onmouseout="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')"
onmouseup="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0')"
onmouseover="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
--
Thanks ... Barry

Why do you have both "onmouseup" "onmouseover"
"onmouseout" on the same container. Of course, it judders.
-A wrong technique.
Do you have distances between the listItems or what. Then
remove the distances between them. On the contrary, the
items should overlab a bit. And so remove the "onmouseup".
it's possible to build in a javascript timer. Still
a wrong technique.
/senn

[Barry]

I now have this code - which works OK on all browsers (see below)
But Expression Web doesnt seem to understand conditional statements , so
gets confused by the double occurance of the div id= "menu1container" (ie
the code pane marks in yellow the final lessthan as invalid)
<!--[if !IE]>-->
=
and the design pane shows 2 occurances of the "menu1container" (in 2
different positions!) ... and the designs complicated enough already !!

Is there a conditional syntax to put so I can have ONE div
id="menu1container" with 2 versions of the events - all in the one tag?

If you want to see the 'juddering' in IE (but not other browsers) see here
(and move the mouse around the left-hand menu)
http://www.alanarnoldguitars.co.uk/guitar_woods_test1.htm

Current code is:

<!--[if IE ]>
<div id="menu1container" style="position:absolute; z-index:8; left:18px;
top:61px;"
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";

onmouseleave="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";

onmouseenter="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
<![endif]-->
<!--[if !IE]>-->
<div id="menu1container" style="position:absolute; z-index:8; left:18px;
top:61px;"
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";

onmouselout="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";

onmousemove="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;

FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
<!--<![endif]-->


PS - in response to Senn's question - the onmousedown event was a hang over
from doing many!! different try outs - now removed.

[senn]

Post by Barry
I now have this code - which works OK on all browsers (see below)
But Expression Web doesnt seem to understand conditional statements , so
gets confused by the double occurance of the div id= "menu1container"
(ie
the code pane marks in yellow the final lessthan as invalid)
<!--[if !IE]>-->
=

This is not a legal Gonditional Comment syntax.
You can't use Conditional Comments to imitate an
If Then Else clause.
What you probably can do instead, is to prepare the css-styles
for IE and the others.
The styles for browsers other than IE should be placed as normal
inside the <style type="text/css">......</style>
Then just beneath the </style> in the page have this
(still inside the </head>):

<!--[if lte IE 8]>
<style type="text/css">
Put the IE-adapted styles here.
The same style names but having IE-adapted
properties and/or attributes.
You probably should concentrate only
on IE below 8.
</style>
<![endif]-->

By the way, in your javascript coding you have this
-->
</script>
You should give it two slashs like so:
//-->
</script>

Post by Barry
and the design pane shows 2 occurances of the "menu1container" (in 2
different positions!) ... and the designs complicated enough already !!
Is there a conditional syntax to put so I can have ONE div
id="menu1container" with 2 versions of the events - all in the one tag?
If you want to see the 'juddering' in IE (but not other browsers) see here
(and move the mouse around the left-hand menu)
http://www.alanarnoldguitars.co.uk/guitar_woods_test1.htm
<!--[if IE ]>
<div id="menu1container" style="position:absolute; z-index:8; left:18px;
top:61px;"
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmouseleave="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmouseenter="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
<![endif]-->
<!--[if !IE]>-->
<div id="menu1container" style="position:absolute; z-index:8; left:18px;
top:61px;"
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmouselout="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmousemove="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
<!--<![endif]-->
PS - in response to Senn's question - the onmousedown event was a hang over
from doing many!! different try outs - now removed.

[senn]

The javascript syntax is not legal neither.
You should go to www.w3schools.com
and find if...else if.... clauses to look at the
syntax. And then correct the javascript functions
on your page. You should follow the recommandations
on how to set up these clauses. These clauses on your page
needs some curly braces. And a line having an else if ...... should
not have ";" at the end of the line.
My own humple experience with found javascript on the
internet is that; the majority found does not work caused
by syntax errors and other wrong. Also, javascript in
FP behaviors is not error free.
/senn

[senn]

Post by Barry
I now have this code - which works OK on all browsers (see below)
But Expression Web doesnt seem to understand conditional statements , so
gets confused by the double occurance of the div id= "menu1container"
(ie
the code pane marks in yellow the final lessthan as invalid)
<!--[if !IE]>-->
=
and the design pane shows 2 occurances of the "menu1container" (in 2
different positions!) ... and the designs complicated enough already !!
Is there a conditional syntax to put so I can have ONE div
id="menu1container" with 2 versions of the events - all in the one tag?
If you want to see the 'juddering' in IE (but not other browsers) see here
(and move the mouse around the left-hand menu)
http://www.alanarnoldguitars.co.uk/guitar_woods_test1.htm
<!--[if !IE]>-->
<div id="menu1container" style="position:absolute; z-index:8; left:18px;
top:61px;"
onclick="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmouselout="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','0') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','hidden')";
onmousemove="FP_changeProp(/*id*/'menu1container',0,'style.zIndex','9') ;
FP_changeProp(/*id*/'menu1shad',0,'style.visibility','visible')" >
<!--<![endif]-->

Although, this Conditional Comment is legal. This will not be read
by IE. So, if you don't want the above be read by IE, but by the
others, then change <!--[if !IE]>-->........<!--<![endif]-->
to :
<![if !IE]>..............<![endif]>

I looked at you site in IE7(on Vista). It seems that the onmousemove is
reading the hidden layer too. And it seems as the layers are
transparent. It could be interesting trying to inactivate this
feature in Vista or Windows7. I supposed, you're using
one of these OSs. Just to see if this is the colprit.
You don't need onmousemove?. Though, getting off with it
won't cure the transparent problem. Wonder, if any javascript
exist to cure this.
/senn

[senn]

I see,
The juddering div has been given an z-index of 8
But the content table on this layer has been given
an z-index of 9
Highly contradictable.
Perhaps a better luck of having the mouse events
controlling the z-index on the div alone.