I have 2 basic Show / Hide links on my website which work great.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head profile="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonAsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
$("a.codeButtonA").click(function(){$("pre.codeA").toggle()});
$("input.buttonBsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
$("a.codeButtonB").click(function(){$("pre.codeB").toggle()});
});
</script>
<style type="text/css">
pre {
background: white;
overflow: auto;
display:none;
}
</style>
</head>
<body>
<a href="#" class="codeButtonA">Show / Hide</a>
<pre class="codeA">
test message 1
</pre>
<div style="background:green;margin-top:1000px">
<a href="#" class="codeButtonB">Show / Hide</a>
<pre class="codeB">
test message 2
</pre>
</div>
</body>
</html>
However, when I click the 2nd link at the foot of the page it does open the <pre> tag , but then jumps to the top of the page. Is there a way to stop this from then jumping to the top of the page when I click it?
I'd prefer if it just showed the box and never jumped to the top.
Many thanks for any help with this.
I have 2 basic Show / Hide links on my website which work great.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head profile="http://gmpg/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://codylindley./blogstuff/js/jquery/jquery-base.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonAsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
$("a.codeButtonA").click(function(){$("pre.codeA").toggle()});
$("input.buttonBsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
$("a.codeButtonB").click(function(){$("pre.codeB").toggle()});
});
</script>
<style type="text/css">
pre {
background: white;
overflow: auto;
display:none;
}
</style>
</head>
<body>
<a href="#" class="codeButtonA">Show / Hide</a>
<pre class="codeA">
test message 1
</pre>
<div style="background:green;margin-top:1000px">
<a href="#" class="codeButtonB">Show / Hide</a>
<pre class="codeB">
test message 2
</pre>
</div>
</body>
</html>
However, when I click the 2nd link at the foot of the page it does open the <pre> tag , but then jumps to the top of the page. Is there a way to stop this from then jumping to the top of the page when I click it?
I'd prefer if it just showed the box and never jumped to the top.
Many thanks for any help with this.
Share Improve this question asked Oct 17, 2011 at 11:23 michaelmcgurkmichaelmcgurk 6,50925 gold badges100 silver badges197 bronze badges 2- add return false to that functions. – Punit Commented Oct 17, 2011 at 11:26
- remember that it's good practice to pick the best answer, so other users can find the solution faster too! – Anonymous Commented Oct 23, 2011 at 23:13
6 Answers
Reset to default 9Or remove href="#" from the <A> tags
$("input.buttonAsize").click(function(e){
e.preventDefault();
alert($("div.contentToChange").find("p").size());
});
$("a.codeButtonA").click(function(e){
e.preventDefault();
$("pre.codeA").toggle();
});
$("input.buttonBsize").click(function(e){
e.preventDefault();
alert($("div.contentToChange").find("p").size());
});
$("a.codeButtonB").click(function(e){
e.preventDefault();
$("pre.codeB").toggle()
});
As I just learned from my question, where I had more or less the same problem, return false; is the simple minded solution. It works, but it can also prevent other code from running. The explanation is to find here in this wonderful tutorial.
Most likely you want to use something like
$("a").click(function(event) {
// your custom code
event.preventDefault();
});
It basically stops/prevents the browser to do the default action, which is linking to itself when using # as href. Return false also stops following scripts from working if in the same handler. But the tutorial explains this way better :)
In your case it would be
$("a.codeButtonB").click(function(event){
$("pre.codeB").toggle();
event.preventDefault();
});
That's propably the best solution if you want to use links. Using buttons would be the other solution, but that restricts you in some ways. Plus, you could (read:should) keep the a and give it a real href to the content you want to display, that way it will still work when javascript is disabled on the client.
Add return: false; to your click events.
Don't use a tags for things that are not really links. Use the button tag.
add return false to both the functions.