Category: javascript

I have a some slider in stackblitz

So, I have two related slider horizontal and vertical:

...

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import SwiperCore, { Scrollbar, Pagination, Navigation, Thumbs } from 'swiper';
...
  // Swiper
  SwiperCore.use([Pagination]);
...
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
 ...
      <Swiper
        scrollbar={{
          hide: true,
        }}
        modules={[Scrollbar, Pagination, Navigation, Thumbs]}
        onSwiper={setThumbsSwiper}
        mousewheel={true}
        slidesPerView={4}
        className="swiper-top"
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            <div className="d-flex flex-column items-center">
              <span className="d-block bg-light rounded-full w-5 h-5 mx-auto "></span>
              <small className="d-block mb-0 mt-1">{item.title}</small>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* // mousewheel={true} direction={'vertical'} */}
      <Swiper
        modules={[Pagination, Navigation, Thumbs]}
        slidesPerView={1}
        autoHeight={true}
        updateOnWindowResize={true}
        mousewheel={true}
        direction={'vertical'}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        className="swiper-main"
        onSwiper={(swiper) => {
          console.log(swiper);
        }}
        onSlideChange={() => console.log('slide change')}
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            <Step item={item} />
          </SwiperSlide>
        ))}
      </Swiper>

Question: How can I connect these 2 sliders so that by clicking on the horizontal item, not the entire vertical one scrolls, but only one slide? Vertical can be of different heights.
And If I click to vertical scroll to horizontal item?

enter image description here

I am trying to send data with axios from reactjs to laravel and i get cors problem so what can i do to fix this problem !!
Reactjs
laravel
p://localhost:8000/api/cours’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I’m writing a wrapper for Axios like below

// 1st approach
export const makeRequest = axios.create({
    baseURL: config.baseURL
})

// 2nd approach
export const makeRequest = (options) => {
    return axios({
        url: config.baseURL + options.url,
        ...options
    })
}

It’s working fine but the only problem is I’m getting successful 200 responses in catch block instead of then.
Any idea what could be the reason?

Sample request

makeRequest({
  method: "GET",
  url: `url`
}).then(res=>{
  // response should be here
  console.log(res);
}).catch(err=>{
  // getting successful 200 response here
  console.log("err",err);
})

I’ve done some research and found examples using promises, but I’m trying to copy a specific example I found on the internet that loads its images as seen below.
Example code: https://github.com/pinglu85/fcc-secure-real-time-multiplayer-game (see /public/game.mjs and player.mjs if interested)

const loadImage = (src) => {
  const img = new Image();
  img.src = src;
  return img;
};
const avatar = loadImage('sourceurl.png');

They then directly implement within an animation frame render() function with: context.drawImage(avatar, x, y, width, height);

I tried implementing this and it failed to render the image(s). Is there something I’m missing? I simply need to get the loaded image in variable I can call in the draw function.

Thanks for any help

I’m trying to insert the id inside route action attribute

var id= $(this).data('id');
$(".form-group #id").val(id);
$("#editUser").attr("action", "{{ route('user.update', ID HERE) }}");

I was expecting whatever data is in id it would be show beside user.update like how #id.val

I am getting this error while installing nest js. Please help me.

enter image description here

I tried using all package managers such as npm and yarn, but the error is the same. There was nothing I could do.

Please help me

I have 2 divs:

<div style="z-index:0; display: flex;"><button /></div>
<div style="z-index:1; position: sticky; bottom: 0px; display:flex; justify-content: flex-end"><button /></div>

When the bottom div is on top of the top div, the button in the top div is still visible because the bottom div does not have any background or any other content on the left. However, the button, though visible, is not pressable.

How to make it pressable?

I have a very niche problem I’m trying to solve. I am building a Chrome extension content script, which means I have limited access to the internals of any scripts running on the page.

I found an accessible globally-defined function on the page I am running my content script that I can pass an object to in order to trigger behavior I want. I was originally going to just reverse engineer the content of the object to pass in an object with the proper shape the function expects. However, upon inspecting the logic of that function, I found that it uses instanceof as a qualifier for when to handle the event in a particular way, meaning it can’t just be an anonymous object. Unfortunately, the class definition is created in a function scope within that script, which means, as far as I know, I cannot instantiate a new instance of the class that would be needed in order for instanceof to evaluate to true.

Here is a minimum code example to illustrate the situation:

// Script running on the page

(function() {
  var SomeClass = function() {
    // ...
  }

  window.accessibleFunction = (event) => {
    if (event instanceof SomeClass) {
      // Do stuff I want the application to do
    }
  }
})()

I’d like to be able to call window.accessibleFunction and pass in the event to then hit the logic within the instanceof check, but because SomeClass is defined in the function scope, I can’t just do new SomeClass().

So, my question is, is there some way I can pass an object into window.accessibleFunction such that it passes the instanceof check without actually being able to create a real instance of SomeClass? In other words, can I somehow trick instanceof?

Alternatively, is there some way I can expose SomeClass to the global scope so that my extension’s content script can access it? I’m guessing not, but figure it’s worth asking if anyone has ideas.

I am fetching some HTML elements using the document.getElementsByClassName function. However I seem to stumble upon a problem. When I try to loop over these elements, there doesn’t seem to be any items. I have tried converting the collection to an array using Array.from but that doesn’t seem to do the trick either.

var videos = document.getElementsByClassName("ytd-thumbnail-overlay-time-status-renderer")
console.log(videos)

videos = Array.from(videos)
console.log(videos)

I saw a JS syntax as following:

export const ChartComponent = props => {
    const {
        data,
        colors: {
            backgroundColor = 'white',
            lineColor = '#2962FF',
            textColor = 'black',
            areaTopColor = '#2962FF',
            areaBottomColor = 'rgba(41, 98, 255, 0.28)',
        } = {},  // what is that curly brace?
    } = props;
    ...
}

I’ve read the destructuring assignment, but I still don’t know what the curly braces do?

It seems a default value for colors, but I don’t know why.

As far as I know:

1. the syntax only assigns destructuring values to data / backgroundColor / lineColor / textColor / areaTopColor / areaBottomColor, not including colors.
2. The destructuring variables (backgroundColor / lineColor / textColor / areaTopColor / areaBottomColor) already have their own default values.

Is the curly braces for color necessary? What does it do?

I tried useSearchParams but it added query params to my current route not the one which I want to navigate to. I want the (+) in between of spaces instead of (%20).

This added query params in my current route

<A
    class="link-btn px-6"
    href="/search"
    onClick={() => setSearchParams({ q: query() })}
>
    Search
</A>

This had (%20) in the url instead of plus sign

<A
    class="link-btn px-6"
    href="/search?q=hello world"
>
    Search
</A>

I have code that display a datagrid table (i.e table #1) in main modal. I can manipulate existing data this table via onRowClick by calling another editing modal.

On top of this grid, I add a button to open another modal with contain source datagrid table (i.e table #2) to add data into table #1 alo using onRowClick.

How Can I trigger this modal this onRowClick and where should I put this modal?

//-----How & where I put this child modal #2 ?    

function ChildModal#2() { 
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};

return (
<React.Fragment>
  <Button onClick={handleOpen}>Child Modal#2</Button>
  <Modal>
    ...test...
  </Modal>
 </React.Fragment>
 );
 }

//----Open child modal #1 working well ----
function AddItem() { 

//`onRowClick` datagrid table2
const handleRowClick = (params) => { 
setMessage(`Model code "${params.row.STOCKCODE} - ${params.row.DESC}"  selected`)
alert(`Model code "${params.row.STOCKCODE} - ${params.row.DESC}"  selected`) //test alert display ok

*//How to call modal child #2 in this section?*   
};
...
return (
<div>
  <Box onClick={handleOpen}>Add Item</Box> //Open datagrid table #2
  <Modal
    open={open}
    onClose={handleClose}
  >
   ....
          <DataGrid //rendering table data 
            onRowClick={handleRowClick}
            ...
)}
//Main function
export default function ModalCatalog() {
...
return ( //Main Jsx
<section>
    ...
  <Modal
    open={open}
    onClose={handleClose}
  >
      <Fab>
        <AddItem /> //This is second datagrid table #2
      </Fab>
      <GridCatalog /> //This is main datagrid table #1

  </Modal>
 </section>
 );
 }

I used WAMPserver to build and test my website. I tried to host on dreamhost and 000webhost and for whatever reason the website is not working properly. When submitting files into the ftp manager if I place all the files sperately html,css,js,php everything works fine for the most part. Half of the pages do not open and none of the pictures work. When submitting the entire folder (The file paths for pictures have the root folder first and will only work with that in there) none of the website works. I can find my index.html page only when i manually put the folder name in and do /index.html.

If everything works on WAMP and also just opening the html file locally woouldnt it work on these hosted servers?

Thanks in advance

Same as above for detals. Website works locally but not on the hosting platforms

I’m using useState on an array of objects whose type is a little bit complicated. set function tries to change the value of an object in its state. The component is re-rendered as useEffect always runs its functions after the set function is called, but the UI still remains the same. I suspect the re-render optimization strategy of React but still don’t know why. Here’s a sample code (actual code is much more complex)

import { useEffect, useState } from 'react'
import { Socket } from 'socket.io-client'

interface MyInterface {
  id: string
  content: string
  extra1: MyInterface[]
  extra2: {
    key1: { some: string; thing: string }[]
    key2: { some: string; thing: string }[]
  }
}

export default function SomeComponent({socket: Socket}) {
  const [myList, setMyList] = useState<MyInterface[]>([])

  const eventListner = (data: { id: string; content: string }) => {
    console.log('eventListner called', data) // logging well
    setMyList((prev: MyInterface[]) =>
      prev.map((item) =>
        item.id === data.id ? { ...item, content: data.content } : item,
      ),
    )
  }

  useEffect(() => {
    console.log('myList updated', myList) // logging well
  }, [myList])

  useEffect(() => {
    socket.on("someEvent", eventListener)
  }, [socket])

  // more code...

  return (
    <div>
      {myList.map((item) => (
        <div key={item.id}>
          {item.id}: {item.content}
        </div>
      ))}
    </div>
  )
}

i have achieved the rubber band effect for the letters when i hover using animate.css library and the problem is the letters wont be able to have any rubberband effect but the color is changing when i hover quickly over the letters is there anything stopping i dont understand.

i will be attaching the .scss code for the rubber band effect

.text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;
    cursor: pointer;
  
    &:hover {
      animation: rubberBand 1s ;
      color: #37e4db;

    }
}