So I was trying to simplify my header and somehow now my local jquery file doesn't load anymore. Other js files load fine but not jquery (i checked with Chrome's DevTools source section).
So I made a test file with a header stripped of most useless things to show you :
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Non-Conformité</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script type="text/javascript" scr="../bower_components/modernizr/modernizr.js"></script>
<script type="text/javascript" scr="http://{InternalCompanyServer}/nonConforme/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" scr="bower_components/jquery/dist/jquery.js"></script>
<script scr="js/jquery.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation.js"></script>
</head>
<body>
<div class="row topMargin" header>
<img class='small-3 columns logo hide-on-print' src="img/logo-fr.png"/>
<h2 class='small-9 columns' >Formulaire Non-Conformité</h2>
</div>
<div class="row"></div>
</body>
As you can see I tried multiple ways to write the link : Absolute then Relative, I even copied the jquery file to the js folder and tried to link it but no luck.
The foundation.js file just after it loads fine but it gives the : "foundation.js:703 Uncaught ReferenceError: jQuery is not defined(…)" Error. Comment if you need more info I didn't think of putting here.
you put scr forjQuery url instead of src ;)
Edit> just a reflex : https://validator.w3.org/check
Go to direct input, paste you html... and let' go : Line 7, Column 40: there is no attribute "SCR"
Related
I have my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aerosmith Messenger</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/spinner.css" />
<!--<script src="src/scripts/jquery-1.6.4.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
</head>
<body>
<am-root>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</am-root>
</body>
</html>
I'm trying to include jquery script. And it does not work when i include it like this (commented line). Help me resolve this issue because i need to include some other scripts.
By "does not work" i mean all the time that commented script is not found in console of a browser.
Make sure you provide the path of "jquery-1.6.4.js" exactly where it is located. Check the src/scripts.
And if it is there then you should include it somewhat like this,
"~/src/scripts/jquery-1.6.4.js".
Assuming you have "src" folder in which "script" folder exists, which has your jquery file.
Try add script and style to angular-cli.json in root project, as follows:
"apps": [{
...
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"./styles.css"
],
"scripts": [
"assets/js/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"assets/js/custom.js"
],
Latest version of angular-cli(angular-cli: 1.0.0-beta.19-3) provides an assets folder under src directory. You just need to add src property of an image tag as below,
<img src="./assets/logo.png">
But as turns out i ditn't need to include any scripts to my index.html. The main problem was that sometimes my project didn't detect the changes. I mean - in past i added line to include jquery on index.html, my project didn't detect it and therefore browser didn't show any errors (not found) and after that all the time i thoutht that i was working with jquery because of that included jquery on index.html. But actually jquery was working because i also included it in different way. So be careful about it.
I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.
So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>