Jquery code works on JsFiddle, but not on my computer anymore

Question

I have a little problem and got tired of trying to solve it. The jQuery easing code works perfectly on jsfiddle, but doesn't work on my testing server on the localhost anymore. When I remove the jQuery easing effect, things go back to normal and the code works fine...

I'm wondering is there something wrong with the code? Is that something related to OnLoad function or something...!!

<head>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
           a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
        },
        function() {
           a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
        })
       .append(div);
   });
});

Here is the JSFiddle code.

are you sure you properly included jquery inside your page, whithin ` — ianace, Jan 31 '12 at 06:58
hi, and thanks for the comments. @ianace Yes, I'm sure I included jquery inside the page within — Digital site, Jan 31 '12 at 07:44
@Amar I don't mind, but you can do that using the one from my demo at Jsfiddle to see if it working or not. — Digital site, Jan 31 '12 at 07:45
I wanted to see the syntax. Had seen situations where there is some error in linking js file. You can also check in fiddler, if all js files are getting downloaded or not, secondly you can check in firebug or IE developer tools for any javascript errors. — Amar Palsapure, Jan 31 '12 at 07:47

score 2 · Accepted Answer · answered Jan 31 '12 at 09:22

Try this, your sequence of including javascript was incorrect.

<head>
 <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">
   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });
 </script>
</head>

I have tested locally, (see the screen shot)

enter image description here

Hope it works for you.

@ Amar, Thanks so so so much. You are totally right. The sequence of including javascript was incorrect. now things are perfect. Thanks billion times, mate. — Digital site, Jan 31 '12 at 11:40

score 1 · Answer 2 · answered Jan 31 '12 at 07:03

1

Sorry, I can't comment yet so...

See what ianace said.

Look if you didn't included jquery script tag after your script tag. Your code script has to be loaded after the dependencies, like this:

<script src="jquery.js> </script>
<script src="yours.js"> </script>

answered Jan 31 '12 at 07:03

Bengineer

7,264
7
27
28

Thanks mate, but as I said I did all these things. The only problem is when I remove the word "easeOutBack" things go back normal, but it is strange the works fine at JsFiddle... – Digital site Jan 31 '12 at 07:48
probably something conflicts with the function name, better check what other .js files are included, and that of which does not conflict with other functions – ianace Jan 31 '12 at 08:07
I'm new here and don't know how to place the full code so now I could update the main question adding other parts of the code without styling. you can see the body details at JSfiddle for more details. – Digital site Jan 31 '12 at 08:55
@ ianace, I have only jquery mini 1.7 and jquery easing effect 1.3> As I mentioned before, when I remove the word "easeInOutBack" things go back great. – Digital site Jan 31 '12 at 08:57
Great, the member "Amar" made it work, Thank you and thanks for all others for the great comments. regards. – Digital site Jan 31 '12 at 11:41

score 1 · Answer 3 · answered Jan 31 '12 at 07:11

1

Hope this helps:

Instead of using jquery file.js you can use google for that and also jquery-ui if needed. This is more dynamic and you can change the version to be used.

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7.1");
        //google.load("jqueryui", "1.7.3");
    </script>

After that, put your js with jquery functions (the code you got in jsFiddle):

<script src="scripts/functions.js" type="text/javascript"></script>

And it is supposed to work.

answered Jan 31 '12 at 07:11

Oscar Jara

14,129
10
62
94

Thanks mate, but that didn't solve the problem. The weird thing is that when I remove the word "easeOutBack", the code starts working again. so I'm kind of confused assuming that easing effect has something wrong somewhere... – Digital site Jan 31 '12 at 07:47
I updated my first question providing the full code, but no style. I'm new here and don't know how to add the full code at once. so here is the body : – Digital site Jan 31 '12 at 08:51

Jquery code works on JsFiddle, but not on my computer anymore

3 Answers3