javascript – Page 248 – Blancer.com Tutorials and projects

Button to download file and redirect to new page

How do I enable my button to download and redirect to a new page? I have tried many code combination but it just downloads and does not redirect

<div class="banner">
    <h3>Download your file:<br> {{ filename }}</h3>
    <div>
        {% csrf_token %}
        <form action="{% url 'download_pdf' %}" enctype="multipart/form-data" method="post">
            {% csrf_token %}
            <button onclick="openTab()" class="btn btn-primary w-20" id="myBtn" tabindex="4">Download PDF
            </button>
        </form>
    </div>
</div>
<script>
function openTab() {
window.open('home');
}
</script>

How to delete duplicate object from array Angular 8

i have below array of object from API response.i want to push only those object whose id is not repeating and totalTime is 0

for ex – in below JSON, object with id = 4 is repeating twice so i dont want to include
this object into new array, here id = 1 and id = 3 have totaltime is 0, than i want to push this one .

Below is my JSON

const response = [
  {  
      "id": "1",
      "oeeCalculations": {
          "others": {
              "totalTime": 0
          }
      }
  },
  {
      "id": "2",
      "oeeCalculations": {
          "others": {
              "totalTime": 744
          }
      }
  },
  {
      "id": "3",
      "oeeCalculations": {
          "others": {
              "totalTime": 0
          }
      }
  },
  {
      "id": "4",
      "oeeCalculations": {
          "others": {
              "totalTime": 0
          }
      }
  },
  {
      "id": "4",
      "oeeCalculations": {
          "others": {
              "totalTime": 744
          }
      }
  }
];

Expected output –

const newResponse = [
    {  
        "id": "1",
        "oeeCalculations": {
            "others": {
                "totalTime": 0
            }
        }
    },
    {
        "id": "3",
        "oeeCalculations": {
            "others": {
                "totalTime": 0
            }
        }
    }
];

I tried below code, but its returning unique lines only..

 const values = Object.values(
      response.reduce((a, b) => {
        if (!a[b.id]) a[b.id] = b 
          return a
       }, {})
    )

Darkening an image when clicked is requiring an initial click on that image, and I don’t know why

I’m trying to make an item tracker for a game as a webapp. I wanted to have the icon of each item displayed in a grid, and when you click on the image it darkens to indicate that you’ve gotten it. So far I’ve only figured out how to affect the opacity of the images, but works well enough for now. Though when the opacity starts at 1.0, it requires a second click to activate, but only for the first time. After that it works as intended, toggling on click. If I set the initial opacity to 0.5, it works on the first click.

I made a table to place the images in a grid (added 8 for the time being) and gave each one a unique id, and the class “Loot” like so:

function lootDarken(x) {
  image = document.getElementById(x);
  if (image.style.opacity === "1") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}

<table>
  <tr>
    <td><img onClick="lootDarken('Loot1')" id="Loot1" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot2')" id="Loot2" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot3')" id="Loot3" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot4')" id="Loot4" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot5')" id="Loot5" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot6')" id="Loot6" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot7')" id="Loot7" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot8')" id="Loot8" class="Loot" src="https://picsum.photos/200/300"></td>
  </tr>
</table>

Also, if there’s a cleaner/easier way to place these images in a grid, please share. I have to go through hundreds of these.

I thought maybe it was because the opacity wasn’t officially set, and that clicking it the first only set the opacity to 1 since technically, the opacity wasn’t 1. So I added the class “Loot” in order to set the opacity on startup. That didn’t work, so I tried setting the initial opacity to 0.5 just to see what would happen and that worked wonderfully.

I also tried reversing the function, making it check if the opacity is not 1:

function lootDarken(x) {
    
    image = document.getElementById(x);
    if (image.style.opacity != "1") {
        image.style.opacity = "1";
    } else {
        image.style.opacity = "0.5";
    }
    
}

But that led to the same result. I don’t even know what is happening that’s causing this weird interaction, so I came here hoping for an explanation… and maybe tips on how to make it less repetitive.

Embedded Iframe content is not loading in IOS devices – safari

I have iframe content loading external source. my code is like this

<iframe title="xyz" allowtransparency = "true" marginheight="0"
  marginwidth ="0" class="investisIframe"
  src="https://irs.tools.investis.com/Clients/uk/bt/SharePriceLookup/Default.html?culture=en-GB"
  frameborder="0" id="001" width="100%" height="500">
</iframe>

Above code works fine in android and windows devices. But not working in ios devices. Please help me to resolve this issue

I have tried clearing the cache still the same issue.
By adding timestamp at the end of url then also same issue.

Change Backend URL based on Deployment Space in React UI – MTA

We are using React for our UI project and backend is in Spring Boot.

We are trying to deploy our application in canary landscape in 4 different cf spaces, say, dev, test, e2e, and demo.

We are using MTA based deployment to deploy both our UI and backend app.

We want to generate a common Build for UI but want to change the url based on deployment space, for example:

dev space: dev-backend-app.domain.com

test space: test-backend-app.domain.com

e2e space: e2e-backend-app.domain.com

Deployment will be per space but we want to promote same build everywhere.

To achieve this, we used following commands using dotenv dependency :

 "start:dev":"env-cmd -f .env.dev react-scripts start",
    "start:test":"env-cmd -f .env.test react-scripts start",

in .env.dev or .env.test, we set backend url which we can read from process.env

REACT_APP_BACKEND_URL=dev-backend-app.domain.com

Now, im able to run my application locally by ; npm run start:dev and it is successful loading env and working.
However, I want to achieve this via mta yaml file. To achieve this i modified mta.yaml file module to :

- name: ui-app
  type: nodejs
  path: client/customer_app/build/
  build-parameters:
    builder: custom
    commands:
      - npm install
  parameters:
    memory: 2048M
    disk-quota: 2048M
    instances: 1
    buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
    routes:
      - route: ${target}-ui-app.${domain}
    command: npm run start:dev

However, on deployment fails with :

[2024-09-26T04:00:30.909161] bash: line 1: npm: command not found (STDERR, APP/PROC/WEB)#

Hence, looking for solution to detect/change backend url at runtime and not at compile time ( so we create one binary).

How to generate dynamic test cases using jest

Fetch live schools from db then generate and execute test cases for each school.
I have tried with beforeAll hook data fetched perfectly but was not able to generate dynamic test cases.

let token = ''
let liveSchools: any[] = []
const seconds = 1000



describe('GB Live Establishment API Tests', () => {
  beforeAll(async () => {

    const response = await server.post('/v1/login').send(credentials)
    token = response.body.data.access_token

    // Fetch live schools
    liveSchools = await fetchLiveSchools()
  })

  // Step 2: Test to ensure live schools are fetched successfully
  it('should fetch live schools', () => {
    expect(liveSchools.length).toBeGreaterThan(0)
  })

  
  liveSchools.forEach((school, index) => {
    it(
      `should return basic details of establishment ${school.slug} (row ${index + 1})`,
      async () => {
        const result = await server
          .get(`/v1/establishment/${school.slug}`)
          .auth(token, { type: 'bearer' })

        // Assertions for the dynamic test
        expect(result.body.data.slug).toBe(school.slug)
        expect(result.statusCode).toBe(200)
      }
    )
  })
})

Is it bad practice to make useEffect respond to an user action like this?

In the following code, I wanted to put all the collapsible logic into the Collapsible component. However, the collapse is being triggered by a button that’s outside of Collapsible. So I made Collapsible to react to that button’s onClick. For that, I had to use useEffect:

// JS:

const [collapsed, setCollapsed] = useState(true);

// JSX:

<div className="flex w-full justify-between">
  <Heading size="sm" className="shrink-0">
    Tags
  </Heading>
  <Button
    variant="link"
    onClick={() => setCollapsed(!collapsed)}
    className="md:hidden"
  >
    {collapsed ? (
      <IconChevronDown size={20} />
    ) : (
      <IconChevronUp size={20} />
    )}
  </Button>
</div>
<Collapsible collapsed={collapsed} className="md:hidden">
  <div className="mt-4 w-full">{renderedTags}</div>
</Collapsible>

Inside Collapsible, I have this:

useEffect(() => {
  if (collapsed) {
    setMaxHeight('0px');
  } else if (contentRef.current) {
    setMaxHeight(`${contentRef.current.scrollHeight}px`);
  }
}, [collapsed]);

Do you think using useEffect like this to react to user input is bad practice? To prevent that, I could create a useCollapsible hook, but that would separate the collapsible logic from the Collapsible component.

Prevent scroll on focus when using keyboard

I’m trying to build an accessible accordion with separate navigation and find that when focusing the input that controls the state of the pane, it scrolls down the page.

(($) => {
    $(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);

.row {
  display: flex;
  gap: 2rem;
  .col {
    &:first-child {
      flex: 1 0 20%;
    }
    &:last-child {
      & > div {
        grid-template-rows: 1fr;
        opacity: 1;
        display: grid;
        transition: grid-template-rows 250ms ease, opacity 250ms ease;
        div {
          overflow: hidden;
        }
      }
      input {
        position: absolute;
        left: -100%;
        opacity: 0;
        &:not(:checked) {
          & + div {
            grid-template-rows: 0;
            opacity: 0;
          }
        }
      }
    }
  }
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <ul>
      <li><label for="category-1">Category 1</label></li>
      <li><label for="category-2">Category 2</label></li>
      <li><label for="category-3">Category 3</label></li>
      <li><label for="category-4">Category 4</label></li>
      <li><label for="category-5">Category 5</label></li>
      <li><label for="category-6">Category 6</label></li>
    </ul>
  </div>
  <div class="col">
    <input type="radio" checked="checked" name="category" id="category-1" value="category-1">
    <div>
      <div>
        <h2>Category 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-2" id="category-2">
    <div>
      <div>
        <h2>Category 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-3" id="category-3">
    <div>
      <div>
        <h2>Category 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-4" id="category-4">
    <div>
      <div>
        <h2>Category 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-5" id="category-5">
    <div>
      <div>
        <h2>Category 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-6" id="category-6">
    <div>
      <div>
        <h2>Category 6</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/gRoberts/84zfbu0j/

Only one pane is designed to show at any one time, so it uses css transitions to hide/show the inactive/active panes, which all works fine but I believe that at the point of focus, the browser scrolls to the element as it’s transitioning causing it jump down the page.

I’ve tried to prevent the focus event (suggested elsewhere), but this does nothing and using tabindex="-1" will break any accessibility I have with the input.

(($) => {
    $(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);

Using as little javascript as possible (I am not using jQuery but have used it in the fiddle for brevity), I would like the user to be able to click on the nav on the left to activate the required category but also use the keyboard to navigate back/forth between categories.

I believe the only solution would be to intervene and animate to the top of the element each time the category is changed but it would be good if it could prevent any scrolling on focus.

Any suggestions?

PointCloud2 is not display correct

I have a relatively large point cloud data with max_pts set to a maximum of 150000000. PointCloud2 loads the latest data and cleans up old data every time. How to accumulate and display data each time

This is the code for me to load point cloud according to the official example

[enter image description here]
(https://i.sstatic.net/26ia0gXM.png)

This is the source code of PointCloud2 that I reviewed. This code updates the latest received data every time, and old data is replaced

[enter image description here]
(https://i.sstatic.net/Q28e8YnZ.png)

[enter image description here]
(https://i.sstatic.net/CbkhVsKr.png)

If I want new data to accumulate and display data without replacing old data, I should need to change the source code of PointCloud2.

My data is pushed repeatedly, and the new data pushed each time does not include the data that has already been pushed. However, I am not sure how to push new data that includes the data that has already been pushed

Userscript Can’t Run on Google Search Console Pages?

I’m trying to create a script which will allow the exclusion of certain results on the “not indexed” page of Google Search Console, to alleviate reviewing things repeatedly.

Violentmonkey reports the script is active on the specified inclusion page, but I can’t get any code to fire. Console doesn’t report anything as far as a block on userscripts. Any insights appreciated

// ==UserScript==
// @name         Google Index Excludes
// @include https://search.google.com/search-console/index/*
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @version 1
// ==/UserScript==

alert('got script');
$(document).ready(function(){

    console.log('got script');
    document.body.arrive('.nJ0sOc',{fireOnAttributesModification:true,existing:true,onceOnly:true},function(){
    
        console.log('got row');
        $(this).prepend("<td class='exclude'><a href='#'>X</a></td>");
    });
});

Dropdown on vue template not working even if the toggle function is called

I am trying a simple dropdown on a vue project. But the dropdown doesnt drop when I click on it. I have put the console inside the function. The message gets displayed on console that means the function is being called. But it doesnt work.

<template>
  <div class="dropdown">
    <button @click="toggleDropdown" class="dropdown-button">
      {{ selectedOption || "Select an option" }}
    </button>
    <ul v-if="isOpen" class="dropdown-menu">
      <li v-for="option in options" :key="option" @click="selectOption(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "DropDown", // Adding name to the component
  data() {
    return {
      isOpen: false,
      selectedOption: null,
      options: ["Option 1", "Option 2", "Option 3"],
    };
  },
  methods: {
    toggleDropdown() {
      console.log("Button clicked");
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isOpen = false;
    },
  },
};
</script>

<style scoped>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}
</style>

JQuery sometimes loading too late: $ is not defined

I am using JQuery to load a page via the following syntax

$(function(){
  $("#navbarImport").load("/navbar/navbar.html"); 
});

to load the content of navbar.html into a in a target html file. However, this works about half the time – refreshing the page causes the navbar to load half the time, otherwise it will give me

“Uncaught ReferenceError: $ is not defined”.

The same error occurs respectively if I replace “$” with “jQuery”. The above code snippet is my entire js file.

When importing the scripts, I import the JQuery script first. In the target html file, my scripts are structured as such:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./my_script.js"></script>

Why movementX in a pointer lock events returns a sum of movements instead of individual ones?

Recently my code depends on Pointer Lock API cannot work properly on Firefox and Edge, but still works fine on Chrome.

I tried printing the mousemove event after requestPointerLock(), finding that the movementX and movementY value seems to be a sum of movements from the first click, instead of individual movement that is said at the specifics.

I am pretty sure that it was working several weeks ago, but it suddenly cannot work anymore.

Firstly I thought it was my problem, but after debugging, I believed that browser behavior was no longer correct.

I tried the MDN example, but it was also broken on Firefox. I could only see the red balls flying around at ultra speed instead of moving smoothly.

new NativeEventEmitter() requires a non-null argument

I am encountering an error when trying to register the foreground service using ReactNativeForegroundService from the @supersami/rn-foreground-service library. The same code works correctly on Android, but I am facing issues on iOS.

Code:

import ReactNativeForegroundService from "@supersami/rn-foreground-service";

const config = {
  config: {
    alert: true,
    onServiceErrorCallBack: function () {
      console.warn('[ReactNativeForegroundService] onServiceErrorCallBack', arguments);
    },
  }
};

ReactNativeForegroundService.register(config);

Error:

ERROR  Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes
WARN  Module ReactNativeEventEmitter requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
LOG  Running "Cerge" with {"rootTag":21,"initialProps":{}}

Environment:

React Native version: “0.71.19”
Library version: “^2.1.1”
JS Engine: Hermes
Platform: iOS

Steps to Reproduce:

Install the @supersami/rn-foreground-service library.
Use the ReactNativeForegroundService.register(config) method in the code as shown above.
Run the app on iOS with Hermes enabled.

Expected Behavior: The service should register without errors.

Actual Behavior: The error new NativeEventEmitter() requires a non-null argument occurs, and the warning about requiresMainQueueSetup appears.

Additional Context: This issue appears to be related to how the NativeEventEmitter is being initialized with a null or undefined argument. The warning suggests the module may need to implement requiresMainQueueSetup.

I tried installing the latest version of the @supersami/rn-foreground-service library and registering the service using both the configuration method and the simplified approach like this:

ReactNativeForegroundService.register({id: 144});

However, nothing worked, and I still received the same error.

Rotation Animation in A-Frame and THREE.js Not Centering on Calculated Centroid

I am working on a 3D visualization project using A-Frame and THREE.js where I need to perform trasnformations on an object (container) around its dynamically calculated centroid. However, I am encountering an issue where the centroid appears to ‘drift’ during the rotation step.

Problem Description: I have calculated the centroid of a model triangle in my scene and am attempting to rotate the container around this centroid. The expected behavior is that the centroid remains stationary in world space throughout the animation, but it seems to shift, indicating a possible issue with how the rotation’s pivot is being set.

I have a glitch example here – you can see three phases of trying to align the two triangles. The first two, translation and scaling, work fine. But the rotation is drifting.

Glitch code here.

What I’ve Tried:

Applied the rotation in world coordinates by translating to and from the centroid.
Checked for any parent transformations that might be affecting world positions.
Despite these efforts, the centroid still appears to move slightly after the rotation, suggesting the rotation might not be correctly centered around the centroid as intended.

Question: Could there be an issue with how I’m handling the translation or rotation in THREE.js? How can I ensure that the rotation is precisely centered on the centroid in world space, maintaining the centroid’s position static throughout the animation?