I had previously had some JavaScript in place to make each article enlarge whenever the mouse goes over it.
This feature typically works reasonably fine in Firefox. In IE however, the results are horrible.
Here's what I've done. Each article is wrappend in a
DIV
tag which has an OnMouseOver and OnMouseOut event assigned.
Each article has two additional
DIVs that are inside the
main article
DIV. The first inner
DIV is for the
article title. The second inner
DIV is for the article body.
The basic structure looks something like this:
<div OnMouseOver="mouseOverDiv('7')" OnMouseOut="mouseOutDiv('7')">
<div class="sectionname" id="N7" OnClick="toggleDiv('B7');">
...
</div>
<div class="section" id="B7">
...
</div>
</div>
The basic idea is to change the style of the inner
DIVs
when the mouse leaves or enters the article.
The corresponding JavaScript looks like this:
function mouseOverDiv(ref){
document.getElementById("N" + ref).className = "selectedsectionname";
document.getElementById("B" + ref ).className = "selectedsection";
}
function mouseOutDiv(ref){
document.getElementById("N" + ref).className = "sectionname";
document.getElementById("B" + ref).className = "section";
}
So, what's the problem? Well, I'm glad you asked. In IE, the OnMouseOut
seems to fire on arbitrary mouse movements that occur inside the
DIV.
The user of course moves the mouse initiating the OnMouseOver
event again ultimately resulting in a flicker when the styles
breifly change. Solution? I'm not sure yet. Well this effect
was annoying for some people anyway; so for now I'm just
commenting the JavaScript function bodies.