Code working in jsFiddle but not in browser

Question

I'm trying to run the following code, written on my local machine:

http://www.jsfiddle.net/WShdx/3/

Functionality-wise (ignore the broken images in the previous and next buttons, and the wrongly-sized main images) the click/hover function is working properly in jsfiddle. However, on my local machine it's not working at all.

For all intents and purposes the code is identical, except the local copy has this head section to load in the javascript/css files that are contained within the jsfiddle page:

<head>
  <title>Jquery Wizard</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="wizard.js" type="text/javascript" ></script>
</head>

Is there some wonderful function of jsFiddle that is making my code magically work, or am I missing something here?

What do you mean it's not working at all? What kind of errors is your debugger reporting? — jamesmortensen
– jamesmortensen, Commented Jan 9, 2011 at 5:57
Give us something, error or anything, at this point there is no way to tell why it doesn't work. Is your external js is in the same folder? Do you have to use https, try http for jquery cdn instead. Try to run it through the validator. — Maksim Vi.
– Maksim Vi., Commented Jan 9, 2011 at 6:01
It seems possible that this is a security issue; online code has different permissions in different browsers than local code, particularly with respect to access from various domains. — Phrogz
– Phrogz, Commented Jan 9, 2011 at 6:05
Sorry guys didn't see these comments. As stated above, the issue is that the click/hover jquery function isn't working when not in jsfiddle. I've uploaded the files here: harrisonfjord.com/wizard/index.html . Dr.Molle appears to be right, it may have something to do with the onLoad in jsFiddle, but I'm not 100% sure. EDIT2: Yep, Dr Molle was right, see below. Thanks for the help guys! — JVG
– JVG, Commented Jan 9, 2011 at 7:14

Hanky Panky · Accepted Answer · 2014-05-01 17:05:31Z

12

You chose to run the script-code "onload" on jsFiddle, that's the difference.

Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.

edited May 1, 2014 at 17:05

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

answered Jan 9, 2011 at 7:04

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JVG Over a year ago

Thanks for the response! Got it working, appreciate it. I got it working by adding "$(window).load(function(){<rest of the jquery>}". If anyone else has the same problem, this function waits until the rest of the page has loaded before running. As Dr Molle said, my script wasn't working because it was running before the page had loaded, and was looking for elements that hadn't been created yet.

Dr.Molle Over a year ago

It's also possible to simply place thze script at the end of the body. The benefits: all elements are known there and ! the script is loaded later, so it's possible that the page itself will be shown faster.

zalun Over a year ago

Remember, you can always load a draft (ctrl+shift+Enter) and see the source code generated by jsFiddle

Yaw Ansong Snr · Accepted Answer · 2012-08-02 15:41:38Z

0

I'd also advice anyone who run into such errors to use firebug or any debugging tool debug the script whenever such problems occur. Might be very simple yet frustrating problems like an Uncaught SyntaxError: Unexpected token ILLEGAL error. Debuggers come in very handy!

answered Aug 2, 2012 at 15:41

Yaw Ansong Snr

5175 silver badges16 bronze badges

Collectives™ on Stack Overflow

Code working in jsFiddle but not in browser

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related