Category: javascript

how do I fix this. My background shows through the div box

let loadingDiv=document.getElementById("loadingDiv");
loadingDiv.setAttribute("style","border-top:none");

wDiv.setAttribute("style","background-color:rgb(75, 40, 20);");
//this is the setting for the div - Yee haa ^

I use setAttribute to edit the background colors. What do i need to do to fix the lines showing through the div

I am working on a React Native project where I use React Native Reanimated to scale an SVG dynamically. My goal is to allow pinch-to-zoom and pan gestures on an SVG, but after scaling, the SVG becomes blurry.

Here is the relevant part of my code:

const animatedStyles = useAnimatedStyle(() => ({
  transform: [
    { translateX: translationX.value },
    { translateY: translationY.value },
    { scale: scale.value },
  ],
}));

const pinchGesture = Gesture.Pinch()
  .onStart((event) => {
    scaleValue.value = scale.value;
  })
  .onUpdate((event) => {
    const adjustedScale = 1 + (event.scale - 1) * PINCH_SENSITIVITY;
    scale.value = scaleValue.value * adjustedScale;
  });

I use the react-native-svg library to render the SVG and manage scaling using Reanimated. Here’s the rendering part:

<GestureHandlerRootView style={{flex:1}}>
    <GestureDetector gesture={onGestureMain}>
    <Animated.View style={[animatedStyles,{flex:1, width:"100%", height:"100%"}]}>

    <Svg width="100%" height="100%" viewBox="0 0 290 500">
    <AnimatedCircle
    width={100}
    height={100}
    
        
          fill="#b58df1"
       
          // animatedProps={animatedProps}
        />
      {/* <Circle cx="145" cy="250" r="120" fill="#c02aaa"/> */}
    </Svg>


  </Animated.View>
  </GestureDetector>
  </GestureHandlerRootView>

I am using choice.js library to manage my drop downs. I have three drop down in the same page with same options(choices”. I want to disable a choice, once its selected in a drop down and stop it from appearing as a selctable drop down in the subsequent drop downs. how do i do so using choices.js ? Any idea.

Here is a js only solution, but i want to achieve the same using choices.js libraray as the library is incharge of my drop downs.

Following this.

I have following in my package.json:

{
  "name": "cesium-deckgl-viewer-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "~5.6.2",
    "vite": "^6.0.1"
  },
  "dependencies": {
    "@deck.gl/core": "^9.0.38",
    "@deck.gl/geo-layers": "^9.0.38",
    "@deck.gl/mapbox": "^9.0.38",
    "@loaders.gl/3d-tiles": "^4.3.3",
    "@loaders.gl/core": "^4.3.3",
    "@probe.gl/log": "^4.0.9",
    "mapbox-gl": "^3.8.0"
  }
}

And in my index.js:

import {MapboxLayer} from '@deck.gl/mapbox';

But it gives me error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@deck__gl_mapbox.js?v=5cb1e8a3' does not provide an export named 'MapboxLayer'

What is missing in my setup?

i’m currentlly facing a issue for FormData, i try to find a best way to handle the data like below that can be transfer through FormData.

As you can see, i got an object that contains the travel claim details, i have an array that names travels, generally we can have several travels but i try to keep it simple so just put one there. In each of the travel, we have multiple trips and in each of the trip, we have a file list that allow the users to upload the receipts.

The business logic is: i need to make sure the file list needs to belongs it’s trip, when the user view the detail of this claim, they need to know the file list 1 belongs to the trip 1 and the filelist 2 belongs to the trip 2.

For none File data, i know we can use append to append each of the key value into FormData and we can use formData.append(“fileList[]”, each file) to upload the file to the form, but when the files belongs to the nested objects, what we should do?

I have use multiparty in Node.js backend.

Any help will be much appreciate!

{
"code": 202401,
"name": "Travel claim",
"valid_date": [
    1732971600000,
    1735563600000
],
"status": "Pending",
"total_amount": "100.00",
"expenses": [
    {
        "index": 0,
        "amount": 1,
        "discount": 0,
        "sub_total": 1,
        "EXPENSETYPE_id": 7,
        "TRIP_id": 1734073861830,`enter code here`
        "key": 1734073875920
    },
    {
        "index": 1,
        "amount": 1,
        "discount": 0,
        "sub_total": 1,
        "EXPENSETYPE_id": 7,
        "TRIP_id": 1734073865644,
        "key": 1734073876603
    }
],
"travels": [
    {
        "index": 0,
        "key": 1734073861830,
        "name": "Travel",
        "trips": [
            {   // Trip 1
                "index": 0,
                "location_from": "1",
                "location_to": "2",
                "start_date": 1732971600000,
                "end_date": 1732971600000,
                "key": 1734073861830,
                "trip_file_list": [
                    {   // File object
                        "status": "ready",
                        "name": "flight_tickets1.png",
                        "size": 129789,
                        "percentage": 0,
                        "uid": 1734073886202,
                        "raw": {
                            "uid": 1734073886202
                        }
                    }
                ]
            },
            {   // Trip 2
                "index": 1,
                "location_from": "2",
                "location_to": "1",
                "start_date": 1735563600000,
                "end_date": 1735563600000,
                "key": 1734073865644,
                "trip_file_list": [
                    {   // File object
                        "status": "ready",
                        "name": "flight_ticket2.pdf",
                        "size": 582252,
                        "percentage": 0,
                        "uid": 1734073890187,
                        "raw": {
                            "uid": 1734073890187
                        }
                    }
                ]
            }
        ]
    }
]
}

Im working on a school project, creating a “webshop” (its just for practice – not real).

Im trying to format the input for the users card number so that it looks like:

1234 5678 9101 1112.

when typing the cardnumber formatting works, but when the user starts backspacing, problems arise.

All is fine when backspacing through the string – i’ve created a function that skips the spaces, and made sure that the user cannot interact with them, but when we reach the first 4 digits (1234) backspace deletes two characters at a time instead of one, and i cannot figure out why.

heres my code for handling backspace and formatting in the cardNumber input field:

//handle formatting for the cardnumber
formatCardNumber(value) {
        let formattedValue = value.replace(/D/g, ''); // Remove all non-digit characters
        // Insert a space after every 4 digits
        if (formattedValue.length <= 16) {
            formattedValue = formattedValue.replace(/(d{4})(?=d)/g, '$1 ');
        } else {
            formattedValue = formattedValue.substring(0, 16); // Limit to 16 digits
            formattedValue = formattedValue.replace(/(d{4})(?=d)/g, '$1 '); // Add spaces
        }
        return formattedValue; // Return the formatted value
    },

    // Handle backspace behavior specifically for card number inputs
    handleCardNumberBackspace(cardNumberInput, e) {
        if (e.key === 'Backspace') { // Check if the Backspace key is pressed
            let value = cardNumberInput.value.replace(/D/g, ''); // Remove spaces and non-digits
            let cursorPos = cardNumberInput.selectionStart; // Get the current cursor position

            if (cursorPos > 0 && cardNumberInput.value[cursorPos - 1] === ' ') { 
                // If the cursor is before a space, remove the preceding digit and the space
                cardNumberInput.value = value.substring(0, cursorPos - 1) + value.substring(cursorPos);
                cardNumberInput.setSelectionRange(cursorPos - 1, cursorPos - 1); // Update cursor position
            } else {
                // Remove the digit at the cursor position
                cardNumberInput.value = value.substring(0, cursorPos - 1) + value.substring(cursorPos);
                cardNumberInput.setSelectionRange(cursorPos - 1, cursorPos - 1); // Update cursor position
            }

            cardNumberInput.value = this.formatCardNumber(cardNumberInput.value); // Reapply formatting
        }
    },

I am facing issue . when i am using java script in my feature file its not supporting line break it gives syntax error .

here are the details

screen shot

Feature: Create Licenses key from POST Request

Background: Define URL

* def config = call read('../../../java/karate-config.js')

* def ThelicenseKeys = []

* def iterations = 5

Given url config.Given_url

@single

Scenario: Create multiple license keys

* def ThelicenseKeys = []

* def iterations = 5



* def loop = function(i) { var randomLicenseKey = config.dataGenerator.getRandomLicenseKey(); karate.log('Creating License Key:', randomLicenseKey); karate.set('randomLicenseKey', randomLicenseKey); }



#* karate.repeat(iterations, function(i) {  And request { license_key: '#(randomLicenseKey)'; valid_for: 20 ; status: "active" ; times_activated_max: 3 } When method post ; Then status 200 });

• karate.repeat(iterations, function(i) {

  Given path ‘licenses’

  And request

  “””

{

“license_key”: #(randomLicenseKey),

“valid_for”: 20,

“status”: “active”,

“times_activated_max”: 3

}

“””

When method Post

Then status 200

})

* karate.repeat(iterations, loop);

* print 'All Created License Keys:', ThelicenseKeys

* print 'Response:', response

* eval ThelicenseKeys.push(response.data.licenseKey);

this error shown

01: karate.repeat(iterations, function(i) {
<<<<
org.graalvm.polyglot.PolyglotException: SyntaxError: Unnamed:1:39 Expected } but found eof
karate.repeat(iterations, function(i) {
^

kindly guide my and help me to fix it

i have tried many combinations but still i am unable to fix it .

eg :

1.wrote loop code in 1 line
2.tried karate.repeat function
3.tried karat.call
4.Write simple while and for loop code
5.execute single post request which working

How to remove leading zero and kg from copied innerHTML to input field text?
from 0000300kg to 300?

Html

<button class="tmbltimbang" id="timbangmuatan" onclick="bruto()">BRUTO</button>
<button class="tmbltimbang" id="timbangkosong" onclick="tara()">TARA</button>

BRUTO <input readonly type="text" name="25" id="25" value=""></input>
TARA<input readonly type="text" name="35" id="35" value=""></input>

JS

function bruto() {
    document.getElementById("25").value = document.getElementById("serialResults").innerHTML;
};
enter code here
function tara() {
    document.getElementById("35").value = document.getElementById("serialResults").innerHTML;
};

I am new to Filament PHP and exploring ways to extend its default admin panel functionality. I would like to customize the admin panel using Alpine.js to add interactive elements like toggle buttons for visibility settings and drag-and-drop functionality for rearranging items (e.g., sorting lists or table rows).

1. Integration with Alpine.js: Does Filament PHP natively support Alpine.js, or is there a specific way to integrate custom JavaScript functionality within the admin panel views?

2. Extending Components: How can I modify or extend existing components in the Filament admin panel to include custom Alpine.js directives or behaviors?

3. Examples or Tutorials: Are there any examples, tutorials, or documentation that showcase using Alpine.js to enhance the default functionality of Filament?

Any guidance, examples, or resources would be greatly appreciated. I’m looking for a way to seamlessly blend Alpine.js with the powerful features of Filament PHP to create a more dynamic user experience.

Basically let’s say i have a script that catch the value of the input every time someone press the enter key

const inputBox = document.getElementById("inputbox")

inputBox.addEventListener("keydown", (event) => {
    if (event.key === 'Enter'){
        //console.log(inputBox.value)
        inputBox.value = '';
    }
});

so let’s say console.log is commented or doesn’t exist, so what I want to do is
write the console log using puppeteer so i can get the value

right now this is my puppeteer code

const puppeteer = require('puppeteer');

function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

(async () => {
    try {
        const browser = await puppeteer.launch({ headless: false });
        const page = await browser.newPage();
        await page.setViewport({ width: 1370, height: 680 });

        const timeout = 60000;
        await page.goto('http://127.0.0.1:5500/index.html', {
            waitUntil: 'networkidle2',
            timeout: timeout  
        });

        page.on('console', (msg) => {
            console.log('msg: ', msg.text());
        });

        await page.evaluate(() => {
            const inputBox = document.getElementById("inputbox");
            inputBox.addEventListener("keydown", (event) => {
                if (event.key === 'Enter') {
                    console.log(inputBox.value)
                }
            });
        });



    } catch (error) {
        console.error(error);
    }
})();

The error is that when I press enter in the input instead of getting the value
i’m just getting
msg:
msg:
msg:

like nothing, the value isn’t printing so i don’t know what i am doing wrong

btw here is the html

    <div class="center-box">
        <input type="text" maxlength="16" id="inputbox">
    </div>```

I am trying to create a custom slider using Splide on my website https://slider-e65739.webflow.io/. I have added custom code to achieve this.

However, I cannot see the fourth and fifth images until the mouse moves/scrolls. I don’t want the gaps to be seen after the 5th image until the slider reaches the first slide. I want it all to be moving in a continuous motion without a gap.

If you also hover in the blank area after 5th image, you can already see the hyperlinks but not the image.

Can anybody help me understand the issue and provide a possible solution for this?

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/slider-e65739?utm_medium=preview_link&utm_source=designer&utm_content=slider-e65739&preview=ec093303e01c6b7527d23b3500e8061c&workflow=preview

Continuous loop of images without fade-in of the images.

I have an issue with loggin output to my terminal:

1. I run node version 23.4.0

2. Using Node and writing JS in my CLI on windows works perfectly fine

3. In Vs Code, I have created the file app.js

4. app.js is saved in the starters folder

5. app.js contains the following code:

console.log("starting app") const express = require('express'); const app = express(); app.get('/', (req, res)=> { res.status(200).send('Hello From the Server Side') }) //App.listen allows to start a server const port = 3000; app.listen(port, () => { console.log(App running on port ${port} …) })

6. In the Terminal, there is no output (see screenshot)
   enter image description here

7. The “Output” tab in the console is blank

8. Un-install and re-install node.js

9. Try to log sth. with a new file calles test.js that contains one line of code: “console.log(“Hello World”. Was not successful

I’m working on an OTP input screen in React Native where I need to show a placeholder (•) inside the input fields under the following conditions:

1. When a box is focused, the placeholder should not be visible.
2. After clearing the value in any box, the placeholder (•) should appear only if the box is empty, even if the box is not focused.

Current Code:

Here’s the code I’m using:

<View style={styles.otpContainer}>
  {[...new Array(4)].map((_, index) => (
    <TextInput
      ref={ref => {
        inputs.current[index] = ref;
      }}
      key={index}
      style={[
        styles.otpInput,
        focusedIndex === index && { borderColor: tertiary },
        invalidOtp && { borderColor: error },
      ]}
      keyboardType="number-pad"
      maxLength={1}
      selectTextOnFocus
      contextMenuHidden
      testID={`OTPInput-${index}`}
      onChangeText={text => handleChangeText(text, index)}
      onKeyPress={e => handleKeyPress(e, index)}
      value={otpValues[index]}
      placeholder={otpValues[index] === '' && focusedIndex !== index ? '•' : ''}
      placeholderTextColor={secondary}
      onFocus={() => setFocusedIndex(index)} 
      onBlur={() => setFocusedIndex(null)} 
    />
  ))}
</View>

Problem:

• Condition 1: When the input box is focused, the placeholder should not be visible, which is working fine.
• Condition 2: After clearing the value in any box, the placeholder (•) should appear in that box only if the box is empty, even if the box is not focused.
  Currently, this is not working. When I clear a box and move focus to another box, the placeholder doesn’t reappear for the empty box.

Expected Behavior:

• When the input box is focused, the placeholder should not be visible.
• After clearing a digit, if the input box is empty (even if not focused), the placeholder (•) should appear.

i need to how to styling AutoComplete component in PrimeVue

this is the current code sample <AutoComplete size="small" v-model="selectedEmployee" class="" placeholder="Name or Employee ID" :suggestions="filterEmployee" @complete="search" optionLabel="name" forceSelection /> i tried add class and inline style but its not work, can’t change width or color

I am using a circular buffer only keeps the last x seconds of data (and 1st chunk, since it has header information).
If the video is less than x seconds, it works (as expected)
If the video is longer than x seconds, e.g. x+1 seconds, 1 second of chunk data is dropped, if I simply combine 1st chunk and chunks after 1 seconds, the video still plays but with corrupted until next keyframe, also the time is wrong ( shows x+1 seconds, instead of x).

I am wondering if there are any js library can help me to resolve this problem?

If not, I can think about two ways:

1. Use multiple mediarecorders. E.g. create a mediarecorder every second for x seconds. At x+1 second, delete the oldest recorder, and start a new one.
2. Use one mediarecorder, keep the first chunk (find the header information and extract it), then find the first keyframe in the chunks buffer, and remove anything before the keyframe, and attach the buffer to the header. Then I will also need to fix the time issue.

For 1, I am not sure if it will work…. especially when I stop on recorder and start a new one, will this affect the remaining recording?

For 2, not sure if this is doable or will to solve me problem.

Any suggestions or recommendations?

Thanks!

update 1: Just tried the first idea, it does not working. Video freezes.