Been working on this codepen: https://codepen.io/aladin94/pen/QWjgKNz
Would like to know how to properly add the scripts (for the Swiper built-in library on codepen), into my files on VS Code.
I've tried adding <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> into my Head tag,
and adding <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
at the end of my Body tag, but that causes my site to go completely blank.
The screenshots for the codepen:
Do I need to npm install the library or add the script in my package.json file?
To add swiper into your project please got to this site:
https://swiperjs.com/get-started/
Basically this is how you include it:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Related
I made a basic portfolio website using main.js It works fine on the local server but when I upload the code to GitHub and deploy it, it doesn't work.
I only see HTML and CSS files but the main.js files won't load. I even tried using gh-pages and creating a dist folder but it still doesn't work.
My console has the following error:
THREE.WebGLRenderer: A WebGL context could not be created.
How can I fix this?
Here's my code
<script type="module" crossorigin src="/assets/index.548483ff.js"></script>
<link rel="stylesheet" href="/assets/index.4db4f50e.css">
Both paths are not correct. You want to use:
<script type="module" crossorigin src="./assets/index.548483ff.js"></script>
<link rel="stylesheet" href="./assets/index.4db4f50e.css">
The additional dot ensures the path starts relative from the current location and not from the host.
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can make a top level __layout and import everything there.
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add#latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
https://vitejs.dev/guide/features.html#css
https://vitejs.dev/guide/assets.html#explicit-url-imports
I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...
I'm using Select2 in a sails project (https://select2.org/getting-started/installation). For that I added the following lines in my layout.ejs
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
But when I run the application with the command sails lift the two lines are automatically deleted from the layout.ejs.
I know it's not the editor (I'm using vscode) because I test that looking for the problem. Do you know what I can do to solve that?
Sails uses Grunt to generate files and automatically add resources into layout.
Scripts are inserted between <!--SCRIPTS--> and <!--SCRIPTS END-->
Styles are inserted between <!--STYLES--> and <!--STYLES END-->
So if you add resources manually between these tags, they will be deleted by Grunt.
See https://sailsjs.com/documentation/anatomy/tasks/config/sails-linker.js for more informations
I begin to use Bootstrap. And I add js/bootstrap.min.css
to my index.html and all works.
But, when I add bootstrap.min.js to index.html ,my, for example, dropdown menu doesn't work.
But, when I add http://code.jquery.com/jquery-latest.js - my dropdown menu works.
I want to work with menu without connecting to Internet.
Why?
you should download the script at your local system and put the script at in your project JS OR Script folder and call it from there.
like that:
<script type="text/javascript" src="/Scripts/jquery-latest.js"></script>
hopefully it works :)
Thanks
Bootstrap:
http://getbootstrap.com/getting-started/
JQuery:
http://www.w3schools.com/jquery/jquery_get_started.asp
Download and link the files correctly via relative paths.
Bootstrap uses jquery, since your need to use it without internet download the jquery file and put it inside JS folder and serve it to index.html
Here we go:
1) You are using jQuery library but not bootstrap
2) if you want to download bootstrap library to local, you will get from here : enter link description here
Instead of using cdn path in your index.html like this
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
try using relative path after downloading the required files as below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="js/jquery.js"></script>
In your case jquery-latest.js must be downloaded from given link and included in index.html using relative path.