Category: javascript

On my own compiler, the menu doesn’t even change a bit. When I tested here, it’s a bit better, for it does block the original default right-click menu. However, this hardcoded JS one does not appear either. I’d like to ask is there any problem with the code here, or it just doesn’t work like that?

const rMenu = document.getElementById('rClickMenu');

var timeout;
var lastTap = 0;

document.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    let mouseX = e.clientX || e.touches[0].clientX;
    let mouseY = e.clientY || e.touches[0].clientY;
    let menuHeight = rMenu.getBoundingClientRect().height;
    let menuWidth = rMenu.getBoundingClientRect().width;

    let width = window.innerWidth;
    let height = window.innerHeight;
    if (width - mouseX <= 200) {
        rMenu.setAttribute("border-radius", "5px 0 5px 5px");
        rMenu.setAttribute("left", (width - menuWidth) + "px");
        rMenu.setAttribute("top", mouseY + "px");

    if (height - mouseY <= 200) {
        rMenu.setAttribute("top", (mouseY - menuHeight) + "px");
        rMenu.setAttribute("border-radius", "5px 5px 0 5px");
        }
    } else {
        rMenu.setAttribute("border-radius", "0 5px 5px 5px");
        rMenu.setAttribute("left", mouseX + "px");
        rMenu.setAttribute("top", mouseY + "px");

        if (height - mouseY <= 200) {
        rMenu.setAttribute("top", (mouseY - menuHeight) + "px");
        rMenu.setAttribute("border-radius", "5px 5px 5px 0");
        }
    }
    
    rMenu.setAttribute("visibility", "visible");
    }, 
    { passive: false }
);

document.addEventListener("click", function (e) {
    if (!rMenu.contains(e.target)) {
      rMenu.setAttribute("visibility", "hidden");
    }
  });

section #rClickMenu {
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
    color: #000000;
    width: 10em;
    padding: 0.8em 0.6em;
    font-size: 1.3rem;
    position: fixed;
    visibility: hidden;
}

section #rClickMenu div {
    padding: 0.3em 1.2em;
}

section #rClickMenu div:hover {
    cursor: pointer;
}

<section>  
  <div id="rClickMenu">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
  </div>
</section>

I apologize for my English.

I have two JavaScrypt scripts in Imacros. Separately, each one executes its own loop and works without any problems.
But for the fifth day in a row I am trying to combine these two scripts into one. to automate this process. but unfortunately I am failing again and again. for this reason I started to study JavaScrypt. my head is spinning.

Script1. It works with links.

var macro;
macro =  "CODE:";
macro +=  "SET !EXTRACT_TEST_POPUP NO" + "n"; 
macro +=  "SET !ENCRYPTION NO" + "n"; 
macro +=  "SET !ERRORIGNORE YES" + "n"; 
macro +=  "'Подключаем наш файл" + "n"; 
macro +=  "SET !DATASOURCE D:\iMacros\Datasources\Ok\URLs.csv" + "n"; 
macro +=  "SET !DATASOURCE_COLUMNS 1" + "n"; 
macro +=  "'данные с нужной строки" + "n"; 
macro +=  "SET !DATASOURCE_LINE {{i}}" + "n";
macro +=  "URL GOTO={{!COL1}}" + "n"; 
macro +=  "WAIT SECONDS=2" + "n"; 

for(i=1;i<=34;i++)

{ 
iimSet("i",i)
iimPlay(macro)
}

script2 goes to the link that script1 pulled out.

var macro;
macro =  "CODE:";
macro +=  "FILTER TYPE=IMAGES STATUS=ON" + "n"; 
macro +=  "TAG POS={{i}} TYPE=A ATTR=CLASS:link__91azp<SP>photo-link__79ad9<SP>__primary__91azp*     EXTRACT=HREF" + "n"; 
macro +=  "'PROMPT {{!EXTRACT}}" + "n"; 
macro +=  "TAB OPEN" + "n"; 
macro +=  "TAB T=2" + "n"; 
macro +=  "URL GOTO={{!EXTRACT}}" + "n"; 
macro +=  "WAIT SECONDS=5" + "n"; 
macro +=  "EVENT TYPE=KEYPRESS SELECTOR=* KEY=35" + "n";
macro +=  "WAIT SECONDS=2" + "n"; 
macro +=  "TAB CLOSE" + "n"; 
for(i=1;i<=20;i++){ 
iimSet("i",i);
iimPlay(macro);
}
iimPlay(macro)
 

and this script2 visits the profiles of the members of this link.
I put 20 people.

As I said both scripts perform their functions well, but only separately. my task is to combine these two scripts into one script.
script1 pulled a link – script2 visited 20 people – script1 pulled a second link – script2 visited 20 people and so on….
I would appreciate your help.

The maximum I could come to is that script1 loads the first link of 34 links. script2 visits only 1 person out of 20 people and the cycle starts over again. that is, script1 extracts the second link and script2 visits the second person and so on. And I want everything to be cyclic. i.e. script1 extracted the first link – script2 went through 20 profiles then the cycle starts over again where script1 extracts the second link and script2 continues to visit 20 profiles and so on…..

In BabylonJS, I’m attempting to extrude a 2d png image to a 3d mesh, whilst I’ve considered obtaining the contours/outline of the image by extracting the alpha channel of the image and then using the results to create an extruded polygon. I’ve gone with a more straight forward method which merely seeks to stack multiple planes of the png image, I then merge the result into a single mesh. Whilst this DOES work in the main, I’m noticing artefacts at extreme angles i.e 90 degrees, at this angle the planes that make up the mesh are clearly visible.

Is there a way to stack the planes so closely that the individual planes are not visible at any angle of the resulting mesh? Alternatively, once I have the shape of the mesh can it be filled to remove any gaps present between the planes. Please see the following Playground, you’ll note that if you rotate the mesh by 90 degrees, on any axis, a “plane” distortion occurs as each individual plane orientates towards the camera:

<script>
    const userin = document.getElementById('todoAdd');
    const Addbtn = document.getElementById('Addbtn');
    const out1 = document.getElementById('outTodo');
    function addToP(){
        out1.innerHTML=userin.value;
    }
    Addbtn.addEventListener('click',addToP);
</script>

^ this works (puts textbox input into paragraph

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

^ this doesn’t work even though I have the same script in the js file and it is in the same folder as the html

this is the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do list</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <header>
        To-Do list
    </header>
    
    <input type="text" id="todoAdd">
    <input type="button" id="Addbtn" value = "Add">
    <p class="output" id="outTodo"></p>
    <script src="index.js"></script>
</body>
</html>

I was trying to put the js in the separate folder and run it the same but it somehow didn’t work the same as the other method

I am currently working with the Word JavaScript API, and I can enable Track Changes for the following document

 await Word.run(async (context) => {
      const document = context.document;
      document.load("changeTrackingMode");
      await context.sync();
      document.changeTrackingMode = Word.ChangeTrackingMode.trackAll;
    });

. However, when I enable it, it can still be turned off directly in Word. Is there a way for me to lock it, similar to Lock Tracking?

I cannot find any documentation regarding Lock Tracking.

I have been trying to fetch data from Google Sheets to my web frontend using the API endpoint, https://docs.google.com/spreadsheets/d/{spreadSheetId}/gviz/tq?&sheet={sheetId}. But I realize it strips all the rich-text formatting (i.e. span, italics) within the spreadsheet. I also tried to fetch https://docs.google.com/spreadsheets/d/{spreadSheetId} directly. While it provides an HTML that retains the stylings, the data gets cut off after a certain row.

Is there a way to query Google Sheets to make it retain the original rich text formatting?

I’m very new to JS development, I was trying to achieve the following in the else but is not getting executed its not working in Dynamics 365. Maybe syntax wrong… Please advise.

I want to achieve the following if Grant Intention Type not equals post and Current Funding status = post and check user role equals Support Business Advisor then unlock field activity code field. The first if works ok. However this is not working I dont think my else condition even getting hit.

I can create the same function for the 1 role only but this duplicates code I believe.

Please advise.

            function unLockNonSalaryCostFieldsBasedOnRolesTeams(executionContext) {
                const formContext = executionContext.getFormContext();

                const roles = ["Service Ops User", "DocuSignUser", "Geographic Enhanced User", "Support Business Advisor"];
                // Store Security Roles

                const userRoles = Xrm.Utility.getGlobalContext().userSettings.roles;
                const hasRole = userRoles.get().some(r => roles.indexOf(r.name) != -1);

                const currentFundingStatus = formContext.getAttribute("fsdyn_fundingstatus").getValue();

                const grantIntentionType = formContext.getAttribute("fsdyn_grantintentiontype").getValue();

                //get the name of currently lookup field
                const grantIntentionTypeLookUpValueName = grantIntentionType[0].name;

                if (grantIntentionTypeLookUpValueName !== "Post" && currentFundingStatus === FundingStatus.Proposed) {
                    formContext.getControl("fsdyn_amount").setDisabled(!hasRole);
                    formContext.getControl("fsdyn_fundingperiodmonths").setDisabled(!hasRole);
                }

                else {

                    if (grantIntentionTypeLookUpValueName !== "Post" && currentFundingStatus === FundingStatus.Proposed) {
                        formContext.getControl("fsdyn_activitycode").setDisabled(!hasRole);

                    }
                }
            }

I tried else condition to execute induvidualy howver check Support Business Advisor role only, do I need to store this another var?

I’m building a chat with langchain using just next.js app router. I am trying to build a retrievel agent that also searchs the internet and has memory, but I can make it work with all this features… has anyone struggled with this and found a good solution?

Btw, are you using actions or the API route?

I followed many tutorials, boilerplates from vercel, etc… but it seems everything is a bit outdated taking in consideration the errors in the imports, even langchain documentation as the same deprecated imports.

I’m working on a web-based game where a player chooses a type of action, and then a space on which to take that action. Rather than write the web infrastructure first (I’m planning on using express.js) I’m writing the actions first, to see if I can create a nice clean interface.

So for instance, a player chooses ‘Trees’ via request, and the code for what happens when a player selects Trees is

  async play(): Promise<void> {
    const hex = await game.ask<Hex>(new SelectHex());
    game.placeToken(hex, "greenery");
  }

I understand how backwards this might be, because game.ask is now (eventually) responsible for writing the HTTP response, while also owning the Promise. I’m avoiding trying to write something a little less elegant, like

  async play() {
    return new SelectHex((hex) => game.placeToken(hex, "greenery"));
  }

which doesn’t look so inelegant here, but can be more complicated.

Ideally, the express endpoint that receives the hex will need access to the Promise, so as to call its resolve method.

Is this pattern feasible? I realize there’s probably more information necessary, but I’m not sure what else to write.

I’m new to Nodejs and Typescript and facing a problem on a Windows machine. I set up an empty project with a single index.ts just for testing. I’m also using nodemon.

When I use tsc command to generate js files from ts, it works without any error and the files are built in the build directory.

But when I want to do that using the node’s start script (using nodemon), it throws an error.

Any ideas why it happens and how to fix it?

Node, ts-node, tsc are installed:

Here is my package.json:

{
  "name": "signal-service",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^22.7.7",
    "nodemon": "^3.1.7",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }
}

Here is my tsconfig.json:

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build",
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

Here is my nodemon.json:

{
  "watch": [
    "src"
  ],
  "ext": "js,ts,json",
  "exec": "ts-node ./src/index.ts"
}

I tried reinstall node on my machine and set up a project from scratch a few times.

I created a simple form with a submit button, text and phone entries. When I press the send button, whatsapp web opens and when I enter it from a mobile phone, whatsapp.com opens.
I’m trying to open mobile whatsapp with the text I wrote

let number = mobileNumber.replace(/[^d]/g, "");
  let url = `whatsapp://send?phone=${number}&text=${encodeURIComponent(message)}`;

and chatGPT already tell me https://wa.me/15551234567 that will work

let number = mobileNumber.replace(/[^d]/g, "");
  let url = `whatsapp://send?phone=${number}&text=${encodeURIComponent(message)}`;

I have a validation on an input field to prevent Arabic characters from being entered. The code works quite well except that you can’t add spaces.

https://jsfiddle.net/17b062wu/

jQuery(".no-arabic").on("input", function () {
        var inputValue = jQuery(this).val();
        var validChars = /^.*[u0600-u06FFs]+.*$/;
        if (validChars.test(inputValue)) 
        {
            alert('arabic text is not allowed');
            jQuery(this).val('');
        }
    });

I am making a Tic-Tac-Toe game using HTML, CSS, and JavaScript. I tried to add an event listener so to check whenever the button is clicked and added a condition to check whose turn it is. When clicked it should display the button is clicked and print the text according to the condition whenever the button is clicked.

let boxes = document.querySelectorAll(".box");
let turnO = true;
const winningPatterns = [
  [0, 1, 2],
  [0, 3, 6],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [2, 4, 6],
  [3, 4, 5],
  [6, 7, 8],
];

boxes.forEach((box) => {
  box.addEventListener("onclick", () => {
    console.log("box was clicked");
    if (turnO) { //checking whether it is the turn O's turn 
      box.innerText = "O";
      turnO = false;
    } else {
      box.innerText = "X"; //checking whether it is the turn of X's
      turnO = true;
    }
  });
});

/* CSS added by Editor for demo purpose */
.game {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-gap: 0.5em;
  .box {
    aspect-ratio: 1;
    width: 2em;
  }
}

<main>
  <h1>Tic Tac Toe</h1>
  <div class="container">
    <div class="game">
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>
      <button class="box"></button>

    </div>
  </div>
  <button id="reset-btn">Reset Game</button>
</main>

I want it to display whether the button is clicked and also whoever’s turn it is but the buttons are not working . I have connected my script file corectly with html. I want to know where I am making mistake.

I’m trying to use angular/fire@7 storage to store files and I’m getting this error:

Error: Uncaught (in promise): Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using

provideFirebaseApp) or you’re calling an AngularFire method outside of an NgModule (which is not supported).

Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using

provideFirebaseApp) or you’re calling an AngularFire method outside of an NgModule (which is not supported).

my app.module.ts:

    import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
    import { provideStorage, getStorage } from '@angular/fire/storage';

    imports: [
        provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
        provideStorage(() => getStorage()),
    ]

my component:

import { getStorage, ref, uploadBytes, getDownloadURL } from '@angular/fire/storage';

async uploadToFirebase(file: File, folder: string): Promise<string> {
    const storage = getStorage();
    const timestamp = new Date().toISOString().replace(/:/g, '-');
    const storageRef = ref(storage, `${folder}/${file.name}-${timestamp}`);

    await uploadBytes(storageRef, file);
    const downloadURL = await getDownloadURL(storageRef);
    return downloadURL;
}

let imageUrl = '';
if (this.selectedImage) {
    imageUrl = await this.uploadToFirebase(this.selectedImage, 'images');
}

my firebase storage rules:

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if false;
    }
  }

I’ve tried using these imports

(app.module.ts)

import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';

(component)

import { AngularFireStorage } from '@angular/fire/storage';

but since I’m using angular/fire@7 it gives me this error:
Module ‘”@angular/fire/storage”‘ has no exported member ‘AngularFireStorage’.

I’ve created a simple website template with HTML, CSS, and JavaScript. I tested it manually in Live Server mode (Visual Studio Code), and everything worked fine. I’ve updated the website’s code, and while running it live, I noticed that the features depending on JavaScript don’t work.

I’m talking about 2 features having the issue:

1. Hamburger menu button on mobile should open the drop-down menu
   

2. The left and right buttons in the slider component should move the slides.
   

All these features worked perfectly while testing but they doesn’t work after updated to the live website. I’m sure that the folders are properly updated and I’m sure that this isn’t a cache issue.

You may check out the code source here: https://github.com/NoToolsNoCraft/Basic-website-template-optimized-for-Desktop-and-Mobile

You may check out the app live here: https://notoolsnocraft.tech/basic-website-template-html-css-js/