Javascript working in JSFiddle but not in browser [duplicate] - javascript

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?

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.

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!

Related

How to put javascript in html file

Let me re-explain the whole question.
I want to add this in my website http://www.w3schools.com/howto/howto_js_slideshow.asp
So for this, i have to make a external java file (internal may work, but i want external).
So when i paste the java code in my html file in body tag, the script works fine. So that means, nothing wrong with the script. But when i put the same thing in a different external file, the script is not working.
So the problem must be in the head tag, where i write the external file location. This is my head tag
<head>
<title>FFH</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="images/ffh.ico" />`
<script type="text/javascript" src="myscript.js"></script>
Yes, the "myscript.js" is in the same folder and i am 100% sure about it.
put your html file and javascript file under the same folder.
Following can be a reason for your issue
Invalid src path in the script tag
Javascript might be disabled in your browser.
You have a script error/exception that stopped entire page's script execution.
Maybe you have an Ajax request that won't work if your open it as a local file protocol. e.g., file://
What can you do?
It is right time for you to know about and use your developer tools available in your favorite browser.
See if it shows 404 or some other error. Then update your SO question with the exact error message that you see. We would be happy to help.
Revised answer based on provided w3c link:
Now we know the exact problem.
You can not add that script tag to the head of the HTML. Because the elements that you refer in the script are not available at that time of execution. Move the script tag just before the end of body tag (all your carousal tags/elements should be present before the script tag) . Then It would work as expected.
If you still want that script tag to be in the head section, then you have to initialize your carousal/slider in DOM ready event or window.Onload event.
Still my earlier comment is relevant, because you can use developer tools in your browser to find out the exact error statement.
As stated in other answers, script-tag may not work if it is located in <head> tag. Try adding it right before </body>.
+don't call it java, they have nothing else in common except name :)

TypeError: $ is not a function (Magnific Popup)

I'm a newbie to web dev, so please stick with me. I know this question has come up a lot (or a similar deviation), but after a couple of hours of searching I have not found an answer that works for me.
I've made sure the JQuery file is loaded first, and tried multiple versions to no avail. Whenever I try to load the Magnific Popup script, I get (TypeError: $ is not a function) on line 50. I've had a look and tried to change $ to JQuery to no avail, so it's back to normal now.
Here's the Magnific Popup code block:
var mfp,
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window), <<<<<< ERROR HERE
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
And the relevant html:
<head>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>
looks like its not picking your jquery library from CDN..
make sure that you have the network in your system or have access to jquery CDN url
if all above is fine then you try with http in CDN url like below. this is working for me
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to load your jquery file from your own (local) machine. Hopefully, this will work well.
Also, it would be helpful for me if you please let me know that you are not getting 404 for the JQuery file from the CDN.

.js scripts not loading in Colorbox plugin

I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>

External JavaScript Files will not execute in IE9

The following is a snippit from my a little web page I'm putting together.
<script type="text/javascript" src="head.js">
</script>
<title>CPST 3410-85 Class Template</title>
</head>
<body onload="outputToDiv();">
The head.js file referenced in the script tag is below:
function outputToDiv() {
alert("JavaScript is working!");
}
In Chrome and in Firefox the alert is displayed indicating the JavaScript is working. In IE9 it is not. Furtermore I can't get ANY external script to run in IE9, regardless of the content. I have used custom security settings and lowered in a granular way every security setting to its lowest level, and gone into advanced settings and enabled literally everything I could find.
It should be noted that I am opening this from a local folder. All files are in the same folder, and again I stress that this works in firefox and chrome.
In IE9 I have enabled debugging and I get the error below:
Webpage error details
Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///E:/My%20Documents/My%20Web%20Sites/CPST341085/head.js
Of course it then tells me that "outputToDiv()" is undefined.
I am at a total loss here.
I got this behavior when I had:
<script type="text/javascript" src="jquery-1.7.1.js" />
However, this fixed it:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
Go figure...
David

Javascript files not being found

This is the weirdest thing. When I moved what little working code I had from my development setup to some kind of test server (and believe me when I tell you that that was painfull), I realized that all of my Javascript functionality wasn't working. After doing a little investigation (fiddler2), I found that I am getting a 404 error when loading my scripts. Well when I look in the directory where the code says they are located, I am ABLE to find them. In other words, they are where they said they were. What in sam hill is going on here? Could it possible be how I have my IIS server set up? I looked in the Handler mappings for my website (one of several websites on this server under the sites\default web site node) in IIS I noticed that .js is not even found in there. Would that have anything to do with it? If that is way off base, have you ever experienced anything like this? How can I go about solving this issue?
Thanks for your help.
EDIT: Examples of how I call my scripts
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/dataTable.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jqUIcss/jquery-ui-1.8.14.custom.css" />
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqUI/jquery-ui-1.8.14.custom.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
EDIT 2
Just checked and my application pool inside of IIS 7 is set to integrated. So that probably isn't it.
My thought about your problem.
Did you drag and drop the file name into view? (this will fill path relative to file to your js file)
this is happening often if you have areas.
step 1
check that file name is in correct location and you have the correct name.
step 2
check whether you can access file from url link on the location you know to be sitting in
step 3
validate your request via firebug or something else that will show you request for the file.
step 4
is the file / folder accessible via your application / do you have access rights to the location
if this fails i would presume there is something wrong with IIS or settings of your application/ website
this is just quick thought for you...
Figured it out...
Talking to a co-worker of mine I discovered what he does in situations like this...
<script src="<%=ResolveClientUrl("~/Scripts/lib/jquery.js")%>" type="text/javascript"></script>
ResolveClientUrl plus the "~" infront of the Folder where I expect the jquery library to be seems to work.
I had a similar problem with asp.net mvc and css and javascript url.
Sometimes I need to use the function Page.ResolveClientUrl
and other time Page.ResolveUrl does the tricks
This happened to me with I was using MS Edge.
I went to the upper right hand corner, clicked the three dots, clicked 'More Tools', 'Developers Tools' to get the developers window
Then I right-clicked on the browser's 'Refresh' icon (the circle arrow), and selected 'Empty Cache and Hard Refresh'.
Everything was then fine. It's one of those answers that's sometimes too easy to get

Categories

Resources