Why are the files not found I get ERR_FILE_NOT_FOUND - javascript

Can anyone tell me why do the link tag not working? when i load it to the browser the console gives me an error saying
GET file:///C:/Users/hp/Desktop/template%201/index.html/css/leon.css net::ERR_FILE_NOT_FOUND??
<head>
<meta charset="UTF-8"/>
<title>leon template</title>
<!--main template css file-->
<link rel="styleSheet" href="css/leon.css">
<!-- render all elements normally -->
<link rel="stylesheet" href="css/normalize.css">
<!--font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,200&display=swap" rel="stylesheet">
<!--css min file -->
<link rel="stylesheet" href="css/all.min.css" />
</head>

You provide wrong path, I don't know your structure but I guess your css folder is one above so it should be "../css/leon.css"

Related

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"
]

How to load resources from node_modules

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>

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

"TypeError: 'undefined' is not a function" when trying to use jQuery UI

I'm trying to use the slider() function of jQuery UI, and keep getting the following error in the console:
TypeError: undefined is not a function (evaluating jQuery('#slider').slider())
I've definitely linked to the jQuery UI javascript and CSS files correctly - when I view the page source, they're all there. Why am I still getting this error?
If it's of any use, I'm using Rails and also some Bootstrap stuff. Here's the javascript code:
<script type="text/javascript">
$(document).ready(function(){
$('#slider').slider();
});
</script>
Thanks
Here's the <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companies.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery-ui.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/companies.js?body=1"></script>
<script src="/assets/jquery-1.11.0.min.js?body=1"></script>
<script src="/assets/jquery-ui.min.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<title>New Company - OE Fort by Oxford Entrepreneurs</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="FcOEJfo8vcCzR+Dq+5zOVSvm7Npfo+R+FoXrEPpV3js=" name="csrf-token" />
<!-- Bootstrap core CSS -->
<link href="../../../app/assets/stylesheets/bootstrap.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="../../../app/assets/stylesheets/jquery-ui.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#slider').slider();
});
</script>
</head>
I would surmise the error would be caused by loading this function before JQuery is loaded yet (hence why you're seeing the undefined error -- JQuery is undefined)
Can you detail the way you're loading the code? Can you post your <head> tag?
The possible causes could be:
JQuery is not loaded
JQueryUI is not loaded
$("#slider") is not a valid element
The error is related to a missing line in your application.js.coffee file. As mentioned here: https://github.com/joliss/jquery-ui-rails you can require special modules here.
So just add the following line to your application.js.coffee file and it should work:
#= require jquery.ui.slider
Another possible cause, I've just discovered, is when you have two different versions of jquery linked.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
... (some other bundles), and then:
bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
E.g. in my jqueryui bundle, I had jquery-1.10.4.min.js (or rather, the latest version), but in my ajax bundle I had jquery-1.10.2.min.js. Double clicking on the error in Chrome element inspector, revealed links to code in 1.10.2. When I changed that to 1.10.4 in the ajax bundle, the jqueryui element suddenly worked (in my case it was Tabs).
What I should have done, of course, is just leave everything at jquery-{version}.js.
So in summary, a(n overlooked) version conflict is another possible cause for this error.
I know that this will not answer this exact question but it may help others getting the same error message for the slider() function.
If you have preset the value in the slider when initialising it, you could have something like the following:
$('#slider').val(5).slider();
if you remove the value (5), you also get the “TypeError: 'undefined' is not a function”
ie.
$('#slider').val().slider();
instead you would need to insert the starting value into the input tag.
<input type="text" id="slider" value="5">
You may have this kind of setup if the slider is used in many places in your site and you want to have your js file contain the default rather than having each slider contain the same information. In my case I needed to decentralise the value and it caused the error seen here.
In case anyone else runs into this, I had trouble getting selectable to work with asp.net
Turns out I wasn't properly including everything, but this gentleman made it dummy proof:
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
try this if you are facing "uncaught typeerror is not a function javascript"
It works
jQuery(function($) {
// your code here
});

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