Solved

jquery scrollTop() not working in firefox

Posted on 2014-04-23
11
2,260 Views
Last Modified: 2014-05-28
I just realized a scroll feature I'm using is causing my site to work differently in firefox.

I've tried a few steps to debug, but can't seem to find the fix based on research from other online articles.  I am not a JS developer so just know enough to be dangerous.

Here is my site: www.axessnetwork.com

Here is the code we're using for the left scrolling nav area:

<script>
    $(document).ready(function() {
        var $scrollingDiv = $("#scrollingDiv");
	
        $(window).scroll(function(){  
			         
            $scrollingDiv
                .stop();
                .animate({"marginTop": ($(window).scrollTop() )}, "slow" );         
        });
    });
</script>

Open in new window

0
Comment
Question by:axessJosh
  • 3
  • 2
  • 2
  • +2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40019004
at the end of line 8, I see a semicolumn so your line 9 is used by the hyperspace
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40019081
I removed that semi-colon, but it has not changed the issue.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40019704
Go through some of the validation errors

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.axessnetwork.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You don't have to worry about, "An img element must have an alt attribute" for now. However, "Stray end tag div" or "Unclosed element div." might be important.  I find many times fixing this part of the problem.

Nice site and concept!
0
 
LVL 3

Expert Comment

by:Anthony Pangilinan
ID: 40023909
Opening the page in chrome(I know the issue is in firefox, but it's worth looking at this error) gives me this at the '.animate()' call.

Uncaught SyntaxError: Unexpected token .

Maybe you can try:

$(document).ready(function() {
        var $scrollingDiv = $("#scrollingDiv");
	
        $(window).scroll(function(){  
			         
            $scrollingDiv.stop();
            $scrollingDiv.animate({"marginTop": ($(window).scrollTop() )}, "slow" );         
        });
    });

Open in new window


or

$(document).ready(function() {
        var $scrollingDiv = $("body,html");
	
        $(window).scroll(function(){  
			         
            $scrollingDiv.stop();
            $scrollingDiv.animate({"marginTop": ($(window).scrollTop() )}, "slow" );         
        });
    });

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 2

Author Comment

by:axessJosh
ID: 40027893
I've tried the suggestions but still unable to find what's causing it to work incorrectly.
0
 
LVL 3

Accepted Solution

by:
Anthony Pangilinan earned 400 total points
ID: 40035027
I'm getting this error:
ReferenceError: $ is not defined
$(document).ready(function() {
Try including your jQuery library before the function call.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40087029
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0
 
LVL 3

Expert Comment

by:Anthony Pangilinan
ID: 40087030
The asker never responded to my last suggestion that may have fixed the problem.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40087814
Anthony Pangilinan, it is not easy to see, but check out Gary's comment:

I have recommended this question be closed as follows:
Accept: Anthony Pangilinan(http:#40087030)
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to dynamically set the form action using jQuery.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now