CodingForums.com - jquery scrollto and blinking before performing action in firefox

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - jquery scrollto and blinking before performing action in firefox (http://www.codingforums.com/showthread.php?t=184171)

jquery scrollto and blinking before performing action in firefox

Hy, just registered, I'm a total newby on j.s. having some problem with the plugin as well, you can see code and problem at this page (work in progress), www.silentbreeze-yurt.com , what happens in firefox and some other browsers as well is that when the button up is pressed for a moment it blinks the header of page and then back to the movement ftom bottom up to top page, it's as if the link is followed first and then the plug in enters and perform the task afterwords,

Code:

<script>jQuery(function( $ ){

                //borrowed from jQuery easing plugin

                //http://gsgd.co.uk/sandbox/jquery.easing.php

                $.scrollTo.defaults.axis = 'xy'; return false;

                });</script>

and here is the html:

<div id="bottom">
<div id="up" >
<a href="#" onclick="$.scrollTo( '#header', 900 );">up</a>
</div>
</div>

One of the advantages to using jQuery is you can write unobtrusive Javascript. That is to say, you can get rid of all Javascript in your html markup-- for example, that "onclick=" you are using, you should put that in your jQuery scripting instead of in your html.

This may fix your problem too.

What you described is caused by the fact that it's still executing the default behavior of a click to avoid this you either use return false or event.preventDefault(); e.g. (assuming the same mark-up)

Code:

$('#up a').click(function(){

  $.scollTo('#header', 900);



  return false;

});



// Alternatively you can do

$('#up a').click(function(event){

  $.scollTo('#header', 900);



  event.preventDefault(); 

});



// Or using your current code

<div id="bottom">

  <div id="up">

    <a href="#" onclick="$.scrollTo( '#header', 900 ); return false;">up</a>

  </div>

</div>

You may want to change the selector to something more appropriate if using the first two examples, and as Fumigator stated you want to try and stay away from inline events such as onclick and use code like what I provided you with.

It's basically the same concept behind the separation of content (HTML) and presentational (CSS) except we're throwing in the behavioral layer (JS).

thanks both for help, solved