Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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> <!-- bottom -->

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #3
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    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).
    Last edited by Iszak; 12-10-2009 at 09:33 AM.

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    solved

    thanks both for help, solved


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •