SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery scrolling not working in mozilla browsers

    Hi,

    Ive recently been working on a new site at http://www.jonathanwallace.co.uk/

    The site uses a jQuery script to scroll from one section to the next - it works 100% fine in safari and chrome, but for some reason doesn't work in firefox or opera - im pretty sure it doesn't work in IE either :/

    The script is shown below:

    Code:
    $(document).ready(function() {
      $('.navhome').mouseenter(function () {
        $(this).css('color', '#000');
        $('header img').css('opacity', '1');
      });
      $('.navhome').mouseleave(function() {
        $(this).css('color', '#999');
        $('header img').css('opacity', '0.5');
      });
      $('header img').mouseenter(function () {
        $('.navhome').css('color', '#000');
      });
      $('header img').mouseleave(function() {
        $('.navhome').css('color', '#999');
      });
      $('.navhome').click(function() {
        $("body").animate({ scrollTop: $("#about").position().top }, 'slow');
      });
      $('.navfeatured').click(function() {
        $("body").animate({ scrollTop: $("#featured").position().top }, 'slow');
      });
      
      $('#navblog').click(function() {
        $("body").animate({ scrollTop: $("#blog").position().top }, 'slow');
      });
      
      $('.navcontact').click(function() {
        $("body").animate({ scrollTop: $("#contact").position().top }, 'slow');
      });
      
      $('.top').click(function() {
        $("body").animate({ scrollTop: $("#home").position().top }, 'slow');
      });
    });
    Does anyone know what might be stopping this from working in the mentioned browsers?

    Thanks

  2. #2
    SitePoint Member
    Join Date
    May 2013
    Location
    Brisbane
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Zany90, I checked it on all browser it's working properly without any issues. Check your browsers version it could be the problem.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Firefox is a little weird in this area as you need to animate both the <html> and <head> elements, typically animating only the <html> element is sufficient but I personally prefer to animate both of them.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Zany90 View Post
    Does anyone know what might be stopping this from working in the mentioned browsers?
    For some browsers body is the answer, for others html is the solution. You should be able to safely animate 'body,html' to resolve that difference.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! thats it working now by animating the html aswell now it just seems that all the spacing is totally messed up in opera but im wondering if its really even worth worrying about

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Zany90 View Post
    now it just seems that all the spacing is totally messed up in opera but im wondering if its really even worth worrying about
    I think that that is something that the CSS forum should be able to help you with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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