Solved

Javascript mouseover

Posted on 2007-03-21
10
870 Views
Last Modified: 2007-12-19
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  ++++++++++++++++
0
Comment
Question by:9apit
  • 2
  • 2
  • 2
  • +3
10 Comments
 
LVL 11

Expert Comment

by:flipz
Comment Utility
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
 
LVL 35

Expert Comment

by:TimYates
Comment Utility
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
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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
 
LVL 9

Accepted Solution

by:
smidgie82 earned 500 total points
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
@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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 35

Expert Comment

by:TimYates
Comment Utility
I agree, Zvonko's solution is really nice :-)
0
 
LVL 9

Expert Comment

by:smidgie82
Comment Utility
@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
 

Author Comment

by:9apit
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Thanks Michel.
Sorry, I was offline.

See  you all.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now