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 :)
Related
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!
I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>
<HTML>
<Head>
<Title>My Test</Title>
<script src="http://someurl.com/test.js"></script>
</Head>
<Body>
This is for test
</Body>
</HTML>
Above mentioned is my HTML code. When I right click my page & hit "view source" I can see exact same code.
But what my requirement is, instead of <script>...</script> I want actual javascript code from test.js should be displayed when I am hitting "view source".
I tried to put it in iframe, but it didn't worked.
What you want is impossible to achieve with HTML and an external JS file.
There is no way to make View Source show anything other than the actual source code of the URL.
If you want to look at the JavaScript source code, then look at the URL for the JavaScript. Most browsers will hyperlink it in View Source to make it easy to do.
If you really want the JS to be displayed as part of the source of the HTML document, then you have to make it part of the HTML document. Remove the src attribute and copy the contents of the JS file to between the start and end tag of the script element.
add a <script> tag in the <head> section
<script src="path/to/test.js"></script>
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
The following external CSS files were
included after an external JavaScript
file in the document head. To ensure
CSS files are downloaded in parallel,
always include external CSS before
external JavaScript. 1 inline script
block was found in the head between an
external CSS file and another
resource. To allow parallel
downloading, move the inline script
before the external CSS file, or after
the next resource.
My HTML is:
<head>
<link rel="Stylesheet" href="gStyle.css" />
<script type="text/javascript" src="gMain.js"></script>
<script type="text/javascript" language="javascript">
// Your chart object(s)
var myChart;
// Function to hold all chart creation
function initCharts() {
myChart = new ganttChart("chart1");
myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
myChart.gDraw();
myChart.gChangeBarColour(1, "#dd2200");
myChart.gChangeBarColour(2, "#9900ee");
myChart.gChangeBarColour(3, "#00dd00");
myChart.gChangeBarColour(4, "#ffbb00");
myChart.gChangeBarColour(5, "#00aa99");
}
</script>
</head>
<body onload="initCharts()">
<div id="chart1" class="gContainer">
</div>
<div id="db"></div>
</body>
Is it getting confused between the body inline script?
Inspect the page elements. Probably your Chrome extensions are dynamically adding scripts to the page in HEAD.
I think that when javascript is downloaded the browser must wait to get it all and then run it - this stops it going to the next line directly and getting it. I guess styles all get downloaded and then computed down to inheritance position and importance etc...so they can download in parallel.
This kind of thing is hard to regulate in a CMS with components that load their own style and js.
For me, Google Analytics library inserted scripts before the rest of mine.