We Keep Coding

Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)

Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)

jsPlumb draggable element javascript function

The JSFiddle will clearly allow you to understand the problem.
I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.
I have a guess that the problem lie with the CSS position but I can't find it.
jsPlumb.ready(function() {
$(".scroll-box").draggable({
drag: function() {
jsPlumb.repaintEverything();
//jsPlumb.repaint($(this));
}
});
// jsPlumb.draggable($(".scroll-box"));
drawEndPoints("in-leaf", "Right");
drawEndPoints("out-leaf", "Left");
});
function drawEndPoints(classname, endpointposition) {
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
jsPlumb.addEndpoint($("." + classname), {
anchor: endpointposition
}, endpointOptions);
//jsPlumb.repaintEverything();
}

You are missing the jsPlumb.setContainer($("body"));
https://jsfiddle.net/mkaran/mLthybzo/
https://jsplumbtoolkit.com/community/doc/home
EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/

how to connect php database file in javascript?

I have using Jvector Map as a default Jvector map its working hover function.Now i changed hover to click function.but now i want display country details from database.i have created php database? i don't know how to call my database php file?
code:
<!DOCTYPE html>
<html>
<head>
<title>Country Footprint</title>
<link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
<script src="assets/jquery-1.8.2.js"></script>
<-- jvectormap scripts here -->
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-single').click(function(){
$('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
});
$('#focus-multiple').click(function(){
$('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
});
$('#focus-coords').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
});
$('#focus-init').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',

The answer is easy but you will need to do some more coding.
First of all you need to realize, that you JavaScript application can't connect to your database directly (and if it could, you'd have to store you database credentials in your JS app and reveal them to everyone out there).
JavaScript apps usually get the data using AJAX - you need to have a webserver configured that at a certain endpoint (eg. http://example.com/getdata.php) returning a JSON response. That can be then loaded in your JS app.
The getdata.php script is just a simple PHP script, that connects to the database and selects all required data and encodes them to JSON and writes to the output (don't forget to add Content-Type: application/json header).

How To Get country code in Jvector Map?

I am using Jvector Map. It's working now with the onRegionTipShow function. How to change to it to onRegionClick?
When I change it, it does not work. How to get country code in jvectormap on click?
jQuery.noConflict();
jQuery(function () {
var $ = jQuery;
$('#focus-single').click(function () {
$('#map1').vectorMap('set', 'focus', {
region: 'AU',
animate: true
});
});
$('#focus-multiple').click(function () {
$('#map1').vectorMap('set', 'focus', {
regions: ['AU', 'JP'],
animate: true
});
});
$('#focus-coords').click(function () {
$('#map1').vectorMap('set', 'focus', {
scale: 7,
lat: 35,
lng: 33,
animate: true
});
});
$('#focus-init').click(function () {
$('#map1').vectorMap('set', 'focus', {
scale: 1,
x: 0.5,
y: 0.5,
animate: true
});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
//"DZ": 158.97,
// "AZ":1.1,
"AG": 1.1,
// "AE":7.54,
// "AO":5.6,
"AR": 351.02,
//"AM":3.96,
"AU": 1219.72,
"AT": 366.26,
//"AF":3.96,
// "AL":3.96,
//"BS": 7.54,
"BH": 21.73,
// "BI":4.45,
"BB": 3.96,
//"BY": 52.89,
"BE": 461.33,
}
}]
},
onRegionTipShow: function (e, label, code) {
var code = label.html();
switch (code) {
case 'Argentina':
label.html("<div style='height:129px;width:296px;Length:98px'><b>Country</b>:&nbsp Argentina<br/><b>Category</b>:&nbsp Approved<br/><b>PDP GCO Region</b>:&nbsp South America<br/><b>Comments</b>:&nbsp Have had delays with regulatory submissions/approvals. As long as advanced planning is taken into consideration this country should be okay.</br><b>CCL</b>:&nbsp Mariana Bodmer</div>");
break;

jVectorMap not able to retrieve map object

I have a jQuery vector map defined as follows:
<div id="worldMap" style="width:800px;height:550px"></div>
In the JS onReady function:
$('#worldMap').vectorMap({
map: 'world_en',
backgroundColor: '#a5bfdd',
color: '#f4f3f0',
hoverColor: '#0000ff',
hoverOpacity: null,
selectedColor: '#666666',
attribute: 'fill',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#ffffff', '#a00000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element,code,region) {
displayInfo(code,region);
}
});
I set a timer to kick every five minutes to update the map data. The function it calls is:
function updateMap() {
$.getJSON('docs/testdata.json',function(data) {
var map=$("#worldMap").vectorMap('get','mapObject');
map.series.region[0].setValues(data);
});
}
The map displays correctly in the browser with all data points. The problem arises when updateMap() is called. It cannot get the mapObject (it is always undefined). Thinking it was some kind of timing issue, I moved the var map=$(... line to immediately after the definition in the onready initialization of the map and MAP is still undefined.

Also, try:
var obj = $('#world-map .jvectormap-container').data('mapObject');
Then:
obj.series.region[0].setValues(data);

I have the same problem
I solve it with that :
map = new jvm.Map({
container: jQuery('#world-map'),
map: "map",
regionsSelectable: true,
regionsSelectableOne: true,
backgroundColor: 'transparent',
zoomMax: 1,
zoomMin: 1,
zoomOnScroll: false
});
map.clearSelectedRegions();