Category: javascript

How to trigger a .glb animation (animation mixer) at the same time as an A-frame animation property animation?

I have three animations I want to play:

• Walking animation that is baked into the .glb model. I play it using A-frame’s animation mixer.
• Animate position and scale from an event called walk-in. They’re both properties of the a-entity.

Is there a way where I can play both simultaneously? Or will I need to bake in an animation that does all three at once?

Here is the simplified entity code:

<a-entity
      gltf-model="#peacock-glb"
      position="5 0.17 -5"
      scale="0.01 0.01 0.01"
      id="peacock-entity"
      animation__position="property: position; to: 0.2 0.6 4.5; delay:1500; dur: 4500; startEvents: walk-in"
      animation__scale="property: scale; to: 0.05 0.05 0.05; delay:1500; dur: 4500; startEvents: walk-in">
</a-entity>

Here is the javascript code where I try to trigger the animation property and the animation mixer animation called Walking. It seems to play Walking first, then plays the two animation properties for the walk-in event.

this.el.emit('walk-in', null, false)
this.el.setAttribute('animation-mixer', 'clip:Walking')

I create a GroundPolylinePrimitive with the material type PolylineDash. When I move the camera, the lines start to move. How can I make my polyline static?

My code:

let countyBorderPrimitive = new GroundPolylinePrimitive({
                    geometryInstances: new GeometryInstance({
                        geometry: new GroundPolylineGeometry({
                            positions: Cartesian3.fromDegreesArray(newBorPos),
                            width: 3,
                        })
                    }),
                    show: stores.groundStore.visibleStatus,
                    appearance: new PolylineMaterialAppearance({
                        material: Material.fromType('PolylineDash', {
                            color: Color.RED,
                            dashLength: 50,
                            dashPattern: 255
                        })
                    })
                });
                cesium.scene.groundPrimitives.add(countyBorderPrimitive)

Search properties, create custom shader

PS C:UsersaxxxAxabot_init> npm install

up to date, audited 107 packages in 7s

7 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (1 moderate, 5 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
PS C:UsersaxxxAxabot_init> npm start

> [email protected] start
> node _install.js


[1] New Server Install ( To setup newly bought servers )
[2] Bot Only (Fresh install of Axabot [FILES ONLY])
[0] CANCEL

Please choose install type? [1, 2, 0]: 1
* Ip Address : 51.xx.xxx.xx
* Username : qweasd
* Password : **********
Connected via SSH..
Error uploading config files

i tired to install the web Application few time but get that message (Error uploading config files)

IP, username, password is correct double check them.

and im very new to javascript, npm my knowloage is limited.

i get other error before someone fixed that for me from here:Link can check old error in case if his slove make this new error

    import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(8, 0.5, 4);

// Correcting texture loading
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('http://localhost:3000/wood-texture-vector-eps10-illustration-600nw-206847232.webp');
const material = new THREE.MeshBasicMaterial({ map: texture });

const cube = new THREE.Mesh(geometry, material);


const legGeometry = new THREE.BoxGeometry(0.4, 4, 0.4);

const cubeLeg = new THREE.Mesh(legGeometry, material);



scene.add(cube);
scene.add(cubeLeg);
cubeLeg.position.x=12;
scene.add(cubeLeg);
cubeLeg.position.x=-12;
scene.add(cubeLeg);
cubeLeg.position.x=6;
scene.add(cubeLeg);
cubeLeg.position.x=-6;

camera.position.x = 2;
camera.position.y = 4;
camera.position.z = 13;

function animate() {
    requestAnimationFrame(animate);

     //cube.rotation.x += 0.01;
     //cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

The four legs should be part of table, and I think should not be added to scene like its added.

Also what is good way to create new instances of legs and attach them. and the attachment should be such that the back side legs should look smaller than front. Current I am seeing only single leg, instead of 4.

If you run this code in your local you will know what I am asking.

I am working with a map application using OpenLayers and I’ve encountered an issue with moving points inside a polygon using the Translate Interaction.

I have an array of points and a polygon, all represented as Features on the map. My goal is to have all the points inside the polygon move the same distance as the polygon when it is dragged. Here is the code snippet I am using to attempt this:

if (feature.getProperties().gisObjectMetaDto.objTypeCd === '04') {
    var translateInteraction = new Translate({ features: new Collection([feature]) });
    //find point constraints with polygon
    const objCd = feature.getProperties().gisObjectMetaDto.objCd;
    const objectConstraint = globalContext['objInstRel'].filter((o) => o.trgtObjCd === objCd && o.gisObjectMetaDto.useYn === 'Y').map((item) => item.gisObjectMetaDto.objCd);

    let ListPoints = [];
    FeatureApis.findPointInsidePolygon(feature.getProperties().polygonObjectDto.objId, objectConstraint).then((res) => {
        res.forEach((o) => {
            if (o.geometry != null) {
                o.geometry = JSON.parse(o.geometry);
                const feature = new Feature({
                    geometry: new Point(o.geometry.coordinates),
                    properties: o.properties,
                });
                feature.setId(o.id);
                const layer = getLayerByName(o.properties.gisObjectMetaDto.objCd);
                if (layer) {
                    layer.getSource().addFeature(feature);
                    feature.set("layer", layer);
                    ListPoints.push(feature);
                }
            }
        });
    });

    translateInteraction.on('translatestart', function (event) {
        ListPoints.forEach(function (pointFeature) {
            var originalCoord = pointFeature.getGeometry().getCoordinates();
            pointFeature.set('originalCoord', originalCoord);
        });
    });

    translateInteraction.on('translating', function (event) {
        var deltaX = event.coordinate[0] - event.startCoordinate[0];
        var deltaY = event.coordinate[1] - event.startCoordinate[1];
        ListPoints.forEach(function (pointFeature) {
            var originalCoord = pointFeature.get('originalCoord');
            var newCoord = [originalCoord[0] + deltaX, originalCoord[1] + deltaY];
            pointFeature.getGeometry().setCoordinates(newCoord);
            console.log(pointFeature.getGeometry().flatCoordinates, 'newCoord');
        });
    });

    translateInteraction.on('translateend', function (event) {
        ListPoints.forEach(function (pointFeature) {
            pointFeature.unset('originalCoord');
        });
    });

    globalContext['map'].addInteraction(translateInteraction);
}

The issue I am facing is that when I perform the drag action on the polygon, the points inside do not move accordingly. I’ve checked to ensure that all points are accessible and there are no errors logged in the console.
Would anyone be able to provide guidance or suggestions on how to resolve this issue? Thank you!

I am implementing the Sign In With Google feature on a webpage, following the guidance on this page: https://developers.google.com/identity/gsi/web/reference/js-reference.

I wanted to make it so that when our custom-styled button is pressed, the Sign In With Google popup would appear. Thus, I’ve made it so that google.accounts.id.prompt is called upon button click as follows:

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "XXXXXXXXX.apps.googleusercontent.com",
          callback: handleCredentialResponse
        });
        document.getElementById("buttonDiv").onclick = function() {
          google.accounts.id.prompt();
        };
      }
    </script>
    <div id="buttonDiv">test</div>
  </body>
</html>

Recently, I’ve noticed that this functionality has stopped working. When calling google.accounts.id.prompt, the following error message is outputted to the Dev Console, and the login popup does not appear:

[GSI_LOGGER]: FedCM get() rejects with AbortError: Request has been aborted.

I noticed this error on April 7 2024. I do not know when it started occurring, but as of March 20 2024, it was working without issues. Moreover, this issue occurs on Google Chrome, but not on Firefox.

Could there be any potential causes and solutions for this issue?

I got a component for a datatable in react made with Tanstack Table. this is the code.

import React from "react";
import { useReactTable } from "@tanstack/react-table";
import data from "../../Utils/MOCK_DATA.json";

const SimpleTable = () => {
  const columns = [
    {
      Header: "Id",
      accessorKey: "id",
    },
    {
      Header: "Amount",
      accessorKey: "amount",
    },
    {
      Header: "Currency",
      accessorKey: "currency",
    },
    {
      Header: "Date",
      accessorKey: "date",
    },
  ];

  const table = useReactTable({ data, columns });

  return (
    <>
      <table>
        <thead>
          {
            table.getHeaderGroups().map(headerGroup => (
              <tr key={headerGroup.id} className="text-cyan-300">
                {
                  headerGroup.headers.map(header => (
                    <th key={header.id}>
                      {header.column.columnDef.header}
                    </th>
                    ))
                }
            </tr>
            ))
          }
        </thead>
        <tbody>
          <tr>
            <td>1</td>
          </tr>
        </tbody>
        <tfoot></tfoot>
      </table>
    </>
  );
};
export default SimpleTable;

when i start the server and call the component i get this error

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
at th
at tr
at thead
at table
at SimpleTable (http://localhost:5173/src/components/Tables/SimpleTable.jsx?t=1712628648080:34:19)
at App

I created multilevel dropdown in bootstrap 5 but when i hover on parent dropdown it automatically child dropdown.

<li class="nav-item dropdown"><a class="nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#" style="color: rgb(255,255,255);font-size: 0.875rem;font-weight: bold;font-family: Roboto, sans-serif;text-align: center;">Canvas &amp;<br />Surfaces</a>
    <div class="dropdown-menu" style="border-radius: 0px;margin: 7px 0px 0px;">
        <div class="nav-item dropend"><a class="dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="#">Dropdown </a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
        </div><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a>
    </div>
</li>

CSS

.dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}

.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}

@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
}

@media screen and (min-width: 769px) {
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}

I want to create a multilevel dropdown which opens on hover.

    'use strict';
        let newGame = document.querySelector('.btn--new');
        let Score = document.querySelectorAll('.score');
        let currentScore = document.querySelectorAll('.current-score');

        function initializeGame() {
          for (let i = 0; i < Score.length; i++) {
             Score[i].textContent = '0';
             console.log(Score[i].textContent);
      }
    }

    newGame.addEventListener('click', initializeGame);

    <html>
      <body>
           <h2 class="name" id="name--0">Player 1</h2>
            <p class="score" id="score--0">43</p>
            <h2 class="name" id="name--1">Player 2</h2>
            <p class="score" id="score--1">24</p>
          <button class="btn btn--new">New game</button>
        <script src="script.js"></script>
      </body>
    </html>

// when i press the new game button it does not print the context of the paragraph with score class in it

I am currently doing a web design challenge. I am using REACT and Tailwind CSS for styling.

enter image description here

I am basically making a responsive page, the image shows the layout of how the final product should look like.

So far this is what i have, the large screen layout I was able to work but I have problems with the smaller/medium screen sizes.

This is what I have right now for the medium screen which is wrong

and here is my code(this is the page file, i have split up the components):

Anyone have any ideas? I have tried using breakpoints but its messing up.

For example, I have an iframe in which id="myFrame" and src="https://google.com".
How can I remove/hide the google logo image using javascript or jquery. The id of the Google logo image is "hplogo". I also don’t know if this is possible or not.

I used this code to try to delete the logo image, however did this didn’t work:

$("#myFrame").contents().find($("#hplogo")).remove()

How can I fix this?

This is my method, it was returning the same string as the input.
for ex: toggleEveryCharCases(‘character’) => ‘character’

Please answer me guys…

export function toggleEveryCharCases(str: string): string {
  const strArr = str.split('');

  for (let i = 0; i < strArr.length; i++) {
    if (strArr[i] >= 'A' && strArr[i] <= 'Z') strArr[i] = strArr[i].toLowerCase();
    else if (strArr[i] >= 'a' && strArr[i] <= 'z') strArr[i] = strArr[i].toUpperCase();
  }

  return strArr.join('');
}

I have tried my best. I want to get the char case togggled string

I have 2 css rule sets applying to a cell of a table. I thought one set of rules would override the other, but it is picking and choosing some from each. the rules contradict each other.

the html is generated by javascript

const toDoArray = {
  test: true,
}

var toDoElements = "<table style="width: 100%;">";

for (var k in toDoArray) { // Loop through the object
  var trS = "";
  if (toDoArray[k]) {
    trS = `class="taskChecked"`
  }
  toDoElements +=
    `<tr ${trS} id="${k}-tr">
      <td onclick="checkOffToDo('${k}')" id = "${k}-td" border=none > ${k}</td>
      <td onclick="removeToDo('${k}')" class="toDoDeleteButton">&times;</td>     
    </tr>`
}

toDoElements += "</table>";

document.getElementById("toDoList").innerHTML = toDoElements;

#toDoList { width: 200px; font-size: 3rem; }

.taskChecked {
  text-decoration: line-through;
  text-decoration-color: violet;
  color: purple;
  background: orange;
}

.toDoDeleteButton {
  border: none;
  width: 8%;
  height: auto;
  text-decoration: none !important;
  text-decoration-color: aqua;
  color: yellow;
  background-color: blue;
}

<div id="toDoList"></div>

I found this StackOverflow Answer describing precedence (https://stackoverflow.com/a/25105841), but this doesn’t seem follow it.
If it followed all one, or all the other, I thought I could get it to work right, but now I’m just really confused.

My chief aim is to not give it a line through. the rest of the colors and stuff are me testing options trying to figure out what’s going on, and why its not working.

This is in Chrome.

I’m encountering a “missing ) after argument list” error in my JavaScript code when trying to use the fetch() function to retrieve JSON data. Despite thorough review, I can’t pinpoint the source of the issue. Here’s the relevant code snippet:

fetch(myString)
  .then(response => response.json())
  .then(data => {
    initializeChat(data.chatMessages);
  })
  .catch(error => console.error("Failed to load chat messages:", error));

The default behavior for selectizeInput allows the user to click on a choice and delete it by hitting the Backspace or Delete key.

Is there any way of disabling that behavior?.

I have an app that allows users to add and remove groupings from the selectizeInput via ‘add’ and ‘remove’ action buttons. I don’t want users to remove choices with the selectizeInput widget but rather by using the ‘remove’ action button.