I am creating a network using vis.js and customizing my network with physics configuration
physics:{
stabilization: false,
},
configure: {
filter:function (option, path) {
if (path.indexOf('physics') !== -1) {
return true;
}
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
return true;
}
return false;
},
showButton: false,
container: document.getElementById('config')
},
screenshot of the result
My problem is I do not want all the options, I just want some of the options and radio button only. How do I select only specific options or slider?
Thanks in advance
PS
As I asked same question on github I have got the response as:
Sorry but the only way would be to build your own config panel
you have to create your own config pannel for the network
so if any one have any other idea of customizing configuration of network plz share highly appreciable.
To adjust what options to show, you have just to adjust the filter function and actually filter options using the option and path params. Here I excluded the forceDirection option of smooth and left only barnesHut subset of options among physics:
configure: {
filter:function (option, path) {
if ((path.indexOf('physics') !== -1) && path.indexOf('barnesHut') !== -1) {
//alert(path);
return true;
}
if ((path.indexOf('smooth') !== -1 || option === 'smooth') && option != 'forceDirection') {
//alert(option);
return true;
}
return false;
},
You may also uncomment alerts to explore values of path and option further (or use console.log for more convenience).
Related
I need to change the number of elements to show in my grid view with respect to the device type. For mobile views and for desktop views. I went through so many suggetions like
check device screen size
check device type
and finally I ended up checking the device type inside a method.
methods: {
isMobile() {
if (screen.width <= 760) {
return true
} else {
return false
}
},
},
and I used isMobile() method to define my conditon for each device. My question is how can I use this isMobile() method as computed property as I only return a boolean value. And is it ok to use like this without a even listner. Because it's so far working fine. But I'm looking for a more unified solution as I'm new to VueJs. Thanks in advance.
You can use a created hook instead of methods, it will execute the isMobile function before the DOM loads meaning that you can identify the device type before loading the number of grids
like this:
created(){
isMobile() {
if (screen.width <= 760) {
return true
} else {
return false
}
},
}
Great article that shows a couple of different ways to do this in JavaScript right here
for vue3js using setup(){
<div class="mobile" v-if="isMobile()">
setup(){
const isMobile = () => screen.width <= 760
return {isMobile}
}
created() {
window.addEventListener("resize", this.resizeHandler); // extra bonus not needed for this question.
const orientation = window.screen.orientation.type
if (orientation === "portrait-primary") {
this.colwidth = 320; // example1
this.popupWidth = "100%"; // example2
} else if (orientation === "landscape-primary") {
this.popupWidth = "50%";
this.colwidth = 600;
}
I am able to show marker/icons using google map data layer and geoJson file(s). But instead of icons, is it possible to show a text (at particular location on map)?
It should not be part of InfoWindow. I am looking for something like Sample
I have tried using 'title' but it's just a label shown on mouse over of icon. Please help.
gmap.addListener('zoom_changed', function () {
var gmapZoom = gmap.GetZoom();
if (gmapZoom >= 0 && gmapZoom <= 21)
{
if (bJSONLoaded === false)
{
var setDataStyle = function (feature) {
var status = feature.getProperty('status');
switch (status) {
case "Active":
return {
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title: 'test 1'
};
case "Pending":
return {
icon: 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'
};
}
};
pendingJSON.loadGeoJson('http://url/GoogleTestPending.json');
pendingJSON.setStyle(setDataStyle);
pendingJSON.setMap(gmap);
activeJSON.loadGeoJson('http://url/GoogleTestActive.json');
activeJSON.setStyle(setDataStyle);
activeJSON.setMap(gmap);
bJSONLoaded = true;
}
else
{
if (!testJSON.getMap()) {
console.log('setting map');
pendingJSON.setMap(gmap);
activeJSON.setMap(gmap);
testJSON.setMap(gmap);
}
}
}
else
{
if (bJSONLoaded === true && testJSON.getMap() != null)
{
//remove pins
pendingJSON.setMap(null);
activeJSON.setMap(null);
testJSON.setMap(null);
}
}
});
Solved it by using OverlayView.
customEntity.prototype = new google.maps.OverlayView();
And then implemented required functions like draw, onAdd, onRemove, etc.
Please help with the script function on how to make select2 plugin work in wizard jquery template it is not firing and i'm using the search box, when it clicked it jams.Thank you
$('.class').select2(); AFTER $('#form').steps();
This has helped me thanks but..
$("#form").steps({
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex)
{
return true;
}
// Forbid suppressing "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age").val()) < 18)
{
return false;
}
var form = $(this);
// Clean up if user went backward before
if (currentIndex < newIndex)
{
// To remove error styles
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}
// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";
// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex)
{
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18)
{
$(this).steps("next");
}
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3)
{
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex)
{
var form = $(this);
// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
form.validate().settings.ignore = ":disabled";
// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex)
{
var form = $(this);
// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element)
{
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});
//IMPORTANT
var form =$("#form");
form.find("#personel_id").select2({
theme: 'bootstrap4',
});
First time using this component, and I am looking to make the search input box full width.
What would be the best way to accomplish this? Is it plain CSS, or is there an option in the script?
Here is my current script that generates the table
initializeBootstrapTable() {
let $table = jQuery(this.$refs.table);
jQuery.fn.bootstrapTable.columnDefaults.formatter = function(value, row, index) {
if(typeof(value) === 'boolean') {
return value ? 'Yes' : 'No';
}
if(value === 'ug') {
return 'UG';
}
if(value === 'pg') {
return 'PG';
}
return value;
};
$table.bootstrapTable({
data: this.applicants,
showColumns: true,
toolbarAlign: 'right',
buttonsAlign: 'right',
pagination: true,
search: true,
iconsPrefix: 'fa',
icons: {
paginationSwitchDown: 'fa-collapse-down icon-chevron-down',
paginationSwitchUp: 'fa-collapse-up icon-chevron-up',
refresh: 'fa-refresh icon-refresh',
toggle: 'fa-list-alt icon-list-alt',
columns: 'fa-th icon-th',
detailOpen: 'fa-plus icon-plus',
detailClose: 'fa-minus icon-minus'
}
});
$table.on('click-row.bs.table', (e, row) => this.handleApplicantSelection(row));
}
Thanks!
There doesn't seem to be an option to remove the float, it's either choose left or right looking at the options. Instead, add the BS4 no float class. JS is a good approach here.
Vanilla:
var d = document.getElementById("my-search");
d.className += " float-none";
jQuery
$("#my-search").addClass('float-none');
Plain CSS
#my-search {
float:none;
}
If you must, you can use the !important rule too.
I want to restrict the user in toolbar search by not allowing him/her using Some Special Characters like ('/','>','<','|').Please help me out.
$("#tblFundComp").bind("keydown",function(e)
{
if(e.keyCode >=48 && e.keyCode <=57 )
{
return false;
}
else
{
return true;
}
});
I have placed this piece of code after before search function. But this does not work
If you want allow only some special characters are entered in the input field of the search toolbar you can use dataEvents of the searchoptions defined using type:'keypress' or type:'keydown'. It will follows to call jQuery.bind and jQuery.unbind for the corresponding input field. The code fragment which allows only digits is following
searchoptions: {
dataEvents: [
{
type: 'keypress', // keydown
fn: function(e) {
// console.log('keypress');
if(e.keyCode >=48 && e.keyCode <=57) {
// allow digits
return true;
} else {
// disallow the key
return false;
}
}
}
]
}
In the live demo you will be not able to enter digits in the search field for the 'Name'.