Javascript mouseover

Good morning expert,
Found a mouse over effect in VBScript.posted below, which
I would like to duplicate in Javascript. I have come pretty close
the text seems to bounce and flicker. Is there some way to get rid of
the flicker so the Javascript function works more like the
VBScript sub routine?

Thanks

Allen in Dallas

+++++++++++  VBScript  begin code  ++++++++++++++++
<html>
<head>

<title>VBScript Test</title>

<script language="vbscript">

count = 150
sub Complaint_onMouseover()
if count = 150 then
count = count + 20
else
count = count - 20
end if
document.all.complaint.style.top = count
end sub
</script>

<STYLE type=text/css>
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; font-style: normal; color: #000000; text-decoration: none; line-height: normal }
-->
</STYLE>

</head>

<BODY alink="white" vlink="white" link="white" style="BACKGROUND-REPEAT: no-repeat" background="images/calendar.jpg" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=black>

<div style="position:absolute;top:150;left:35;border:none;text-decoration:none;cursor:hand" id="complaint" name="complaint">
<font size=5 face="arial" color=white>Complaint Department</font></div>

</body>
</html>
+++++++++++  VBScript  end code  ++++++++++++++++


+++++++++++  Javascript  begin code  ++++++++++++++++
<HTML>
<HEAD>
<TITLE>JavaScript MouseOver</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
document.all.complaint.style.top = 150
function hiLite()
      {
  document.all.complaint.style.top = 170
      }

function back()
      {
  document.all.complaint.style.top = 150
      }

//--></SCRIPT>
<STYLE type=text/css>
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
-->
</STYLE>
</HEAD>
<BODY>
<H2>JavaScript MouseOver</H2>
<A HREF="void"
 onMouseOver="hiLite()"
   onMouseOut="back()">
<div style="position:absolute;top:150;left:35;border:none;text-decoration:none;cursor:hand" id="complaint" name="complaint">
<font size=5 face="arial" color=black>Complaint Department</font></div>
</A>
</BODY>
</HTML>

+++++++++++  Javascript  end code  ++++++++++++++++
Allen PittsBusiness analystAsked:
Who is Participating?
 
smidgie82Commented:
Here's the issue:

Both the JavaScript MouseOver and VBScript MouseOver events fire only when the mouse cursor enters the element's area.  So, when you move the mouse over the text, both the VBScript version and the JavaScript version behave exactly the same: the MouseOver event is fired, and the text is moved downward by 20 pixels.

So now, your mouse is no longer on the text (assuming you moved the mouse over the text from the top, and only went one pixel into the text area).  In both versions, the next time that your mouse moves (even a single pixel) the browser detects that it's no longer inside the DIV, and fires the MouseOut event.  The JavaScript version registers a handler for MouseOut, and this handler is executed, returning the text to its original position.  The VBScript version didn't register a MouseOut handler, however, so the text remains in its new position.

In the Javascript version, the text is now back in its original position, and your mouse is probably still over it, so the next time the mouse moves it fires the MouseOver event again, and the text is repositioned, then the MouseOut event, returning it to its original position, etc.  That's the flickering effect you see.  The VBScript version doesn't return the text to its original position until you mouse over the DIV in its new position (specifically, until the mouse goes from NOT being with the DIV's new client rect to being within the client rect, because MouseOver is only fired when the mouse initially enters the client rect).

Try this instead, for your JS:

document.all.complaint.style.top = 150
function hiLite()
{
      if (document.all.complaint.style.top == "150px")
      {
            document.all.complaint.style.top = 170;
      }
      else
      {
            document.all.complaint.style.top = 150;
      }
}

And remove the onMouseOut handler entirely.  that should duplicate the behavior of the VBScript version.
0
 
flipzCommented:
I believe the flicker effect is occurring because of the distance the div is moving. When you mouse over the div moves out from under the cursor and as soon as the mouse moves again - the mouseout function fires right away bringing the div back under the cursor - firing the mouseover again. It is a vicious circle!

Is your requirement exactly as you have posted? If not - post your exact requirements and someone can come up with a specific solution.
0
 
TimYatesCommented:
This uses padding rather than actually moving the div...

<HTML>
<HEAD>
<TITLE>JavaScript MouseOver</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
  function hilite()
  {
    document.getElementById( 'complaint' ).style.paddingTop = 32 ;
  }

  function back()
  {
    document.getElementById( 'complaint' ).style.paddingTop = 0 ;
  }
//--></SCRIPT>
<STYLE type=text/css>
<!--
  body { font-family: Verdana, Arial, Helvetica, sans-serif; }
-->
</STYLE>
</HEAD>
<BODY>
<H2>JavaScript MouseOver</H2>
  <div onmouseover="hilite()" onmouseout="back()" style="position:absolute;top:150;left:35;padding:0;cursor:hand" id="complaint">
    <font size="5" face="arial" color="black">Complaint Department</font>
  </div>
</BODY>
</HTML>

Not keen on the font tag though ;-)
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ZvonkoSystems architectCommented:
Check this:

<HTML>
<HEAD>
<TITLE>JavaScript MouseOver</TITLE>
<style>
#complaint {
 top: 150px;
 position:absolute;
 left:35;
 border:none;
 text-decoration:none;
 cursor:hand
}

#complaint.over {
 top: 170px;
}

body { font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
</HEAD>
<BODY>
<H2>JavaScript MouseOver</H2>
<div style="" id="complaint" name="complaint" onMouseOver="this.className=(this.className)?'':'over';" >
<font size=5 face="arial" color=black>Complaint Department</font></div>
</BODY>
</HTML>


0
 
Michel PlungjanIT ExpertCommented:
@Smidgie

Good explanation, poor suggestion

1. you cannot set the style.top inline unless the script is positioned after the div in question
2. FF needs the px always and .all is IE only

This MAY work better:

<html>
<head>
<script>
function hiLite() {
  var pos = document.getElementById('complaint').style.top;
  var document.getElementById('complaint').style.top = (pos=="150px")?"170px":"150px";
}
function initPage() {
  document.getElementById('complaint').style.top="150px";
}
<script>
<body onLoad="initPage()">

.
.
.
PS: Zvonko's className solution is the cleanest in my opinion
0
 
TimYatesCommented:
I agree, Zvonko's solution is really nice :-)
0
 
smidgie82Commented:
@mplugjan,

1) You're absolutely right, my apologies.
2) I'm not sure about past versions of FF, but FF 2.0 and up supports document.all and accepts the style.top without the "px".  You're probably right about past versions, so this is just an FYI.

That having been said, your implementation is admittedly more more elegant and backwards-compatible than mine.  (c:
0
 
Allen PittsBusiness analystAuthor Commented:
Good afternoon smidgie82,
Your explanation is excellent. I tried both your code solution and Zvonko's. They both worked in IE. Have not tried in Netscape or FireFox. Did not understand the code in Zvioko's solution
onMouseOver="this.className=(this.className)?'':'over';" >
If its not too much trouble could you explain this please?

Thanks.

Allen in Dallas

0
 
Michel PlungjanIT ExpertCommented:
It is a trinary

if (this.className!="") this.className="";
else this.className="over";

since
if (this.className != "")
can be written
if (this.className)
since "", null, 0 and undefined evaluates to false,
the test is
if (a) a="nothing"
else a ="something"
or
a = (a)?"nothing":"something"

as in
this.className=(this.className)?"":"over"

use single quotes and we get

this.className=(this.className)?'':'over'

Michel
0
 
ZvonkoSystems architectCommented:
Thanks Michel.
Sorry, I was offline.

See  you all.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.