LeafletJS Version Update - html

I have the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>       
</body>
</html>
This HTML works fine, however when I change leaflet to a new version,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<!--<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />-->
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src='https://unpkg.com/leaflet#1.0.1/dist/leaflet.js'></script>
<link href='https://unpkg.com/leaflet#1.0.1/dist/leaflet.css' rel='stylesheet' />
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>       
</body>
</html>
I got the error;
TypeError: t is undefined
Could any leafletjs expert help me to figure out what is going on, please?

Related

bootstrap navbar-toggler not working in smaller resolution

I have a top nav bar on homepage(_Layout.cshtml) that has a toggler button, after removing some style sheets my button became visible but it is not working!!..
Here are my scripts and links
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
#RenderSection("preheader", required: false)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
#*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">*#
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" /> F
#RenderSection("header", required: false)
</head>
<body>
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script><!--removing it stops testnav toggle-->
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
</body>
However when I add same navbar in content-page that content-page button works!!
I have tried adding all scripts on top of original jquery and bootstrap scripts to that page it still works!!
TestNavBar.cshtml (content-page)
#section header{
<style type="text/css">
</style>
<!--Copied from home page (Layout)-->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" />
<!--Original Scripts-->
<link href="~/safety/css/leaflet.loading/Control.Loading.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="~/safety/css/jquery-json-viewer/jquery.json-viewer.css" rel="stylesheet" />
<link href="~/safety/css/ChartJS/Chart.min.css" rel="stylesheet" />}
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$.backstretch("/images/netrisk-background.jpg");
});
</script>
<!--Copied from home page (Layout)-->
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
#*
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
*#
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js"></script>
<script src="~/js/app/site.js" asp-append-version="true"></script>
<!--Original scripts-->
<script src="~/safety/js/App/SafetyGlobalSetting.js"></script>
<script src="~/safety/lib/jquery-datatables-js.min.js"></script>
<script src="~/safety/js/plugin/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="~/safety/js/plugin/CounterUp/jquery.counterup.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="~/safety/js/App/PointSelection.js"></script>
<script src="~/safety/js/plugin/leaflet.tilelayer.HERE/leaflet-tilelayer-here.min.js"></script>
<script src="~/safety/js/plugin/leaflet.loading/Control.Loading.min.js"></script>
<script src="~/safety/js/plugin/leaflet.geometry/leaflet.geometryutil.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="~/safety/js/ChartJS/Chart.bundle.min.js" type="text/javascript"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/freezable/leaflet.markercluster.freezable.js"></script>
<script src="~/mdbootstrap-pro/js/mdb.min.js" type="text/javascript" ></script>
}

inline date picker in bootstrap3

Greeting, I'm unable to align date picker inline the code which I used is below. date picker element goes into a new line rather on the same line.
your help is very much appreciated. thank you.
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> On this date <input id="datepicker" width="270" /> i accept the offer.</p>
</body>
</html>

$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> On this date <div style="display:inline-block"><input id="datepicker" width="270" /> </div> i accept the offer.</div>
</body>
</html>

Cannot scroll page in the browser

I cannot scroll the page even if the content inside require to scroll it. The page is cut. http://medica.mastertools.net/. You can login (fake form just submit).
No overflow:hidden in the css.
Is maybe due to the viewport that is not set?
Below the html code of the main page, I have used Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
/>
<title><?=SITETITLE?></title>
<meta name="keywords" content="Medica" />
<meta name="description" content="Medica Webshop" />
<link rel="stylesheet" type="text/css" media="print" href="<?
=HTTPPATH?>css/print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?
>css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/styleNew.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/library.js"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/validation.js"></script>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<body>
<?php $this->view('new/header'); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6 align-self-center">
<?=$main_content?>
</div>
<div class="col-sm-3">
<?=$right?>
</div>
</div>
</div>
<div id ="bottom" class="fixed-bottom"> <?=$footer?> </div>
</body>
</html>

Your body tag does have overflow:hidden set, on line 21 of screen.css. Change that to overflow:auto and you should be all set.

Linking an external css file doesn't work

I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:

JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>

Do i need to use the <noscript> in this code?

The code below is used in the index.html and seems to work ok.
When i try to use the same code () in an html file in a subfolder it does not display any of the css.
Is the tag neccessary on the main index.html file?
<html lang="en">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/jquery.slidertron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
**<noscript>**
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
**</noscript>**
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>

To have it display the css when you're in a subfolder, add ../ infront of the relative path to the css document. For example:
<link rel="stylesheet" href="../css/skel.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />