Solved

Javascript mouseover

Posted on 2007-03-21
10
877 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
ID: 18765017
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
ID: 18765032
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
ID: 18765121
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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 9

Accepted Solution

by:
smidgie82 earned 500 total points
ID: 18765379
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
ID: 18765930
@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
 
LVL 35

Expert Comment

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

Expert Comment

by:smidgie82
ID: 18765975
@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
ID: 18766249
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
ID: 18766389
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
ID: 18767710
Thanks Michel.
Sorry, I was offline.

See  you all.
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

773 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