I'm a happy amateur trying to build my own website, and thought I'd use Quill as a nice texteditor for articles and stuff. When going through the starting example, it simply doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.1.9/quill.core.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.core.css" rel="stylesheet">
</head>
<body>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
It gives me the following error message in the console:
quill Cannot import themes/snow. Are you sure it was registered?
What am I missing?
Where and how am I supposed to register it?
Quick edit:
Should also say I tried with bubble instead (and of course changed the CSS in the head).
When I tried with modules I got the same error message for each module as well.
You are including Quill twice and the second time is a reduced version without themes. Just include the main library:
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
Core should go before everything else to work.
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.2.3/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.3/quill.core.js"></script>
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.2.3/quill.js"></script>
<script src="//cdn.quilljs.com/1.2.3/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.2.3/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.3/quill.bubble.css" rel="stylesheet">
Here's a working version on codepen
All it uses is:
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
and for my container I used:
<div id="myDiv"></div>
The initialization script is the simplest:
var quill = new Quill('#myDiv', {theme: 'snow'});
No errors.
So I guess your last loading script is quill core without build in theme.
Next code taken from quill website:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>
And it clearly states in comment "Core build with no theme"
In order for you to load quill:
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include the Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Include stylesheet -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
</head>
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme
scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of
undefined
at e.reveal (scrollreveal.min.js:1)
at jquery.js:53
at jquery.js:75
I am not sure what to do to get rid of it, any help would be great. Thanks in advance.
Below is what I have in the head section
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
And this is what I have at the end of the body.
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The error is not "self explanatory"...
But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.
Replacing it by }); fixed the issue for that line.
Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.
"Closure" itself is already well explained in this SO answer.
I have a folder structure like below
angular-src
src
index.html
bootstrap
css
app.js
In my app.js file I have set this static folder like:
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
I want to set css and bootstrap files inside the index.html.
Here's index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Alpha Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet" media="screen">
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- styles -->
<link href="./css/styles.css" rel="stylesheet">
<link href="./css/stats.css" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
<footer>
<div class="container">
<div class="copy text-center">
Copyright 2014 <a href='#'>Website</a>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./vendors/morris/morris.css">
<script src="./vendors/jquery.knob.js"></script>
<script src="./vendors/raphael-min.js"></script>
<script src="./vendors/morris/morris.min.js"></script>
<script src="./vendors/flot/jquery.flot.js"></script>
<script src="./vendors/flot/jquery.flot.categories.js"></script>
<script src="./vendors/flot/jquery.flot.pie.js"></script>
<script src="./vendors/flot/jquery.flot.time.js"></script>
<script src="./vendors/flot/jquery.flot.stack.js"></script>
<script src="./vendors/flot/jquery.flot.resize.js"></script>
<script src="./js/custom.js"></script>
<script src="./js/stats.js"></script>
</body>
</html>
For directory structure :
use single dot(.) for current directory
use double dots(..) jump out the current directory
Now coming to your question to set path of your css and bootstrap files use in index.html :
<!-- Bootstrap -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- styles -->
<link href="../../css/styles.css" rel="stylesheet">
<link href="../../css/stats.css" rel="stylesheet">
My cordova app is not worthy any more.
It shows up angular expressions on application run.
shows white screen at times at launch
I think it might be issue of JS dependencies.
I posting my JS dependencies order
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/onsen/js/onsenui.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD5sCjiaGLF8i8zul_W4GBsnMBY9mZTdB4&libraries=places"></script>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js" type="text/javascript"></script>
<script type="text/javascript" src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- <link rel="stylesheet" type="text/css" href="lib/pace.theme.css"> -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="animate.css" />
screenshot of issue
Is this because of wrong order of the dependencies or internet problems or anything I'm missing or I could do to work it perfectly
This might be a little late, but this can be solved by doing 2 things. 1.) Increase the time the splash screen is shown via the config.xml file to about 5000 ms. 2.) In the ons.ready() function, add: navigator.splashscreen.hide();
This shows the splashscreen, hiding the white screen as your libraries load, and then hides it when the app is ready. This solved my problem.
What is wrong with my code below?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoSystem - SBM ITB Jakarta</title>
<!-- Core CSS - Include with every page -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Page-Level Plugin CSS - Dashboard -->
<link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
<link href="../css/plugins/timeline/timeline.css" rel="stylesheet">
<!-- SB Admin CSS - Include with every page -->
<link href="../css/sb-admin.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- Core Scripts - Include with every page -->
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- Page-Level Plugin Scripts - Dashboard -->
<script src="../js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="../js/plugins/morris/morris.js"></script>
<!-- SB Admin Scripts - Include with every page -->
<script src="../js/sb-admin.js"></script>
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
My bootstrap modal dialog is not working when I use SbAdmin template. But, when I use general template from bootstrap, my modal dialog is working properly.
Hahaha.. how stupid I am...
Just remove this code :
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>