Category: javascript

I am working on a software joystick implementation for a game client written in JavaScript/TypeScript. I need to detect the different regions within a circle radius where an event occurs for 4-directional movement (up, down, left, right). Currently my mapping looks something like the following (because I only know how to work with four-sided polygons):

But what I would like to achieve is something like this:

The violet represents areas for lateral movement. The green for vertical. The gray and black are dead zones (play) where no directional movement should be applied.

The radius of the circle I am working with is 75 pixels. Inner gray dead zone radius is 24 pixels.

The following code is an example (not exact as I am only including what is relevant to this question) of how I am currently detecting direction:

    /**
     * Retrieves the interpreted direction of joystick.
     *
     * Returned directions are represented using the following integer values:
     * - 0: no movement (stop)
     * - 1: up
     * - 2: right
     * - 3: down
     * - 4: left
     *
     * @param relX {number}
     *   Point of event on X axis relative to joystick center.
     * @param relY {number}
     *   Point of event on Y axis relative to joystick center.
     * @return {number}
     *   Facing direction the joystick's state represents.
     */
    private getPressedDirection(relX: number, relY: number): number {
        let dir = 0;
        const playThreshold = 24;
        if (relX < -playThreshold) {
            dir = 4;
        } else if (relX > playThreshold) {
            dir = 2;
        } else if (relY < -playThreshold) {
            dir = 1;
        } else if (relY > playThreshold) {
            dir = 3;
        }
        return dir;
    }

As you can probably see, there are multiple issues with it. The regions of detection are not equal in size. The dead zone area is square instead of circular. And it allows direction to be detected outside the radius of the main circle.

If I understand correctly, I need to use the Pythagorean theorem to detect the boundaries of the circle radius, as is suggested in https://stackoverflow.com/a/7227057/4677917 and many other answers I have found, to do something like the following:

    private getPressedDirection(relX: number, relY: number): number {
        let dir = 0;
        const radius = 75;
        const playThreshold = 24;
        const eventResult = Math.pow(relX, 2) + Math.pow(relY, 2);
        const hit = eventResult < Math.pow(radius, 2) && eventResult > Math.pow(playThreshold, 2);
        ...

If that is correct, it tells me whether an event occurred within the boundaries of the joystick’s circle. But I’m still unsure how to detect which region the event occurred.

Note: https://www.w3resource.com/javascript-exercises/javascript-math-exercise-35.php suggests the Pythagorean theorem is used as Math.sqrt(Math.pow(relX, 2) + Math.pow(relY, 2)). But from other answers I looked at it seems I want to use Math.pow(relX, 2) + Math.pow(relY, 2). I did geometry a long time ago in school and the difference is beyond my understanding.

I have a select with options and id. With a function im trying to get the value of this select on onClick function. In function i alert the data but it’s either undefined or empty. My select:

  <select class="form-control" id="labels" onchange="chng()">
                    <option>Extra Label</option>
                    @for (int i = 1; i < 21; i++)
                    {
                        <option>@i</option>
                    }
                </select>

and my onClick function:

function chng() {
    var selectedValue = document.getElementById('labels').value;
    var v = $('#labels').val();
    alert(v);
    alert(selectedValue);
    var addLabelsBtn = document.getElementById('addLabelsBtn');
    addLabelsBtn.href = '/Amazon/[email protected]&extraLabel=' + selectedValue;

}

I tried both getElemenyById and .val(). getElementById gives undefined and .val() gives empty.

I am having a lot of trouble trying to concatenate a string together that has quote marks within it. I am using Visual Code, which often changes what I write with regards to the quotes, and then nothing works (is there a way to tell Visual code- leave these lines alone?)

Here is the String I am trying to build:

lineData= lineData + 'track[' + row + '][' + col + ']=' + '"' + '"' + ';';

Now, when I run this code, the concatenated double quotes are gone.
What is the right way to do this? Thanks so much!

The client runs a eCommerce web site developed with BootStrap UI framework and backed by SAP. This desktop website is used not only on desktop but also with mobile devices. In order to test the mobile version, the client is using BrowserStack cloud platform.

The Selenium-Java Script developed is failing(Element not clickable, Element not found, Element not accessible etc) randomly at a different element each time.

I have incorporated fluent waits(up to 50 sec) at each element, but still the same result.

I am aware that SAP commerce cloud website using BootStrap UI framework(v3.4.0) is inherently asynchronous at run time, while Selenium-Java script is synchronous. Technically fluent waits are supposed to take care of this mis-match, but it was not.

We are using Selenium v4.16 and JDK 21.

Does any one were in this situation and how did you resolve this? Basically we are having no clue what is happening and why !

I have two typescript packages, a React application and an infrastructure package. The React app depends on the infrastructure package (via npm link at the moment). I just added a new class to the infrastructure package and I’m getting the following error when I run my React app:

Module parse failed: Unexpected token (4:8)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
| export class Job {
>   active: boolean;
|   address: string;
|   coordinates: any;

Every solution I’ve been able to find has been fixed through tweaks in their webpack configuration files, however I am not using webpack in either of my packages (although it appears React is using webpack under the hood). Other questions appear to have the error where they are using the ?? operator in their code, which I am not using in this case.

Job class causing failures:

export class Job {
  active: boolean;
  address: string;
  coordinates: any;
  title: string;
  description: string;
  startDate: Date;
  endDate: Date;
  userId: number;
  id: number;

  constructor(data: any) {
    this.active = data.active;
    this.address = data.address;
    this.coordinates = data.coordinates;
    this.title = data.title;
    this.description = data.description;
    this.startDate = data.start_date;
    this.endDate = data.end_date;
    this.userId = data.user_id;
    this.id = data.id;
  }

  getLatitude = () => {
    return this.coordinates.x;
  };

  getLongitude = () => {
    return this.coordinates.y;
  };

  toGeoJSON = () => {
    return {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [this.getLongitude(), this.getLatitude()],
      },
      properties: {
        id: this.id,
        title: this.title,
        description: this.description,
        address: this.address,
      },
    };
  };
}

I am creating a digital valentines day card, where it opens up,etc and am trying to place the heart in the middle, right below surprise, so it’s the first thing they see when the open it.I tried a lot of ways to fix it but they all don’t work.I tried changing the heart’s position as well as the cards, but none of them worked.Does anyone know how to fix it?

.codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D9DCD6;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(#000, .25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
  &__1 {
    // Front of first page
    background-color: #0D5C63;
    color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden; // Allows to add padding and margin to rear pseudo element
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 1s .3s;
    transform-origin: 0 50%;
    z-index: 2;
    &::after {
      // Back of first page
      content: "Neat, huh?";
      color: #eff0eb;
      position: absolute;
      padding-top: 1.5rem;
      top: 0;
      left: 0;
      background-color: #424B54;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
      transform: rotateY(180deg);
      transition: all .3s .5s;
    }
  }
  &__2 {
    // Front of second page
    background-color: #BAA898;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
  }
  &:hover &__1 {
    transform: rotateY(-180deg);
    box-shadow: 1.5rem 2rem 3rem rgba(#000, .25);
    &::after {
      // Back of first page hover
      opacity: 1;
    }
  }
}

.heart-container {
  position: relative;
  width: 100px;
  height: 160px;
}

.heart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  transition: transform 0.5s;
  animation: heartbeat 1s infinite alternate;
  cursor: pointer;
}

.heart:before,
.heart:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px 100px 0 0;
  position: absolute;
  background-color: #e74c3c;
  box-shadow: -10px 6px 10px -2px rgba(0, 0, 0, 0.35);
}

.heart:before {
  left: 44%;
  top: 0;
  transform: scale(-1) rotate(225deg);
}

.heart:after {
  left: 0;
  top: 0;
  transform: scale(-1) rotate(-225deg);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.heart:hover:before,
.heart:hover:after {
  background-color: unset;
  box-shadow: none;
}

.heart:hover:before {
  border: 2px dashed #ff0000;
}

.heart:hover:after {
  border: 2px dashed #ffbf00;
}

<div class="codepen-wrapper">
  <div class="book">
    <div class="page">
      <div class="page__1">
        <p>Hover to open</p>
      </div>
      <div class="page__2">
        <p>Surprise!</p>
      </div>
      <div class="heart-container">
        <div class="heart"></div>
      </div>
    </div>
  </div>
</div>

I need to make a resizable text area that persists with its size even when the page is reloaded, but it just doesn’t work.

I tried to use local storage to store the text area height and width that is within one array, and when the page is reloaded, turn the text area size into the stored one.

let initialSize = [textarea.clientHeight, textarea.clientWidth];

localStorage.setItem("storedSize", initialSize);
const storedSize = localStorage.getItem("storedSize");

if (storedSize) {
    initialSize = storedSize;
}

but it just doesn’t work because storing an array in local storage just isn’t possible and i dont know why.

I’m trying to publish an mp3 audio on my personal website, however, when I press the play button the browser automatically asks if I want to download the file.

It always worked normally, playing, but a few weeks ago it started downloading the file.

Is it possible to force audio to be played instead of downloaded?

Here’s an example: https://jsfiddle.net/8v51a3oh/1/

<a href="https://drive.usercontent.google.com/download?id=1Swz8zvj4lq1lNfDpd24S1SldViki6N3j&export=download" class="sm2_button"></a> Example Audio


<script>
soundManager.setup({
  useFlashBlock: true, // optional - if used, required flashblock.css
  url: '../../swf/' // required: path to directory containing SM2 SWF files
});
</script>

I am building a basic search page in Flask.

When the page loads, I enter the search bar and get the results.
Then when I click on the drop-down, I can only select 1st option, “Organization” & not the 2nd option “Domain”.

Additionally, after the I select the 1st drop-down option, the backend query also gives me errors.
Below are the console logs screenshots:

Successful results

Errors

Relevant code snippets:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
    <link rel="stylesheet" href="templates/static/styles.css">
    <script src="templates/static/script.js"></script>
    <link rel="icon" type="image/x-icon" href="templates/images/favicon.ico">
    <img src="templates/images/company.png" alt="Website Logo" class="logo">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>
</head>
<body>
    <h1 class="heading">TITLE</h1>

    <div class="search-bar">
        <!-- Dropdown Start -->
        <div class ="dropdown">
            <div id="drop-text" class ="dropdown-text">
                <span id="span">Organization</span>
                <i id="icon" class="fas fa-chevron-down"></i>
            </div>
            <ul id="list" class="dropdown-list">
                <li id="search_term_1" class="dropdown-list-item" onclick="selectOption(this)">Organization</li>
                <li id="search_term_2" class="dropdown-list-item" onclick="selectOption(this)">Domain</li>
            </ul>
        </div>
        <!-- Dropdown End --> 
  
        <!-- Search box input start -->
        <div class="search-box">
            <input type="search" id="search-input" placeholder="Search..." />
            <i class="fas fa-magnifying-glass" onclick="search()"></i>
        </div>
    </div>

    <div id="resultContainer" class="floating-table">
        <div id="spinner" class="loader"></div>
        <div id="count"></div>
        <button id="btn" onclick="exportToCsv()" title="Download data as CSV." class="btn"><i class="fa fa-download"></i> Download</button>
        <div id="results" class="resultsTable"></div>
    </div>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
        </div>
    </div>
    <div class="footer">
        <p>&copy; 2024 company, Inc. All rights reserved.</p>
    </div>
</body>
</html>

Javascript

var searchResult = null;

document.addEventListener('DOMContentLoaded', function() {
  let dropdownBtn = document.getElementById("drop-text");
  let list = document.getElementById("list");
  let icon = document.getElementById("icon");
  let span = document.getElementById("span");
  let input = document.getElementById("search-input");
  let listItems = document.querySelectorAll(".dropdown-list-item");
  
  // show dropdown list on click on dropdown btn
  dropdownBtn.onclick = function(event){

    event.preventDefault();
    //rotate arrow icon
    if(list.classList.contains('show')){
        icon.style.rotate = "0deg";
    }else{
    icon.style.rotate = "-180deg";
    }
    list.classList.toggle("show");
  }
  
  //hide dropdown list when clicked outside dropdown btn
  window.onclick = function(e){
    if(
        e.target.id !== "drop-text" &&
        e.target.id !== "span" &&
        e.target.id !== "icon" 
    ){
        list.classList.remove("show");
        icon.style.rotate = "0deg";
    }
    };

  for(item of listItems){
    item.onclick = function(e){
      // change dropdown btn txt on click on selected item
      span.innerText = e.target.innerText;
  
      // change input placeholder text and input id based on selected list item
      if (e.target.innerText == "Organization") {
        input.placeholder = "Search Organization...";
        input.setAttribute("id", "search_term_1")
      }
      else if(e.target.innerText == "Domain") {
        input.placeholder = "Search Domain...";
        input.setAttribute("id", "search_term_2")
      }
      input.placeholder = "Search " + e.target.innerText + "..."
      }
  }
});

function formatDateToCustomString(date) {
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);

    return `${year}${month}${day}${hours}${minutes}`;
}

const currentDate = new Date();
const formattedDate = formatDateToCustomString(currentDate);

const filename = `search_${formattedDate}`;

function selectOption(option) {
  // Deselect all list items
  document.querySelectorAll('.dropdown-list-item').forEach(item => {
      item.classList.remove('active');
  });

  // Add the 'active' class to the clicked option
  option.classList.add('active');

  // Update search input placeholder and ID
  const selectedText = option.innerText;
  document.getElementById("search-input").placeholder = `Search ${selectedText}...`;
  document.getElementById("search-input").setAttribute("id", `search_term_${selectedText === "Organization" ? 1 : 2}`);

  // If "Domain" is selected, trigger search
  if (selectedText === "Domain") {
      search(); // Modify to handle domain search
  }
}


function search() {
    // Show the loading spinner
    document.getElementById('spinner').style.display = 'block';

    // Initialize search terms
    var search_term_1 = null;
    var search_term_2 = null;
    var search_term_3 = null;

    // Get the search input element
    var input = document.getElementById("search-input");
    console.log("Input element:", input);

    // Dynamically capture search term based on selected dropdown option
    var selectedOption = document.querySelector(".dropdown-list-item.active");
    console.log("Selected option:", selectedOption);

    if (selectedOption && selectedOption.innerText === "Organization") {
        search_term_1 = input.value;
        input.value = ""; 
    } else if (selectedOption && selectedOption.innerText === "Domain") {
        search_term_2 = input.value;
        input.value = ""; 
    } else if (selectedOption && selectedOption.innerText === "NA") {
      search_term_3 = input.value;
      input.value = ""; 
    } 
    else {
        // If no dropdown item is selected, assume Organization
        search_term_1 = input.value;
        input.value = ""; // Clear the input
    }

    // Make a POST request to your Flask server
    fetch('/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ search_term_1: search_term_1, search_term_2: search_term_2 }),
    })
    .then(response => response.json())
    .then(data => {
        // Hide the loading spinner
        document.getElementById('spinner').style.display = 'none';

        // Display the count at the top
        var countDiv = document.getElementById('count');
        var totalCount = data.total_count ? data.total_count : 'unknown';
        countDiv.innerHTML = `<p>${data.count} of ${totalCount} records found</p>`;

        // Update the #results div with the received data
        var resultsDiv = document.getElementById('results');
        resultsDiv.innerHTML = '';

        // Create a table element
        var table = document.createElement('table');
        table.border = '1';
        table.style.backgroundColor = '#ffffffcc';


        // Specify the order of columns
        var columnOrder = ['Base Domain', 'Serial Number', 'SAN', 'Org Name', 'Org Country', 'Valid From', 'Valid To', 'Product Type', 'CA Owner', ];

        // Create table header row
        var headerRow = table.insertRow();
        columnOrder.forEach(columnName => {
        var headerCell = document.createElement('th');
        headerCell.innerHTML = columnName;
        headerCell.style.color = 'lightblue';
        headerRow.appendChild(headerCell);
        });

        // Create table rows with data
        data.results.forEach(result => {
            var row = table.insertRow();
            Object.values(result).forEach(value => {
                var cell = row.insertCell();
                cell.innerHTML = value;
                cell.style.fontSize = '12px';
            });
        });

        // Append the table to the resultsDiv
        resultsDiv.appendChild(table);

        // Store the search result
        searchResult = data;

        // Show the download button
        document.getElementById('btn').style.display = 'block';
    })
    .catch(error => {
        // Hide the loading spinner in case of an error
        document.getElementById('spinner').style.display = 'none';
        console.error('Error:', error);
    });
}

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500&display=swap");

:root {
  --blue: #9ab3f5;
  --purple: #9a1663;
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  font-family: Roboto-Light,sans-serif;
}

body {
    font-family: Roboto-Light,sans-serif;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 50px;
    font-stretch: normal;
    background-color: #e6eaec;
}

footer {
    display: block;
    bottom:0;
    justify-content: center;
  }

.search-bar {
  display: flex;
  align-content: center;
  border-radius: 50px;
  background-color: var(--white);
  margin: 2rem auto;
  width: 40%;
}


.dropdown{
  position: relative;
  width: 280px;
  border-radius: 50px;
  border: 1px solid var(--white);
  background-color: #0074c3;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.dropdown-text{
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 1rem;
 font-weight: 500;
 color: var(--white);
 padding: 1rem 1.5rem;
}

.dropdown-list{
  position: absolute;
  top: 4rem;
  left: 0;
  width: 100%;
  border-radius: 15px;
  max-height: 0;
  overflow: hidden;
  background-color: var(--white);
  transition: max-height 0.5s;
}

#list.show{
  max-height: 300px;
}

.dropdown-list-item{
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.9rem 0 1rem 1.5rem;
  cursor: pointer;
  transition: margin-left 0.2s ease,color 0.2s ease;
}
.dropdown-list-item:hover{
  margin-left: 0.5rem;
  color: #0074c3;
}

.search-box{
  display: flex;
  align-items: center;
  padding-right: 1rem;
  width: 100%;
  color: #0074c3;
}

.search-box input{
  padding: 1rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  border: 0;
  outline: 0;
}

.search-box i{
  font-size: 1.3rem;
  cursor: pointer;
}

.search-box input::placeholder{
  font-size: 1rem;
  font-weight: 500;
}

/* Darker background on mouse-over */
#btn:hover {
background-color: #037ed0;
color: white;
 }

#btn {
  display: none;
  border: 2px;
  border-radius: 5px;
  height: 37px;
  width: 9%;
  background-color: #0074c3;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 15px;
  margin-right: -10px;
  transition-duration: 50ms;
  cursor: pointer;
}

 #resultsLink {
    position: absolute;
    display: inline-block;
    top: 45px;
    right: 500px;
}

#count {
  top: 45px;
  position: relative;
}

.footer {
    /* position: fixed; */
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: #6a6767; /* Match the text color from Digicert.com */
    font-size: 14px; /* Adjust the font size as needed */
}

.heading {
    text-align: center;
    font-size: 50px;
    margin-top: 33.5px;
    color: #0074c3;
    font-family: FjallaOne-Regular,sans-serif;
  }

.floating-table {
    /* margin: 20px; */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.exportButton {
    position: absolute;
    top: 10px;
    right: 10px;
}

.floating-table button {
    border: 1px;
    display: inline-block;
    overflow: hidden;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 50px;
    }

.resultsTable{
  padding-top: 50px;
}

#resultsTable {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}

#results th, #results td {
    border: 1px solid #dddddd;
    color: #333333;
    text-align: left;
    padding: 6px;
    font-size: 10px;
}

#results th {
    background-color: #f2f2f2 !important;
    color: #0074c3 !important;
    font-size: 106% !important;
    font-weight: bold !important;
}

#results td {
  font-size: 12px;
  border-bottom: 1px solid #dddddd;
  padding: 6px;
  width: auto;
}

input[readonly] {
    background-color: #f2f2f2; /* Light gray background */
    color: #999; /* Gray text color */
    cursor: not-allowed; /* Change cursor to not-allowed */
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #0074c3;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.instruction-box {
    margin-top: 14px;
    position: absolute;
    top: 11.15%;
    bottom: 68%;
    right: 21px;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.6);
    padding: 4px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 515px;
    max-height: 515px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* Modal content */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50% !important;
}

/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.logo {
    display: inline-block;
    margin-left: -25px;
    /* margin-right: auto; */
    width: 30%;
    max-width: 180px;
    height: auto;
    padding-top: 20px;
    position: absolute;
  }

.form-container {
margin-top: 20px;
display: flex;
justify-content: center;
}

.form-container input[type=text] {
padding: 10px;
border: 1px solid #a2a0a0;
border-radius: 5px;
width: 30%;
height: 40px;
font-size: 17px;
margin-right: 10px;
}

.form-container input[type=text]:focus {
outline: none;
border-color: #0074c3;
}

.form-container input[type=text]::placeholder {
    opacity: 0.4;
}

.form-container button {
border: 2px;
border-radius: 5px;
background-color: #0074c3;
color: white;
height: 40px;
width: 12%;
font-size: 17px;
margin-right: 6px;
cursor: pointer;
}

.form-container button:hover {
background-color: #0074c3;
}

/* Responsive layout - makes the menu and the logo stack on top of each other */
@media (max-width: 600px) {
    .logo {
        width: 100%;
    }

    .search-container {
        flex-direction: column;
    }

    .search-container input[type=text], .search-container button {
        width: 100%;
        margin-top: 0;
    }

    .form-container {
        flex-direction: column;
    }

    .form-container input[type=text], .form-container button {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
    }
}

I would like to change the “stat” variable in both of these objects in a loop without doing it manually (I have a larger object than this.)

var obj = {obj1: {stat: 1}, obj2: {stat:1}};

to

var obj = {obj1: {stat: 2}, obj2: {stat:2}};

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

I am trying to implement a persistent floating window in a NextJS 14 app. Basically this window should persist and stay on top, even if you navigate between browser windows. If you minimize your browser window, the floating window should stay on top. All the examples i saw on CodePen the floating window persist only inside the browser window, and not outside the window. Is it possible to develop a floating window that persists outside of the browser, like a persistent floating Picture-In-Picture feature? Is this possible with Electron.js?

how can I achieve this with React Native?

When I click on the paperPlane icon, a map should open, allowing the user to choose a location. A

fter selecting a location, it should appear in this box.

I’m new to mobile development, so I’m wondering if there’s a library or something that can help me

I’m using Filament to build the user interface for my Laravel application, and I’m facing an issue with automatically updating a Leaflet.js map when the table data changes.

I’m using a Filament widget to display a map containing data from a school table. I’m using Leaflet.js to build the map, and I’m fetching school data from the currently active table.

Here’s an example of the PHP code I’m using to fetch school data:

<?php

namespace AppFilamentResourcesSekolahResourceWidgets;

use AppFilamentResourcesSekolahResourcePagesListSekolahs;
use FilamentWidgetsConcernsInteractsWithPageTable;
use FilamentWidgetsWidget;

class PetaSekolahOverview extends Widget
{
    use InteractsWithPageTable;

    protected int $zoomLevel = 15;

    public $sekolah = null;

    protected function getTablePage(): string
    {
        return ListSekolahs::class;
    }

    public function allSekolahMap()
    {
        $sekolah = $this->getPageTableRecords();

        // Process school data into GeoJSON format
        // ...
    }

    public function render()
    {
        $this->sekolah = $this->allSekolahMap();

        return view('filament.resources.sekolah-resource.widgets.peta-sekolah-overview')
            ->with($this->sekolah);
    }
}

I want to note that the map displays correctly when the widget is first accessed, according to the data available in the table. However, when I load another page in the table viewer, the map view doesn’t change.

Here’s a snippet of the Blade code I’m using to display the map:

<x-filament-widgets::widget>
    <x-filament::section>
        <div id="map" style="height: 400px; z-index:0;" x-data="{
            init() {
                const map = L.map('map').setView([-8.6042279, 115.1761774], {{ $this->zoomLevel }});
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: `<a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>`
                }).addTo(map);
        
                let geoSekolah = {{ $this->sekolah }};
                let layerSekolah = L.geoJSON(geoSekolah).addTo(map);
                map.fitBounds(layerSekolah.getBounds());
            }
        }" wire:ignore>

        </div>
    </x-filament::section>
</x-filament-widgets::widget>

Can anyone provide advice or a solution as to why the map isn’t automatically updated with new data every time the table changes? I would greatly appreciate any help and insights from the community. Thank you!

please can I get some help with this code I do not understand why it is not using the imported elements. The error I am getting is All imports in import declaration are unused. I understand what this error implies I just don’t know why the import is not working because I have used the elements as you can see below.

import { hero, volunteer, aims, meetings, footer } from "./sections";

const App = () => {
  return (
    <main className="relative">
      {/* <nav /> */}
      <section className="xl:padding-1 wide:padding-r padding-d">
        <hero />
      </section>
      <section className="padding">
        <volunteer />
      </section>
      <section className="padding">
        <aims />
      </section>
      <section className="padding">
        <meetings />
      </section>
      <section className="bg-black padding-x padding-t pb-8">
        <footer />
      </section>
    </main>
  );
};

export default App;

I have no errors with the export below.

import aims from "./aims";
import footer from "./footer";
import hero from "./hero";
import meetings from "./meetings";
import volunteer from "./volunteer";

export { aims, footer, hero, meetings, volunteer };```


I have tried to import each element individually and also have tried to import directly to the app file with no success on both accounts. 

I’m using a bitmap tracer (Potrace) to try to generate an SVG of the outline of the bitmap. The problem is Potrace generates a filled shape. If I remove the fill and keep the stroke I’m left with two curves, one inside the other. I want to know what I can do to either collapse those two curves into one e.g. by taking some sort of average. Keeping one of the curves and removing the other is also an acceptable solution for me.

I don’t have much experience with SVGs but one way of removing one of the curves is to search within the single tag and remove everything that comes after the second M (move-to) command.

Does anyone have any suggestions how to handle this? The ideal solution would also be one that manages to do this for multiple filled shapes within each other.

Basic scenario:

Complex scenario:

Thanks in advance for your help!