Chrome and local JavaScript files - javascript

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

Related

jquery is thorwing error stating "idleTimeout is not a function"

I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.

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/

My Javascript working locally but dont work on server. Why?

I have a question to You.
On my local server my circle charts in JS working normally but when i want to see them through www protocol i don't see them :/. I copied my files many times to server - I don't see charts.
Here is code:
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.e-plus.com.pl/mateusz/THEMEFOREST/js/jquery.circliful.min.js"></script>
I tried to do this with my domain adress but result is the same... Webbrowser don't see my charts :(
Did you use any
<base href="http://...">?
Try using:
<link rel="stylesheet" type="text/css" media="all" href="./css/jquery.circliful.css">
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.e-plus.com.pl/mateusz/THEMEFOREST/js/jquery.circliful.min.js"></script>

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

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>

Fancybox Problems, nothing happens

I want to integrate Fancybox in my gallery with the following Code:
Include the scripts :
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="tl_files/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="tl_files/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
my Link to an picture looks like that :
< a class="fancybox" data-fancybox-group="gallery" title="hello world" href="tl_files/photomania/images/51.jpg"><img src="tl_files/photo/images/51.jpg"></img></a>
And in the end i call the fancy box with following code:
<script type="text/javascript">
(function($) {
$('.fancybox').fancybox();
})(jQuery);
</script>
But nothing happens.. please help me
What kind of error du you get?
Have you checked the javascript console, or firebug (if you use firefox/iceweasel)?
Paste the error messages and it will be easier to help you out.
try this:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Since you load jquery at the first row I don't think you need to do it like that.
It should work.

Categories