Mimic Microsoft Access Query Wizard - jquery-ui
I would like to draw a line connecting list items Five and One in this example. The line should stay attached to Five and One as the user drags the widget around.
$('.ui-widget-content').draggable({
handle: '.ui-widget-header' }
)
$('.ui-widget-header').disableSelection()
.ui-widget-content {
width: 100px;
height: 100px;
}
.ui-widget-header {
cursor: move;
}
.list-unstyled {
list-style-type:none;
padding-left:10px;
}
.primaryKey, .secondaryKey {
font-weight:bold
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Handles</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
</head>
<body>
<div class="ui-widget-content">
<div class="ui-widget-header">handle One</div>
<ul class="list-unstyled">
<li class="primaryKey">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="ui-widget-content">
<div class="ui-widget-header">handle Two</div>
<ul class="list-unstyled">
<li>Four</li>
<li class="secondaryKey">Five</li>
<li>Six</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
If you're not too worried about the exact line path, you can do it like this:
HTML
<div class="image">
<div class="ui-widget-content" id="one">
<div class="ui-widget-header">handle One</div>
<ul class="list-unstyled">
<li class="primaryKey">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="ui-widget-content" id="two">
<div class="ui-widget-header">handle Two</div>
<ul class="list-unstyled">
<li>Four</li>
<li class="secondaryKey">Five</li>
<li>Six</li>
</ul>
</div>
<svg class="lines" width="100%" height="500">
<line id="linePath_1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
</svg>
</div>
JavaScript
$(function() {
var offset = {
X: 0,
Y: 0
};
function Point(x, y) {
return {
"X": x,
"Y": y
};
}
function drawLine(pointA, pointB) {
var od = {
a: {
X: pointA.X - offset.X,
Y: pointA.Y - offset.Y
},
b: {
X: pointB.X - offset.X,
Y: pointB.Y - offset.Y
}
};
console.log(od);
$("#linePath_1").attr({
x1: od.a.X,
y1: od.a.Y,
x2: od.b.X,
y2: od.b.Y
})
}
$('.ui-widget-content').draggable({
handle: '.ui-widget-header',
containment: ".image",
drag: function(e, ui) {
var pkA, pkB, pointA, pointB;
if ($(this).is("#one")) {
pkA = $("#one .primaryKey").position();
pkB = $("#two .secondaryKey").position();
pointA = Point($("#one").position().left + pkA.left, $("#one").position().top + pkA.top);
pointB = Point($("#two").position().left + pkB.left, $("#two").position().top + pkB.top);
console.log(pointA, pointB);
} else {
pkA = $("#two .secondaryKey").position();
pkB = $("#one .primaryKey").position();
pointA = Point($("#two").position().left + pkA.left, $("#two").position().top + pkA.top);
pointB = Point($("#one").position().left + pkB.left, $("#one").position().top + pkB.top);
console.log(pointA, pointB);
}
drawLine(pointA, pointB);
}
});
$('.ui-widget-header').disableSelection();
});
This basically puts the <svg> element in the background and uses the <line> to be drawn and updated during drag callback. You can base this off the clientX and clientY for the event if you want, but I figured you'd want it to appear to be connecting the keys.
Be mindful that .position() will provide the {top, left} of the element in the div. You could also use .offset().
Working Example: https://jsfiddle.net/Twisty/chdznLnx/
Related
Programmatically sort jquery-ui sortable?
I have a bunch of divs inside a display:flex parent div. The parent div is sortable with jquery-ui's sortable function. As well as allowing the user to sort, I would like to add some buttons that do an animated sort. For example, with this HTML: <div class="sortable"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </div> I would like a button that when pressed would animate moving div1 to be between div4 and div5, moving smoothly (in fact, a little erratically as if it were being moved by hand would be even better) and shifting all the divs it passes, so it looks as if it were being moved by hand. Is this possible using jquery-ui's sortable(), or am I better off building a custom solution?
Consider the following example.
$(function() {
function arrange(obj, pre) {
obj = $(obj);
var t = $("[id^='div']:eq(" + pre + ")");
obj.animate({
top: t.position().top + "px"
}, {
duration: 1000,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: t,
});
},
complete: function() {
obj.detach().css("top", "").insertAfter(t);
}
});
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrange($("#div1"), 3);
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button>
Built from https://css-tricks.com/jquery-ui-position-function/
Update
$(function() {
function swap(a, b, ms) {
console.log("Swap:", a.attr("id"), "with", b.attr("id"));
a.animate({
top: b.position().top + "px"
}, {
duration: ms,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: b,
});
},
complete: function() {
a.detach().css("top", "").insertAfter(b);
}
});
}
function arrangeAfter(a, b) {
var n = a.next();
for (var c = parseInt(n.attr("id").slice(-1)); n.index() <= b.index(); c++) {
swap(a, n, 400);
n = $("#div" + (c + 1));
}
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrangeAfter($("#div1"), $("#div4"));
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button> <button class="btn" id="reset">Reset</button>
Bootstrap on mobile device (not rendering causing hanging problems)
I wondering what's the problem with this page https://jsfiddle.net/3r2eo617/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card">
<div class="card-header bg-primary text-white">Record</div>
<div class="row">
<div class="card-body">
<div class="container">
<b>Filename</b><br>acc.dat<br><br>
<b>Time Step</b><br>0.02 s<br><br>
<b>No Points</b><br>2400
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<div id="highchart" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart2" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart3" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
</div>
</div>
<pre id="csv_acc" style="display:none">Time,Acceleration
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0000
0.280,0.0000
0.300,0.0000
0.320,0.0000
0.340,0.0000
0.360,0.0000
0.380,0.0000
0.400,0.0000
0.420,0.0000
0.440,0.0000
0.460,0.0000
0.480,0.0000
0.500,0.0000
0.520,0.0000
0.540,0.0000
0.560,0.0000
0.580,0.0000
0.600,0.0000
0.620,0.0000
0.640,0.0000
0.660,0.0000
0.680,0.0000
0.700,0.0000
0.720,0.0000
0.740,0.0000
0.760,0.0000
0.780,0.0000
0.800,0.0000
0.820,0.0000
0.840,0.0000
0.860,0.0000
0.880,0.0000
0.900,0.0000
0.920,0.0000
0.940,0.0000
0.960,0.0000
0.980,0.0000
1.000,0.0000
1.020,0.0000
1.040,0.0000
1.060,0.0000
1.080,0.0000
1.100,0.0000
1.120,0.0000
1.140,0.0000
1.160,0.0000
1.180,0.0000
1.200,0.0000
1.220,0.0000
1.240,0.0000
1.260,0.0000
1.280,0.0000
1.300,0.0000
1.320,0.0000
1.340,0.0000
1.360,0.0000
1.380,0.0000
1.400,0.0000
1.420,0.0000
1.440,0.0000
1.460,0.0000
1.480,0.0000
1.500,0.0000
1.520,0.0000
1.540,0.0000
1.560,0.0000
1.580,0.0000
1.600,0.0000
1.620,0.0000
1.640,0.0000
1.660,0.0000
1.680,0.0000
1.700,0.0000
1.720,0.0000
1.740,0.0000
1.760,0.0000
1.780,0.0000
1.800,0.0000
1.820,0.0000
1.840,0.0000
1.860,0.0000
1.880,0.0000
1.900,0.0000
1.920,0.0000
1.940,0.0000
1.960,0.0000
1.980,0.0000
2.000,0.0000
2.020,0.0000
2.040,0.0000
2.060,0.0000
2.080,0.0000
2.100,0.0000
2.120,0.0000
2.140,0.0000
2.160,0.0000
2.180,0.0000
2.200,0.0000
2.220,0.0000
2.240,0.0000
2.260,0.0000
2.280,0.0000
2.300,0.0000
2.320,-0.0000
2.340,-0.0000
2.360,-0.0000
2.380,-0.0000
2.400,-0.0000
2.420,-0.0000
2.440,-0.0000
2.460,0.0000
2.480,0.0000
2.500,0.0000
2.520,0.0000
2.540,0.0000
2.560,0.0000
2.580,0.0000
2.600,-0.0000
2.620,-0.0000
2.640,-0.0000
2.660,-0.0000
2.680,-0.0000
2.700,-0.0000
2.720,-0.0000
2.740,0.0000
2.760,0.0000
2.780,0.0000
2.800,0.0000
2.820,0.0000
2.840,0.0000
2.860,0.0000
2.880,0.0000
2.900,-0.0000
2.920,-0.0000
2.940,-0.0000
2.960,-0.0000
2.980,-0.0000
3.000,-0.0000
3.020,-0.0000
3.040,-0.0000
3.060,0.0000
3.080,0.0000
3.100,0.0000
3.120,0.0000
3.140,0.0000
3.160,0.0000
3.180,0.0000
3.200,0.0000
3.220,0.0000
3.240,0.0000
3.260,0.0000
3.280,0.0000
3.300,-0.0000
3.320,-0.0000
3.340,-0.0000
3.360,-0.0000
3.380,-0.0000
3.400,-0.0000
3.420,-0.0000
3.440,0.0000
3.460,0.0000
3.480,0.0000
3.500,0.0000
3.520,0.0000
3.540,0.0000
3.560,0.0000
3.580,0.0000
3.600,-0.0000
3.620,-0.0000
3.640,-0.0000
3.660,-0.0000
3.680,-0.0001
3.700,-0.0002
3.720,-0.0002
3.740,-0.0002
3.760,-0.0002
3.780,-0.0001
3.800,-0.0001
3.820,-0.0001
3.840,-0.0000
3.860,-0.0002
3.880,-0.0005
3.900,-0.0008
3.920,-0.0005
3.940,-0.0004
3.960,-0.0006
3.980,-0.0002
4.000,0.0005
4.020,0.0005
4.040,-0.0001
4.060,-0.0011
4.080,-0.0016
4.100,-0.0009
4.120,-0.0001
4.140,-0.0004
4.160,-0.0001
4.180,0.0021
4.200,0.0022
4.220,-0.0012
4.240,-0.0038
4.260,-0.0033
4.280,-0.0020
4.300,-0.0023
4.320,-0.0012
4.340,0.0005
4.360,0.0000
4.380,-0.0025
4.400,-0.0056
4.420,-0.0031
4.440,0.0023
4.460,0.0036
4.480,0.0034
4.500,0.0066
4.520,0.0094
4.540,0.0056
4.560,0.0045
4.580,0.0026
4.600,-0.0046
4.620,-0.0077
4.640,0.0004
4.660,0.0105
4.680,0.0014
4.700,-0.0058
4.720,0.0031
4.740,0.0112
4.760,0.0171
4.780,0.0257
4.800,0.0265
4.820,0.0128
4.840,0.0006
4.860,-0.0034
4.880,-0.0020
4.900,0.0090
4.920,0.0003
4.940,-0.0323
4.960,-0.0390
4.980,-0.0281
5.000,-0.0170
</pre>
<pre id="csv_vel" style="display:none">Time,Velocity
0.000,0.0000
0.020,0.0000
0.040,0.0001
0.060,0.0001
0.080,0.0001
0.100,0.0002
0.120,0.0002
0.140,0.0002
0.160,0.0002
0.180,0.0003
0.200,0.0003
0.220,0.0003
0.240,0.0004
0.260,0.0004
0.280,0.0004
0.300,0.0004
0.320,0.0005
0.340,0.0005
0.360,0.0005
0.380,0.0005
0.400,0.0006
0.420,0.0006
0.440,0.0006
0.460,0.0007
0.480,0.0007
0.500,0.0007
0.520,0.0007
0.540,0.0008
0.560,0.0008
0.580,0.0008
0.600,0.0008
0.620,0.0009
0.640,0.0009
0.660,0.0009
0.680,0.0009
0.700,0.0009
0.720,0.0010
0.740,0.0010
0.760,0.0010
0.780,0.0010
0.800,0.0010
0.820,0.0011
0.840,0.0011
0.860,0.0011
0.880,0.0011
0.900,0.0012
0.920,0.0012
0.940,0.0012
0.960,0.0012
0.980,0.0012
1.000,0.0012
1.020,0.0013
1.040,0.0013
1.060,0.0013
1.080,0.0013
1.100,0.0013
1.120,0.0014
1.140,0.0014
1.160,0.0014
1.180,0.0014
1.200,0.0014
1.220,0.0015
1.240,0.0015
1.260,0.0015
1.280,0.0015
1.300,0.0015
1.320,0.0015
1.340,0.0015
1.360,0.0016
1.380,0.0016
1.400,0.0016
1.420,0.0016
1.440,0.0016
1.460,0.0016
1.480,0.0016
1.500,0.0017
1.520,0.0017
1.540,0.0017
1.560,0.0017
1.580,0.0017
1.600,0.0017
1.620,0.0017
1.640,0.0018
1.660,0.0018
1.680,0.0018
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0018
1.780,0.0018
1.800,0.0018
1.820,0.0019
1.840,0.0019
1.860,0.0019
1.880,0.0019
1.900,0.0019
1.920,0.0019
1.940,0.0019
1.960,0.0019
1.980,0.0019
2.000,0.0019
2.020,0.0019
2.040,0.0020
2.060,0.0020
2.080,0.0020
2.100,0.0020
2.120,0.0020
2.140,0.0020
2.160,0.0020
2.180,0.0020
2.200,0.0020
2.220,0.0020
2.240,0.0020
2.260,0.0020
2.280,0.0020
2.300,0.0021
2.320,0.0021
2.340,0.0021
2.360,0.0021
2.380,0.0021
2.400,0.0021
2.420,0.0021
2.440,0.0021
2.460,0.0021
2.480,0.0021
2.500,0.0021
2.520,0.0021
2.540,0.0021
2.560,0.0021
2.580,0.0021
2.600,0.0022
2.620,0.0021
2.640,0.0021
2.660,0.0021
2.680,0.0021
2.700,0.0021
2.720,0.0021
2.740,0.0021
2.760,0.0021
2.780,0.0022
2.800,0.0022
2.820,0.0022
2.840,0.0022
2.860,0.0022
2.880,0.0022
2.900,0.0022
2.920,0.0022
2.940,0.0022
2.960,0.0022
2.980,0.0022
3.000,0.0021
3.020,0.0021
3.040,0.0021
3.060,0.0021
3.080,0.0021
3.100,0.0021
3.120,0.0021
3.140,0.0021
3.160,0.0022
3.180,0.0022
3.200,0.0022
3.220,0.0022
3.240,0.0022
3.260,0.0022
3.280,0.0022
3.300,0.0022
3.320,0.0022
3.340,0.0022
3.360,0.0022
3.380,0.0021
3.400,0.0021
3.420,0.0021
3.440,0.0021
3.460,0.0021
3.480,0.0021
3.500,0.0021
3.520,0.0021
3.540,0.0022
3.560,0.0022
3.580,0.0022
3.600,0.0022
3.620,0.0022
3.640,0.0021
3.660,0.0021
3.680,0.0019
3.700,0.0016
3.720,0.0013
3.740,0.0009
3.760,0.0005
3.780,0.0003
3.800,0.0001
3.820,-0.0001
3.840,-0.0002
3.860,-0.0004
3.880,-0.0011
3.900,-0.0024
3.920,-0.0037
3.940,-0.0047
3.960,-0.0057
3.980,-0.0065
4.000,-0.0061
4.020,-0.0052
4.040,-0.0048
4.060,-0.0060
4.080,-0.0086
4.100,-0.0111
4.120,-0.0120
4.140,-0.0124
4.160,-0.0129
4.180,-0.0109
4.200,-0.0065
4.220,-0.0055
4.240,-0.0104
4.260,-0.0175
4.280,-0.0228
4.300,-0.0270
4.320,-0.0305
4.340,-0.0312
4.360,-0.0307
4.380,-0.0332
4.400,-0.0413
4.420,-0.0500
4.440,-0.0508
4.460,-0.0449
4.480,-0.0379
4.500,-0.0279
4.520,-0.0118
4.540,0.0032
4.560,0.0133
4.580,0.0204
4.600,0.0185
4.620,0.0062
4.640,-0.0010
4.660,0.0098
4.680,0.0217
4.700,0.0173
4.720,0.0146
4.740,0.0289
4.760,0.0573
4.780,0.1001
4.800,0.1523
4.820,0.1916
4.840,0.2050
4.860,0.2021
4.880,0.1967
4.900,0.2037
4.920,0.2130
4.940,0.1809
4.960,0.1096
4.980,0.0426
5.000,-0.0024
</pre>
<pre id="csv_dis" style="display:none">Time,Displacement
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0001
0.280,0.0001
0.300,0.0001
0.320,0.0001
0.340,0.0001
0.360,0.0001
0.380,0.0001
0.400,0.0001
0.420,0.0001
0.440,0.0001
0.460,0.0002
0.480,0.0002
0.500,0.0002
0.520,0.0002
0.540,0.0002
0.560,0.0002
0.580,0.0002
0.600,0.0003
0.620,0.0003
0.640,0.0003
0.660,0.0003
0.680,0.0003
0.700,0.0003
0.720,0.0004
0.740,0.0004
0.760,0.0004
0.780,0.0004
0.800,0.0004
0.820,0.0005
0.840,0.0005
0.860,0.0005
0.880,0.0005
0.900,0.0006
0.920,0.0006
0.940,0.0006
0.960,0.0006
0.980,0.0007
1.000,0.0007
1.020,0.0007
1.040,0.0007
1.060,0.0008
1.080,0.0008
1.100,0.0008
1.120,0.0008
1.140,0.0009
1.160,0.0009
1.180,0.0009
1.200,0.0009
1.220,0.0010
1.240,0.0010
1.260,0.0010
1.280,0.0011
1.300,0.0011
1.320,0.0011
1.340,0.0012
1.360,0.0012
1.380,0.0012
1.400,0.0012
1.420,0.0013
1.440,0.0013
1.460,0.0013
1.480,0.0014
1.500,0.0014
1.520,0.0014
1.540,0.0015
1.560,0.0015
1.580,0.0015
1.600,0.0016
1.620,0.0016
1.640,0.0016
1.660,0.0017
1.680,0.0017
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0019
1.780,0.0019
1.800,0.0019
1.820,0.0020
1.840,0.0020
1.860,0.0020
1.880,0.0021
1.900,0.0021
1.920,0.0022
1.940,0.0022
1.960,0.0022
1.980,0.0023
2.000,0.0023
2.020,0.0024
2.040,0.0024
2.060,0.0024
2.080,0.0025
2.100,0.0025
2.120,0.0026
2.140,0.0026
2.160,0.0026
2.180,0.0027
2.200,0.0027
2.220,0.0028
2.240,0.0028
2.260,0.0028
2.280,0.0029
2.300,0.0029
2.320,0.0030
2.340,0.0030
2.360,0.0030
2.380,0.0031
2.400,0.0031
2.420,0.0032
2.440,0.0032
2.460,0.0033
2.480,0.0033
2.500,0.0033
2.520,0.0034
2.540,0.0034
2.560,0.0035
2.580,0.0035
2.600,0.0035
2.620,0.0036
2.640,0.0036
2.660,0.0037
2.680,0.0037
2.700,0.0038
2.720,0.0038
2.740,0.0038
2.760,0.0039
2.780,0.0039
2.800,0.0040
2.820,0.0040
2.840,0.0041
2.860,0.0041
2.880,0.0042
2.900,0.0042
2.920,0.0042
2.940,0.0043
2.960,0.0043
2.980,0.0044
3.000,0.0044
3.020,0.0045
3.040,0.0045
3.060,0.0045
3.080,0.0046
3.100,0.0046
3.120,0.0047
3.140,0.0047
3.160,0.0048
3.180,0.0048
3.200,0.0048
3.220,0.0049
3.240,0.0049
3.260,0.0050
3.280,0.0050
3.300,0.0051
3.320,0.0051
3.340,0.0051
3.360,0.0052
3.380,0.0052
3.400,0.0053
3.420,0.0053
3.440,0.0054
3.460,0.0054
3.480,0.0054
3.500,0.0055
3.520,0.0055
3.540,0.0056
3.560,0.0056
3.580,0.0057
3.600,0.0057
3.620,0.0057
3.640,0.0058
3.660,0.0058
3.680,0.0059
3.700,0.0059
3.720,0.0059
3.740,0.0060
3.760,0.0060
3.780,0.0060
3.800,0.0060
3.820,0.0060
3.840,0.0060
3.860,0.0060
3.880,0.0060
3.900,0.0059
3.920,0.0059
3.940,0.0058
3.960,0.0057
3.980,0.0056
4.000,0.0054
4.020,0.0053
4.040,0.0052
4.060,0.0051
4.080,0.0050
4.100,0.0048
4.120,0.0045
4.140,0.0043
4.160,0.0040
4.180,0.0038
4.200,0.0036
4.220,0.0035
4.240,0.0033
4.260,0.0031
4.280,0.0027
4.300,0.0022
4.320,0.0016
4.340,0.0010
4.360,0.0004
4.380,-0.0003
4.400,-0.0010
4.420,-0.0019
4.440,-0.0030
4.460,-0.0039
4.480,-0.0047
4.500,-0.0054
4.520,-0.0058
4.540,-0.0059
4.560,-0.0057
4.580,-0.0054
4.600,-0.0050
4.620,-0.0047
4.640,-0.0047
4.660,-0.0046
4.680,-0.0043
4.700,-0.0039
4.720,-0.0036
4.740,-0.0031
4.760,-0.0023
4.780,-0.0007
4.800,0.0018
4.820,0.0053
4.840,0.0092
4.860,0.0133
4.880,0.0173
4.900,0.0213
4.920,0.0255
4.940,0.0294
4.960,0.0323
4.980,0.0338
5.000,0.0342
</pre>
</main>
<footer class="footer py-3 bg-light">
<div class="container text-center">
</div>
</footer>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
Highcharts.chart('highchart', {
chart: {
zoomType: 'x',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_acc').innerHTML
},
yAxis: {
title: {
text: "Acceleration [g]",
}
}
});
Highcharts.chart('highchart2', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_vel').innerHTML
},
yAxis: {
title: {
text: "Velcocity [cm/s]",
}
}
});
Highcharts.chart('highchart3', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_dis').innerHTML
},
yAxis: {
title: {
text: "Displacement [cm]",
}
}
});
});
</script>
</body>
</html>
when viewed from a mobile device, although it can be viewed correctly in desktop devices. Specifically in mobile devices that running Android OS always causes "not responding symptom" in the latest versions of Chrome/Brave/Vivaldi Browsers.
Could anyone suggest me how this page can be accessed correctly through mobile devices without hanging problems?
Thanks in advance!
PS. The same problem exists when viewing this demo https://www.highcharts.com/demo/line-time-series from a mobile device, but not for the other demos.
I see that you were trying to apply the boost module by setting boostThreshold property to 1. You were close, in this case, the boost module will fix the issue. Although to make it work you need to do two things - first you need to import boost module, then you should apply boostThreshold in a different place, for example in plotOptions.line.boostThreshold or in series.boostThreshold because you can't access this property from the place you were trying to apply it (data). After fixing those two things everything is working smoothly on my android device.
<script src="https://code.highcharts.com/modules/boost.js"></script>
plotOptions: {
line: {
boostThreshold: 1
}
},
Docs references: https://www.highcharts.com/docs/advanced-chart-features/boost-module
API references: https://api.highcharts.com/highcharts/plotOptions.line.boostThreshold
Live demo: https://jsfiddle.net/BlackLabel/q9805pv4/
Strange default size in leaflet map
I have taken a working Leaflet map, but when I added a JQuery Mobile header and back button the formatting went crazy.
Initially loading the page all the contents is loaded in the upper-left-hand corner, but when the page is resized the smallest bit on a desktop, or rotated on a mobile, everything is fine.
This is what it looks like when opened:
and what it looks like after rotating (and what it should be):
Here is the code for the page
<!DOCTYPE html>
<html>
<head>
<title>Toronto CAD Activity Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/tfscad.mobile.css" />
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="../js/iframeResizer.contentWindow.js"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#mapPage {
height: calc(100% - 42px);
}
#map {
height: 100%;
}
#map-content{
height: 100%;
padding: 0px;
margin:0px;
z-index: -1;
}
#curLoc{
position: absolute;
bottom: 0;
left: 10px;
}
</style>
</head>
<body>
<body>
<div data-role="page" id="mapPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<a id="backButton" href="#" data-rel="back"
data-transition="slide" data-direction="reverse">Back</a>
<h1>Toronto CAD Map</h1>
</div>
<div id="map-content" data-role="content">
<div id="map"></div>
</div>
<a id="curLoc" data-role="button" data-icon="location" data-iconpos="notext"></a>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/leaflet.js"></script>
<script type="text/javascript">
window.onload = function() {
getGeoJson();
getTPSJson();
};
var map = L.map('map').setView([43.7178,-79.3762], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
}).addTo(map);
function getGeoJson(){
// load GeoJSON from an external file
$.getJSON("../appdata/geo.json",function(data){
L.geoJson(data ,{
pointToLayer: function(feature,latlng){
var TFS = new L.icon({
iconUrl: '../images/tfs_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
var TPS = new L.icon({
iconUrl: '../images/tps_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
var ESC = new L.icon({
iconUrl: '../images/tps_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
if(feature.properties.icon == 'TFS'){
var marker = L.marker(latlng,{icon: TFS});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}else if(feature.properties.icon == 'TPS'){
var marker = L.marker(latlng,{icon: TPS});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}else if(feature.properties.icon == 'ESC'){
var marker = L.marker(latlng,{icon: ESC});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}
}
} ).addTo(map);
});
}
function getTPSJson(){
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0,
"offset": 1.5
};
// load GeoJSON from an external file
$.getJSON("../appdata/TPSDiv.json",function(myLines){
L.geoJson(myLines, {
style: myStyle
}).addTo(map);
})
}
setInterval(function()
{
getGeoJson();
}, 10000);//time in milliseconds
function onClick(e) {
//console.log(this.options.win_url);
window.open(this.options.win_url);
}
</script>
</body>
jQuery Mobile has its own way to create pages from div's, so you may better stick to JQM events.
Here is a great post of Omar which explain how to solve this (typical) issue when loading Google Maps. You should wait for pagecontainershow or use a placeholder to pre-load the maps in advance.
In my example below, you will find a variation of this approach for Leaflet which uses the same canvasHeight() function (see also the answers here: set content height 100% jquery mobile).
I noticed you are about to implement a footer button for the geo-location feature, so for your convenience i show you also a possible way to do that (credits: Getting current user location automatically every “x” seconds to put on Leaflet map?).
Please note: i had to reposition the default map attribution so it won't overlap with the footer button.
var map, actualPosition, actualAccuracy, autoUpdate;
function canvasHeight(canvas) {
var mapPage = $("#page-map"),
screen = $.mobile.getScreenHeight(),
header = $(".ui-header", mapPage).hasClass("ui-header-fixed") ? $(".ui-header", mapPage).outerHeight() - 1 : $(".ui-header", mapPage).outerHeight(),
footer = $(".ui-footer", mapPage).hasClass("ui-footer-fixed") ? $(".ui-footer", mapPage).outerHeight() - 1 : $(".ui-footer", mapPage).outerHeight(),
newHeight = screen - header - footer;
$(canvas).height(newHeight);
}
$(window).on("throttledresize orientationchange", function() {
canvasHeight("#map");
})
function onLocationFound(e) {
var radius = e.accuracy / 2;
actualPosition = L.marker(e.latlng).addTo(map);
actualAccuracy = L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
function showLocation() {
if (actualPosition) {
map.removeLayer(actualPosition);
map.removeLayer(actualAccuracy);
}
map.locate({setView: true,maxZoom: 16});
}
function loadMap(canvas) {
map = L.map(canvas).setView([43.7178, -79.3762], 11);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// Your custom initialization
//getGeoJson();
//getTPSJson();
}
function toggleAutoUpdate() {
if (autoUpdate) {
$("#autoUpdate").removeClass("ui-btn-active");
clearInterval(autoUpdate);
autoUpdate = null;
if (actualPosition) {
map.removeLayer(actualPosition);
map.removeLayer(actualAccuracy);
}
} else {
$("#autoUpdate").addClass("ui-btn-active");
showLocation();
autoUpdate = setInterval(function() {
showLocation();
// Your custom Update
//getGeoJson();
}, 10 * 1000);
}
}
$(document).on("pagecontainershow", function(e, ui) {
if (ui.toPage.prop("id") == "page-map") {
canvasHeight("#map");
if (!map) {
loadMap("map");
}
}
});
#map {
margin: 0;
padding: 0;
}
#page-map .footer {
position: fixed;
z-index: 1000;
bottom: .1em;
width: 100%;
}
#footer-button {
width: 100%;
text-align: center;
background: transparent;
}
#map-attribution {
text-align: center;
background: rgba(255, 255, 255, 0.7);
}
.leaflet-control-attribution.leaflet-control {
display: none;
}
/* Don't show scrollbars on SO code snippet */
.ui-mobile .ui-page {
min-height: 100px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
</head>
<body>
<div data-role="page" id="page-map">
<div data-role="header" data-position="fixed" data-theme="a">
Back
<h1>Toronto CAD Map</h1>
</div>
<div id="map" data-role="content">
<div class="footer">
<div id="footer-button">
<button id="autoUpdate" onclick="toggleAutoUpdate();" class="ui-btn ui-btn-inline ui-corner-all ui-icon-location ui-btn-icon-notext"></button>
</div>
<div id="map-attribution">
Leaflet Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade
</div>
</div>
</div>
</div>
</body>
</html>
jQuery Mobile manages the pages of your multi-pages document and resizes them appropriately when DOM is loaded.
The issue is that you have already instantiated your map with Leaflet before that event happens, so the map container (i.e. <div id="map"></div>) is not displayed yet by jQuery Mobile, and therefore its size is not computed yet by the browser.
This is a variant of map container size not being valid yet at map instantiation. See Data-toggle tab does not download Leaflet map
Since you already have a listener on window.onload, which executes after jQuery Mobile does its stuff, you could very simply call map.invalidateSize() at that moment:
window.onload = function() {
// Request Leaflet to re-evaluate the map container size
// AFTER jQuery Mobile displays the page.
map.invalidateSize();
getGeoJson();
getTPSJson();
};
Demo: https://plnkr.co/edit/TigW44s5MlqMifimWkSw?p=preview
Apache Cordova IOS Keyboard moving header and footer
I have a major issue with apache cordova. This is an iOS-specific issue. I am using jQuery-mobile. The issue appears whenever one does a search on a listview control then my fixed position header, footer and search input moves down.
Here is the markup of my page.
<!DOCTYPE HTML>
<html>
<head>
<title>Contacts</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
<style>
#my-wrapper
{
padding-top: 81px;
background-color: rgb(250, 246, 246);
}
#my-wrapper form {
position: fixed;
left: 2%;
right :2%;
top: 35px;
width: 96%;
z-index: 2;
background-color: rgb(250, 246, 246);
border-color : rgb(120, 120, 120);
text-shadow:unset;
box-shadow:unset;
}
#ContactHeader
{
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
</style>
<div id="employeeListPage" data-role="page" >
<div id="ContactHeader" data-role="header" style="height:32px ; ">
<a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a>
<h2>Contacts</h2>
</div>
<div id="my-wrapper" data-role="main">
<ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll" data-filter-placeholder="Search Contacts/Companies" ></ul>
</div>
<div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/contactlist.js"></script>
</body>
</html>
I also have an event that fire when a user starts typing in the search bar
$(document).on("pagecreate", "#employeeListPage", function () {
$("#employeeList").on("filterablebeforefilter", function (e, data) {
var URL = window.localStorage.getItem("ContactsForSearch");
URL = URL + '/' + nextNo + '/' + value;
$.getJSON(URL, function (info) {
if (info.length === 0) {
nomoredata = true;
//alert('no more data to display');
$('#employeeList').append('<br>');
$('#employeeList').append('<center><h2>No Data <h2> </center>');
}
else {
$('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2> <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>');
}
});
});
});
Whenever you search from the top of the list:
If you are scrolling down and you start to type in the search bar , this happens...These screenshots were taken from xcode’s emulator , on the phone it has the same result except it has a keyboard popping up at the bottom:
This would solve the problem with scrolling headers:
if (window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
unfortunately it removes the "done" button too!!!
JQuery drag/drop swap
I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>