Category: javascript

My question is: if I want to make c required if b or c (not both) exists how can achieve this using Joi validation? please see Json example below:

{
a: ‘1’,
b: ‘2’,
c: ‘3’
}

can any body give a way in Joi validation to achieve the above?

So let’s say you have:

• a button that controls time period
• the button opens a dialog to select the time period
• the button changes text base on the selection (ie “3 days”, “1 week”, etc)

I want to label the button, but if I add aria-label="time period" to the button, then the current value (ie “3 days”) is never read, since the aria-label overrides any current text.

So what is the best solution for both labelling the button, and indicating its current value, to a screenreader?

I’ve been developing a React application and decided to use Bun as my JavaScript runtime for its great performance claims. However, I seem to have stumbled upon an issue regarding hot reloading of my React application.

I start my application using the command bun –watch run dev.tsx and it runs fine initially. However, when I make changes to my App.js file (or any other file), the changes are not being reflected live in the browser. Even after saving the file, I have to manually restart the server to see the changes. I was expecting that the –watch flag would enable some sort of hot reloading, but it appears not to.

Here’s what I run in my terminal:

Listening on http://localhost:3000
GET /
GET /index.css
GET /index.js
GET /bunlogo.svg
GET /favicon.ico
GET /manifest.json
GET /logo192.png

I was wondering if Bun has built-in support for hot module replacement (HMR) or if there’s any workaround to enable live reloading in the browser when I make changes to my files.

Any help or guidance would be appreciated. Thank you.

try {
  for (let i = 0; i < X; i++) {
    something
    try {
      send something
    } catch (e) {
      console.log("ERROR IN LOOP")
    }
  }
  console.log("YAY! LOOP finished")
} catch (e) {
  console.log("ERROR outside loop")
}

but when I run this code, even if there is an error in loop, YAY! LOOP finished is logged.
If there is an error in loop I just want to handle that error there and show it and not run YAY! LOOP finished after it.

I am trying to deploy my signup web app using mailchimp. However, when I tried to run on port 3000. everythime that it success it will send to success.html but when it’s failure, it suppose to send to failure.html however, it’s still sent to success.html and also sometimes i get [nodemon] app crashed – waiting for file changes before starting…

please help clarify what i did wrong on my code. THank you so much. I really appreciate this

the below codes are in app.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const mailchimp = require('@mailchimp/mailchimp_marketing');
const https = require("https");
const request = require("request");

mailchimp.setConfig({
    apiKey: "d7a44647dc9eccdf9ac0ba24c4f38649-us21",
    server: "us21",
  });

app.use(express.static("public"));
app.use(express.json())
app.use(bodyParser.urlencoded({extended: true}));

const port = 3000;

app.get("/", function(req, res) {
    res.sendFile(__dirname + "/signup.html");
});

async function add(member) {
    const response = await mailchimp.lists.addListMember("18eb2787d5", member);
};

app.post("/", function(req, res) {
    const firstName = req.body.firstName;
    const lastName = req.body.lastName;
    const emailAddress = req.body.email;

    const newMember = {
        email_address: emailAddress,
        status: "subscribed",
        merge_fields: {
            FNAME: firstName,
            LNAME: lastName
        }
    };

    add(newMember);

    if (res.statusCode === 200) {
        res.sendFile(__dirname + "/success.html");
    } else {
        res.sendFile(__dirname + "/failure.html");
    }
});

app.post("/failure", function(req, res) {
    res.redirect("/");
})



app.listen(port, function() {
    console.log(`This server is running on port ${port}!`);
})


// My API Key
// d7a44647dc9eccdf9ac0ba24c4f38649-us21

// List ID
// 18eb2787d5

the below codes are in failure.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Failure</title>
        
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
        <!-- Custom styles for this template -->
        <link href="./css/styles.css" rel="stylesheet"> 
    </head>

    <body>
        <div id="pain" class="col-12 mt-5 pt-5">
            <img src="./images/fail.JPG">
        </div>
        <form id="makeItCenter" class="tryAgain" action="index.html" method="post">
          <button class="btn btn-lg btn-warning mt-3" type="submit">Try again</button>
        </form>
        <p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">&copy; Trisha Supannopaj</p>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    </body>
</html>

the below codes are in success.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Success</title>
        
        <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> -->
        <!-- Custom styles for this template -->
        <link href="./css/styles.css" rel="stylesheet"> 
    </head>

    <body>
        <div id="pain" class="col-12 mt-5 pt-5">
            <img src="./images/success.JPG">
        </div>
        <p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">&copy; Trisha Supannopaj</p>
        <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> -->
    </body>
</html>

the below codes are in index.html

<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head>
    

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.112.5">
    <title>Signup</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    
    <!-- Custom styles for this template -->
    <link href="./css/styles.css" rel="stylesheet">
  </head>


  <body class="d-flex align-items-center py-4 bg-body-tertiary">
    <div id="pain" class="col-12">
    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
      <div class="col-10 col-sm-8 col-lg-6">
        <img src="./images/songcard.jpg" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="95%" height="95%" loading="lazy">
      </div>
      <main class="form-signin w-100 m-auto">
        <form action="/" method="post">
            <div id="makeItCenter">
                <img class="mb-2 mt-5" src="./images/avata.PNG" alt="" width="40%" height="40%">
            </div>
            <h1 id="makeItCenter" class="h4 mb-3 fw-normal">Signup Here!</h1>
            
            <div class="form-floating">
            <input type="text" class="form-control mb-1" name="firstName" placeholder="First Name" required autofocus>
            <input type="text" class="form-control mb-1" name="lastName" placeholder="Last Name" required>
            <input type="email" name="email" class="form-control mb-1" placeholder="Email Address" required>
            </div>
    
            <button class="btn btn-primary w-100 py-2" type="submit">Sign Me Up!</button>
            <p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">&copy; Trisha Supannopaj</p>
        </form>
        </main>
      </div>
    </div>
    </div>


        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    </body>
</html>

I have a function in Javascript that receives a parameter with bytes and in the function I convert the parameter result to Uint8Array and then display the iFrame with the content in the “DisplayPDF” element.

Sometimes it loads fast and but when you have a long byte parameter it takes 10 seconds to load. There is something in this function that can be done to display this faster.

 function GetPdf(result) {
            const bytes = `${result}`;
            var stringToArray = bytes.split(/[s,]+/);
            var pdfBytes = Uint8Array.from(stringToArray);

            const bl = new Blob([pdfBytes], {
                type: "application/pdf"
            });
            const url = URL.createObjectURL(bl);
            
            $("#DisplayPDF").html(
                $('<iframe>', {
                    src: url + '#toolbar=0&&scrollbar=1',
                    width: '600px',
                    height: "600px"


                })
            );
        }

View

 <div id="DisplayPDF" style="float: right ; height:20vh; margin-top:12px"></div>

I want to add appointments from my database as events into fullcalendar. Right now the calendar renders, but events do not appear in it.

This is my html code(only the calendar related part):

<head>
    <title>Calendar</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <meta charset='utf-8' />
        <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
              var calendarEl = document.getElementById('calendar');
              var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                headerToolbar: {
                  left: 'prev,next',
                  center: 'title',
                  right: 'timeGridWeek,timeGridDay', },
                  events: '/appointments',

              });
    
              calendar.render();
            });
    
        </script>
</head>

this is the appointments route code:

@app.route('/appointments')
def get_appointments():
    appointments = Appointment.query.all()
    appointments_data = []

    for appointment in appointments:
        appointment_data = {
            'title': appointment.doctor,
            'start': appointment.date.strftime('%Y-%m-%dT%H:%M'),
            'end': (appointment.date + timedelta(minutes=appointment.appointment_duration)).strftime('%Y-%m-%dT%H:%M'),
        }
        appointments_data.append(appointment_data)

    return jsonify(appointments_data)

I have tried some solution from the web, but I did not find any that would resolve my problem. I am fairly new to fullcalendar, so if I am doing something fundamentally wrong, please let me know

i have a simple calculator function that i wrote for a coding challenge and im having trouble with an additional calculate function it requires that operates on promises.

class Calculator{
    constructor(){
        this[Symbol.toStringTag] = 'Calculator'; 
    } 
    add(a, b) {
        return a + b; 
    } 
    subtract(a, b) {
        return a - b; 
    }  
    multiply(a, b) {
        return a * b;
    } 
    divide(a, b) {
        if(b === 0){ 
            return NaN;
        }
        return a / b; 
    }
    toString(){
        return "Calculator";
    }
}

And here are the tests that the promise needs to meet:

 Add a calculate function to Calculator that matches this specification

describe( "Calculator.calculate", function(){
  let calculator;

  beforeEach( function(){
    calculator = new Calculator();
  } );
  
  it( "returns a promise", function( done ){
    const
      callDone = () => done(),
      calculating = calculator.calculate( () => void 0 );
    expect( calculating ).to.be.instanceOf( Promise );
    calculating.then( callDone ).catch( callDone );
  } );
     
  it( "resolves with the result when the calculation succeeds", function( done ){
    const calculating = calculator.calculate( function(){
      expect( this ).to.equal( calculator );
      let result = 0;
      result += this.add( 1, 2 );
      result += this.add( 3, 4 );
      return result;
    } );
    calculating
      .then( function( result ){
        expect( result ).to.equal( 10 );
        done();
      } )
      .catch( () => done() );
  } );
  
  it( "rejects with NaN when the calculation fails", function( done ){
    const calculating = calculator.calculate();
    calculating.catch( function( result ){
      expect( result ).to.be.NaN;
      done();
    } );
  } );
} );

I have a calculate function I wrote but I fear im going about it all wrong and could use any direction or help. Thanks

calculate(...args) {
    var result = 0;
    return new Promise(function(resolve, reject){
      setTimeout(function() {
       if(result === NaN) {
         reject();
       } else {
         resolve();
       }
      }, 1000);
    });
  }

I’m trying to return an object that is a collection of objects that match a given list of search strings.

Testing Data Structure

var data = {
  "tabs-1": {
    "test 1": {
      "test 2": {
        "test 3a": {
          "tab1graph1": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        },
        "test 3b": {
          "tab1graph2": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        },
        "test 3c": {
          "tab1graph3": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        }
      }
    }
  }
};

Input

var searchList = ["apple", "orange", "test 3b", "test 3a"];

Current code that only returns one match, and not both expected matches:

function searchObjectForValues(obj, searchList) {
  var matchingObjects = {};

  function recursiveSearch(currentObj, path) {
    if (typeof currentObj === 'object' && currentObj !== null) {
      for (var key in currentObj) {
        if (currentObj.hasOwnProperty(key)) {
          var value = currentObj[key];
          var currentPath = path.concat(key);

          if (searchList.includes(key)) {
            matchingObjects[key] = currentObj[key];
          }

          recursiveSearch(value, currentPath);
        }
      }
    }
  }

  recursiveSearch(obj, []);

  return matchingObjects;
}

function searchObjectForValues(obj, searchList) {
  var matchingObjects = {};

  function recursiveSearch(currentObj, path) {
    if (typeof currentObj === 'object' && currentObj !== null) {
      for (var key in currentObj) {
        if (currentObj.hasOwnProperty(key)) {
          var value = currentObj[key];
          var currentPath = path.concat(key);

          if (searchList.includes(key)) {
            matchingObjects[key] = currentObj[key];
          }

          recursiveSearch(value, currentPath);
        }
      }
    }
  }

  recursiveSearch(obj, []);

  return matchingObjects;
}

var data = {
  "tabs-1": {
    "test 1": {
      "test 2": {
        "test 3a": {
          "tab1graph1": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        },
        "test 3b": {
          "tab1graph2": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        },
        "test 3c": {
          "tab1graph3": {
            "String a": "value a",
            "String b": "value b",
            "String c": "value c"
          }
        }
      }
    }
  }
};

var searchList = ["apple", "testx3", "test 3b", "test 3a"];

var result = searchObjectForValues(data, searchList);
console.log(result);

How can I modify this function to return just the

"tab1graph1": {
    "String a": "value a",
    "String b": "value b",
    "String c": "value c"
}

part and not the “test 3a” above it?

I want to rust read-fonts within a browser using wasm.

Please see the following github repository with the code:

https://github.com/moontypespace/hello_wasm/tree/main

I get the following error:

hello_wasm_bg.wasm:0x5117 Uncaught (in promise) RuntimeError: unreachable
    at hello_wasm_bg.wasm:0x5117
    at hello_wasm_bg.wasm:0x5ebe
    at hello_wasm_bg.wasm:0x5872
    at hello_wasm_bg.wasm:0x2e10
    at mod_os2_us_weight_class (hello_wasm.js:96:10)
    at index.html:12:9

I am able to reach the rust function mod_os2_us_weight_class and run it without any issues, if there is only an alert with some text. As shown in the following demo:
https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm

But when I want to make use of read-fonts to load a font and get it’s data, I get the mentioned error. The rust code seems to work. For reference please see the following:
How do I modify a font and save it with Rust ‘write-fonts’?

Please make sure to replace the font paths when you play with the github repository.

I have a JS file which contains the follow code which is used for a Google Place autocomplete field

function init_autocomplete_fields() {

var acInputs = document.getElementsByClassName("de_fb_autocomplete");

if ( typeof google.maps.places.Autocomplete != 'undefined' ) {
    for (var i = 0; i < acInputs.length; i++) {

        var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
        autocomplete.input_obj = jQuery(acInputs[i]);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                autocomplete.input_obj.parent().find('.de_fb_lat').val( place.geometry.location.lat() );
                autocomplete.input_obj.parent().find('.de_fb_lng').val( place.geometry.location.lng() );
                autocomplete.input_obj.dispatchEvent(new Event('change'));
            });
        }
    }
}

For another function on my site which is situated outside of this JS file, I need to call the change event when the address has been selected. I am attempting to do this with this line:
autocomplete.input_obj.dispatchEvent(new Event('change'));

The issue I’m having is that I am getting this error:
autocomplete.input_obj.dispatchEvent is not a function

I’ve done some googling to try and establish the cause and am seeing lots about jQuery noConflict however not sure how this applies in this situation. How can I resolve this particular error or reach the same solution?

I want to render my Header Component on all routes except the routes within the layout function Scaffold I have tried creating an Applayout function that accepts props and children but I’m met with different errors

my code as it stands

import Header from "./Header"
import Footer from "./Footer"
import { Routes, Route, Navigate } from "react-router-dom";
export default function AllRoutes() {
    return (
        <ThemeProvider theme={light}>
            <Header />
            <Routes>
                <Route
                    path='/'
                    element={<Component />}
                />
                <Route path='/someroute' element={<NotFound />} />
                <Route
                    path={"/someroute"}
                    element={<Component />}
                />
                <Route
                    path={"/someroute/*"}
                    element={<Component />}
                />
            
                <Route
                    path='/someroute/*'
                    element={
                        <Scaffold noSpacing>
                            <ThemeProvider theme={light}>
                                <Routes>
                                    
                                    <Route
                                        path={"/someroute/*"}
                                        element={<Component />}
                                    />
                                    <Route
                                        path='/*'
                                        element={<Navigate to={"/someroute/notfound"} />}
                                    />
                                </Routes>
                            </ThemeProvider>
                        </Scaffold>
                    }
                />
                <Route path='/*' element={<Component />} />
            </Routes>
            <Footer />
        </ThemeProvider>
    );
}

I am working on a website and ran into a little problem. Everything works nice but the hamburger icon stops to work or is not clickable when the sticky navbar is above a relative positioned element like a div-block. I am using Tailwindcss and a very simple js script. I hope somebody can help me with that.

Here the navbar code:

<!-- Hambuger Icon Manu Balken-->
    <div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
        <button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
            <span>
                <span class="block bg-black w-8 h-0.5 mb-1 "></span>
                <span class="block bg-black w-8 h-0.5 my-1"></span>
                <span class="block bg-black w-8 h-0.5 mt-1"></span>
            </span>
        </button>
        <a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif"
            href="#">Jetzt anfragen!</a>
    </div>


    <div class="navbar-menu relative z-50 hidden">
        <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
        <!--mobile side menu-->
        <nav
            class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
            <div class="flex items-center mb-8">
                <button class="navbar-close h-8">
                    <span class="block">
                        <span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
                        <span class="block opacity-0 bg-black w-8 h-0.5"></span>
                        <span class="block bg-black w-8 h-0.5 -rotate-45 "></span>

                    </span>
                </button>


            </div>
            <div>

                <ul class="flex flex-col justify-center items-center">
                    <li class="mb-1">
                        <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
                            href="#">Home</a>
                    </li>
                    <li class="mb-1">
                        <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
                            href="#">About Us</a>
                    </li>
                    <li class="mb-1">
                        <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
                            href="#">Services</a>
                    </li>
                    <li class="mb-1">
                        <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
                            href="#">Pricing</a>
                    </li>
                    <li class="mb-1">
                        <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
                            href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="mt-20">
                <p class="my-4 text-xs text-center text-gray-800">
                    <span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
                    <span class="block my-3"><a
                            href="mailto:[email protected]?subject=Hochzeitsplanner gesucht">Email:
                            [email protected]</a></span>
                </p>
                <div class="pt-6 ">
                    <a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md"
                        href="#">Jetzt anfragen!</a>
                </div>

            </div>
        </nav>
    </div>


    <!---- HEADER-->
    <header class="flex flex-col justify-center items-center bg-white">
        <div class="">
            <img class=" w-52 h-52 lg:w-80 lg:h-80" src="./assets/img/xyz.png"
                alt="Logo">
        </div>
        <div class="flex justify-center gap-8 pt-4 pb-8">
            <a href="#"><img src="./assets/img/facebook.png" alt="Facebook" height="20px" width="20px"></a>
            <a href="#"><img src="./assets/img/twitter.png" alt="Twitter" height="20px" width="20px"></a>
            <a href="#"><img src="./assets/img/instagram.png" alt="Instagram" height="20px" width="20px"></a>
            <a href="#"><img src="./assets/img/pinterest.png" alt="Pinterest" height="20px" width="20px"></a>
        </div>
    </header>

<!---Desktop Menu-->
    <nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">


        <ul
            class=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
            <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
            <li class="text-gray-300">

            </li>
            <li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
            <li class="text-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
            </li>
            <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
            <li class="text-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
            </li>
            <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
            <li class="text-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
            </li>
            <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Contact</a></li>
        </ul>
        <a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold  rounded-sm transition duration-200"
            href="#">Jetzt anfragen!</a>
        <a class="hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200"
            href="#">Sign up</a>
    </nav>

And here’s the js script:

document.addEventListener('DOMContentLoaded', function () {
            // open
            const burger = document.querySelectorAll('.navbar-burger');
            const menu = document.querySelectorAll('.navbar-menu');

            if (burger.length && menu.length) {
                for (var i = 0; i < burger.length; i++) {
                    burger[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

            // close
            const close = document.querySelectorAll('.navbar-close');
            const backdrop = document.querySelectorAll('.navbar-backdrop');

            if (close.length) {
                for (var i = 0; i < close.length; i++) {
                    close[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

            if (backdrop.length) {
                for (var i = 0; i < backdrop.length; i++) {
                    backdrop[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }
        });

I tried different z-values but without any effect. It works once I remove the relative class from one of the div blocks, but I definitely need that to position some elements. Something about the overlapping creates problems.

I try to stream a video through a websocket. I made at first muted video transfer e.g. client -> websocket -> clients. All working fine with that. But when I try to get a video with sound from socket, app raise an error:

Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

I have suspicion that reason in mime type or in appending data to buffer but I got no success yet.

Client:

    videoBitsPerSecond: 400000,
    audioBitsPerSecond: 126000,
    mimeType: 'video/webm;codecs=vp8'
  })
  data.start(1000)
  data.ondataavailable = async (e) => {
    ws.send(await e.data.arrayBuffer())
  }
}
import JSON from '../config.json' assert { type: "json" };

const button = document.getElementById("capture_screen")
const video = document.getElementById("video_preview")

const ws = new WebSocket(`ws://${JSON.ip}:${JSON.port}`)
ws.binaryType = "arraybuffer"

const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', setupOpen)

function createProvider(captureDisplay){
  if(!(!!captureDisplay) || !captureDisplay.active) return

  let data = new MediaRecorder(captureDisplay, {
    videoBitsPerSecond: 400000,

    mimeType: 'video/webm;codecs=vp8'
  })
  data.start(1000)
  data.ondataavailable = async (e) => {
    ws.send(await e.data.arrayBuffer())
  }
}

async function captureScreen(displayMediaOptions){
  try {
    return await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}

async function handleCapture() {
  createProvider(await captureScreen({
    video: true,
    audio: true
  }))
}

button.addEventListener('click', () => handleCapture())

function setupOpen(_){
  const media = this
  const sourceBuffer = media.addSourceBuffer('video/webm;codecs=vp8')
  sourceBuffer.mode = 'sequence'
  ws.onmessage = (e) => {
    sourceBuffer.appendBuffer(e.data) // Cause an error
  }
}

WebSocket:

import {WebSocketServer} from "ws";
import signale from "signale"
const logger = new signale.Signale({})

const wss = new WebSocketServer({port: 8000})
logger.success("WebSocket was successfully created.")

let clients = []

function heartbeat(){
    this.isAlive = true
}


wss.on("connection", (ws)=> {
    clients.push(ws)
    ws.isAlive = true
    logger.info(ws._socket.remoteAddress + " has connected to a server!")
    ws.on("message", (data)=> {
        clients.forEach((client)=> {
            logger.note(ws._socket.remoteAddress + " send a data to: " + client._socket.remoteAddress)
            client.send(data)
        })
    })
    ws.on('pong', heartbeat)
})

const interval = setInterval(function ping(){
    clients.forEach(client => {
        if(!client.isAlive){
            logger.info(client._socket.remoteAddress + " has disconnected.")
            clients = clients.filter(cl => cl !== client)
            return client.terminate()
        }
        client.isAlive = false;
        client.ping();
    })
}, 2000)

I tried different mime types to look if something changes. Nothing happened.
Also I tried to make a query of data in case if sourceBuffer is still updating. When I received a message from websocket I check if buffer is updating, if so, I push my data to a query which should be loaded later at “update” event. But sourceBuffer never shows that it’s updating therefore “update” event never invoked.

I’m working on a site, and when an individual visits a certain page, I need the page to refresh.

I tried using location.reload() as well as the timeout function, but the page kept reloading. I just need to impose a limitation on the function to have one relaod.