I'm trying to add the clock picker Jquery plugin to my website. I build it first in the extern file, then I migrate the code into my website html, but doesn't work.
I already try to fix the problem with the console, and I see an error 404 with the link, ../css/style.css, but the problem I didn't add any link about a file "style.css".
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap - CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/reservation.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!--Font-->
<!-- Jquery JS & CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Time-Picker CSS -->
<link rel="stylesheet" href="src/css/datetimepicker/clockpicker.css">
<!-- Time-Picker JS -->
<script type="text/javascript" src="src/js/clockpicker.js"></script>
<script type="text/javascript" src="src/js/mesfonctions.js"></script>
<title> Réservation - Café Restaurant du Chemin de Fer</title>
I expect that the trouble doesn't come from my html file actually. Can have a problem with the clocktimer.js (the plugin I mean?)
Related
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
I'm trying to load a layout((https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045#add-comment) but my efforts are turning unsuccessful.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css"></script>
<!-- Bootstrap CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="icon" href="signup.js">
</body>
The code above shows the links for the template, the Stylesheet and JavaScript. I really don't know what I am missing that would cause it not to reflect.
For CSS, you should use <link rel="stylesheet">(...)</link> instead of <script> tag
As far as i can notice,
there is no starting <body> tag or starting <div> tag.
Maybe you copy-pasted it wrong, please look into it and try again.
Head section sould be something like
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" type="text/css" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ui-view>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>
As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.
You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.
For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.
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>
I'm using javascript to control a modal for a log in and registration page.
However I cant seem to get the javascript to fire.
Here is the header for my page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site </title>
<link rel="icon" href="myfavicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Landing Page CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery - UI CSS - Both v 1.11 and 2.1 -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- Starts all the Javascript-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<!-- Javascript for the admin page -->
<script src="js/sb-admin-2.js"></script>
<!-- jQuery - Both v 1.11 and 2.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Validator-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<!-- The Validator for the forms-->
<script src="js/validator.js"></script>
<!-- My Custom Javascript functions-->
<script src="js/mymain.js"></script>
My Login Function are held within the /js/mymain.js script. I also have the following call to the login function in a document.ready() within the <head> of this page.
$('#loginBtn').click(function(e){
alert('cliked');
e.preventDefault();
login();
});
The problem is that the alert given above is not firing, which suggests that there is something broken in the javascript, but I cant work out what it is.
All the Modals are as per the Bootstrap site, and are ID'd appropriately. Its just a problem with the Javascript/Jquery.
My project is using a combination of Bootstrap and Codeigniter. I cannot access functions within external javascript files. Using firebug in Firefox I can see that these external scripts get loaded. External css files work fine. Please note that jquery works but I suspect that it is because of the jquery.js file that is included in the Bootstrap/Codeigniter framework in directory assets/js/jquery.js
Here is my header code within every Codeigniter View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/img/icons/favicon.png">
<title>Sample Website</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/carousel.css" rel="stylesheet">
<!-- styles custom to our site -->
<link href="/css/style.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
Try to add base_url before url:
<script type="text/javascript" src="<?= base_url();?>js/jquery.cookie.js"></script>