How to load resources from node_modules - javascript

I'm trying to use this emoji plugin in my project. I installed it and I can see it in the node_modules files but I can't load it I get. Failed to load resource: the server responded with a status of 404 (Not Found).
Here is my try
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/memory.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<!-- How to link them correctely -->
<link rel="stylesheet" href="node_modules/emojionearea/dist/emojionearea.min.css">
<script type="text/javascript" src="node_modules/emojionearea/dist/emojionearea.min.js"></script>
</head>

Related

How to load external iframe?

I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?

Can't use External JS in angular 8

I'm trying to integrate a html template in my angular project and everything is going fine except my JS plugins are not loading. I've given the path to the files in the index.html page. The styles are working fine.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Estate</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/themify-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/nice-select.css" type="text/css">
<link rel="stylesheet" href="assets/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="assets/css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
You can import your external JS files in Angular by mentioning them in angular.json file.
Inside angular.json you have to mention your files in scripts array. Make sure you are giving absolute path for the files that are present in the assets.
"scripts": [
"../../../assets/jquery/dist/jquery.magnific-popup.min.js",
"../../../assets/jquery/dist/jquery.min.js"
]

Jquery bxSlider not working failed to load resource

I am trying to use jquery bxSlider (http://bxslider.com) with HTML 5. I followed instructions to download but I get "Failed to load resource not found on server" error when testing my page statically.
<!DOCTYPE html>
<html>
<title>Tennis Central </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<head>
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
</head>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.slider1').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
</script>
Error Pic

Bootstrap js not loading on Live server

I have searched the other questions but I do not get anything that really solves my problem. I downloaded a template that I want to use as a small portfolio for myself. On my local server everything works fine. But when I upload it to a live server something goes wrong. I believe the problem is with the Bootstrap.js or bootstrap-theme.css
Some functions are not running and dont display at all. Such as the loading bar when you open the site, backgrounds, some images and arrows.
I have done the following.
Checked all the paths to make sure they are correct.
Made sure that it is not a cache issue.
Tried to run it in private view (still the same problem)
Checked the firefox error log but all scripts seem to load.
Here is the template demo - http://designova.net/presence/index01.html
Here is my live version - codethis.co.za
Here is the code in the head and the js at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This - Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Standard Favicon-->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />
<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
.full-height{
height: 100%;
}
</style>
</head>
and at the bottom
<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script>
<script src="javascripts/jquery.magnific-popup.js"></script>
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script>
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>
Please could someone help me with what is going on here
Your page is riddled with 404 errors, which means either (1) your paths are not correct, or (2) the files do not exist on the server.
Something to look at would be whether you are using relative paths or absolute paths for your JS, CSS, and image assets. Remember:
paths that start with a / will resolve to http://codethis.co.za/<path>
paths that do not start with a / will resolve relative to whatever the current path is
Perhaps you are missing a subfolder in your paths?
First of all you seem to have a problem loading some of your fonts (cross-origin) It should not be linked with your problem, but you should fix it.
You also have a :
Uncaught ReferenceError: $ is not defined
which could be relative to something with your JQuery, and this could explain a lot if you're using it heavily.
From what I see in network I don't have any missing images.
Thibaut

Bootstrap popovers, affix not working. JS loading issue?

Recently, popovers and affix (the features in Bootstrap's JS) has stopped working. Unfortunately, I don't know which exact change I made to cause it to stop working. Here are the problems:
$("#element").affix(): `TypeError: Object [object Object] has no method 'affix'`
$("#element").popover({ .. }): Trigger click does not work (no action). Without the trigger, it works.
How I am calling it:
$("#element").popover({html: true, title: "Hi", content: "Hi", trigger: "click", placement: "top"});
Here is how I am loading my CSS and JS files.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<link href="css/styles-media.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.keypad.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You are not using the css and js files in a proper arrangement. please make sure that you include jquery core library at the top most position of all dependent scripts. and try to avoid include a core library twice.
Use this order.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<link href="css/styles-media.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.keypad.min.js"></script>

Categories