Solved

onmouseover works, onclick does not (page jumps)

Posted on 2006-10-19
4
256 Views
Last Modified: 2012-05-05
Hello,

Please visit http://matematik.sofiadistans.nu/tests/ee/test.htm

There you will see two links... one on the top of the page... and scroll down and you will see another below.

(please use IE if possible as our site where this will be used is mostly by people using the IE browser)

If you click the below link you will see the page "jumps" up... if you change that to onMouseover then it works without a problem.. but onClick gives me that problem...


The scripts are in the /tests/ee/scripts of course.

As you can see, we purchased the script from somewhere else.... I have very little ability with JS
can you tell me how i can change it so that when we click the link the page does not jump? it should be the same as if we changed it onmouseover..

Thanks in advance!

0
Comment
Question by:p1tter_pattter
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:aaronchan
ID: 17770799
If I understand you correctly -- show the the tips (the yellow "page") when you move your mouse over, and hides it when you move your mouse away from the link, all you need to do is remove the onclick event and add the onmouseevent calling "cthint1.show()".

<html>
<head>
<link href="common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="Scripts/codethathintpro.js"></script>
<script language="javascript1.2">
<!--
var cthint1_html = "<table width=\"150\" border=\"0\"> " +
      "  <tr> " +
      "    <td nowrap>De matematiska namnen &auml;r:<\/td> " +
      "  <\/tr> " +
      "  <tr> " +
      "    <td>&nbsp;<\/td> " +
      "  <\/tr> " +
      "  <tr> " +
      "    <td>plus - addition<BR> " +
      "minus - subtraktion<BR> " +
      "g&aring;nger - multiplikation<BR> " +
      "delat - division <\/td> " +
      "  <\/tr> " +
      "<\/table>";
var cthint1 = new CT_Hint(250, 150, 2,"", true, 10, 10,
      cthint1_html, "lightyellow", "", "test1tree",
      {
            width : 1, color : "black"
      }, true, 2,"", 0,400, 0
);
cthint1.create();
//-->
</script>
</head>
<body>
<p><a href="#" onmouseout="cthint1.show();" onclick="cthint1.show();" onmouseout="cthint1.hide();">
Put mouse over to see Hint
</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#" onmouseout="cthint1.show();" onclick="cthint1.show();" onmouseout="cthint1.hide();">
Put mouse over to see Hint
</a></p>
</body>

</html>
0
 
LVL 1

Author Comment

by:p1tter_pattter
ID: 17772330
Hello,

No, I guess i didnt explain it too well.

I need to use only the onClick event... not the onmouseover...

onmouseover is working perfectly... but if I try to use the onClick on the below link the page "jumps" (page scrolls up) and we cannot see the link anymore and the hint disappears too.

This is what i want:

I want to be able to scroll down and click on the link, when I click on that link the page should _not_ scroll and the link should still be visible and the hint should show..

Thanks!


(P.S Points increased)
0
 
LVL 5

Accepted Solution

by:
aaronchan earned 350 total points
ID: 17773483
I hear you... If this is what you want:  If you have a <a> with href of "#".  This is a way of page anchoring, and, in your case, it has the equivalent effect of going to the top of the page, that's why you see the page scroll to top.

<html>
<head>
<link href="common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="Scripts/codethathintpro.js"></script>
<script language="javascript1.2">
<!--
var cthint1_html = "<table width=\"150\" border=\"0\"> " +
      "  <tr> " +
      "    <td nowrap>De matematiska namnen &auml;r:<\/td> " +
      "  <\/tr> " +
      "  <tr> " +
      "    <td>&nbsp;<\/td> " +
      "  <\/tr> " +
      "  <tr> " +
      "    <td>plus - addition<BR> " +
      "minus - subtraktion<BR> " +
      "g&aring;nger - multiplikation<BR> " +
      "delat - division <\/td> " +
      "  <\/tr> " +
      "<\/table>";
var cthint1 = new CT_Hint(250, 150, 2,"", true, 10, 10,
      cthint1_html, "lightyellow", "", "test1tree",
      {
            width : 1, color : "black"
      }, true, 2,"", 0,400, 0
);
cthint1.create();
//-->
</script>
</head>
<body>
<p><a href="javascript: void(0);" onclick="cthint1.show()" onmouseout="cthint1.hide()">
Click me to see Hint
</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript: void(0);" onclick="cthint1.show()" onmouseout="cthint1.hide()">
Click me to see Hint
</a></p>
</body>

</html>
0
 
LVL 1

Author Comment

by:p1tter_pattter
ID: 17773521
Cool! So simple but irritating if you dont know the answer!

Thanks m8, you not only solved this problem but also told me something else i didnt understand before... what the heck does "javascript: void(0);" mean!

Thanks for the help!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Debugging Html 8 32
Use "if not" in a condition 2 19
Slush on text 2 11
Make Float not to Wrap 15 28
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

726 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