Category: javascript

I programmed a game which shows a different puzzle every day. I have n puzzles and every day, one of these is chosen. The game does not save any information (it should not), but it should show the same puzzle for every person opening the website that day.

Therefore, I currently use the date itself as a seed, so it’s the same for all.
But in fact, that is a terrible idea since it makes the elements not even close to equally distributed. The code is this one here and my “dayString” is in format yyyymmdd, so for example 20231221 today.

import { useMemo } from "react";
import seedrandom from "seedrandom";

export function useCountry(dayString: string, numOfElements): number {
  const choosenIndex = useMemo(() => {
    return (
      Math.floor(seedrandom.alea(dayString)() * numOfElements)
    );
  }, [dayString]);

  return choosenIndex;
}

Does anybody have a better idea for a good, more equally distributed random function while not needing to save information?

Is it possible to add content to each cell in timeGridWeek View and timeGridDay? In dayGridMonth I can use something like this:

dayCellContent: function(arg){
let html = '';
if(!arg.isPast) 
html = '<a title="Add meeting"  href="javascript:void(0)" onclick="displayEventAdd(' + arg.date.getTime() + '); return false;" class="addEventButton">
<i class="fas fa-plus"></i></a>';
                                            
return {html: html + arg.dayNumberText, textEscape: false}; 
}

Effect of dayCellContent in MonthView

How can I add additional content in timegrid views

Effect that I need in Week view
Effect that I need in Day view

I cannot see anything in documentation. Didn’t found anything similar to dayCellContent (timeCellContent or hourCellContent).

The way winwheel library is designed, is to start the segments at index 1, instead of 0.

This is creating problems when trying to fetch the wheel segments from the database.
I have a column “segments” in my table, which holds this value:

[
    {
        "image": "./assets/img/5.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "5% korting"
    },
    {
        "image": "./assets/img/4.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "10% korting"
    },
    {
        "image": "./assets/img/5.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "5% korting"
    },
    {
        "image": "./assets/img/4.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "10% korting"
    },
    {
        "image": "./assets/img/5.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "5% korting"
    },
    {
        "image": "./assets/img/4.png",
        "strokeStyle": "black",
        "size": 60,
        "text": "15% korting"
    }
]

No matter what I try, I cannot get the segments right AFTER creating the wheel.
WinWheel library proceeds to return 7 segments instead, the first one being null.
See below:

let theWheel;
// Fetch wheel configuration from the server
fetch('./getWheelConfig.php')
    .then(response => response.json())
    .then(data => {

     // Logging the data fetched ( it has the right format, and returns 6 segments )
     console.log(data);

// Use the fetched data to create the wheel
theWheel = new Winwheel({
    'canvasId': 'canvas',
    'numSegments': data.num_segments,
    'outerRadius': data.outer_radius,
    'drawMode': data.draw_mode,
    'rotationAngle': 0,
    'textFontFamily': data.text_font_family,
    'textFontSize': data.text_font_size,
    'textFontWeight': 'bold',
    'textOrientation': data.text_orientation,
    'textAlignment': data.text_alignment,
    'textDirection': 'normal',
    'textMargin': parseFloat(data.text_margin),
    'textFillStyle': data.text_fill_style,
    'textStrokeStyle': data.text_stroke_style,
    'textLineWidth': parseInt(data.text_line_width),
    'fillStyle': 'silver',
    'strokeStyle': 'black',
    'lineWidth': 1,
    'clearTheCanvas': true,
    'imageOverlay': data.image_overlay,
    'drawText': data.draw_text,
    'pointerAngle': 0,
    'wheelImage': null,
    'imageDirection': data.image_direction,
    'responsive': data.responsive,
    'segments': data.segments, 
    'animation': {
        'type': data.animation_type,
        'duration': data.animation_duration,
        'spins': data.animation_spins,
        'callbackFinished': 'alertPrize',
        'callbackSound': 'playTick',
        'soundTrigger': data.animation_sound_trigger,
    },
    'pins': {
        'responsive': data.pins_responsive,
        'fillStyle': data.pins_fill_style,
        'strokeStyle': data.pins_stroke_style,
        'outerRadius': parseInt(data.pins_outer_radius),
        'number': parseInt(data.pins_number),
    },
});

console.log(theWheel);

    })
    .catch(error => console.error('Error fetching wheel configuration:', error));

The data being retrieved from the database is not corrupted and is in the correct format and I can confirm this when I “console.log(data)”.

As soon as the wheel is created and I try “console.log(theWheel)” to see which segments are being added, I see 7 segments instead with the first being null.
See the object below that is being logged after wheel creation:

{
    "canvasId": "canvas",
    "centerX": 217,
    "centerY": 217,
    "outerRadius": 210,
    "innerRadius": 0,
    "numSegments": 6,
    "drawMode": "segmentImage",
    "rotationAngle": 0,
    "textFontFamily": "monospace",
    "textFontSize": 18,
    "textFontWeight": "bold",
    "textOrientation": "curved",
    "textAlignment": "outer",
    "textDirection": "normal",
    "textMargin": 25,
    "textFillStyle": "white",
    "textStrokeStyle": "black",
    "textLineWidth": 3,
    "fillStyle": "silver",
    "strokeStyle": "black",
    "lineWidth": 1,
    "clearTheCanvas": true,
    "imageOverlay": 1,
    "drawText": 1,
    "pointerAngle": 0,
    "wheelImage": null,
    "imageDirection": "N",
    "responsive": 1,
    "scaleFactor": 0.9976958525345622,
    "segments": [
        null,
        {
            "size": 60,
            "text": "5% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/5.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 0,
            "endAngle": 60
        },
        {
            "size": 60,
            "text": "10% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/4.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 60,
            "endAngle": 120
        },
        {
            "size": 60,
            "text": "5% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/5.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 120,
            "endAngle": 180
        },
        {
            "size": 60,
            "text": "10% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/4.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 180,
            "endAngle": 240
        },
        {
            "size": 60,
            "text": "5% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/5.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 240,
            "endAngle": 300
        },
        {
            "size": 60,
            "text": "15% korting",
            "fillStyle": null,
            "strokeStyle": "black",
            "lineWidth": null,
            "textFontFamily": null,
            "textFontSize": null,
            "textFontWeight": null,
            "textOrientation": null,
            "textAlignment": null,
            "textDirection": null,
            "textMargin": null,
            "textFillStyle": null,
            "textStrokeStyle": null,
            "textLineWidth": null,
            "image": "./assets/img/4.png",
            "imageDirection": null,
            "imgData": {},
            "startAngle": 300,
            "endAngle": 360
        }
    ],
    "animation": {
        "type": "spinToStop",
        "direction": "clockwise",
        "propertyName": null,
        "propertyValue": null,
        "duration": 15,
        "yoyo": false,
        "repeat": null,
        "easing": null,
        "stopAngle": null,
        "spins": 75,
        "clearTheCanvas": null,
        "callbackFinished": "alertPrize",
        "callbackBefore": null,
        "callbackAfter": null,
        "callbackSound": "playTick",
        "soundTrigger": "pin"
    },
    "pins": {
        "visible": true,
        "number": 24,
        "outerRadius": 4,
        "fillStyle": "silver",
        "strokeStyle": "black",
        "lineWidth": 1,
        "margin": 3,
        "responsive": 1
    },
    "canvas": {},
    "ctx": {},
    "pointerGuide": {
        "display": false,
        "strokeStyle": "red",
        "lineWidth": 3
    },
    "_originalCanvasWidth": 434,
    "_originalCanvasHeight": 434,
    "_responsiveScaleHeight": "true",
    "_responsiveMinWidth": "425"
}

Is there a way to make winwheel use the default index of 0 instead of 1?!
Or is there another way to get this working? I’ve tried anything but with no success.
As soon as the wheel is created, I suddenly have 7 segments ( instead of 6 being fetched from my database) and the first segment is null.

Tried:
ForEach loop inside wheel object creation

Expected:
6 segments being added to be created in the wheel object

Resulted:
7 segments with the first being null

I am setting up cookies using JavaScript code for both the secure and HttpOnly but the Secure and httpOnly is always false, how can I make both true?

Here is my code

document.getElementById("acceptButton").addEventListener("click", function() {
        var now = new Date();
        now.setMonth(now.getMonth() + 3); 
        var ID = document.getElementById("acceptButton").getAttribute("data-ID");
    
    document.cookie = "cookie_" + ID + "=true; path=/";
    document.cookie = "cookie_" + ID + "=true; path=/; secure"; 
    document.cookie = "cookie_" + ID + "=true; path=/; HttpOnly";  // this section is not setting it for true  
    document.getElementById("cookieAlert").style.display = "none";
    });

I am not sure at this point what is wrong with this code but it should be setting up both to true

I have already tried the above solution

I have been trying to get an SVG to display within a React-Konva stage in order to add scroll zoom and drag and drop functionality.

The SVG is dynamically controlled using 2 different variables which the user can select and the best way I’ve found to do this was by writing the SVG as inline code and using D3 to help with the dynamics.

My issue comes in with then needing this image to have zooming and click-drag navigation functions as well.

I have tried multiple different methods in and around React-Konva and I can’t figure out a way to display this react component within the Konva stage.

If anyone knows of any ways that I could return the SVG component as an image or be able to display this component on the stage with working functionality I’d really appreciate it.

Also I’m still on the fence if React-Konva is the best solution for this need but I was unsuccessful in finding anything else, so recommendations are also, greatly appreciated!

When I type this code, it adds the accumulator with the currentValue and everything is fine:

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 100) 

console.log(summedNums); // Output: 117

However, when I want to find the max number, accumulator becomes an index. Why is that and when is it happening? How can I control it in the future?

const numbers = [10, 20, 5, 40, 30];

const maxIndex = numbers.reduce(
  (accumulator, currentValue, currentIndex, array) => {
    if (currentValue > array[accumulator]) {
      return currentIndex;
    } else {
      return accumulator;
    }
  },
  0
);

console.log(maxIndex); // Output: 3

I am a beginner, I would like to create an aspx file with an ajax call in it pointing to a method in the C# file, the latter runs query to a database and returns the data to the aspx file to instantiate a dataTable object in JQuery.

I don’t know how to do it, I have already written something in the 2 files but I don’t understand how to go on, even on the internet I had difficulty understanding how to do it.

can you help me?

Here is what I did:

-Javascript Code

var pageUrl = '<%=ResolveUrl("~/Sph_table_00.aspx/GetData")%>';
$(function () {
new DataTable('#example', {
    ajax: {
        "type": 'POST',
        "url": pageUrl,
        "contentType": 'application/json; charset=utf-8',
        "dataType": 'json',
        "success": function (msg) {
            alert("Success: " + msg.d);
            
            //EXAMPLE
            let out = [];
            for (var i = 0; i < 5; i++) {
                out.push([i + '-1', i + '-2']);
            }

            setTimeout(() => {
                callback({
                    draw: data.draw,
                    data: out,
                    recordsTotal: 5000000,
                    recordsFiltered: 5000000
                });
            }, 150);
        }
    },
    processing: true,
    ordering: false,
    scroller: true,
    scrollY: 200,
    searching: false,
    serverSide: true
});
}

• C# Code

public partial class Sph_table_00 : System.Web.UI.Page
{
    [WebMethod]
    public void GetData()
    {
           //I don't know what I should put here.
    }
}

• HTML

<table id="example" style="width:100%" class="table table-striped display nowrap">
<thead>
    <tr>
        <th>ID</th>
        <th>First name</th>
    </tr>
</thead>
</table>

A modbus flex getter returns a buffer

[118,48,49,49,48,56,61,57,52,54,46,54,52,0,0,0,0,0]

converted to a string with

var bufstr = msg.payload.buffer.toString();
var bufarr = bufstr.split("=");
msg.payload = bufarr[1];

return msg;

the output to the debugging window is
msg.payload : string[11]
“946.64”

but if i want to convert the string to a number with a change node and JsonATA
$number(payload)
it drops the error

Ungültiger JSONata Ausdruck: Unable to cast value to a number: “946.64u0000u0000u0000u0000u0000”

Even with
string.Number(msg.payload);
it does return NaN.

It seems there is a problem with the encoding, the last four zeroes of the buffer are converted to something Node-RED doesn’t display.

The number has various digits and possibly a point.

A regex with /(^0-9.-)/ didnt work.

I am currently working on a box-container component where the user can add as many box component inside the box-container. Each box has a width of 150px and height of 350px and the container has a max-width of 600px so it can hold up to 4 box components. Essentially if the user were to add a 5th box, the content will be hidden due to overflow: hidden set to the container.

The problem I am facing is that the last box component clipped by the box-container such that the button gets truncated as shown below.

With overflow: hidden: button is truncated as shown below.

I am aware that overflow: hidden somehow does the job strictly where it just clips any element along the way but I am looking for a workaround where I can show the button like below while retaining the scrolling overflow: hidden functionality.

• In second image where the button is not truncated, overflow: hidden is applied. I want to show the button while the content overflowing is hidden.

Here is the code for my box component:

box.component.html

<div class="box">
    <button class="decrease-temp" (click)="onDecreaseClick()">-</button>
    <button class="increase-temp" (click)="onIncreaseClick()">+</button>
</div>

box.component.css

.box {
  width: 150px;
  height: 350px;
  background-color: darkblue;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}

.box:hover {
  z-index: 2;
}

.box:hover button {
  visibility: visible;
}

button {
  height: 30px;
  width: 30px;
  outline: none;
  border: none;
  background-color: thistle;
  border: 1px solid #000;
  visibility: hidden;
  z-index: 101;
}

button:hover {
  height: 30px;
  width: 30px;
  outline: none;
  border: none;
  background-color: rgb(253, 139, 253);
  border: 1px solid #000;
  z-index: 101;
}

.decrease-temp {
  position: absolute;
  top: 25px;
  left: -15px;
}

.increase-temp {
  position: absolute;
  top: 25px;
  left: 133px;
}

box.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css']
})
export class BoxComponent {
  @Output() increase = new EventEmitter<void>();
  @Output() decrease = new EventEmitter<void>();

  onIncreaseClick() {
    this.increase.emit();
  }

  onDecreaseClick() {
    this.decrease.emit();
  }
}

Here is the code for the box container:

box-test.component.html

<div class="container">
    <div class="config-wrapper">
        <div class="config">
            <app-box *ngFor="let box of boxes" (increase)="addBox()" (decrease)="removeBox()"></app-box>
        </div>
    </div>
</div>

box-test.component.css

.container {
  max-width: 600px;
  height: 350px;
  overflow: auto;
}

.config-wrapper {
  display: flex;
  background-color: gray;
  overflow: hidden;
}

.config {
  position: relative;
  display: flex;
}

box-test.component.ts

import { Component } from '@angular/core';
import { BoxComponent } from '../box/box.component';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [ BoxComponent, CommonModule ],
  selector: 'app-box-test',
  templateUrl: './box-test.component.html',
  styleUrls: ['./box-test.component.css']
})
export class BoxTestComponent {
  boxes = [1]

  addBox() {
    this.boxes.push(this.boxes.length + 1);
  }

  removeBox() {
    this.boxes.pop();
  }
}

Can someone advice me on this? Is it possible to retain the existing scrolling functionality while not causing the button to truncate? Appreciate any help and thanks in advance on this.

Soo i made a button when click another button will pop up called Radiusbutton but when i click the radiusbutton it seems to go away after clicking also how would i add another button so when i click <button id=”Slow” 2 other buttons will pop up and make it where they both stay on screen even after clicking them and when i click another button like <button id=”Clear” or <button id=”Active it will go away ?

I tried looking it up still didn’t find nothing even tried asking AI but they a lil slow. I’m new to all of this just needing a little bit of help.

<html>

<head>
    <link rel="stylesheet" href="reset.css" type="text/css">
    <link rel="stylesheet" href="index.css" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">


    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
</head>

<body>

    <div id="container">

        <h1 class="top-text">Traffic Control System</h1>
        <form id="form">
            <div id="container1">
                <img src="images/MTF.png" alt="mtff" class="MTF" />
                <form id="form1">

                    <div></div>
                    <br>
                </form>
                <hr class="Line">

                <button id="Stop" type="submit">Stop Traffic</button>
                <button id="Slow" type="button" onclick="toggleRadiusButton()">Slow Traffic</button>

                <button id="RadiusButton" style="display: none;">Radius</button>

                <button id="Clear" type="submit">Clear Traffic</button>

                <button id="Active" type="submit">Active Traffic</button>

                <button id="close">EXIT</button>
                <script>
                    function toggleRadiusButton() {
                        var slowButton = document.getElementById('Slow');
                        var radiusButton = document.getElementById('RadiusButton');

                        radiusButton.style.display = 'block';
                        slowButton.disabled = true;
                    }
                </script>
            </div>
    </div>
    <script src="./index.js" type="text/javascript"></script>
</body>

</html>

I have a very annoying WordPress plugin that loads a div that floats on top of things, but it loads via JavaScript so using CSS isn’t affecting it because it loads after the CSS.

I need it or else I would remove the plugin altogether.

BUT I don’t want it when I’m editing in my builder because it goes on top of everything.

So I want to load the CSS after the body loads.

Here’s what I’m trying but nothing happens.

window.addEventListener("DOMContentLoaded", () => {
  const bodies = document.getElementsByTagName("body");

  for (const body of bodies) {
    body.innerHTML +=
      "<style>.fusion-builder-live #fusion-builder-live {display: none;}</style>";
  }
});

What could I be doing wrong? I’m sure there is a body tag on my page. Perhaps body doesn’t count as a tag because tags are inside of the body?

recently I created a random password generator using HTML, Tailwind and JavaScript, but when I deploy my web-app on Netlify (a free open source to deploy your website), the UI is looking good and same, but the script part or JavaScript part is not working.

Whereas it is working with normal CSS when I remove the tailwind.

Can Anyone help regarding this. By the way I am using PostCSS tailwind config and deploy the site through github on netlify.

Tailwind is not working

I’m getting 2K+ files are changed mark on my vs code when I ran yarn format
Looks like I have a problem on vs code setting.

I tried to run these command but couldn’t resolve the issue
git config core.filemode false
git config --global core.filemode false
git config --global core.autocrlf false

I’m not sure if this is doable.

---

I’m using material-ui treeview component which would hijack the focus from a li element to its parent ul. source code

A minial reproducable code: playground

import React from 'react';

export function App(props) {
  const dragOnList = (event) => {
    // Never see this log
    console.log('dragOnList', event.target)
  };

  const dragOnItem = (event) => {
    // And this neither
    console.log('dragOnItem', event.target)
  };

  const focusHijack = (event)=>
  {
    // !Hijack focus from item to list!
    document.getElementById('list').focus()
  }

  // Attempt to start dragging on any of the elements
  return (
    <ul id='list' draggable tabIndex={-1} onDragStart={dragOnList}>
      <li onFocus={focusHijack} tabIndex={-1} draggable onDragStart={dragOnItem}><div>List Item 1</div></li>
      <li onFocus={focusHijack} tabIndex={-1} draggable onDragStart={dragOnItem}><div>List Item 2</div></li>
      <li onFocus={focusHijack} tabIndex={-1} draggable onDragStart={dragOnItem}><div>List Item 3</div></li>
    </ul>
  );
}

But none of these elements, li and ul, would be able to drag.

I’m wondering if there is a workaround which could make the dragging work while the focus has been hijacked?

I’m trying to force my chart to use a stepSize of 5 on my y axis. The problem is, when that chart shrink’s (browser window get’s resized or whatever) the ticks use a stepSize of 15. Can I force te chart to use steps of 5 whatever it’s canvas size is?

This are my options:

options: {
    scales: {
        y: {
            grid: {
                color: ({ tick }) => tick.value == 0 ? 'black' : Chart.defaults.borderColor
            },
            min: -60,
            ticks: {
                stepSize: 5, // <- this works only when the chart is big enough
                display: true
            }
        }
    },
    layout: {
        padding: {
            right: 10,
            top: 10,
        }
    }
}

But this is what I get:
ticks are using a stepSize of 15