Why is my javaScript not working locally or on server, but working on jsFiddle

Question

This is a link to the working jsfiddle http://jsfiddle.net/akshaytyagi/SD66b/

and following is the code that I am trying to run on my website ( same as the one jsFiddle )

I have tried on two computers. What am I doing wrong?

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var tips = [
    "creative",
    "innovative",
    "awesome",
    "amazing",
    "social"
    ];

setInterval(function() {
    var i = Math.round((Math.random()) * tips.length);
    if (i == tips.length)--i;

    $('#tip').slideUp(500, function() {
        var $this = $(this);
        $this.html(tips[i]);
        $this.toggleClass('first second');
        $this.slideDown(500);
    });

}, 3 *1000);

});
</script>
</head>

<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>


</body>
</html>

You have not described the ways in which the code doesn't work for you. It's not working very well even in the jsfiddle, really; the effect is jumpy. — Pointy, Nov 09 '12 at 14:34
Prisoner : Thanks, fixed it now. @Pointy The animation doesn't work at all. — Akshay Tyagi, Nov 09 '12 at 14:48

Adil · Answer 1 · 2012-11-09T15:11:04.973

8

You need to put the script which access DOM element in $(document).ready to make sure the elements are ready before they are accessed.

$(document).ready(function(){

})

Edit based on comments

Change

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

To

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2jquery.min.js"></script>

edited Nov 09 '12 at 15:11

answered Nov 09 '12 at 14:29

Adil

146,340
25
209
204

I don't think that'd make any difference here, though it's not a bad idea. – Pointy Nov 09 '12 at 14:30
1

You are right in general, but because the code is inside `setInterval` I don't think that's the problem. – iMoses Nov 09 '12 at 14:31
Taking a second look you are right because setInterval was called when page was loading – codingbiz Nov 09 '12 at 14:32
1

The first run of that script wont be run until 3 seconds, after the dom is loaded. – Prisoner Nov 09 '12 at 14:34
Change To and tell me if it helps? – Adil Nov 09 '12 at 14:52

Prisoner · Accepted Answer · 2012-11-09T15:40:05.273

7

I copy and pasted your HTML, and after }, 3 * 1000); there is a special char.

Delete that whole line (}, 3 * 1000);) and re-type it.

See:

here

As andyb has commented, if you're loading the file locally your jquery url wont work. You can either change it to http:// or upload your file somewhere.

edited Nov 09 '12 at 15:40

answered Nov 09 '12 at 14:33

Prisoner

27,391
11
73
102

2

Ha ha this happens so much; I've got an old answer just like your's that's gotten a zillion upvotes over the past couple years :-) It's a jsFiddle side-effect I think. – Pointy Nov 09 '12 at 14:34
Nice find, I can confirm that this fixes the issue. – sethetter Nov 09 '12 at 14:40
I copied the code, pasted into Sublime Text, saved, opened in Chrome and got the same error. It does not seem to be just jsFiddle related. – andyb Nov 09 '12 at 14:41
I'm assuming he wrote this in jsfiddle, then moved it into his own html file. – Prisoner Nov 09 '12 at 14:43
As a general suggestion, always configure your IDE to show special chars. This tip may save you hours if not days of unnecessary debugging – iMoses Nov 09 '12 at 14:50
Also learning to use the debugger provided by any modern browser would help! – Prisoner Nov 09 '12 at 14:51
Oh! Just discovered the "Console" in Chrome. It says failed to load resource, followed by the jQuery's address. – Akshay Tyagi Nov 09 '12 at 14:54
Change the url for jquery to: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js (add http://) and see if that helps. – Prisoner Nov 09 '12 at 14:57
That fixed it! Damn. I hadn't properly included the jQuery! Thanks! – Akshay Tyagi Nov 09 '12 at 14:58
1

@AkshayTyagi It works if the page was being loaded from a web server. If you just open the `.html` file in a browser it will not be able to resolve the link - see http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – andyb Nov 09 '12 at 15:04
@andyb Thanks for pointing that out. The real problem was this stealth character. – Akshay Tyagi Nov 09 '12 at 15:38
@Prisoner What browser/debugger are you using. My Chrome ( normal updated version ) does not display the stealth character, although it displays the error "Uncaught SyntaxError"? – Akshay Tyagi Nov 09 '12 at 15:45
@AkshayTyagi I'm using chrome, in the "console" section where it sayd "Uncaught Syntax Error" click the far right of that (it'll be like "file.html:1" and that takes you to the line. – Prisoner Nov 09 '12 at 15:46
@Prisoner That is exactly what I did. The stealth character does not show up in my "Console" : http://i.imgur.com/ILo2N.png Is there a setting to turn on special characters? – Akshay Tyagi Nov 09 '12 at 16:10

score 1 · Answer 3 · answered Nov 09 '12 at 14:37

Although the right answer was already given, I've taken the liberty to fix your markup. And may I suggest you use proper CSS instead on inline styling? It makes your code much more readable and separates markup and design as you should,

<html><head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    var tips = [
        'creative',
        'innovative',
        'awesome',
        'amazing',
        'social'
    ];

    setInterval(function() {
        var i = Math.round((Math.random()) * tips.length);
        if (i == tips.length)--i;

        $('#tip').slideUp(500, function() {
            var $this = $(this);
            $this.html(tips[i]);
            $this.toggleClass('first second');
            $this.slideDown(500);
        });
    }, 3000);
    </script>
</head><body>
    <div style="background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
        <div class="thousand">
            <div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">
                The <span id="tip">creative</span><br />brand.
            </div>
        </div>
    </div>
</body></html>

Thanks. I usually always clean up the code, but right now was just trying to make this work. — Akshay Tyagi, Nov 09 '12 at 14:52

Akshay Tyagi · Answer 4 · 2012-11-09T16:20:38.277

0

The problem making it work, locally, was that // links do not get resolved to http:// ( src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js instead of just src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")

[ Thanks to @andyb : I was wondering why Google had improper code on their site. ]

edited Nov 09 '12 at 16:20

answered Nov 09 '12 at 15:03

Akshay Tyagi

27
2
9

1

The protocol-less src works if the page was being loaded from a web server. If you just open the `.html` file in a browser it _might_ not be able to resolve the link - see http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – andyb Nov 09 '12 at 15:09

Why is my javaScript not working locally or on server, but working on jsFiddle

4 Answers4

Linked