Category: javascript

I have a chart with values that arrive at variable intervals. usually i have data point per second, but during a pause i could get no point at all for 20 minutes. or over a whole weekend.. here is a screenshot of my current chart:

what I would like to do, is to delete the connetion line between the points if the points are more than 1 minute apart. I could do it by inserting “null” values, but given that the data arrives every second I would have to add a lot of null values over multiple weekends..

is there an automated way to get to this result? i have been searching extensively without finding a proper solution. SpanGaps does not affect my data since there is no empty value in between.
what i would need is the opposite of spanGaps.. sort of like “createGaps” that accpets an integer as max interval for the gap.

This is my current flask template code for the green line:

  var myChart = new Chart(ChartDateTime, {
    type: 'line',
    data: {
        labels: [{% for day in days %}'{{ day }}',{% endfor %}],
        datasets: [{
            label: 'Recognized',
            data: [{% for okCrate in recognized %}{{ okCrate }},{% endfor %}],
            backgroundColor: 'transparent',
            borderColor: '#abef14',
            borderWidth: 1,
            radius:2,
            lineTension: 0.1,
            spanGaps: false,
            pointBackgroundColor: '#abef14',
            yAxisID: 'y'
        },
        
       ...
       ...

Any help appreciated.

I have a array as follows :

data = [
{
 "type":"abc",
 "quantity":36,
 "code:"EDF"
},
{
 "type":"abc",
 "quantity":40
 "code:"SFDF"
},
{
 "type":"yrf",
 "quantity":22
 "code:"SFDF"
},
{
 "type":"yrf",
 "quantity":19
 "code:"EDF"
}
]

I want to group elements of this array on the basis of type and code. for example, if type is “abc”, then I want to include new attributes for quantity of EDF as “quantity_EDF”,and quantity of SFDF as “quantity_SFDF”. So my resultant array will look as follows:

resultantArray = [
{
"type":"abc",
"quantity_EDF":36,
"quantity_SFDF":40
},
{
"type":"yrf",
"quantity_EDF":19,
"quantity_SFDF":22
}
]

How can I do this?

I have this element:

<div className={`my_container ${theme} ${isSpanishLanguage && 'spanishLanguage'} ${isEnglishLanguage && 'englishLanguage'}`}></div>

And I ge the error that my line is too long. How can I split this line into multiple lines to avoid getting this error ?

When using the firestore emulator and the JavaScript client I am unable to see updates. The scenario is:

1. I have an existing collection of documents and I make a query to fetch the collection. All is working as expected.

2. I update the collection (add, delete or update a document in the collection). Either through code or manually through the emulator web ui.

3. I query the collection. I never see the updates, no matter what i do I only see the results of the first query. The only way i can see the updates is restarting the emulator.

This works just fine when not using the emulator.

Thinking the emulator was forcing a read from cache, I tried to force it to fetch from the server using the getDocsFromServer method, but that didn’t work.

I searched for a know issue with the emulators but haven’t found a reference to this issue. Any help would be much appreciated.

I would like to create a context-sensitive help for my web application.
Iam using javascript (react / primereact).
I wrote down some documentation as pdf file.
So when I click on some button or in best case i just use f1 as shortcut I want to see the predefined page of my documentation.

There must be something pre-built, but I can’t find anything useful.
I am grateful for every tip.
Thanks.

This is the code I have so far there are no errors while it runs and the bot joins the channel and even displays the song names in the logs but no audio plays. I’ve tried upgrading node, npm, discord.js and all other packages to the latest version. I fixed some issues regarding syntax since most examples use discord.js version < 12 but I still have had no luck. Any assistance would be much appreciated.

const { Client, GatewayIntentBits, Partials} = require('discord.js');
const ytdl = require('ytdl-core');
const { createAudioPlayer, createAudioResource , StreamType, demuxProbe, joinVoiceChannel, NoSubscriberBehavior, AudioPlayerStatus, VoiceConnectionStatus, getVoiceConnection } = require('@discordjs/voice')
const play = require('play-dl')
const client = new Client({
  intents: [
    GatewayIntentBits.DirectMessages,
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
    GatewayIntentBits.MessageContent,
  ],partials: ['CHANNEL', 'MESSAGE']
});

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('messageCreate', async (message) => {
console.log('message: ',message.content);
  if (message.author.bot) return;

  if (message.content.toLocaleLowerCase() === '/leave') { //Here's how to leave from voice channel
    const connection = getVoiceConnection(message.guild.id)

    if(!connection) return message.channel.send("I'm not in a voice channel!")

    connection.destroy();

    console.log('Disconnected from voice!');
}

  if (message.content.startsWith('/play')) {
    const voiceChannel = message.member.voice.channel;
    if (!voiceChannel) {
      return message.reply('Please join a voice channel to use this command.');
    }

    const url = message.content.slice(6).trim();
    if (!ytdl.validateURL(url)) {
      return message.reply('Invalid YouTube URL.');
    }
    console.log("Establishing connection");
    const connection = joinVoiceChannel({
        channelId: message.member.voice.channel.id,
        guildId: message.guild.id,
        adapterCreator: message.guild.voiceAdapterCreator
    });
    console.log("Getting play urls from command");
    let args = message.content.split('play ')[1].split(' ')[0]
    console.log(args);
    console.log("After waiting for stream");

    let yt_info = await play.video_info(args)
    console.log(yt_info.video_details.title) 
    let stream = await play.stream_from_info(yt_info)
   // const stream = ytdl(url, { filter: 'audioonly' })
    console.log("Creating Resource");

    let resource = createAudioResource(stream.stream, {
        inputType: stream.type
    });
    console.log("Creating Audio Player");

    let player = createAudioPlayer({
        behaviors: {
            noSubscriber: NoSubscriberBehavior.Play
        }
    });
    console.log("Attempting to play");

    player.play(resource);

    connection.subscribe(player);
  }
});


client.login('Discord Token');

I am making a firebase chat app to introduce how to use firebase to a coding community, and when I put a module attribute in the script tag it does not run.

This is my code

<script type="module">
    import {initializeApp} from "https://www.gstatic.com/firebasejs/9.20.0/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.20.0/firebase-analytics.js";
    import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.20.0/firebase-database.js";
    const firebaseConfig = {
        apiKey: "AIzaSyDt6H4JWdhibuN-L50Tg4bOYM4tXfttzEk",
        authDomain: "primavera-challenge-2.firebaseapp.com",
        projectId: "primavera-challenge-2",
        storageBucket: "primavera-challenge-2.appspot.com",
        messagingSenderId: "209200120916",
        appId: "1:209200120916:web:db73a2d63d640de53819c1",
        measurementId: "G-NYN0KXDTX0"
    };
    
    
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const db = getDatabase()
    
    console.log(app, db)
</script>

I tried using a nomodule attribute on a script tag like this,

<script nomodule>console.log("No Module Test")</script>

but there was no output to the console either. I am working on a site that has the connect-src in the csp as

*.kasandbox.org *.sitename.org 'self' cdn.rawgit.com rawgit.com ajax.googleapis.com cdn.jsdelivr.net cdnjs.cloudflare.com 'unsafe-inline' 'unsafe-eval'

(site name replaced with sitename.org)

There is a chatbot like interface on the website. Which contains a list of questions with various options. based on the user selection different questions will be asked, (mainly select list questions) and finally it wil show a link based on the select options selected.

Can anyone please help me to find a plugin for the same.

i tried with convform jquery plugin. but it is not working as expected

JSFiddle Link:

https://jsfiddle.net/so2f8ym1/

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck">

<button name="save_multicheckbox" onclick="myFunction()" class="btn-primary">Save Checkbox</button>

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<p>--------------------------</p>

<table>
 <tr>
    <th>Number</th>
    <th>Word</th>
    <th>Checkbox</th>
 </tr>
 
  <tr>
      <th><p id="row-num-1">1</p></th>
    <th><p id="row-word-1">One</p></th>
    <td><input type="checkbox" id="row-chk-1" name="ckb" onclick="chkcontrol(0)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-2">2</p></th>
    <th><p id="row-word-2">Two</p></th>
    <td><input type="checkbox" id="row-chk-2" name="ckb" onclick="chkcontrol(1)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-3">3</p></th>
    <th><p id="row-word-3">Three</p></th>
    <td><input type="checkbox" id="row-chk-3" name="ckb" onclick="chkcontrol(2)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-4">4</p></th>
    <th><p id="row-word-4">Four</p></th>
    <td><input type="checkbox" id="row-chk-4" name="ckb" onclick="chkcontrol(3)"></td>
  </tr>
 
</table>

<button name="save_multicheckbox" onclick="tableButton()" class="btn-primary">Table Button</button><br><br>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

function tableButton() {
}
</script>

</body>
</html>

First I tried to output just one checkbox and a button to test out, this is working. I used function myFunction() to get the id myCheck in order to display a hidden text when the button is clicked.

What I want to do is to make a similar feature but with multiple checkboxes with multiple rows. To be honest I do not know how the syntax works in a function with multiple ids to check after submitting the button so I just want to point out my observations and what I need:

• The button is the same as my first example but I need something to add so that only certain rows is checked will be displayed
• After checking the checkboxes the id of those rows should be the ones that gets an output

pseudocode:

function tableButton() {
 *get id of rows with checkboxes ticked
 *display text of said rows
}

I would like to add some examples in my function tableButton() but I do not know where to begin with my code with multiple checkbox ids involved.

Any help would be appreciated.

I’m making a little paperdoll dissection game for my personal site but I have an issue. I encountered a problem where z-index wasn’t functioning properly. Turns out, somebody pointed out the reason why was because every single element with the Drog JavaScript enabled on it seemed to have a z-index of 10 and 10 only. Giving it any other z-index value besides 10 whether it be more or less didn’t make a difference. So my code didn’t align with the website’s source code.

I tried deleting the initial file from my host and pasting the code into a new one thinking it was a host error to no avail. I tried setting the z-index of the parent div to 10000 to no avail and I tried ! important too. This is a problem because I’m trying to add a function that allows elements to “pop out (increase in z-index)” when held.

The code as I see it is this:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">

    <title>天兎</title>

    <!-- The style.css file allows you to change the look of your web pages.

         If you include the next line in all your web pages, they will all share the same look.

         This makes it easier to make new pages for your site. -->

    <link href="/style.css" rel="stylesheet" type="text/css" media="all">

  </head>

  <body>

  

 <div style="z-index: 10000; position: static; display: block; background: transparent; height: fit-content; width: 768px">

  

  <script src="Drog.js"></script>

<div id="back" style="display: block; position: relative; z-index: 0; height: 776px; width: 768px; background-image: url(dissectbunny/bunny.internalflesh.png); background-repeat: no-repeat; background-position: center; background-size: cover;">

</div>

<!--INNARDS-->

<form name="pancreas" id="pancreas" class="innard" style="position: relative; z-index: 9; left: 47.5%; bottom: 400px; display: block; height: 82px; width: 38px; background-image: url(dissectbunny/bunny.pancreas.png); background-repeat: no-repeat; background-position: 50% 55.3% ; background-size: 1024px;"></form>

<form name="uterus" id="uterus" class="innard" style="position: relative; z-index: 9; left: 40%; bottom: 483px; display: block; height: 116px; width: 154px; background-image: url(dissectbunny/bunny.uterus.png); background-repeat: no-repeat; background-position: 50% 56.8% ; background-size: 1024px;"></form>

<form name="kidney" id="kidney" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 630px; display: block; height: 134px; width: 173px; background-image: url(dissectbunny/bunny.kidneys.png); background-repeat: no-repeat; background-position: 50% 53.5% ; background-size: 1024px;"></form>

<form name="guts" id="guts" class="innard" style="position: relative; z-index: 9; left: 39.5%; bottom: 750px; display: block; height: 115px; width: 160px; background-image: url(dissectbunny/bunny.intestines.png); background-repeat: no-repeat; background-position: 50.3% 49.8% ; background-size: 1024px;"></form>

<form name="stomach" id="stomach" class="innard" style="position: relative; z-index: 9; left: 43%; bottom: 860px; display: block; height: 69px; width: 80px; background-image: url(dissectbunny/bunny.stomach.png); background-repeat: no-repeat; background-position: 49.2% 48.3% ; background-size: 1024px;"></form>

 

<form name="heart" id="heart" class="innard" style="position: relative; z-index: 9; left: 48%; bottom: 990px; display: block; height: 98.8px; width: 83.2px; background-image: url(dissectbunny/bunny.heart.png); background-repeat: no-repeat; background-position: 52.5% 42.5% ; background-size: 1331.2px;"></form>

<form name="lungs" id="lungs" class="innard" style="position: relative; z-index: 9; left: 40.5%; bottom: 1120px; display: block; height: 117px; width: 142px; background-image: url(dissectbunny/bunny.lungs.png); background-repeat: no-repeat; background-position: 50% 39.8% ; background-size: 1024px;"></form>

<form name="brainless" id="brainless" class="innard" style="z-index: 1; position: relative; z-index: 9; left: 43%; bottom: 1380px; display: block; height: 110px; width: 106px; background-image: url(dissectbunny/bunny.brain.png); background-repeat: no-repeat; background-position: 50% 19% ; background-size: 1024px;"></form>

<!--SKELETON-->

<form name="pelvis" id="pelvis" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 1263px; display: block; height: 130px; width: 172px; background-image: url(dissectbunny/bunny.pelvis.png); background-repeat: no-repeat; background-position: 50% 53.5% ; background-size: 1024px;"></form>

<form name="ribs" id="ribs" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 1450px; display: block; height: 141px; width: 172px; background-image: url(dissectbunny/bunny.rib.png); background-repeat: no-repeat; background-position: 50% 47.5% ; background-size: 1024px;"></form>

<form name="jaw" id="jaw" class="innard" style="position: relative; z-index: 9; left: 38%; bottom: 1646px; display: block; height: 60px; width: 181px; background-image: url(dissectbunny/bunny.jaw.png); background-repeat: no-repeat; background-position: 50% 34% ; background-size: 1024px;"></form>

 

<form name="skull" id="skull" class="innard" style="position: relative; z-index: 9; left: 34.85%; bottom: 1888px; display: block; height: 228px; width: 233px; background-image: url(dissectbunny/bunny.skull.png); background-repeat: no-repeat; background-position: 50% 11%; background-size: 1024px;"></form>

<!--FLUFF-->

<div name="tummyfluff" id="tummyfluff" class="innard" style="position: relative; z-index: 9; left: 38.5%; bottom: 1895px; display: block; height: 204px; width: 178px; background-image: url(dissectbunny/bunny.bodystuffing.png); background-repeat: no-repeat; background-position: 50% 48%; background-size: 1024px;"></div>

<div name="facefluff" class="innard" id="facefluff" style="position: relative; z-index: 9; left: 34.85%; bottom: 2315px; display: block; height: 230px; width: 233px; background-image: url(dissectbunny/bunny.facestuffing.png); background-repeat: no-repeat; background-position: 50% 12%; background-size: 1024px;overflow: hidden;"></div>

<!--BODY-->

<div style="display: block; 

  z-index: 10;

  position:relative; 

  bottom: 2610px;

  height: 776px;

  width: 768px; 

  background-image: url(dissectbunny/bunny.body.png); 

  background-repeat: no-repeat; 

  background-position: center;

  background-size: cover;

  pointer-events: none;"></div>

<!--FLESH-->

<div name="face" id="face" style="z-index: 10; position: relative; left: 34.85%; bottom: 3322px; display: block; height: 230px; width: 232px; background-image: url(dissectbunny/bunny.face.png); background-repeat: no-repeat; background-position: 50% 12% ; background-size: 1024px;"></div>

<form name="tummy" id="tummy" style="z-index: 10; position: relative; left: 38.2%; bottom: 3315px; display: block; height: 184px; width: 178px; background-image: url(dissectbunny/bunny.tummy.png); background-repeat: no-repeat; background-position: 50% 51%; background-size: 1024px;"></form>

<div id="bandaid" style="z-index: 10;

  display: block;

  visibility: hidden;

  position:relative; 

  bottom: 3803px;

  height: 776px;

  width: 768px; 

  background-image: url(dissectbunny/bunny.bandaid.png); 

  background-repeat: no-repeat; 

  background-position: center;

  background-size: cover;

  pointer-events:none"></div>

  

<div id="bandage" style="z-index: 10;

  visibility: hidden;

  display: block;

  position:relative; 

  bottom: 4580px;

  height: 776px;

  width: 768px; 

  background-image: url(dissectbunny/bunny.bandage.png); 

  background-repeat: no-repeat; 

  background-position: center;

  background-size: cover;

  pointer-events:none;"></div>

</div>

<div name="bow" id="bow" style="z-index: 10; position: relative; left: 34.5%; bottom: 5310px; display: block; height: 109px; width: 229px; background-image: url(dissectbunny/bunny.bow.png); background-repeat: no-repeat; background-position: 50% 7% ; background-size: 1024px;"></div>

<script>

  Drog.on(document.forms["pancreas"]);

  Drog.on(document.forms["uterus"]);

  Drog.on(document.forms["kidney"]);

  Drog.on(document.forms["guts"]);

  Drog.on(document.forms["stomach"]);

  Drog.on(document.forms["heart"]);

  Drog.on(document.forms["lungs"]);

  Drog.on(document.forms["pelvis"]);

  Drog.on(document.forms["ribs"]);

  Drog.on(document.forms["jaw"]);

  Drog.on(document.forms["skull"]);

  Drog.on(document.getElementById("tummyfluff"));

  Drog.on(document.getElementById("facefluff"));

  Drog.on(document.getElementById("face"));

  Drog.on(document.getElementById("tummy"));

  Drog.on(document.getElementById("bow"));

  

 document.getE# # lementsByClassName("innard").addEventListener("onmousedown", function () {this.style.zIndex = "100"; });

 document.getElementsByClassName("innard").addEventListener("onmouseup", function () {this.style.zIndex = "9"; });

  

</script>

  </body>

</html>

But according to the person who pointed out, the z-index for elements “face”, “bow” and “tummy” are at 10. So eventually I just went with it and set it to 10 myself as you can see here. Now the issue arises after realizing I need to set the internal organs z-index higher to “pop out” but I can’t seem to as they’ve been locked at 10 too due to using the drag and drop script. I say this because only the divs and forms affected by the Drog script have this issue. Can anyone figure out why?

The site in question is here

Console logthe second day I try to calculate top px and it doesn’t work all the time

I tried this, but nothing happens and at the same time it finds the desired element

const lastElement = $(Section).find('.new-element-wrapper').last().get(0);

const lastElementTop = $(lastElement).offset().top + $(lastElement).outerHeight() + 5;

console.log(lastElementTop);

console.log(lastElement);

i want create url based on category name / subcatergory name/ product name

example : cold-drinks-juices/soft-drinks/cid/332/1102

if I redirect from category to product listing page then url will be like : catergory/categoryname/subcategory name

subcategory name will be added by product listing page.

i used this technique and its working but if do refresh then its not works.

const url = this.router.createUrlTree([‘subCateName’], {relativeTo: this.activatedRoute}).toString();

this._location.go(url);

please suggest me some solution.

i am trying to url for eCommerce website and i want use product or category name instead of product Id/mongoose it

I’m using Framework7 v. 5.5.1 and Leaflet 1.9.3 (https://leafletjs.com/),

I couldn’t show the map correctly.

I have to use the map in two different pages.
On the first page, I have to view it in full screen, however the map goes beyond the screen, I can’t see the right side and the bottom side.

There seems to be some css rules against f7’s css

Thank you in advance.

on: {
            pageInit: function(e,page){     
                                    
                    var map = L.map('map').setView([48.864716, 2.349014], 8);           }
                                        
},

#map { 

    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
}

<div class="page-content">
    <div class="row">
        <div class=" col-100 medium-100 large-50">
           <div class="col">
                 <div id="map"></div>
             </div>
        </div>     
   </div>
</div>

I have a JSON array of objects out of which I need to create an Object of countries and continents like below:

For ex-

{
 "Asia":['India','China'],
 "Europe": ['Germany','United Kingdom']
}

So basically in above object continents would be a key and all the countries corresponding to that continent would come into array as a value.

This is what I want-

1. Unite Kingdom should replace with UK inside an object.

Below is my code but its giving a wrong output:

   const arr = [
         {
            'id':1,
            'geography':'region',
            'zone':'Europe',
            'countries':['United Kingdom','France','Germany']
         },
         {
            'id':1,
            'geography':'global',
            'zone':'global',
         },
         {
            'id':1,
            'geography':'region',
            'zone':'Europe',
            'countries':['France','Germany','Netherlands']
         }
        ];
        
const obj = {};

for(let i=0; i<arr.length; i++) {
 //Check if geography is region only
 if(arr[i].geography === 'region') {
    //Checking if property is already exists in object
    if(obj[arr[i].zone]) {
        obj[arr[i].countries].map((items) => {
           obj[arr[i].zone].push(items);     
        });
    }
    //If property is not there then insert
    else{
        obj[arr[i].zone] = obj[arr[i].countries];
    }
  }
}  

console.log(obj);

Its giving me below output:

{ Europe: undefined }

Someone let me know what I am doing wrong in above code.

I am trying to work with time frames, using Date objects and changing parts of them, e.g., month, date. I have encountered inconsistencies in the representation of the Date objects as follows:

// create a new Date object using the current timestamp
let now = new Date();
// display the ISO representation (correct)
console.log(now.toISOString());
// display the date components (correct)
console.log(now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate());

// get the first day of the current month
var currentMonthFirstDate = new Date(now.getFullYear(), now.getMonth(), 1);
// display the ISO representation (wrong date)
console.log(currentMonthFirstDate.toISOString());
// display the date components (correct)
console.log(currentMonthFirstDate.getFullYear() + "-" + (currentMonthFirstDate.getMonth() + 1) + "-" + currentMonthFirstDate.getDate());

The sample output looks like this:

2023-04-24T08:43:27.819Z
2023-4-24
2023-03-31T21:00:00.000Z
2023-4-1

I could understand that it’s about time zones (even though I’m creating a new date with an explicit month and date given), but it still seems like an inconsistent behavior between the ISO string and the actual date components.

Is there something else I’m missing, or should there be another way of working with Date objects to create time frames? Is it actually correct, and I shouldn’t worry about it?