AJAX

[ask] JQuery preventDefault is not working

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2009

Posts: 20

Reputation: eantz is an unknown quantity at this point

Solved Threads: 0

eantz

Offline

Newbie Poster

[ask] JQuery preventDefault is not working

Oct 22nd, 2009

Hi,
I want create a page which has animation at the bottom of that page. I use jQuery to do that..

this is the way I do it

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<a href="#" class="animation">Animate this</a>
<a href="#" class="animation">Animate this</a>

and this is the jquery

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
$(document).ready(function() {
	$('a.animation').click(function(e) {
		e.preventDefault();
		//animation goes here;
	});
});
$(document).ready(function() {
	$('a.animation').click(function(e) {
		e.preventDefault();
		//animation goes here;
	});
});

When I run the code, all animation run very well except the page always scroll to the top. I try to change the href attribute to javascript:void(0); but it still run like that..

How can I fix it?

Thanks before,
Sorry for my English..

learning to live..

•

Join Date: Dec 2007

Posts: 5

Reputation: nauticalmac is an unknown quantity at this point

Solved Threads: 0

nauticalmac nauticalmac is offline

Offline

Newbie Poster

Oct 22nd, 2009

You could do away with your anchor tags and use span instead. Then use CSS to style the cursor to pointer so it shows up as clickable like a link.

•

Originally Posted by eantz

Hi,
I want create a page which has animation at the bottom of that page. I use jQuery to do that..

this is the way I do it
Help with Code Tags

html Syntax (Toggle Plain Text)
<a href="#" class="animation">Animate this</a>
<a href="#" class="animation">Animate this</a>
and this is the jquery
Help with Code Tags

javascript Syntax (Toggle Plain Text)
$(document).ready(function() {
	$('a.animation').click(function(e) {
		e.preventDefault();
		//animation goes here;
	});
});
$(document).ready(function() { $('a.animation').click(function(e) { e.preventDefault(); //animation goes here; }); });
When I run the code, all animation run very well except the page always scroll to the top. I try to change the href attribute to javascript:void(0); but it still run like that..

How can I fix it?

Thanks before,
Sorry for my English..

•

Join Date: Oct 2009

Posts: 102

Reputation: jomanlk is an unknown quantity at this point

Solved Threads: 18

jomanlk

Offline

Junior Poster

Oct 22nd, 2009

You can just remove the # from the href (leave it empty or give it a false page url and not an anchor) and return false instead of preventDefault(). Probably not the best way, and your HTML won't validate. But it should fix your issue if HTML validation is not a concern.

•

Join Date: Jul 2009

Posts: 20

Reputation: eantz is an unknown quantity at this point

Solved Threads: 0

eantz

Offline

Newbie Poster

Oct 23rd, 2009

Hi all..
I have tried all of your suggestion. But, it didn't work.
But, I just realize that when animations run, actually the page do not scroll to the top of the page. It just scroll to some pixels to the top. But it is disturbing. I'm starting to find where the page actually go when the animations run or may be there is an error in my code.

Thanks all,
I will post it here later if I find it.
But, if someone who has any others suggestion, I hope it will help me..

learning to live..

•

Join Date: Dec 2007

Posts: 5

Reputation: nauticalmac is an unknown quantity at this point

Solved Threads: 0

nauticalmac nauticalmac is offline

Offline

Newbie Poster

Oct 23rd, 2009

I think you need to look elsewhere for the problem. I have tested the following and no scrolling occurs.
html code:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div id="padding"></div>
<span class="animate">Animate this.</span>
<div id="padding"></div>
<span class="animate">Animate this.</span>

javascript code:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
$(document).ready(function() {
  $('span.animation').click(function() {
    alert("Animate!");
  });
});
$(document).ready(function() {
  $('span.animation').click(function() {
    alert("Animate!");
  });
});

css code:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#padding {height:1500px;}
.animate {cursor:pointer;}
#padding {height:1500px;}
.animate {cursor:pointer;}

I've posted a simple page to demonstrate:
Animate Code Test

If you are still having problems, you need to post your other code so we can help.

•

Originally Posted by eantz

Hi all..
I have tried all of your suggestion. But, it didn't work.
But, I just realize that when animations run, actually the page do not scroll to the top of the page. It just scroll to some pixels to the top. But it is disturbing. I'm starting to find where the page actually go when the animations run or may be there is an error in my code.

Thanks all,
I will post it here later if I find it.
But, if someone who has any others suggestion, I hope it will help me..