I am using Slick JS on my index page, and Colcade on another page. Although I haven't gone live with my site yet, I think my loading times are off. Could someone kindly go through these and confirm if the order of appearance is correct? Thank you.
For index.html (where I use Slick carousel)
<head>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="slick/slick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Farro:wght#300&family=Lora:ital#1&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
...
<!-- jQuery first then Slick -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="slick/custom.js"></script>
<script>
$(function(){
$("#nav-placeholder").load("assets/nav.html");
});
</script>
<script>
$(function(){
$("#footer-placeholder").load("assets/footer.html");
});
</script>
</body>
grid.html
<head>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/grid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Farro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<script>
$(function(){
$("#nav-placeholder").load("assets/nav.html");
});
</script>
<script>
$(function(){
$("#footer-placeholder").load("assets/footer.html");
});
</script>
</body>
and finally on contact.html
<head>
<link rel="stylesheet" href="style/main.css">
<link href="https://fonts.googleapis.com/css2?family=Farro:wght#300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
...
<!-- Scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script>
$(function(){
$("#nav-placeholder").load("assets/nav.html");
});
</script>
<script>
$(function(){
$("#footer-placeholder").load("assets/footer.html");
});
</script>
You have linked jquery 2 times in your HTML, I think that's what slowing the site down,
I suggest you remove the one inside the head
eg:
<head>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="slick/slick.css">
<link href="https://fonts.googleapis.com/css2?family=Farro:wght#300&family=Lora:ital#1&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Related
I am trying to use a jquery UI date picker on a datefield in django.
but for some reason, it looks very bad. and the input field itself is wired.
I would like to know what I am doing wrong? how can I fix the view?
there is also (in green) a gap in the field how can I remove the gap?.
picture:
JS
$("#id_start_time").datepicker({});
my head of the page:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Data Tables-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/rowreorder/1.2.6/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous"/>
I can't see jQuery ui css there.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component.
What is wrong here or is there any way to use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="96">
<meta property="og:image:height" content="96">
<meta content="width=2000" name="viewport">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<title>HomeClueWebApp</title>
<base href="/">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/icofont.css">
<link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/hover.css">
<link rel="stylesheet" type="text/css" href="assets/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/morphext.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css">
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon" type="image/png">
<link href="assets/images/apple-icon.png" rel="icon" type="image/png">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/popper.min.js"></script>
<!-- all plugins and JavaScript -->
<script type="text/javascript" src="assets/js/css3-animate-it.js"></script>
<script type="text/javascript" src="assets/js/stellarnav.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax.js"></script>
<script type="text/javascript" src="assets/js/slick.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script>
<script type="text/javascript" src="assets/js/morphext.min.js"></script>
<script type="text/javascript" src="assets/js/dyscrollup.js"></script>
<script type="text/javascript" src="assets/js/jquery.ripples.js"></script>
<script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- Main Custom JS -->
<script type="text/javascript" src="assets/js/main.js"></script>
<app-root></app-root>
</body>
</html>
file structure is here
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ
Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets.
You can do that in angular.json file as follows:
"assets": [
"src/favicon.ico",
"src/assets",
"src/assets/*" // Add this line at end.
],
With this line at end we are telling angular to build other folders inside assets folder to consider as assets.
As already suggested by #Chirag Chaudhari
This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file.
Hope it helps.
I've checked other answers on here and I don't think there's one that covers my problem. I am trying to include two JQuery plugins (Datepicker and Select2) and I just want to download them, include them in the head of my site and initiate them in...
$(document).ready(function() {
// HERE!
$('[data-toggle="datepicker"]').datepicker();
$(".js-example-basic-single").select2();
});
...as both suggest I should be able to do... but both give me a ReferenceError: require is not defined in the console and if I go into the .js files and comment out the offending line (as suggested in other answers) the plugin doesn't work at all and I just get an undefined function in the console.
I'm sure this is something simple that's simply outside of my understanding, if anyone can help, that would be great.
This is the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="/fonts/roboto.css" media="screen" />
<!-- end fonts -->
<link rel="stylesheet" type="text/css" href="/css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/message_boxes.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/loading_screen.css" media="screen" />
<link href="/css/datepicker.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/retina.min.js"></script>
<script type="text/javascript" src="/js/jscolor.min.js"></script>
<script type="text/javascript" src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/message_boxes.js"></script>
<script type="text/javascript" src="/js/loading_screen.js"></script>
<script type="text/javascript" src="/js/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />
<link rel="stylesheet" type="text/css" href="/css/icheck_blue.css" />
<script type="text/javascript" src="/js/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
I have the following files
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
That was working fine but when I added other JS files like DateTimepicker then my autocomplete function stops working.
<script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
<link href="css/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
Error:
Uncaught TypeError: $(...).autocomplete is not a function
The issue is because you're including two versions of jQuery. The first one has jQueryUI methods added to it. The second one then overwrites the first. Remove the last jQuery script include.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- REMOVE THIS >> <script src="js/jquery.js" type="text/javascript"></script> -->
<script src="js/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
seems like you have added jQuery library twice.
keep it only once.
Either this one <script src="//code.jquery.com/jquery-1.10.2.js"></script> or <script src="js/jquery.js" type="text/javascript"></script>
I have a code to call kendoJS library like this:
jQuery(function(){
jQuery("#TabStrip").kendoTabStrip({
"animation":false
});
});
When I run the code, in console I found an error like this:
When I try to add kendo library:
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>
I found an error like this:
jQuery is not defined. Why I get an error like that?. The css and javascript in different library.
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
***<!--jquery.min.js should be before kendo.all.min.js -->***
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>