Category: javascript

How can I program something similar to the visual block mode from vim in a website, basically I don’t want that when I select multiple line for the cursor to wrap around the entire line.

Perhaps a way to enable this selection mode with a key combination like alt+mouse select.

See example image below:

I basically have posts with an image and title. I want to load 10 posts initially. Then when you scroll down past them you can click a ‘show more posts’ button to load the next 10 and be able to keep doing that. So i dont know if its exactly like pagination because its all on one page and i want to keep the previous posts loaded. Im using angular and right now my app is working with a basic ‘find’ request which returns all the posts.

router.get(
  "/",
  asyncHandler(async (req, res) => {
    const posts = await PostModel.find().sort({ createdAt: "descending" });
    res.send(posts);
  })
);

So im trying to use token for account autentication, so i receive the token from the backend using cookie-parser like this:

const token = await ViewToken(AccEmail, AccPassword);
res.statusCode = 200;
res.cookie("authToken", token, {httpOnly: false,}).send();

And i receive it succefully in my Login page and after it confirms the login, it redirects the user to another html page, but when i try to use the token cookie from the first page, i isnt there, How do i use cookies received in one html page in another separate html page?

im using this to fetch the cookie:

const resToken = await fetch("http://100.93.233.91:3000/GetToken", {
method: "GET",
headers: h,
credentials: "include",
});
if(resLogin.ok && resToken.ok){
const token = await resToken.json();
localStorage.setItem("authtoken", token);
console.log(localStorage.getItem("authtoken"));
window.location.href = "MainPage.html";
}

but when i console.log(localStorage.getItem(“authtoken”)); it apears as void

I want to create a chain from a path that consists of equidistant points in the plane. My idea is to create the chain with

const group = Matter.Body.nextGroup(true);
const composite = Matter.Composites.stack(
  endpoints[0].x,
  endpoints[0].y,
  endpoints.length,
  1,
  10,
  10,
  (x: number, y: number) =>
    Matter.Bodies.rectangle(x, y, size, thickness, {
      collisionFilter: { group },
    })
);

Matter.Composites.chain(composite, 0.5, 0, -0.5, 0, {
  stiffness: 0.5,
  length: 2,
});

and then move the positions of the bodies with

composite.bodies.forEach((body, index) => {
  if (index === endpoints.length - 1) return;

  const start = endpoints[index];
  const end = endpoints[index + 1];
  const angle = Math.atan2(end.y - start.y, end.x - start.x) % (Math.PI * 2);
  const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };

  Matter.Body.setAngle(body, angle);
  Matter.Body.setPosition(body, mid);
});

but it only half works. If the path is drawn horizontally from left to right it seems to work, but if it is drawn in any other direction, like from right to left, the tip of the chain ends up spinning uncontrollably.

Here’s the class with the relevant parts.

class Chain {
  composite: Matter.Composite;

  constructor(path: Point[], size: number, thickness: number) {
    const endpoints = make_path(path, size);

    if (!endpoints.length) throw new Error("endpoints.length = 0!");

    const group = Matter.Body.nextGroup(true);
    const composite = Matter.Composites.stack(
      endpoints[0].x,
      endpoints[0].y,
      endpoints.length,
      1,
      10,
      10,
      (x: number, y: number) =>
        Matter.Bodies.rectangle(x, y, size, thickness, {
          collisionFilter: { group },
        })
    );
    const pin = Matter.Constraint.create({
      bodyB: composite.bodies[0],
      pointB: { x: 0, y: 0 },
      pointA: { x: endpoints[0].x, y: endpoints[0].y },
      stiffness: 0.5,
    });

    Matter.Composites.chain(composite, 0.5, 0, -0.5, 0, {
      stiffness: 0.5,
      length: 2,
    });

    Matter.Composite.add(composite, pin);

    composite.bodies.forEach((body, index) => {
      if (index === endpoints.length - 1) return;

      const start = endpoints[index];
      const end = endpoints[index + 1];
      const angle = Math.atan2(end.y - start.y, end.x - start.x);
      const mid = Matter.Vector.create(
        (start.x + end.x) / 2,
        (start.y + end.y) / 2
      );

      Matter.Body.setAngle(body, angle);
      Matter.Body.setPosition(body, mid);
    });

    this.composite = composite;
  }
}

The bug still happens if I only change the position, and leave the initial angle alone.
For completeness, here’s how the path is created https://jsfiddle.net/0ro7duLa/.

I would like to implement some animation for the “hp-bar” as it changes. For context, this is a Chrome extension for a browser game to display team information.

I had a previous version that worked fine, but I refactored the code so I could arrange the team member cards alphabetically. The width/color of the “hp-bar” is behaving as expected.

CSS

.hp-container {
  width: 100%;
  height: 100%;
  background-color: #555555;
  border-radius: 10px;
  border: 2px solid black;
  margin-right: 3px;
  overflow: hidden;
}

.hp-bar {
  width: 100%;
  height: 100%;
  transition: width 0.2s linear;
}

JS

      const lineFour = document.createElement('div');
      lineFour.className = 'line-four';

      const hpContainer = document.createElement('div');
      hpContainer.className = 'hp-container';

      const hp = document.createElement('div');
      hp.className = 'hp-bar';
      hp.id = member.cardId + 'Hp';

      const hpPercentage = (member.currentHp / member.maxHp) * 100;

      function setHp(percentage) {
        hp.style.width = (percentage) + "%";
        if (percentage <= 25) {
          hp.style.backgroundColor = hpBarRed;
        } else if (percentage <= 50) {
          hp.style.backgroundColor = hpBarYellow;
        } else {
          hp.style.backgroundColor = hpBarGreen;
        }
      };

      popup.appendChild(card);
      card.appendChild(sprite);
      sprite.appendChild(memberSprite);
      sprite.appendChild(form);
      card.appendChild(stats);
      stats.appendChild(lineOne);
      lineOne.appendChild(nameDiv);
      lineOne.appendChild(levelDiv);
      levelDiv.appendChild(levelText);
      levelDiv.appendChild(levelNumber);
      stats.appendChild(lineTwo);
      lineTwo.appendChild(types);
      types.appendChild(typeOne);
      types.appendChild(typeTwo);
      stats.appendChild(lineThree);
      lineThree.appendChild(status);
      stats.appendChild(lineFour);
      lineFour.appendChild(hpContainer);
      hpContainer.appendChild(hp);

      setHp(hpPercentage);

I have tried calling setHp() both before/after the appendChild elements, switching the transition property into JS/”.hp-container”, including it in the function itself, and changing CSS from “.hp-bar” to “#cardOneHP, #cardTwoHp, …”.

I suspect that this has something to do with how JS is creating the elements and that’s interfering with a smooth transition, but I am not sure how to solve.

While using Extent Reports in Katalon, I noticed that I cannot continue a test after a failure. As in, after defining that something is a failure with test.fail, it will not continue to the rest of the tests in my code. I currently have 6 tests set up per test case.

Here’s the relevant code (the ellipses are file paths and unrelated info):

switch (query) {
    Case 'Y':
        def ret2 = WebUI.getAttribute(findTestObject('...'), '...')
        def som = ret2.contains('...')
        println som

        if (som == true) {
            test.pass('...')} 
                else {
            String base64Code = CustomKeywords.'(...).screenshot.takeScreenshotBase64'()    
    test.fail(MediaEntityBuilder.createScreenCaptureFromBase64String(base64Code).build())
.info('...')}

break
    Case 'N':
        def ret3 = WebUI.getAttribute(findTestObject('...']), 'class')
        def som3 = ret3.contains('column-checkbox-disabled')
        print som3

        if (som3 == true) {
            test.pass('...')} 
                else {
                String base64Code = CustomKeywords.'(...).screenshot.takeScreenshotBase64'()        
    test.fail(MediaEntityBuilder.createScreenCaptureFromBase64String(base64Code).build()) .info('...')}

break

}

This is then repeated 5 more times for each permission I want to test. This is all wrapped in a try block, wrapped in a for loop. The extent.flush is the last line of code (outside of both).

I want to manage a modal pop up on page load using a <dialog> tag and the showModal() method. But I can’t figure out the right & simple way to do it…
After hours of forum research, I finally sorted out a script to open it. But now I’m stuck when trying to close it. I know i’m missing something probably very simple, but I’m a pure amateur coder – and not a very good one: any help would be so appreciated!!

My HTML element is pretty basic :

<dialog id="myDialog">
    <p>Message</p>
    <button id="btnClose">OK</button>
</dialog>

Then there’s my current script:

<script type="text/javascript">
    function openModal() { 
          document.getElementById("myDialog").showModal(); 
    } 

    function closeModal() { 
          document.getElementById("myDialog").close(); 
    }
 
    window.onload = function() {
           openModal();
    };

    document.getElementById("btnClose").addEventListener("click", closeModal);

</script>

Problem seems to be on the last line: I keep having the error “Cannot read properties of null (reading ‘addEventListener’)”.

I found a workaround and manage to close the modal if I call the closeModal() function directy from the button tag:

<button id="btnClose" onclick="closeModal()">OK</button>

But I really don’t understand why this works and not when I try to listen to the button click in the script ?
Thanks a lot for your help 🙂

i try to run npx verify-imports
And i have got error:
Missing Dependencies

all missing dependencies are from @shared folder. This folder just and aliase to ./shared/ where I have got my components

So for all imports like

import { SomeComponent } from "@shared/somponents/somecomponent"

it returns an error missing dependencies

Build and app running correctly
I have a problem only with this verify-imports

I tried

npx verify-imports --ignore "/^@shared/"
npx verify-imports --ignore="/^@shared/"
npx verify-imports --ignore "@shared/"
npx verify-imports --ignore /^@shared/
npx verify-imports --ignore "@shared/*"

and many other combinations

could you help me please?

In my code made it with Node js

const executeSwap = async (quote, telegramId) => {
    try {
        logger.info('Starting executeSwap function');

        const wallet = await getWallet(telegramId);
        const connection = getConnection();

        if (!wallet || !connection) {
            throw new Error('Wallet or connection not initialized');
        }

        // Fetch the latest blockhash
        logger.info('Fetching latest blockhash');
        const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('finalized');

        // Prepare swap request data
        const swapRequestData = {
            quoteResponse: quote,
            userPublicKey: wallet.publicKey.toString(),
            wrapUnwrapSOL: true,
            computeUnitPriceMicroLamports: 3000000, // Adjust based on priority
            computeUnitsLimit: 2368431, // Adjust based on priority
            slippageBps: 50
        };

        const response = await axios.post(`${JUPITER_API_ENDPOINT}/swap`, swapRequestData);

        const swapTransactionBuf = Buffer.from(response.data.swapTransaction, 'base64');
        const transaction = VersionedTransaction.deserialize(swapTransactionBuf);

        // Assign the latest blockhash
        transaction.recentBlockhash = blockhash;

        // Sign the transaction
        transaction.sign([wallet]);
;
        const rawTransaction = transaction.serialize();
        const txid = await connection.sendRawTransaction(rawTransaction, {
            skipPreflight: false,
            preflightCommitment: 'finalized',
            maxRetries: 3,
        });

        logger.info(`Transaction sent with ID: ${txid}`);

        // Poll for confirmation
        logger.info('Polling for transaction confirmation');
        const confirmation = await pollTransactionConfirmation(connection, txid, 60 * 1000); // 60 seconds timeout

        if (confirmation.value.err) {
            logger.error(`Transaction failed: ${confirmation.value.err}`);
            throw new Error(`Transaction failed: ${confirmation.value.err}`);
        }

        logger.info('Transaction confirmed successfully');

        return {
            success: true,
            txid,
            explorerUrl: `${SOLANA_EXPLORER}/${txid}`
        };

    } catch (error) {
        logger.error(`Swap execution error: ${error.message}`);

        if (error.message.includes('insufficient lamports') || error.message.includes('Insufficient SOL')) {
            throw new Error('Insufficient SOL balance for transaction fees');
        } else if (error.message.includes('block height exceeded') || error.message.includes('Signature')) {
            throw new Error('Transaction signature expired. Please try again.');
        }

        throw error;
    }
};


const pollTransactionConfirmation = async (connection, txid, timeout) => {
    const startTime = Date.now();
    const interval = 5000; // 2 seconds
    while (Date.now() - startTime < timeout) {
        const confirmation = await connection.confirmTransaction(txid, 'finalized');

        if (confirmation.value || confirmation) {
            return confirmation;
        }

        await new Promise(resolve => setTimeout(resolve, interval));
    }

    throw new Error('Transaction confirmation timeout');
};

I keep getting this errors

2024-11-25 11:40:46 [ERROR]: Swap execution error: Transaction was not confirmed in 60.00 seconds. It is unknown if it succeeded or failed. Check signature 4YkduMMzW4dYf3XqLpvGznqHfiKqGUznfSivEyRVJXByXgDNYS3crD7Gvrtryz1p1CjbVK51h8gMjUfmJaHRwucQ using the Solana Explorer or CLI tools.
2024-11-25 11:40:46 [ERROR]: Swap execution error: Transaction was not confirmed in 60.00 seconds. It is unknown if it succeeded or failed. Check signature 4YkduMMzW4dYf3XqLpvGznqHfiKqGUznfSivEyRVJXByXgDNYS3crD7Gvrtryz1p1CjbVK51h8gMjUfmJaHRwucQ using the Solana Explorer or CLI tools.

I don’t know how to solve it and prevent it to make the swaps properly

I tried different approaches

but keep giving me those errors, The main problem is That I gt many timeout errors a lot just 1 of 10 Transaction pass the rest fails and the other approach dont work as well, Im using Solana/web3.js, axios and Node js in a Telegram BOT

const { PublicKey, LAMPORTS_PER_SOL, VersionedTransaction, Connection } = require('@solana/web3.js');
const axios = require('axios');

const SOLANA_EXPLORER = 'https://solscan.io/tx';
const JUPITER_API_ENDPOINT = 'https://quote-api.jup.ag/v4/quote'; // Replace with actual Jupiter API endpoint

const executeSwap = async (quote, telegramId) => {
    try {
        logger.info('Starting executeSwap function');

        const wallet = await getWallet(telegramId);
        const connection = getConnection();

        if (!wallet || !connection) {
            throw new Error('Wallet or connection not initialized');
        }

        // Fetch the latest blockhash
        logger.info('Fetching latest blockhash');
        const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('finalized');

        // Prepare swap request data
        const swapRequestData = {
            quoteResponse: quote,
            userPublicKey: wallet.publicKey.toString(),
            wrapUnwrapSOL: true,
            computeUnitPriceMicroLamports: 3000000, // Adjust based on priority
            computeUnitsLimit: 2368431, // Adjust based on priority
            slippageBps: 50
        };

        logger.info('Requesting swap transaction from Jupiter API');
        const response = await axios.post(`${JUPITER_API_ENDPOINT}/swap`, swapRequestData);
        logger.info('Received swap transaction data from Jupiter');

        const swapTransactionBuf = Buffer.from(response.data.swapTransaction, 'base64');
        const transaction = VersionedTransaction.deserialize(swapTransactionBuf);

    
        transaction.recentBlockhash = blockhash;


        logger.info('Signing transaction');
        transaction.sign([wallet]);


        const rawTransaction = transaction.serialize();


        logger.info('Sending raw transaction');
        const txid = await connection.sendRawTransaction(rawTransaction, {
            skipPreflight: false,
            preflightCommitment: 'finalized',
            maxRetries: 3,
        });

        logger.info(`Transaction sent with ID: ${txid}`);

        // Poll for confirmation
        const confirmation = await pollTransactionConfirmation(connection, txid, 60 * 1000); // 60 seconds timeout

        if (confirmation.value.err) {
            throw new Error(`Transaction failed: ${confirmation.value.err}`);
        }

        logger.info('Transaction confirmed successfully');

        return {
            success: true,
            txid,
            explorerUrl: `${SOLANA_EXPLORER}/${txid}`
        };

    } catch (error) {
        logger.error(`Swap execution error: ${error.message}`);

        if (error.message.includes('insufficient lamports') || error.message.includes('Insufficient SOL')) {
            throw new Error('Insufficient SOL balance for transaction fees');
        } else if (error.message.includes('block height exceeded') || error.message.includes('Signature')) {
            throw new Error('Transaction signature expired. Please try again.');
        }

        throw error;
    }
};

const pollTransactionConfirmation = async (connection, txid, timeout) => {
    const startTime = Date.now();
    const interval = 2000; // 2 seconds
    while (Date.now() - startTime < timeout) {
        const status = await connection.getSignatureStatus(txid, {
            searchTransactionHistory: true,
        });

        if (status && status.value) {
            return status;
        }

        await new Promise(resolve => setTimeout(resolve, interval));
    }

    throw new Error('Transaction confirmation timeout');
};

I am trying to figure out the most production-friendly way to set up my directories in a Tailwind and Laravel Mix workflow, and where the index.html should be – namely, I have a src/ and dist/ folder for the dev and production files respectively, however I am not sure whether or not index.html should be at the root of the project, inside of src and copied over to dist, or directly in dist?

I have always put index.html just in the root of the project, but when deploying to GitHub pages, I would have to push my dist/ files so that the stylesheets work correctly – typically I want the dist folder to be included in the .gitignore. Is there a “correct” way to setup a project for the purpose to deploy to GitHub (simple personal projects)

I came across https://www.rouserlab.com/about/ this site caught my attention. I want to replicate the same bubble animation animation. I tried my level best but I can’t replicate it. It does bounces but I can’t break it like water molecules with my code.. Can someone help me how to do it exactly.

This is my piece of code for ref

    const Home = () => {
  return (
    <motion.div
      className="home"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
     
    {/* Interactive Bubble */}
    <motion.div
        className="bubble"
        drag
        dragConstraints={{
          top: -200,
          bottom: 200,
          left: -200,
          right: 200,
        }}
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        whileHover={{ scale: 1.2 }}
        whileTap={{ scale: 0.8 }}
        transition={{ type: "spring", stiffness: 300 }}
      />
    </motion.div>


  );
};           

                                                                                                     


/* Bubble styles */
  .bubble {
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 10%, rgba(0, 149, 255, 0.2) 60%);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(0, 149, 255, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: all 0.3s ease;
  }

  .bubble:active {
    cursor: grabbing;
  }

  /* Burst animation */
  .burst {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 80%);
    box-shadow: none;
  }

I have an application where users can upload Excel files. I am using Javascript to parse those files to generate strings which I then post using XHTTP. In general the solution works well but I am having some issues with the Javascript misinterpreting characters. In the first image below you can see that there is a degrees Celsius synbol Die Temp (ºC) and also a plus/minus symbol. 247 ± 1

Excel Image

However this gets interpreted by the Javascript as Die Temp (ºC) and 247 ± 1. It is putting that weird A symbol before it. Can you please advise how I might fix that.

I want to avoid race conditions when calling a function from a deferred script tag. Notice that the script1 has the defer tag meaning that I want to be fully loaded before any other scripts load. So that the myFunction is always called and only after it is defined in the script1

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <script defer src="script1"></script>
</head>
<body>
    <script type="text/javascript">
       window.onload = function () {
             myFunction()
        }
    </script>
<body>
</html>

I’m still getting the following error Uncaught ReferenceError: myFunction is not defined in some cases. Generally it works but sometimes it doesn’t. My thoughts are that the defer tag is not working as expected but I’m not sure about it.

i have this situation inside an HTML website page

<header id="qodef-page-header">
<div id="qodef-page-header-inner"><a itemprop="url" class="qodef-header-logo-link qodef-height--set"
        href="https://www.boteroom.com/newStagingSite/" style="height:36px" rel="home"> <img loading="lazy"
            width="466" height="466"
            src="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp"
            class="qodef-header-logo-image qodef--main" alt="logo main" itemprop="image"
            srcset="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp 466w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-300x300.webp 300w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-150x150.webp 150w"
            sizes="(max-width: 466px) 100vw, 466px"> <img loading="lazy" width="466" height="466"
            src="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp"
            class="qodef-header-logo-image qodef--dark" alt="logo dark" itemprop="image"
            srcset="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp 466w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-300x300.webp 300w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-150x150.webp 150w"
            sizes="(max-width: 466px) 100vw, 466px"> <img loading="lazy" width="466" height="466"
            src="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp"
            class="qodef-header-logo-image qodef--light" alt="logo light" itemprop="image"
            srcset="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais.webp 466w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-300x300.webp 300w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/11/logo-round-boteroom-relais-150x150.webp 150w"
            sizes="(max-width: 466px) 100vw, 466px"></a>
    <nav class="qodef-header-navigation" role="navigation" aria-label="Top Menu">
        <ul id="menu-relais-menu-1" class="menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6034"><a
                    href="https://www.boteroom.com/newStagingSite/bb-home-relais/"><span
                        class="qodef-menu-item-text">Home</span></a></li>
            <li
                class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6030 current_page_item menu-item-6033">
                <a href="https://www.boteroom.com/newStagingSite/camere-relais/"><span
                        class="qodef-menu-item-text">Camere Relais</span></a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6177"><a
                    href="https://www.boteroom.com/newStagingSite/chi-siamo-relais/"><span
                        class="qodef-menu-item-text">Chi Siamo Relais</span></a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6176"><a
                    href="https://www.boteroom.com/newStagingSite/room-gallery-relais/"><span
                        class="qodef-menu-item-text">Room Gallery Relais</span></a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6175"><a
                    href="https://www.boteroom.com/newStagingSite/contatti-relais/"><span
                        class="qodef-menu-item-text">Contatti Relais</span></a></li>
        </ul>
    </nav>
    <div class="qodef-widget-holder qodef--one">
        <div class="widget widget_alloggio_core_weather" data-area="custom-header-2">
            <div class="qodef-weather-widget qodef-m qodef-layout--simple qodef-show--1">
                <div class="qodef-m-inner"> <span class="qodef-m-weather-icon qodef--clear"></span>
                    <div class="qodef-m-temperature">15<sup>°</sup>C</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="qodef-header-sticky">
    <div class="qodef-header-sticky-inner ">
        <a itemprop="url" class="qodef-header-logo-link qodef-height--set"
            href="https://www.boteroom.com/newStagingSite/" style="height:36px" rel="home">
            <img loading="lazy" width="1600" height="1600"
                src="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2.webp"
                class="qodef-header-logo-image qodef--sticky" alt="logo sticky" itemprop="image"
                srcset="https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2.webp 1600w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-300x300.webp 300w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-1024x1024.webp 1024w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-150x150.webp 150w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-768x768.webp 768w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-1536x1536.webp 1536w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-650x650.webp 650w, https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2-1300x1300.webp 1300w"
                sizes="(max-width: 1600px) 100vw, 1600px"></a>
        <nav class="qodef-header-navigation" role="navigation" aria-label="Top Menu">
            <ul id="menu-relais-menu-2" class="menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6034"><a
                        href="https://www.boteroom.com/newStagingSite/bb-home-relais/"><span
                            class="qodef-menu-item-text">Home</span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6033"><a
                        href="https://www.boteroom.com/newStagingSite/camere-relais/"><span
                            class="qodef-menu-item-text">Camere Relais</span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6177"><a
                        href="https://www.boteroom.com/newStagingSite/chi-siamo-relais/"><span
                            class="qodef-menu-item-text">Chi Siamo Relais</span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6176"><a
                        href="https://www.boteroom.com/newStagingSite/room-gallery-relais/"><span
                            class="qodef-menu-item-text">Room Gallery Relais</span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6175"><a
                        href="https://www.boteroom.com/newStagingSite/contatti-relais/"><span
                            class="qodef-menu-item-text">Contatti Relais</span></a></li>
            </ul>
        </nav>
        <div class="qodef-widget-holder qodef--one">
            <div id="alloggio_core_weather-5" class="widget widget_alloggio_core_weather qodef-sticky-right">
                <div class="qodef-weather-widget qodef-m qodef-layout--simple qodef-show--1">
                    <div class="qodef-m-inner">
                        <span class="qodef-m-weather-icon qodef--clouds"></span>
                        <div class="qodef-m-temperature">12<sup>°</sup>C</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

now i have to replace all occurrences of the logo inside the div “qodef-header-sticky-inner” with this url “https://www.boteroom.com/newStagingSite/wp-content/uploads/2024/10/logo-round-cassino-2.webp” (even those with suffix like “1600w”) with another image link. I can also substitute the entire child element with the correct one pick from another page of the website. How can i do this via javascript? i have to trigger the script once the DOM is fully loaded.

Thanks in advance for the support

Has anyone had any luck with scaling objects after initial rendering using Threebox / MapboxGl?

Here is my code for adding the models to my map:

initialise3d() {
        const map = this;
        const gl = map.painter.context.gl;

        (window as any).tb = new Threebox(this, gl, { defaultLights: true });

        const tb = (window as any)['tb'];

        this.addLayer({
            id: 'custom_layer',
            type: 'custom',
            renderingMode: '3d',
            onAdd: () => {

                const options = {
                    obj: '/scene.gltf',
                    type: 'gltf',
                    units: 'scene',
                    rotation: { x: 0, y: 0, z: 180 },
                    scale: 1,
                    anchor: "center"
                }

                this.allTeamsPositions.forEach((teamPositions: any) => {
                    const firstMoment = teamPositions.moments[0];
                    const coords = [firstMoment.lon, firstMoment.lat];

                    tb.loadObj(options,  (model: any) => {
                        const carModel = model.setCoords(coords);

                        carModel.setRotation({ z: -firstMoment.bearing })

                        tb.add(carModel);
                        this.models.push(carModel);
                    });
                });

            },
            render: function () {
                tb.update();
            }
        });
    }

Ive tried just scaling them up using a function like so:

testFun() {
       for (let index = 0; index < this.models.length; index++) {
            this.models[index].setObjectScale(2);
            this.models[index].setScale(2);
            this.models[index].scale.set(2, 2, 2);
        
        }
        tb.update();
    }

setScale and setObjectScale don’t work, .scale.set does scale it, but only after I move the map, and then on zoom change the scale resets.

If anyone has gotten scaling working please let me know how!

Thankyou