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.
Related
I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
I have an HTML Template with CSS and JS. I wanted to import it in SvelteKit.
Adding HTML and CSS is pretty straightforward. When it comes to JS, there are problems.
As far as I have tested with the browser, The imported JS code works, but it fails to affect the DOM.
Ex. console.log works, but adding bootstrap.js or slick.js do not work. Also, custom JS written is not loading. This means there is no issue with the directory.
This is how I have imported CSS and JS in Svelte.
<svelte:head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/isotope.pkgd.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/script.js"></script>
</svelte:head>
Is there another way to import external JS to Svelte files, a way where the JS will affect the DOM?
For global scripts, you can add them to your app.html or index.html in your SvelteKit project, just like how you would with a normal HTML webpage:
src/app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Metadata such as title or description -->
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<!-- Your CSS / JS globally -->
<link rel="stylesheet" href="https://some-cdn.com/css/bootstrap.min.css" />
<script src="https://some-cdn.com/js/script.js"></script>
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
HOWEVER, it seems you're importing them from an absolute URL. If this is located inside the /lib folder, you can import them using a tag in your +layout.svelte:
<script>
import "$lib/css/bootstrap.min.css"
// you can do the same with JavaScript
</script>
A very common scenario, however, is that they are in node_modules. To import these, you can import them from the module:
<script>
import "module/style.css"
</script>
If they are in your static folder, you can use app.html to import them as shown in the first example.
Since you're using bootstrap, I would recommend to use svelte-add/bootstrap and import any necessary JS in app.html using a CDN
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"
I am newbye of grails3. Trying to use jquery basics, I got Jquery not defined in my project. Is jquery no more default for grails?
I try at the beginning of my gsp, but giving me not defined. So I switch to manual refeering.
Is it correct simply put jquery min js file in asset and use <asset:javascript src="jquery-2.2.0.min.js"/>, or should I use another, more basic, way?
In the latest grails as in 3.1.1 I found when it generates
grails-app/views/layouts/main.gsp
It has:
<asset:stylesheet src="application.css"/>
<g:layoutHead/>
</head>
...
<div class="footer" role="contentinfo"></div>
<asset:javascript src="application.js"/>
..
Modify this file and move that application.js under css file:
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
<body>
Try again bob may be your uncle by this point
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.