Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

onmouseover works, onclick does not (page jumps)

Posted on 2006-10-19
4
Medium Priority
?
265 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1400 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

604 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