Laravel Mix + Slick Carousel - javascript

I use laravel mix (webpack) to compile my project. Trying to add slick carousel plugin but get an error: Uncaught TypeError: $(...).slick is not a function .
I use .copy() method in webpack.mix.js file to copy from node_modules directory to public directory:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')
All files successfully appeared in proper public directories and these files are seen in sources tab (in browser inspector).
After I plug slick styles, then jquery (tried several versions), then slick.js in html head. I even used cdn urls.
It's all ok with slick if I do the same without laravel mix.
It doesn't work, I can't understand what's wrong. Please help!

Give a try to change as below:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')
Reference: https://new.laravel.su/docs/5.4/mix

First npm install slick-carousel
If you are using copy then
mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');
Or you can just manually copy-paste
In .html file
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>

Related

Local Flask - HTML Project Link to CSS and JS not Linking when run

I have started to work on my final project for CS50 by creating a web application. I started making all of the basic layouts to my html/css/javascript files on my local system, and installed flask locally to try it out. Although when I directly open the html files, it is linked up to the css and jaascript files, when I run it in flask, it gives me the error of "404 not found" for all of the css and javascript files I am trying to apply to the html.
Here is the code in my html file:
<link rel="stylesheet" type="text/css" href="../styles/page_layout.css">
<link rel="stylesheet" type="text/css" href="../styles/navbars.css">
<link rel="stylesheet" type="text/css" href="../styles/styles.css">
The html files are in the templates folder, and I have a separate adjacent folder called "styles" for the css files and "javascript" for the js file. I tried every kind of formatting to this and cannot get it to work. Does anyone know why this might be? Thanks.
I have found out the appropriate syntax to get my web application to function as I wanted.
The answer I found here:
CSS Problems with Flask Web App
I used the syntax provided and am not running into any issues anymore.

openlayers and nodejs jquery not working offline

I have an openlayers with online jquery working, but sometimes I won't have internet access and I'd like to use it offline. I've downloaded the lib but it's not working, I'm sure that it's in the "js" folder, please help me
I'm using nodejs and openlayers
//working
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//not working
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//browser error
Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36
ReferenceError: $ is not defined
​it's giving me this error, but with online jquery it's OK
First of all you should install jQuery. Run command below in your project folder to install jQuery:
npm install jquery
You should import it in index.js file:
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Based on this post.
Or you should import it to your html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
If you find the right answer please close the question on other communities(r.g. gis.stackexchange.com) and refer to the answer.
Thanks!
Hope it helps.
I just solved using a local server, don't ask me why it works this way and junt pointing the file path didn't work
first, open a terminal and go to the jquery.min.js folder, then start a simple server (ex: python3 -m http.server 8080)
after, go to the index. html file and add the source
<script src="http://localhost:8080/jquery-3.4.1.min.js"></script>
and now it works offline

Install offline Bootstrap in Angular

I don't have any way to have internet on my pc and I want to install Bootstrap in my Angular project by downloading it and calling it in my index.html so i can use it offline. Can't use npm i or anything related to internet besides downloading the Bootstrap zip
I just put its folder in "src" and called it with:
<link rel="stylesheet" href="src\bootstrap\css\bootstrap.min.css">
<script src="src\bootstrap\js\bootstrap.min.js"></script>
This isn't working, should I download also popper.js and Jquery? Or should I change something in Angular.json?
Try using assets folder for static files.So move your files to assets and change links like
<link rel="stylesheet" href="assets\bootstrap\css\bootstrap.min.css">
<script src="assets\bootstrap\js\bootstrap.min.js"></script>
Also you will need to add jquery as well
Put the files in the assets folders. It's better to import those files in angular.json instead of index.html. You will also have to include JQuery and popper as in official bootstrap documentation:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
"styles": [
"src/assets/bootstrap/css/bootstrap.min.css""
],
"scripts": [
"src/assets/jquery/remainingpath...",
"src/assets/popper/remainingpath...",
"src/assets/bootstrap/js/bootstrap/bootstrap.min.js"
]

Angular 6 : How to use css and js files from cshtml pages of mvc into Angular project

I am trying to migrate a MVC project into Angular 6.
I have css files and js files in chtml code which are used in the mvc application as below :
<link rel="stylesheet" href="~/OptumFiles/fonts-clientlibs-global.min.css" type="text/css">
<link rel="stylesheet" href="~/OptumFiles/optum-clientlibs-global.min.css" type="text/css">
<script async="" src="~/OptumFiles/analytics.js"></script>
<script async="" src="~/OptumFiles/js.js"></script>
Now i want to use these files in my angular project globally.
Things i have tried :
Created a folder FICAssets in the Angular project.
Added files in that folder.
Added their reference in index.html file.
Code in index.html :
<body>
<link rel="stylesheet" type="css" href="FICAssets/css/fonts-clientlibs-global.min.css">
<link rel="stylesheet" type="css" href="FICAssets/css/optum-clientlibs-global.min.css">
<script src="FICAssets/js/analytics.js"></script>
<script src="FICAssets/js/js.js"></script>
<app-root></app-root>
</body>
The problem is that iam still not able to load the files , getting 404 error.
Assets aren't magical, they need to be declared as such.
Open your angular.json file. Find the path
projects.YourProjectName.architect.build.options.assets
And from there, add your declared folder in it. It should keep the assets up when the project is complied.
open your angular.json.
add style in "styles": []
add script in "scripts": []
reference link :- https://www.truecodex.com/course/angular-6/how-to-include-external-css-and-js-file-in-angular-6-angular-7

How to host popper.js locally

I just upgraded to Bootstrap four and realized Popper.js was a dependency. I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export. It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?
(I don't want to use a package manager for this.)
The README.md of the project will help sort this out:
Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
UMD - Universal Module Definition: AMD, RequireJS and globals;
ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
ESNext: Available in dist/, can be used with webpack and babel-preset-env;
Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.
Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it. Located in dist/umd.
you can use bootstrap.bundle.min.js which already contain Popper.js
I also tried downloading popper and I tried to recreate your problem, and you are correct.
If you check the Quick Start section of getbootstrap.com page, you can find the following line in their example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
Note the umd part in their link. You can download that file and add it locally and it will work.
PS - You may also have to change your jQuery import.
Download the official bootstrap files by clicking the first link on this page:
https://getbootstrap.com/docs/4.5/getting-started/download/
You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need
you can use it by using this code in your <head> tag:
<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">
I included 4.5.0 because that is the current version of bootstrap out there today
If you download Popper.js though
npm install popper.js
I found there are difference between npm package and its original source which is here https://popper.js.org/.
I just download popper.js from its original source and put it new js file. It worked for me.
Just download the source code and refer to it
Get the source code from the github page, then refer to it in your html
<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />
go to : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
the right click and "save as..."
you can do the same with :
https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js
and then in your code you add this line at the bottom between Jquery's and Bootstrap's .js link (script) :

Categories

Resources