I've been using Bootstrap for abt a year now, and it works nicely. But when I try to use the files locally, it's always the same result: my Navbar dropdown menus stop dropping down.
Can anyone see what I'm doing wrong?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<!-- 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>
Errors are:
wsschedulepolygraphs.php:14 GET http://localhost/dfwit/js/jquery.min.js
wsschedulepolygraphs.php:17 GET http://localhost/dfwit/js/jquery-ui-1.11.4/jquery-ui.min.js
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
dropdown-enhancement.js:267 Uncaught ReferenceError: jQuery is not defined(anonymous function) # dropdown-enhancement.js:267
wsschedulepolygraphs.php:434 Uncaught ReferenceError: $ is not defined(anonymous function) # wsschedulepolygraphs.php:434
wsschedulepolygraphs.php:530 Uncaught ReferenceError: $ is not defined
Incorrect permissions on a directory can cause 403 and other access errors when reading files. To check owner and group of the current directory from the command line:
~$ ls -ld
drwxr-xr-x 2 owner group 4096 Aug 12 19:12 Desktop
Sources:
How to Find Owner and Group of a Directory
https://superuser.com/a/91966
Just looking at the code, your path for bootstrap differs from all the other JavaScript includes.
<script src="js/jquery.min.js"></script>
^^^
<script src="/js/bootstrap.min.js"></script>
^^^
The path of the js files is not correct. Also for the below code the / before the js could cause an issue
<script src="/js/bootstrap.min.js"></script>
Related
I am trying to add a local file to the HEAD section of index.html in my VueJs project.
index.html
<!doctype html>
<meta charset="utf-8">
<html lang="en">
<head>
<!-- https://npms.io/search?q=vue%20split -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="../src/assets/js/myfile.js"></script>
<title>demo</title>
</head>
My file structure is as follows:
/path/to/project
/public
index.html
/src/assets/js/myfile.js
When I add the javascript file, it seems to be interpreted as an HTML file, so in the console, I see the following error:
Uncaught SyntaxError: Unexpected token <
When I look at the source in the Chrome browser, I see that the js in interpreted as an HTML file.
I m using this library https://github.com/mattboldt/typed.js/ .I have added all the script files at the end of body code but still i m getting an error in console. My code is:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>LUNA-NG</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,900' rel='stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link rel="stylesheet" href="node_modules/typed.js/assets/demos.css">
</head>
<body>
<span class="typed"></span>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="node_modules/animejs/anime.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
<script type="text/javascript" src="jquery.interactive_3d.js"></script>
<script src="node_modules/typed.js/lib/typed.js"></script>
<script>
$(function() {
$(".typed").typed({
strings: ["Typed.js is a jQuery plugin that types.", "Enter in any string,", "and watch it type at the speed you've set,", "backspace what it's typed,", "and begin a new sentence for however many strings you've set."],
typeSpeed: 0
});
});
</script>
Console:
Uncaught TypeError: $(...).typed is not a function
at HTMLDocument.<anonymous> ((index):259)
at j (jquery-1.11.2.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.2.min.js:2)
at Function.ready (jquery-1.11.2.min.js:2)
at HTMLDocument.J (jquery-1.11.2.min.js:2)
Any help in this regard is greatly appreciated. Thanks in advance.
I m using the cdn for typed.js library. This is working fine now. I was giving the right path even though i was getting error so i decid to move to cdn. Below is the script i have included.Thanks for your answers
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
This error might occur due to some of the reasons:
1. The jquery file you have included may have the wrong path.
2. Jquery file may be included on the page more than once.
Please check above points and if don't work then we can discuss it further.
I think the correct answer is just to re-install typed.js from this path.
I have the same problem and I did the same solution and it works for me now
https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js
I installed Laravel 5.4 in my server /public_html/laravel/ folder. When I access example.com/lavarel/public/, it works.
I copied all my compiled files in my local public/ folder into the example.com/lavarel/public/. Then I add the <script src="/js/app.js"></script> into my welcome.blade.php:
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/css/uikit.min.css" />
<!-- <link rel="stylesheet" href="assets/sass/uikit.css" /> -->
<!-- jQuery is required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit-icons.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" style="background:#666;height: 100vh;">
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
But when I go to example.com/lavarel/public/ again, I got 404 error:
GET example.com/js/app.js 404 (Not Found)
if I change to <script src="/laravel/public/js/app.js"></script>, I will get another 404 error:
GET example.com/laravel/public/laravel/public/js/app.js 404 (Not
Found)
How can I resolve this?
I have same issue. It simply solved by running:
npm run dev
Step1: run the below command in your project.
npm install
Step2: after successful npm modules installations run the below command.
npm run dev
For better understanding visit laravel doc: https://laravel.com/docs/5.8/frontend
I hosted my angular App on Amazon Web Services S3. It is working like a charm in Firefox and IE but not in Chrome. In console I keep receiving :
(index):1 Uncaught SyntaxError: Unexpected token <
(index):1 Uncaught SyntaxError: Unexpected token <
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Application</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link href="lib/angular-material/angular-material.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- js libs -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- angular material requirements -->
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-aria/angular-aria.min.js"></script>
<script src="lib/angular-messages/angular-messages.min.js"></script>
<!-- angular material -->
<script src="lib/angular-material/angular-material.min.js"></script>
<!-- your app's js -->
<script src="modules/Add/add.js"></script>
<script src="js/all.min.js"></script>
</head>
<body ng-app="Application">
<div class="ng-main" ui-view ng-cloak></div>
</body>
</html>
CORS are activated! Do you have any idea? Any help would be appreciated!
PS : Locally, with npm start, it is also working on chrome without any problem!
All I had to do is CTRL+MAJ+R on Chrome and it is working like a charm! Solved
I downloaded version 3.3.6, used their (Bootstrap's) sample file (see below) but get the error: uncaught syntaxError: Unexpected token {
. I added some hard returns to be sure which line was the potential problem:
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
Here's their file, with the links modified for my local file system:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css"></script>
</body>
This next to last line of your code is wrong:
This is how you reference a JS file.
<script src="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css"></script>
if you want to reference this CSS file correctly, use this code:
<link href="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />