Solved

onmouseover works, onclick does not (page jumps)

Posted on 2006-10-19
4
240 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

747 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

9 Experts available now in Live!

Get 1:1 Help Now