How to add multiple charts to leaflet maps?

How to add multiple charts to leaflet maps? - javascript

I managed to create some bar charts on my leaflet maps and made a reference to it so that it the chart can be shown or hidden based on the checkbox in the side menu. However, only one bar chart can be shown and hidden at a time whereas I need to create several more barcharts and make them all appear at the same time when the checkbox is checked. There is a way to do this but that would mean I have to manually hard code the barcharts which is not very efficient. If you do know of a shortcut that doesnt requires hard code and still create several more barcharts and show/hidden at the same time do let me know.
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(barChartMarker);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(barChartMarker);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(barChartMarker);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
//$("").show(500);
}
else if($(this).prop("checked") == false){
//$("").hide(500);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>
// leaflet-barchart.js
var options = {
data: {'dataPoint1': 22,'dataPoint2': 36,'dataPoint3': 42,'dataPoint4': 20},
chartOptions: {
'dataPoint1': {fillColor:'#3f0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint2': {fillColor:'#6a0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint3': {fillColor:'#0f6ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint4': {fillColor:'#0f9ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
}
},
};
var barChartMarker = new L.BarChartMarker(L.latLng(20.894, 78.962), options).addTo(mymap);

Related

How to add z-index to geojson layers in leaflet maps? [duplicate]

This question already has answers here:
How to set the zIndex layer order for geoJson layers?
(3 answers)
Leaflet layers Z-index
(1 answer)
Closed 3 years ago.
I need to set z-index to my geosjson layers created in leaflet that is bar chart and a choropleth. I tried doing mymap.addLayer(ChinaBarChart).setZIndex(2) but it doesnt work at all. Is there any other alternative ways to set the z-index of the layers? The setZIndex method was based on a leaflet method, if you do know of a way to making it work do let me know?
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<script src="leaflet-motion.js"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
// Hides the choropleth at the beginning
if($(1 == 1)){
mymap.removeLayer(ChinaArea);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(IndiaBarChart);
mymap.addLayer(ChinaBarChart);
mymap.addLayer(MalaysiaBarChart);
mymap.addLayer(UaeBarChart);
mymap.addLayer(TaiwanBarChart);
mymap.addLayer(IndonesiaBarChart);
mymap.addLayer(TurkeyBarChart);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(ChinaArea);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(ChinaArea);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>

JavaScript Print function issue

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print
When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?
<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;}
.shadow(#shadow){
-webkit-box-shadow:#shadow;
-mox-box-shadow:#shadow;
box-shadow:#shadow;
}
.label-danger{
margin-left:10px;
margin-top:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//console.log(ev.target);
}
function drop(ev) {
ev.stopPropagation()
var EklenecekDiv=ev.target;
var data = ev.dataTransfer.getData("text");
//console.log(ev.target);
console.log($(ev.target).parent());
var divim=ev.target;
var c = divim.children;
console.log(c.lenght);
/*if(c[2]==null)
{
EklenecekDiv=$($(ev.target).parent());
EklenecekDiv.append()
var label1=document.getElementById(data);
var MyLabelAdd1=document.createElement("div");
MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
$(MyLabelAdd1).attr("name","KolonAdi");
EklenecekDiv.append(MyLabelAdd1);
divim.remove();
label1.remove();
return;
console.log(EklenecekDiv);
}
if(c[3]!=null)
{
c[3].remove();
}*/
var label=document.getElementById(data);
var MyLabelAdd=document.createElement("div");
MyLabelAdd.appendChild(document.createTextNode($(label).html()));
$(MyLabelAdd).attr("name","KolonAdi");
if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }
EklenecekDiv.appendChild(MyLabelAdd);
label.remove();
}
function tiklandi()
{
alert("Okey");
}
function Click(e){
if(SecilenItem==null)
{
alert("Lütfen Alan Seçiniz");
return;
}
var item=SecilenItem;
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
KolonDiv.style.marginLeft=Bosluk+"px";
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
};
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
var originalContents = document.body.innerHTML;
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function TabloAlanTiklandi (e){
SecilenItem=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
//e.remove();
}
function FontLi(e)
{
YaziFont=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
}
function StilDegistir(e)
{
}
function EkAlanClick(e){
if($("#EkAlan").val()==null)
{
alert("Lütfen Alan Giriniz");
return;
}
var h1=document.createElement("h1");
var item=$("#EkAlan").val();
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
$("#EkAlan").val("");
}
function BoslukEkle(e)
{
if($("#Aralik").val().lenght==0)
{
alert("Aralik Degeri Giriniz");
return;
}
Bosluk=$("#Aralik").val();
alert(Bosluk);
$("#Aralik").val("");
}
function BoyutEkle(e)
{
if($("#YaziBoyutu").val().lenght==0)
{
alert("Boyut Degeri Giriniz");
return;
}
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Calendar</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Left side column. contains the logo and sidebar -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
<div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
<span class="caret"></span></button>
<ul id="Secenekler" class="dropdown-menu">
<li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
<li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
</ul>
</div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>
<div class="col-xs-1"></div>
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>
<div class="col-xs-4" ></div>
<label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
<label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
<span class="caret"></span></button>
<ul id="Fontlar" class="dropdown-menu">
<li><a onClick="FontLi(this)" href="#">Georgia</a></li>
<li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
<li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
<li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
<li><a onClick="FontLi(this)" href="#">Arial</a></li>
<li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
<li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
<li><a onClick="FontLi(this)" href="#">Impact</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
<li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
<li><a onClick="FontLi(this)" href="#">Verdana</a></li>
<li><a onClick="FontLi(this)" href="#">Courier New</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
</ul>
</div>
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>
</div>
<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>
<!-- /.content -->
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->
</body>
</html>

It's not an optimal solution but can you try replacing CiktiGetir function with this:
function CiktiGetir(e){
var htmlElement = document.querySelector("html");
var printContents = document.getElementById("Kolonlar");
// Make body invisible, append new element to HTML
document.body.style.display = "none";
htmlElement.appendChild(printContents);
window.print();
// Make body visible again, remove the added element
document.body.style.display = "initial";
htmlElement.removeChild(printContents);
}
Replacing HTML content breaks the JS events and dynamic contents.

You are replacing the body HTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
So you will need to reatach the events.
Try the "on" jquery method. Something like
$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

My code was just an example. You will have to adapt it to your code.
You need to reatach the events after replace body content.
If, you dont want to to this, you can refresh the entire page.
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}

How to fix my jQuery animation?

I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}

Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/

why my code does work on chrome and not once compile using cordova

i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}

Check the second Q/A pair from the Kendo UI Mobile FAQ.

Wordpress sliding drawer plugin doesn't stay closed after converting page to HTML

I'm using this plugin: http://wordpress.org/plugins/wordpress-sliding-drawer-content-area/ on my Wordpress site that creates a drawer on the side for my widgets. It works perfectly fine on my local server.
Unfortunately, I have to convert each of the Wordpress pages into HTML pages for use on my client's intranet servers. That's when the drawer refuses to stay closed on page load unlike before.
Here's the js:
jQuery(document).ready(function() {
if(jQuery('#sod-drawer-plugin.left').length >0){
var $handle = jQuery('#sod-drawer-plugin.left #sod-drawer-handle');
var $plugin = jQuery('#sod-drawer-plugin.left');
var $adjustment = (parseInt($handle.outerWidth())/2)-parseInt($handle.outerHeight())/2;
if (jQuery.browser.msie){
$plugin.css({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.css({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
});
$handle.click(function(){
$plugin.animate({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.animate({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
});
});
}else{
$plugin.css({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.css({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
});
$handle.click(function(){
$plugin.animate({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.animate({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
});
});
}
}
});
And the HTML:
<!DOCTYPE html>
<!-- saved from url=(0088)./work-life-balance/enhance-your-professional-standing/ -->
<html lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Enhance Your Professional Standing | Staff Benefits and Work-life Initiatives</title>
<link rel="stylesheet" id="sod_drawer_css-css" href="./style(1).css" type="text/css" media="all">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./sod_drawer.js"></script>
<link rel="stylesheet" type="text/css" href="./saved_resource.css">
<link rel="stylesheet" type="text/css" media="all" href="./style.css">
</head>
<body class="page page-id-167 page-child parent-pageid-4 page-template-default">
<div class="sod-drawer left" id="sod-drawer-plugin" style="left: -280px;"> <!--- This value changes to left:0px when loaded on the browser --->
<div id="sod-drawer-handle" class="pull black rotate" style="left: 240px;">
<div class="tag"><p>Contents</p></div>
</div>
<div class="content">
<div class="sod-drawer-inner">
<div class="full" id="sod-drawer-1">
<div id="execphp-2" class="sod-drawer-widget widget_execphp">
<div class="execphpwidget">
<div id="sidebar">
<h1>Staff Benefits and Work-life Initiatives</h1>
<div id="access" role="navigation" class="desc">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Introduction
</li>
<li id="menu-item-626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-626">Epilogue</li>
</ul>
</div>
</div><!-- #access -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm not proficient with Javascript so a little explanation would be greatly appreciated :)

Is the jQuery script library loading properly? I am doubtful of the src URL of your script at the document head:
<script type="text/javascript" src="./jquery.js"></script>
These URLs might be the problem. It may work correctly in your local server, but not on a live URL. You may need to change it to "/jquery.js" because the "." refers to the current directory. The "/" right at the start refers to the root URL.
<script type="text/javascript" src="/jquery.js"></script>
Please try it and let me know the result.

Develop Reference

JavaScript is the programming language of the Web.

How to add multiple charts to leaflet maps? - javascript

Related

How to add z-index to geojson layers in leaflet maps? [duplicate]

JavaScript Print function issue

How to fix my jQuery animation?

why my code does work on chrome and not once compile using cordova

Wordpress sliding drawer plugin doesn't stay closed after converting page to HTML

Categories

Resources