Category: javascript

I’ve tried following several examples I found, but haven’t been able to get this to work.

The zillow menu in the map view with listings on the sidebar bar auto-expands on hover, which is annoying when I move my mouse too far accidentally past the search bar, and then have to move it away to make the expanded menu disappear.

I’m trying the following in my tampermonkey script, but it won’t work:

// ==UserScript==
// @name         Hide expanding menu bar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @description  Hides zillow auto-expanding menu
// @author       mikmak
// @match        https://www.zillow.com/*
// @grant        GM_addStyle
// ==/UserScript==

const $ = window.$;
function hideStuff() {
  $('.data-zg-section="main"').removeClass('.data-zg-section="main"');
  $('.data-zg-section="main"').hide();
}

The menu bar I am referring to is the “Buy Rent Sell Get a mortgage Find an agent” menu above the search box at the top left side.

I’m trying to make an application. The frontend, through javascript, would request the user’s fingerprint and this would have to connect to the file.cpp that I use on the esp32s with the fingerprint reader and then send it to firebase. Is there a way I can apply this? I researched it, but I didn’t get satisfactory results.

Complete the tasks to qualify for potential GPU Network airdrops and rewards . Follow step-by-step instructions and track task updates and statuses to become one of the potential recipients of the GPU Network Airdrop.

Road to TGE Campign
Completed
GPU.NET has launched the Road to TGE campaign. We can perform tasks and earn GXP (points). These points will be converted into project tokens in the future. More points – more rewards.

1. Go to the site and connect your wallet:

I have this array:

fullArray = [{color:'cars'},{make:'cars'},{weight:'people'},{height:'people'}]

I want this array;

justCars = [{color:'cars'},{make:'cars'}]

I have tried this code:

justCars = Object.fromEntries ( Object.entries ( fullArray.filter ( ([key,value]) => value === 'cars' ) );

The resulting array is empty.

How can I filter the array to keep those elements where the value = 'cars'?

At this point I’m just at a loss.

I’m a college student, this is for a school finals project.

I’m trying to make a loading screen where every step (fetching a table) has a message like “Fetching students…” then “Fetching administrators…” etc.

I’ve tried everything ChatGPT has told me to try, at this point it’s just making me try the same thing in a different style.

I’m not that knowledgeable about promises and DOMS and async/sync..
But here’s what I have learned so far about this, please correct me if I’m wrong:

1. It does all the fetching parts before calculating the changes on the message at the end (or something like that), so it’s more like fetch – fetch – change message – change message, rather than change message – fetch – change message – fetch.
2. That’s why you have to find a way to force Vue to re-render the DOM after changing the message, every time.

I’ve tried:

• await this.$nextTick() between changing the message and fetching next table
• await new Promise(r => requestAnimationFrame(r))
• setTimeout() for changing message
• setTimeout() for fetching table
• any combination of these

But still, it’s not working as intended, what happens is either it goes blank then that’s it, or it flashes all the messages right at the end.

Here is the code (before I tried anything, to keep it simple):

          this.ShowAdminLogin = false;
          this.ShowAdminBoot = true;
          
          this.adminBootMessage = "Fetching admin controls...";
          await this.getAdminControls();
          
          this.adminBootMessage = "Fetching document requests...";
          await this.getAllRequest();
          await this.getAllRequestHistory();
          
          this.adminBootMessage = "Fetching admission forms...";
          await this.getAllAdmission();
          await this.getAllAdmissionHistory();
          
          this.adminBootMessage = "Fetching student users...";
          await this.getAllStudent();
          
          this.adminBootMessage = "Fetching administrators...";
          await this.getAllAdmin();
          
          this.adminBootMessage = "Fetching audit logs...";
          await this.getAllAuditLogAdmission();
          await this.getAllAuditLogRequest();
          
          this.login = true;
          this.loginMessage = data.message;
          this.adminDetails = data.data;
          this.verified = true;
          this.AdminID = data.data.admin_id;
          this.resetScreens();
          this.intervalUpdate();
          
          this.adminBootMessage = "Welcome, administrator!";
          this.loadingScreenTimeout();
          
          this.ShowAdminPanel = true;
          this.ShowDocumentRequests = true;

Can somebody just tell me how it should be so it works as intended? I just really need it to work asap. Thank you

NOTE: I’m using the CDN version of Vue

i was trying to make the image crop modal when you change your pfp in social midea sites

I have an absolutely positioned image with a circular crop area centered within it. you can currently drag the image, but I need to constrain this movement. The goal is to ensure the crop circle always remains fully inside the image boundaries. However, my current clamping code has errors, and the behavior varies unpredictably depending on the image dimensions, as shown in the attached image.

here is some of relevant part of my code

 const handleCropPreviewDrag = (e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    const img = pfpPreviewImageRef.current;
    if (!img) return;

    // Get the bounding rect of the image (after zoom/scale)
    const rect = img.getBoundingClientRect();
    // Store mouse offset inside the image
    dragOffsetRef.current = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    };
    dragStartRef.current = {
      left: parseFloat(img.style.left) || 0,
      top: parseFloat(img.style.top) || 0,
    };

    const container = img.parentElement!;
    const containerRect = container.getBoundingClientRect();
    const cropSize = cropInducatorSize;
    const crop = cropIndicatorRef.current;

    function onMouseMove(ev: MouseEvent) {
      if (!img || !crop) return;
    
      // Get current image and container sizes
      const imgRect = img.getBoundingClientRect();
      const container = img.parentElement!;
      const containerRect = container.getBoundingClientRect();
      const cropSize = cropInducatorSize;
    
      let newLeft = dragStartRef.current.left + (ev.clientX - e.clientX);
      let newTop = dragStartRef.current.top + (ev.clientY - e.clientY);
    
      const minLeft = containerRect.width / 2 + cropSize / 2 - imgRect.width;
      const maxLeft = containerRect.width / 2 - cropSize / 2;
    
      newLeft = Math.min(maxLeft, Math.max(minLeft, newLeft));
    
      // Same for top
      const minTop = containerRect.height / 2 + cropSize / 2 - imgRect.height;
      const maxTop = containerRect.height / 2 - cropSize / 2;
    
      newTop = Math.min(maxTop, Math.max(minTop, newTop));
    
      img.style.left = `${newLeft}px`;
      img.style.top = `${newTop}px`;
    }

    function onMouseUp() {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    }

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  }

<div  className="w-full relative max-h-[85%] flex flex-grow p-0 bg-black border border-border rounded-xl overflow-hidden">
                      
                      <Image
                        src={pendingPreviewUrl || user.image || "/user_placeholder.jpg"}
                        alt="Profile crop preview"
                        width={500}
                        height={500}
                        className="object-contain  rounded-xl w-fit top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 absolute select-none p-1 border border-border "
                        sizes="180px"
                        onLoad={()=>{
                          setImageTrueHeight(getContainedSize(pfpPreviewImageRef.current!)[1]!);
                          setImageTrueWidth(getContainedSize(pfpPreviewImageRef.current!)[0]!);
                        }}
                        style={{
                          maxHeight: "100%",
                          position: "absolute",
                        }}
                        ref={pfpPreviewImageRef}
                        onMouseDown={handleCropPreviewDrag}
                        onDragStart={e => e.preventDefault()}
                      >
                      </Image>
                      <div
                        ref={cropIndicatorRef}
                        className="crop-inducator absolute cursor-move -translate-x-1/2 -translate-y-1/2 bg-white/20 top-1/2 left-1/2 size-[200px] rounded-full outline outline-black border-2 border-white pointer-events-none"
                        style={{ width: cropInducatorSize, height: cropInducatorSize }}
                        
                      />
                      </div>

there is also a zoom slider and it affects the image by setting style.scale css property and i want to account for that too when calculating bounds

I want to create a simple web page that works the same as the Google Keep checkbox list function.

To start:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div>Task 1</div>
<div>Task 2</div>
<div>Task 3</div>
<div>Task 4</div>
<div>Task 5</div>

</body>
</html> 

So, when clicking on Task 1, it should send the div to the bottom. Then, we clicking on Task 2 it should send that div to the bottom under Task 1.

Output:

Task 3
Task 4
Task 5

Checked items:

Task 1
Task 2

Can someone help me with the javascript? How to send a div to the bottom when you click on it.

i have this function defined in my javascirpt code:
function log(text) { printNative(text); }
and when i pass some string argument to it like: log("test") i get error text has not been initialized.
i dont know how do i fix it, maybe someone can fix it

i tried doing:
function log(text="Error") { printNative(text); }
still same error,

i tried doing:
function log(text) { printNative("test"); }
no error,

i tried doing:
function log(text) { if(text == null || text == undefined){printNative("Error")} printNative(text); }
still same error at if, exactly where first usage of text varible is.

printNative works perfectly, but there is some problem with passing arguments

With a popular browser (Chromium-based browsers, Firefox, Safari) on mobile platforms (Android, iOS), a web page can capture a video using the device’s camera with the following markup:

<input type="file" accept="video/*" capture="environment"/>

This produces a File object that can be used in javascript as needed. The video file is placed in a platform specific location that is essentially accessible to all apps running on the device instead of being private to the web page origin. Also, if the user refreshes the page, the File object is no longer accessible in javascript without the user re-picking the file with some manual file selection action.

Is there a way to specify where <input> writes the captured video file? Ideally for my use case I’d like to specify the directory returned by navigator.storage.getDirectory(), that way my app can call dir.getFileHandle() to re-open the file as needed.

I have thought of a couple of workarounds but they are sub-optimal, so I’m looking to see if there is a better solution or if I’ve just missed something about <input>. Those workarounds are:

1. After getting the File object from the <input> copy its contents to a new file under navigator.storage.getDirectory(). However, this doubles the storage usage on the device, clutters the user’s platform specific video folder with these videos, and requires Safari-specific special code for copying.

2. Use navigator.mediaDevices.getUserMedia(), MediaRecorder, and the File System API to write the captured video file under navigator.storage.getDirectory(). However, this requires a lot more overall code as well as extra Safari-specific special code.

Any suggestions appreciated. Thanks.

I have a hidden div with some checkboxes below it. The first checkbox checks and unchecks all the others and makes the div visible. When all other checkboxes are checked the first one should be checked. It should also be unchecked when at least one other checkbox is unchecked and the div remains visible. When at least one checkbox is checked the div is visible.

I am struggling to implement this. Here is my code so far:

const checkBoxes = document.querySelectorAll(".check-boxes");
const checkAll = document.querySelector("#checkAll");
const myDiv = document.querySelector("#myDiv");

for (let i = 0; i < checkBoxes.length; i++) {
  checkAll.addEventListener("change", () => {
    checkBoxes[i].checked = checkAll.checked;
    if (checkAll.checked) {
      myDiv.classList.remove("hide");
    } else {
      myDiv.classList.add("hide");
    }
  });
  checkBoxes[i].addEventListener("change", () => {
    if (checkBoxes[i].checked) {
      myDiv.classList.remove("hide");
    } else {
      myDiv.classList.add("hide");
      checkAll.checked = false;
    }
  });
}

body {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #3fe1ff, #0047bf, #1b0055);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mydiv {
  width: 100%;
  height: 100px;
  background-color: #3fe1ff;
  margin-bottom: 2em;
}

.main-checkbox {
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid white;
}

.hide {
  visibility: hidden;
}

<div class="mydiv hide" id="myDiv"></div>
<div class="main-checkbox">
  <input type="checkbox" name="" id="checkAll" />
</div>
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />

i had created a script in which first it opens a psd file and then open a image file and then place it in the psd file at certain direction and place but when i run script it shows this error the requested action requires that the target document is the frontmost document so please give me solution for this error what to edit or what to change in this code

heres the script

#target photoshop

// === MAIN FUNCTION ===
function main() {
    // === Step 1: Select the PSD ===
    var docFile = File.openDialog("Select your PSD file", "*.psd");
    if (!docFile) {
        alert("No PSD file selected. Script cancelled.");
        return;
    }

    // Open PSD and save reference
    var psd = app.open(docFile);
    
    // === Step 2: Select the PNG ===
    var imgFile = File.openDialog("Select ONE PNG image", "*.png");
    if (!imgFile) {
        alert("No PNG image selected. Script cancelled.");
        psd.close(SaveOptions.DONOTSAVECHANGES);
        return;
    }

    // === Step 3: Process image ===
    try {
        // Save current preferences
        var startRulerUnits = app.preferences.rulerUnits;
        app.preferences.rulerUnits = Units.PIXELS;

        // Open image and unlock layer
        var imgDoc = app.open(imgFile);
        var layer = imgDoc.artLayers[0];
        if (layer.isBackgroundLayer) {
            layer.isBackgroundLayer = false;
            layer.name = "Layer 0";
        }

        // === CRITICAL FIX: Duplicate and position BEFORE alert ===
        var newLayer = layer.duplicate(psd, ElementPlacement.PLACEATBEGINNING);
        
        // Calculate position (100px, 100px)
        var xPos = 100;
        var yPos = 100;
        var xOffset = xPos - newLayer.bounds[0].value;
        var yOffset = yPos - newLayer.bounds[1].value;
        newLayer.translate(xOffset, yOffset);

        // Force UI update
        app.activeDocument = psd;
        psd.activeLayer = newLayer;
        app.refresh();

        // Close source image
        imgDoc.close(SaveOptions.DONOTSAVECHANGES);

        // Restore preferences
        app.preferences.rulerUnits = startRulerUnits;

        // === Modified alert: Shows position and layer info ===
        var result = confirm(
            "✅ Image placed at (" + xPos + "px, " + yPos + "px)n" +
            "Layer: " + newLayer.name + "nn" +
            "Click OK to continue or Cancel to undo",
            false,
            "Placement Successful"
        );
        
        if (!result) {
            // Undo if user cancels
            executeAction(charIDToTypeID("Undo"), undefined, DialogModes.NO);
        }

    } catch(e) {
        alert(" Error: " + e.message);
    }
}

// Execute
main();

I am reading JavaScript execution model.

What I understood so far is:

• One Agent = One Independent JS Executor
• Each agent owns one or more realms
• Each agent can own multiple realms (which 1-to-1 correlate with global objects)

the relationship between Agent, Realm and Global Object is not clear to me.

This is the issue. The truncated text is replaced with ellipsis, but the highlight background is still applied.

This is due to that highlight is with the original text, not the truncated text. But I cannot use the way to truncate text with a specific max length first, The text input can be multi languages.

Is there a way to fix the issue?

Test code in stackblitz is here
https://bolt.new/~/stackblitz-starters-rlbxchnf

<div class="message-second-line">
   <span
    class="message-text"
    [innerHTML]="(getMessageSender(message) + (getMessageContent(message))) | highlight: trimmedSearchText">
   </span>

If I applied the ellipsis way in message-second-line, then there is no ellipsis,

This is also not I wanted.

Is there any way to handle it to get the result like
Alice: Hello, how are you. I … ( no highlight when the highlight text is invisible)

What i’m trying to do is write to a storage texture in one render pass, and then read from this texture in a second pass, but value i get in the second pass is always the same, regardless of what i write in the first pass.

This is what setup code looks like:

const storageTexture = this._device.createTexture({
    dimension: '2d',
    size: [512, 512, 1],
    format: 'r32float',
    usage: GPUTextureUsage.STORAGE_BINDING
})

const textureView = storageTexture.createView({
    dimension: '2d-array',
    format: 'r32float',
})

const bindGroup = this.device.createBindGroup({
      layout: this.lightsBindGroupLayout,
      entries: [
                .....irrelevant stuff
                {
                    binding: 3,
                    resource: textureView,
                },
            ],
        })

const firstPass = commandEncoder.beginRenderPass(this._renderPassDescriptor)
......
firstPass.setBindGroup(2, bindGroup)
......
firstPass.end()

const secondPass = commandEncoder.beginRenderPass(this._renderPassDescriptor)
.....
secondPass.setBindGroup(3, bindGroup)
.....
secondPass.end()

Fragment shader code for first pass:

@fragment
fn fragment_main(in: VertexOutput) -> @location(0) float4 {

    textureStore(texture, vec2u(0, 0), 0, vec4f(1, 1, 1, 1));

    return in.position;
} 

Fragment shader code for second pass:

@fragment
fn fragment_main(in: VertexOutput) -> @location(0) float4 {

    let a = textureLoad(texture, vec2u(0, 0), 0);

    return vec4(a.r, 0, 0, 0);
} 

What i expected to get in the second pass is a.r == 1, therefore all fragments of the resulting image should be red, but what i actually get is a.r == 0, and all fragments are black.

I read about default value for r32float that is returned in case there is a reading error, and it’s also mentioned that if there’s a writing error, the textureStore function is not called. Right now, i can`t even understand which of this cases i have, but i can’t see how could there be read/write error with a predefined location.

Any help in diagnosing what is wrong would be much appreciated.

I am developing a web based application using Dancer2. I want to use Fabric.js to make an interactive drawing. However, I am unable to execute even the simplest drawing.

I can make a drawing as a stand-alone page with

<!DOCTYPE html>
<html>
<head> 
        <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> 
</head>

<body>
        <canvas id="canvas" width="500" height="300" style="border:1px solid #000000"> </canvas>
        <script> 
                var canvas = new fabric.Canvas("canvas");
                var rect = new fabric.Rect({
                  left: 100,
                  top: 100,
                  fill: 'red',
                  width: 20,
                  height: 20
                });
                canvas.add(rect);
        </script>
</body>
</html>

However, if I want to place it in the Dancer2 application, using the template

<!-- START: network_drawing.tt-->
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script src="/javascripts/networkDrawing.js"></script>
<!-- END: network_drawing.tt-->

and the javascript

document.addEventListener("DOMContentLoaded", function () {
    console.log("Fabric.js initialized:", window.fabric);
    console.log("Canvas element:", document.getElementById("canvas"));
    if (!window.fabric) {
        console.error("Fabric.js not found!");
        return;
    }
    const canvasElement = document.getElementById("canvas");
    if (!canvasElement) {
        console.error("Canvas element not found!");
        return;
    }
    const canvas = new fabric.Canvas("canvas", {
        width: 1000,
        height: 1000
    });
    const redSquare = new fabric.Rect({
        left: 475,
        top: 475,
        fill: "red",
        width: 50,
        height: 50
    });

    canvas.add(redSquare);
    canvas.renderAll();
});

I get no red square.

The Javascript console of Chrome tells me:

Fabric.js initialized: networkDrawing.js:2
Canvas element:        networkDrawing.js:3
canvas#canvas

which should mean that the javascript is executed, that Fabric.js is loaded and that the canvas element is available.

What am I missing?