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/
Related
I have done jquery code in an aspx page. Now I want to move the code to Report-Filter.js file. I tried to move and execute. But it doesn't work.
This is my code;
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script> -------> // code
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
But I didn't get the output. What I did wrong in my code.
There is no need to write script tags in .js file remove script tags from js file
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
Should be
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
Also it would be better to place the link of file just before close of body tag
I'm not entirely sure what you are trying to do, but I'm going to assume some things.
What I think you need is
Create a new file and put the javascript code in there with respects
to what Leopard says.
Reference your new javascript file in your code as shown in your
question. Be sure to reference this AFTER you reference the JQuery
libraries.
Test your code. For example, by putting an alert in your Javascript
file somewhere. Like this: alert("test");
Some general tips:
Always put the CSS references before the JS references (Preferably in
the head of the document). This way the page won't stutter visually
while loading, because the elements put on the screen will already be
styled.
Always put the scripts you are referencing below your HTML elements.
This way the page won't take too long to display, because the scripts
won't load beforehand, but afterwards (which is correct anyway,
because your code run's after the document has finished loading)
Eventually it should look something like this:
Javascript file (js/new-javascript-file.js):
$(document).ready(function () {
alert("test");
})
Html / CSHtml / Aspx file (not sure what you are using):
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Accordian-Hide-Show.js"></script>
<script src="js/new-javascript-file.js"></script>
I am trying to deploy a java jsp application, but the view not charge .css and .js files, as I can fix this?
the file structure is as follows:
-Project
-META-INF
-WEB_INF
-resources
-CSS
-scripts
-administracion
-control
-inicio
Your could add lines given below:
<script type="text/javascript" src="resources/scripts/your_js_file.js"></script>
<link rel="stylesheet" type="text/css" href="resources/CSS/style.css" />
Add this line in your jsp
<script type="text/javascript" src="scripts/your_js_file.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
scripts and css are folders outsideWEB-INF and contains .js files and .css files respectively
logically he called .css and .js files from the JSP.
when I'm editing the project work perfectly, but do not load the deployment
<link href="../resources/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="../resources/css/colors.css" rel="stylesheet" type="text/css"/>
<script src="../resources/scripts/jquery.js" type="text/javascript"></script>
<script src="../resources/scripts/bootstrap.js" type="text/javascript"></script>
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
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>
I have a code like this: http://codepad.org/0j9m2Xdw
These files:
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<script src="js/jtable/jquery.jtable.min.js" type="text/javascript"></script>
are in 100% in correct location. I run google-chrome with --allow-file-access and --allow-file-access-from-files parameters. Even that I still get a blank page when I try to access my index.html location, which is: file:///home/myusername/code/web/index.html
What's wrong?
JTable needs also jQueryUI, try this :
<script src="js/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<!-- JqueryUI -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js " type="text/javascript"></script>
<!-- Include one of jTable styles. -->
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
See this jsfiddle demo