I am using Google App Script to build a little web app. I'm just at the very start and the page charges well on both Chrome and Firefox but I can't get anything to happen on click of the log in button. I don't get any log to the logger, neither do I get the alert to pop up. Does anyone have any idea why?
This it the HTML of HTML_StockManagementLogInPage:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/yourscript.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<center><h4> Stock Management Log In </h4></center>
<div class="row">
<center>
<div class="input-field col s3"></div>
<div class="input-field col s3">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s3">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</center>
</div> <!-- END OF ROW -->
<div class="row">
<center><button class="btn waves-effect waves-light" type="submit" id="LogInButton">Log In
<i class="material-icons right">send</i>
</button></center>
</div> <!-- END OF ROW -->
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementByID("LogInButton").addEventListener("click",LogInClicked);
function LogInClicked(){
var UserName1 = {};
UserName1.FirstName = document.getElementByID("first_name").value;
UserName1.LastName = document.getElementByID("last_name").value;
alert(UserName1.FirstName + " " + UserName1.LastName);
google.script.run.UserLoggedIn(UserName1);
} // END FUNCTION LOGIN
</script>
</body>
</html>
And this is the code:
function doGet() {
return HtmlService.createTemplateFromFile("HTML_StockManagementLogInPage").evaluate();
//return HtmlService.createHtmlOutputFromFile("HTML_StockManagementInterfacePage");
}
function InsertHTMLScript(HTMLFilename) {
return HtmlService.createHtmlOutputFromFile(HTMLFilename).getContent();
}
function UserLoggedIn(UserName){
logger.log(UserName.FirstName + " clicked the button");
return HtmlService.createTemplateFromFile("HTML_StockManagementMenu").evaluate();
}
And just in case, this is the HTML for HTML_StockManagementMenu, just displaying a title for now:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<h1> Stock Management Menu </h1>
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I tried earlier to break down my code with the fuction InsertHTMLScript that I have written in the code, inserting <?!= InsertHTMLScript("HTML_CSS"); ?> into the HTML code and it didn't work either. I don't known if it's related but I just resolve not to use it to make things easier.
Thank you in advance
You misspelled getElementById
You have:
document.getElementByID('LogInButton');
It should be:
document.getElementById('LogInButton');
Here is the official docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I'm creating a website that grabs the location input (Origin & Destination) and relays it to the map which in turn would show the path using the MapBox API. So the problem I'm facing here is that how do I grab the input values and convert them to coordinates and show them on the map. Later on, the program will calculate the distance between the two endpoints and put it out there.
Here's my HTML code which contains the input fields:
<!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">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<title>Distance btw Cities App</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<!-- 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>
<div class="jumbotron">
<div class="container-fluid">
<h1>Distance between cities App.</h1>
<p>Our app will help you calculate travelling distances.</p>
<form class="form-horizontal">
<div id='geocoder-container' class="form-group">
<label for="from" class="col-xs-2 control-label">From:</label>
<div class="col-xs-10">
<input type="text" id="from" placeholder="Origin" class="form-control">
</div>
</div>
<div class="form-group">
<label for="to" class="col-xs-2 control-label">To:</label>
<div class="col-xs-10">
<input type="text" id="to" placeholder="Destination" class="form-control">
</div>
</div>
</form>
<div class="col-xs-offset-2 col-xs-10">
<button class="btn btn-info btn-lg" onclick="calcRoute();">Submit</button>
</div>
</div>
<div class="container-fluid">
<div id="googleMap">
</div>
<div id="output">
</div>
</div>
</div>
<!-- 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="js/bootstrap.min.js"></script>
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>
And here's my JS code:
mapboxgl.accessToken = 'Token';
// Get Current Location
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { enableHighAccuracy: true })
// Live Coordinates
function successLocation(position) {
setupMap([position.coords.longitude, position.coords.latitude])
}
// Default Coordinates if location fails
function errorLocation() {
setupMap([38.189980, 24.023176])
}
// Create Map
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'googleMap',
style: 'mapbox://styles/mapbox/streets-v11',
center: center,
zoom: 12,
})
// Navigation Controls
const nav = new mapboxgl.NavigationControl()
map.addControl(nav)
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
document.getElementById('from').appendChild(geocoder.onAdd(map))
}
Also, I dunno how to tell the program which input is my origin and which one is the destination. On following this code, . This is really messed up cuz I'm not able to make my input fields as my location finder. Neither this location will reflect on the map. Please someone help me solve this issue, It's really frustrating.
I am using laravel full calender package maddhatter/laravel-fullcalendar. This package is not picking up my theme jquery, bootstrap and moment.
I have included all these in master blade and extends in this blade.
I if change query and bootstrap then calendar works but all others things which are working on theme jquery and bootstrap stops working.
Including these in master blade:
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
It shows me console error that
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
Blade:
#extends('layouts.master')
#section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endsection
My Controller:
public function weddingHallDashboardView()
{
$events = [];
$data = Booking::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->booking_type,
true,
new \DateTime($value->date_from),
new \DateTime($value->date_to),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('dashboards.wedding-hall-dashboard')
->with(['calendar' => $calendar]);
}
master blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
</body>
</html>
Please do ctrl+u and check order of jquery.min.js is first or not. If not add this script at top.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
In your master file.
#stack('links') //after all link.
#stack('script') //after all script
In your blade file.
#push('script')
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
#endpush
#push('links')
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
#endpush
master.blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
#stack('links')
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
#stack('script')
</body>
</html>
Blade file
#extends('layouts.master')
#section('content')
#push('links')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
#endpush
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
#push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endpush
#endsection
I'm trying to render my website and I takes a lot of time in Google Chrome, but in Mozilla works perfectly. The console shows the error
GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND
I tried to import directy in the CSS and in the HTML this:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
But it still doesn't work, it throws the same error.
Here is the full HTML code of my website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title>Sign in</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
<!-- Project CSS -->
<link rel="stylesheet" href="./css/style.css"></link>
<!-- NativeDroid2 CSS -->
<link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post">
<div class="img-container">
<img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
</div>
<div>
<h2>Registre</h2>
<hr>
<label for="mail"><b>Correu electrònic</b></label>
<input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
<label for="psw"><b>Contrasenya</b></label>
<input type="password" placeholder="Introduir contrasenya..." name="psw" required>
<div class="center-text">
<p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
<p>Ja estàs registrat?</p>
</div>
</div>
Registrar-me
<div class="img-container" id="uab-logo">
<img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
</div>
</form>
</div>
<!-- JQuery -->
<script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
<!-- Project Js -->
<script type="text/javascript" src="js/app.js"></script>
<!-- JQuery Mobile -->
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
<!-- NativeDroid2 Js -->
<script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
</body>
</html>
The standard way to import a Google Font, is placing a link tag in the head section of your HTML:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
At least in the past, using #import was problematic when including larger files (font files are quite large) because browsers waited tor the file to download before continuing to render the page.
Your description gives the impression things have improved with Firefox, but not with Chrome.
So I suggest you include the link tag in your HTML file's head, remove the style tag and also remove the line starting with #import from your CSS.
As the OP reported an error message, I'm attaching a short example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family:'Roboto'
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
You just need to define the font-family: 'Roboto', sans-serif; in CSSor body tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title>Sign in</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
</style>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
<!-- Project CSS -->
<link rel="stylesheet" href="./css/style.css"></link>
<!-- NativeDroid2 CSS -->
<link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post">
<div class="img-container">
<img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
</div>
<div>
<h2>Registre</h2>
<hr>
<label for="mail"><b>Correu electrònic</b></label>
<input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
<label for="psw"><b>Contrasenya</b></label>
<input type="password" placeholder="Introduir contrasenya..." name="psw" required>
<div class="center-text">
<p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
<p>Ja estàs registrat?</p>
</div>
</div>
Registrar-me
<div class="img-container" id="uab-logo">
<img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
</div>
</form>
</div>
<!-- JQuery -->
<script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
<!-- Project Js -->
<script type="text/javascript" src="js/app.js"></script>
<!-- JQuery Mobile -->
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
<!-- NativeDroid2 Js -->
<script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
}
I have tried. It's working!
Add this:
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2" as="font" crossorigin="anonymous"/>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" crossorigin="anonymous"/>
to your <head> section.
And this:
#font-face {
font-family: "Roboto";
src: url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2") format("woff2"), url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2")
font-weight: 400;
font-display: swap;
font-style: Roboto; }
add to your css.
And add the css file with this method:
<link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/style.css"></noscript>
the URL is not correct
use this
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap');
Finally I've found the problem. I'm using a Jquery Mobile theme called NativeDroid2 and it was loading the Roboto font-family incorrectly in the CSS file. I simply commented the url and now works perfectly.
You can force to your site use always HTTPS using htaccess, that's best method to fix this issue
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
Header always set Content-Security-Policy "upgrade-insecure-requests;"
Check your internet connection may be it is unable to GET it from the provided url
I'm new to HTML/CSS, I recently purchased a bootstrap theme and I'm trying to create my own homepage using segments of HTML code they provided.
I copy/pasted a section of code and the file paths for the JS but it doesn't work at all. The assets(text, images, videos) all appear but none of it is styled and it's all static. Neither the CSS nor the JS is working on that segment.
This is a live demo of how it's supposed to look:
http://htmlstream.com/preview/unify-v1.7/index.html
This is how mine looks currently:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
This is the HTML segment for the slider:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
This is the HEAD section of my HTML file:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
This is the JS section at the bottom of my file:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
I get 7 errors in the chrome dev tools console. 4 are "Uncaught syntaxerror: unexpected token illegal"
2 are "failed to load resource: err_cache_missing and err_file_not_found (The cache one links to the vimeo video link and the file not found links to google fonts.)
The last is "uncaught referenceerror: style switcher is not defined" I believe this is to do with the way I copied some of the code, if you look at the live demo site it has a style switcher on the top right corner.
I took one of the demo html files and put it into my site director and it accesses the JS and CSS fine using the same file paths.
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider