Category: javascript

Thanks in advance for any suggestions. Completely new to JS and coding generally, so bear with me here. I’m not remotely familiar with any frameworks, so this is strictly vanilla.

I have a modal that appears as the first thing the user sees. It contains a series of inputs and a button to submit that data. When the button is clicked, the modal’s opacity fades to 0, and it ceases to accept pointer-events, allowing the user to see and use the content beneath it.

Goal: I don’t want screenreaders to announce anything in the background (let’s call it backgroundContainer) until the modal is dismissed.

Tried:
Setting aria-hidden = "true" in the HTML and then having the form submission trigger backgroundContainer.setAttribute('aria-hidden', 'false'); in the JavaScript. Tried the same thing as an event listener when the user clicks on the Submit button.

Outcome:
The HTML works as expected; background-container is ignored on loading the page. However, NVDA(screenreader) doesn’t read the backgroundContainer after the button press.

Tried:
Adding backgroundContainer.inert = false; to the above and wrapping the whole thing in a function to be called either by the form’s submission or in response to a separate event listener connected to the submit button. For example:

function ariaReset() {
    let backgroundContainer = document.getElementById('background-container');
    backgroundContainer.inert = false;
    backgroundContainer.setAttribute('aria-hidden', 'false');
}

Outcome: As above.

I’ve also tried a few variations on the above, but I suspect I’m just going about it all wrong. Any and all help appreciated.

I have several components which might differ from page to page in my React/NextJS application. They are dynamically mapped, and now I need to see which one is in the viewport when scrolling.

I could when mapping the components put a div in between all of them, and put useRefs on all the divs, but I was thinking this seems like the ugliest method.

Do you have any other suggestions?

Thank you for your time

I am very new to Vue js, and have skimmed through a decent amount of tutorials and Vue documentation and decided to make a small website.

Website Image

How it works is a random sentence or two of text is pulled from a .json file, and displayed. This sentence has typos in it, and the player is given 3 characters that fix the typos and 3 randomly generated characters to throw them off.

The next step for this is how do I make it so players are able to drag and drop the text given to them inside the text.

So far I’ve looked through a few libraries and the HTML implementation, but they don’t seem to work for my application, as I can’t seem to find how I could insert the player’s character into the real text.

Thanks if anyone can help in advance!

In an online course I am currently working on, a responsive grid layout of images was introduced. The course author claimed that the presented behaviour could only be achieved through a combination of CSS and JavaScript.

I have recreated the expected behaviour in this CodePen here!

I can see where the tutor is coming from, and I have to admit that I found it quite challenging to come up with a CSS-only-solution by myself.

I do, however, have a string feeling that the presented solution from the CodePen above feels a bit hacky and I am not really happy with it. I feel like there should be a CSS-only solution that recreates the behaviour without mixing CSS and JavaScript.

I especially dislike that this solution requires both the CSS-grid-property grid-auto-rows: 10px; and the “duplicated” value in the JavaScript when calculating const rowCount = Math.ceil(height / 10); – Those two values have to be “synced”; otherwise the solution breaks. That’s nasty 🙂

Any thoughts how to achieve the same result with CSS only?

HTML

<div>
  <img src="https://picsum.photos/seed/1/200/300" />
  <img src="https://picsum.photos/seed/2/300/700" />
  <img src="https://picsum.photos/seed/3/200/500" />
  <!-- ... -->
  <img src="https://picsum.photos/seed/8/200/400" />
</div>

CSS

div {
  list-style: none;
  margin: 0;
  padding: 0;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px; /* this value of 10px has to be synced with the formular for calculating rowCount in JAvaScript */
  grid-gap: 0 10px;
}

div img {
  max-width: 200px;
}

JavaScript

const setSpans = img => {
  const height = img.clientHeight;
  const rowCount = Math.ceil(height / 10); // this value of 10 has to be synced with the CSS grid-auto-rows property
  
  img.style.gridRowEnd = `span ${ rowCount + 1}`;
}

const imgs = document.querySelectorAll("img");

for (const img of imgs) {
  setSpans(img);
  img.addEventListener("load", () => setSpans(img));
}

Is there a way to open browser and automate tasks using JavaScript while my computer is on but without having anything opened? Perhaps using NodeJS? Just to clarify, I’m not talking about JS methods like window.open(), I’m talking about automating tasks on hardware level.

For instance:

1. Open Chrome at 12:00PM on Wednesday.
2. Go to google.com.
3. Sign in.

If JavaScript can’t do it, what language should I learn that’s closest to JavaScript syntax?

I’m trying to insert selected checkbox value into my database but I don’t seem to know how because I’m new to laravel.

This is the foreach code:

@foreach($users as $user)
                                    <?php $id +=1; ?>
                                    <ul class="list-group">
                                        <div class="card">
                                            <li class="list-group-item group-containers">
                                                <div class="row">
                                                    <input type="checkbox" value="{{ $user->name }}" onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver"
                                                        value="{{ $user->name }}">
                                                    <div class="col-1 c-avatar mr-3">
                                                        <img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
                                                    </div>
                                                    <div class="col-8">
                                                        <div class="">{{ $user->name }}</div>
                                                        <label for="" class="text-secondary">{{ $user->email }}</label>
                                                    </div>
                                                </div>
                                            </li>
                                        </div>
                                    </ul>
                                    @endforeach

Here is my checkbox code:

                        <div class="card-body scroll" style="background-color: #F2F2F2">
                            <div id="listUser"></div>
                                <ol class="list-group" style="display:none">
                                    <div class="card">
                                        <li class="list-group-item">
                                            <div class="row">
                                                <div class="col-1 c-avatar mr-3">
                                                    <img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
                                                </div>
                                                <div class="col-8">
                                                <div class="">{{ $users[0]->name }}</div>
                                                </div>
                                            </div>
                                        </li>
                                    </div>
                                </ol>
                            </div>

And my javascript code:

function checkBox(cb) {
        var inners = '<ol id="'+ cb.value +'" class="list-group">' +
            '<div class="card">' +
            '<li class="list-group-item">' +
            '<div class="row">' +
            '<div class="col-1 c-avatar mr-3">' +
            '<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">' +
            '</div>' +
            '<div class="col-8">' +
            '<div class="">' + cb.value + '</div>' +
            '</div>' +
            '</li>' +
            '</div>' +
            '</ol>';
            console.log(cb.value);

        if (cb.checked == true) {
            //text.style.display = 'block';
            document.getElementById('listUser').innerHTML += inners;
        } else {
            // text.style.display = 'none';
        document.getElementById(cb.value).remove();
        }
    }

The data I’m trying to insert is the name and email. Is there any solutions?

this is a solution for the problem, not a question, at first, I was trying to redirect the user to the registration page if they haven’t already logged in, but unfortunately, react-router-dom v6 was out already and the official website was of no help.

This is what I was trying to do

import Home from "./pages/Home/Home";
import Register from "./pages/Register/Register";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Redirect
} from "react-router-dom";

function App() {
  const userauth = false
  return (
    <Router>
        <Routes>
          <Route exact path='/' element={userauth ? <Home /> : <Redirect to="/register"/>}/>
        </Routes>
    </Router>
  )
}

you only need to replace “Redirect” with “Navigate”

    import Home from "./pages/Home/Home";
    import Register from "./pages/Register/Register";
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      Navigate
    } from "react-router-dom";
    
    function App() {
      const userauth = false
      return (
        <Router>
            <Routes>
              <Route exact path='/' element={userauth ? <Home /> : <Navigate to="/register"/>}/>
            </Routes>
        </Router>
      )
    }

I wanna build up an function where it checks which numbers are reachable… like

const number = 720
let arrayNumbers = []
let count = 30

arrayNumbers = arrayNumbers / 30 

arrayNumbers is equal then to [24]

But i wanna have it like

[30, 60, 90, 120 ...]

like an incrementing array.

does anybody have a clue how i can reach this?

So I have this function

app.post('/assignment/loan', (req, res) => {

And inside that function I have this function

db.run('SELECT loanable FROM book WHERE id=?',[bookID],(err,row)=>{

I use return but it only exits the internal function and keeps on going with the rest. I want to stop the whole post function from executing further. Is there a way to do that?

Thank you in advance.

In this code, I have created local storage ‘selection’ for storing what is checked.

when I reload the page, what was selected before should already show a checked

I am not aware if there is a properly like that for antd table
please help
app.js file

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      localStorage.setItem("selection", JSON.stringify(selectedRows));
      var storage = localStorage.getItem("selection");
      console.log(storage);
      // console.log(
      //   `selectedRowKeys: ${selectedRowKeys}`,
      //   "selectedRows: ",
      //   selectedRows
      // );
    },
    getCheckboxProps: (record) => ({
      disabled: record.ifsc === "Disabled User",
      ifsc: record.ifsc,
      className: "checkbox-red"
    })
  };

  // var dataSource2 = this.storage;
  return (
    <>
      <div className="container">
        <div className="container2">
          <Search
            onChange={(e) => setSearchVal(e.target.value)}
            placeholder="Search"
          />
        </div>
        <br /> <br />
        <Table
          rowSelection={rowSelection}
          rowKey="ifsc"
          dataSource={filteredData}
          columns={userColumns}
          loading={loading}
          pagination={
            <Pagination
              size="small"
              showSizeChanger
              showQuickJumper
              defaultCurrent={2}
              total={500}
              onChange={onChange2}
            />
          }
        />

link below
https://codesandbox.io/s/search-in-react-table-forked-p9x544

I have the start and end time in my x axis, but I want to display upto 10 time intervals on my x axis. For example if my start time is 10:00 am and end time is 10:30, I want to show 10:00am, 10:05am, 10:10am and so on based on what time range we get. How can I do it in react-chartjs?

chartOption in state is:

chartOptions: {
                scales: {
                    x: {
                        type: 'timeseries',
                        ticks: {
                            maxTicksLimit: 10
                        },
                       distribution: 'linear'
                    },
                    yAxes: {
                        min: 50,
                        max: 100,
                        ticks: {
                            maxTicksLimit: 10
                        }
                    }
                }

data:

formatData = {
           labels: [moment().format('hh:mm'), momentInstance().subtract(30,'m').format('hh:mm')],
           datasets: [{
            }]
        }

I have a custom player for audio using web api.
Everything works perfectly, on web, on Android, but on IOS.
Actually everything on IOS works BUT volume change.
The method to change volume is completely standard, I pass a number between 0.0 and 1.0 and set the volume property with that value, but it seems like capacitor on IOS just don’t register it, the DOM element register the change, I can read it by the property, but the change by itself doesn’t trigger the event “volumechange”.
Has anybody encountered this issue and got a workaround?
I am on capacitor3.

// init audio
this.audio = new Audio();
// ...
// etc

// property changes, but real volume doesn't change on IOS, it changes on android and on web app
setVolume(volume: number) {
    this.audio.volume = volume;
}

// it returns the value I set on IOS
getVolume(volume: number) {
    return this.audio.volume;
}

// doesn't trigger on IOS, triggers on android and on web app
this.audio.addEventListener('volumechange', (e) => {
    console.log('Volume Changed!');
})

Lets say I do have code like this:

let connection;
let preparedStatement;

connection = createConnectionSomehow();
connection.setAutoCommit(false);

preparedStatement = connection.prepareStatement(query1);
preparedStatement.executeUpdate();

preparedStatement = connection.prepareStatement(query2);
preparedStatement.executeUpdate();

connection.commit();

Will both queries been executed or will the second query overwrite the first one?

I created a home page that contains three components HomeHeader, CompanyList and ScrollToTopBtn.
Focusing on CompanyList it is a container component that shows list of CompanyCards that were fetched using an API in Home page. List of companies are initialized in Home page like this

const [companies, setCompanies] = useState([]);

The problem is that initially after making the API call, I use spread operator to update the companies list like this

setCompanies(prevCompanies=>{return [...prevCompanies, fetchedCompanies]});

But an error occurs since I believe that there is an empty element in index 0. companies list must has looked like this ['','Facebrog','Binterest'] for example.

I tried to use another approach by using concat method but companies list stayed empty and showed no companies found message.

Below is the source code for Home page

const Home = () => {
    const [page, setPage] = useState(1); //In order to avoid showing "no companies found" initially
    const [isLoading, setIsLoading] = useState(true);
    const [companies, setCompanies] = useState([]);
    const [isError, setIsError] = useState(false);
    const [hasMore, setHasMore] = useState(false);
    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            setIsError(false);
            try {
                const fetchedCompanies = await fetchFeedData(page);
                setCompanies((prevCompanies=>{prevCompanies.concat(fetchedCompanies)})); //problem here
                setHasMore(fetchedCompanies.length > 0)
            } catch (e) {
                setIsError(true)
                setHasMore(false);
            }
            setIsLoading(false)
        }
        fetchData();
    }, [page])
    return (
        <div>
            <ScrollToTopBtn />
            <Helmet>
                <title>{stackinfo.title} - {home.title}</title>
            </Helmet>
            <HomeHeader />
            {
                isLoading ? (<LoadingSpinner />) :
                    isError ? (<ErrorBoundary message={somethingWrongError.message}></ErrorBoundary>) :
                        <CompanyList companies={companies} ></CompanyList>
            }
            <Container className={"mt-5"}>
                <Row>
                    <Col sm={12}>
                        {(!isLoading && !isError && hasMore) && 
                        <CustomBtn
                            ButtonText={showMoreBtnText.message}
                            onClick={() => { console.log("Need to increment number of pages") }}
                        ></CustomBtn>}
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

I tried to check the fetchedCompanies and companies after making the API call

const fetchedCompanies = await fetchFeedData(page);
//Returning new array containing previous companies and recent fetchedCompanies
console.log(fetchedCompanies);
setCompanies((prevCompanies=>{prevCompanies.concat(fetchedCompanies)}));
console.log(companies);

fetchedCompanies logged an array that has 9 elements, while companies as mentioned above logged empty array [].

Sorry if I missed something, I am still new to React.

I searched whole stackoverflow to fix it, but cant. So… I need to use NPM module in browser (index.html).

Getting error “require is not defined” if using

<script src="./script.js"></script>

in html file, and using const { WebcastPushConnection } = require('tiktok-livestream-chat-connector'); in script.js.

Tried to use browserify, and when i use outputed js script getting error “require.resolve is not a function”

Can anyone help?