How can I properly add CSS and JavaScript to an HTML document? - javascript

This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.

Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>

two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.

Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.

Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>

Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>

Related

Marionette 3 templates work inline, but not when included in a separate file

I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>

how to call css and js files in webview?

I have one local html page in my android app.
in html page i call css and js files but when i run app , only context loaded and css and js don't load
I import css and js folders to android_assets/images/css nad android_assets/images/js
and i call css and js in html page like this:
<link href="./android_asset/images/css/bootstrap.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/touchnswipe.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/responsive.css" rel="stylesheet" />
<script src="./android_asset/images/js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/modernizr.custom.js" type="text/javascript"></script>
<script src="./android_asset/images/js/jquery.mousewheel.min.js"></script>
<script src="./android_asset/images/js/jquery.hammer.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/TweenMax.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/responsive_example.min.js" type="text/javascript"></script>
And in Sites.java onCreate section i write this code:
WebView wbSites =(WebView)findViewById(R.id.wbSites);
// wbSites.setWebChromeClient(new WebChromeClient());
// wbSites.setWebViewClient(new WebViewClient());
wbSites.getSettings().setJavaScriptEnabled(true);
wbSites.loadUrl("file:///android_asset/images/sites.html");
Tip: htmlpage named sites.html and pasted in android_asset/images path
but still don't load js and css files.
pls help me
Have you tried including the file:// prefixes to all the resources you want to load?
i solve it
i most write address like this
<script src="./js/modernizr.custom.js" type="text/javascript"></script>
. Refers to local root => /android_asset/images/

jQuery datepicker - code won't work?

New to jQuery. I cannot get the datepicker to work. Can anyone tell my what I am doing wrong? Thank you, any help is appreciated. Here is the skeleton code:
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
I have looked at many posts almost identical to this one, but none of the answers worked. I have also downloaded the jQuery UI files to reference them locally, but that wouldn't work either.
They aren't working for you locally because you are running them from a file with a url like file:///Macintosh HD/whatever....
You need to change the lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
to:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
When you use a // prefix for an asset, it matches whatever protocol you are using. So when you load up something locally (without using a local web server), it looks for file:///code.jquery.com/jquery-1.10.2.js which doesn't exist. Changes the assets to start with http:// or https:// instead of //.
After reading the above answers and your comments, it seems that you are unable to run it locally on your browser.
Referencing Files Locally
Easiest way is to download and keep all the files in same directory.
Let's say the files are
index.htm, jquery-ui.css, jquery-1.10.2.js, jquery-ui.js
File : index.htm
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
Relative Path
You can give relative path such as
src="js/jquery-1.10.2.js"
src="js/jquery-ui.js"
href="css/jquery-ui.css"
if the directory structure is :
Present Working Directory
index.htm
js (directory)
jquery-1.10.2.js
jquery-ui.js
css (directory)
jquery-ui.css

<script> tag doesn't close properly

In my default.jspx which contains the basic layout for the page I am trying to import some jquery libraries as follows
<head>
...
<spring:url value="/resources/js/lib/jquery-1.9.1.min.js" var="jquery_url" />
<spring:url value="/resources/js/lib/jquery.tokeninput.js" var="jquery_tokeninput_url" />
<script src="${jquery_url}" type="text/javascript"></script>
<script src="${jquery_tokeninput_url}" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
</script>
<util:load-scripts />
...
</head>
but when the page is rendered in the browser the first script tag swallows the two others
<head>
...
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery-1.9.1.min.js">
//These lines are inside the first script tag
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery.tokeninput.js"/>
<script type="text/javascript">
$.noConflict();
//The tag is closed here
</script>
<link href="/roo-inari/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet">
...
Any idea what might be causing this? The project is based on a spring roo generated web mvc scaffold.
I am using Chrome v.25.
The simple solution was to write a comment inside the tag so that it is not closed automatically. Silly me
<script src="${jquery_url}" type="text/javascript"><!-- required for some browsers --></script>

why wont my javascript work on my server?

Could anyone tell me how to get this code working on a web server. It works fine locally but the calculations don't work online. What has gone wrong? The html file is in the same folder as the jquery.js file.
http://jsfiddle.net/nyree/3CgcH/
thanks in advance for any help
<script type="text/javascript" src="/spreadsheets/jquery.js"></script>
<script type="text/javascript" src="YUI/yahoo-min.js"></script>
<script type="text/javascript" src="YUI/yahoo-dom-event.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/fonts-min.css" />
<script type="text/javascript" src="YUI/cookie-beta-min.js"></script>
<script type="text/javascript" src="YUI/cookie-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/tabview.css" />
<script type="text/javascript" src="YUI/element-beta-min.js"></script>
<script type="text/javascript" src="YUI/tabview-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/container.css" />
<script type="text/javascript" src="YUI/container-min.js"></script>
None of these files exist on jsFiddle's server. You need to change your reference URLs.
What exists on your server has nothing to do with what exists on jsFiddle's server.
jsFiddle only knows a part of the path, /spreadsheets/jquery.js. That is a relative URL to their server. If you want your code to work on someone elses server, you either need to be able to put the files on their server to maintain the path structure, or change the URLs to be absolute.
<script type="text/javascript" src="http://YOURWEBSITE.com/spreadsheets/jquery.js"></script>

Categories