Category: javascript

I have a table that consists of products. between each row of products there is another row that will contain another table which will be the user’s inventory for that particular product above it.

By default, this inventory row contains the class d-none to hide the row when it is not expanded. This is because if I set the height of this row to 0 you can still see the row.

When the user clicks to expand the inventory row for a product, I toggle the d-none class and set the div height to 200px. The below expands the div’s height to 200px instantly and transition that I have set in the CSS is not followed.

css

.inventory {height: 0px; max-height: 200px; overflow-y: auto; transition: height .3s linear;}
.inventory.expanded{height: 200px;}

html

<tr class="data-row">
    ...
    <td class="mb-0 p-1 text-end" style="height: 36px"><h6 class="text-sm mb-0"><em class="table-icon fas fa-chevron-down text-primary cursor-pointer" onclick="expand_card(this)" id="" aria-hidden="true"></em></h6></td>
</tr>
<tr class="mb-0 p-1 d-none" id="inventory-table-">
    <td class="bg-gray-100 py-0 px-2" id="" colspan="8" style="vertical-align: top;"><div class="inventory" style="" id="inventory-div-"></div></td>
</tr>

js

function expand_card(e) {
    let open = e.classList.contains("open")
    if (open) {
        document.getElementById('inventory-table-' + e.id).classList.toggle('d-none');
        document.getElementById('inventory-div-' + e.id).classList.toggle('expanded')
        cards_inventory_table_delete(e.id)
        e.classList.remove("open")
    } else {
        document.getElementById('inventory-table-' + e.id).classList.toggle('d-none');
        document.getElementById('inventory-div-' + e.id).classList.toggle('expanded')
        cards_read(e.id)
        e.classList.add("open")
    }
}

If I removed the d-none class and remove the JavaScript to toggle this class, the transition for the div’s height works as expect but leaves a visible row even when the height is set to zero.

html

<tr class="data-row">
    ...
    <td class="mb-0 p-1 text-end" style="height: 36px"><h6 class="text-sm mb-0"><em class="table-icon fas fa-chevron-down text-primary cursor-pointer" onclick="expand_card(this)" id="" aria-hidden="true"></em></h6></td>
</tr>
<tr class="mb-0 p-1" id="inventory-table-">
    <td class="bg-gray-100 py-0 px-2" id="" colspan="8" style="vertical-align: top;"><div class="inventory" style="" id="inventory-div-"></div></td>
</tr>

js

function expand_card(e) {
    let open = e.classList.contains("open")
    if (open) {
        document.getElementById('inventory-div-' + e.id).classList.toggle('expanded')
        cards_inventory_table_delete(e.id)
        e.classList.remove("open")
    } else {
        document.getElementById('inventory-div-' + e.id).classList.toggle('expanded')
        cards_read(e.id)
        e.classList.add("open")
    }
}

Why is toggling the display causing the transition not to work?

I have a NextJS application which conditionally renders a set of data tables using useState and useEffect:

const [board,setBoard] = useState("AllTime");

const [AllTimeLeaderboardVisible, setAllTimeLeaderboardVisible] = useState(false);
const [TrendingCreatorLeaderboardVisible, setTrendingCreatorLeaderboardVisible] = useState(false);
const [TrendingVideoLeaderboardVisible, setTrendingVideoLeaderboardVisible ] = useState(false)

useEffect(() => {
  board === "AllTime"
    ? setAllTimeLeaderboardVisible(true)
    : setAllTimeLeaderboardVisible(false);
  board === "TrendingVideo" ? setTrendingCreatorLeaderboardVisible(true) : setTrendingCreatorLeaderboardVisible(false);
  board === "TrendingCreator" ? setTrendingVideoLeaderboardVisible(true) : setTrendingVideoLeaderboardVisible(false);
}, [board]);

const handleOnChange = (e: { target: { value: SetStateAction<string>; }; }) => {
  setBoard(e.target.value);
};

The tables visibility is then controlled through a dropdown element:

 <select id ="dropdown" value={board} onChange={handleOnChange} className="mb-5 rounded-full bg-black px-6 py-3 duration-100 ease-in hover:bg-white hover:fill-black hover:text-black w-80 text-3xl tracking-tight font-work">
    <option value="AllTime">All Time</option>
    <option value="TrendingVideo">Trending Video</option>
    <option value="TrendingCreator">Trending Creator</option>
</select>

{AllTimeLeaderboardVisible && <AllTimeLeaderboard />}
{TrendingVideoLeaderboardVisible && <TrendingVideoLeaderboard />}
{TrendingCreatorLeaderboardVisible && <TrendingVideoLeaderboard />}

While I have set „AllTime” as the first option Value, NextJS is giving me a

TypeError: Cannot read properties of null (reading 'useState')

Error which is pointing to:

 const [board,setBoard] = useState('AllTime');

How can this be a property of null?

Why I can’t loop on ‘data’ ?

data = [{type: ‘a’, data: ‘xyz’}, {type: ‘a’, data: ‘xyz’}, {type: ‘a’, data: ‘xyz’}];

for (i in data) {
  console.log('one line');
}

0 results, but data[0], data[1], data[2] has data…

When working on big application with a lot of requests to different endpoints there can be a lot of race conditions in case the responses didn’t return in correct order or you tried to update same id in parallel.
I though about an approach of using Queue which handles promises and resolver which resolves those promises coming from the queue, not sure how to implement it.
Is there any other possible approach?

I’m new in Svelte and i don’t really know how it works yet and i’m going to need a little help.

I have this code in a .svelte file:

{((result = student.startDate.split(“T”)))}

And the HTML file, in the browser, it shows me, litteraly, the value of the variable.
The only thing I want is the JS variable gets updated but without showing it in the browser.

I tried to put that code in a function and call it (the function)
I watched several Youtube tutorials, official documentation, etc… but nothing helped me

I’m building something similar to the instagram story function with HTML, TailwindCSS and JavaScript. I have 6 different slides where I’m navigating with touch taps with hammerJS. At the top I have 6 progression bars which should load while the user is viewing the current slide. I’m doing this with animeJS. The carousel is set up with swiperJS. My problem is, that I’m not able to load the progress bar of the current slide with animeJS. Maybe somebody can help me?

HTML:

<div class="z-50 absolute fixed top-4 left-4 grid grid-cols-6 gap-4 max-w-md">
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide1" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide2" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide3" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide4" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide5" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide6" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
      </div>

The swiper carousel:

let swiper = new Swiper(".mySwiper", {
      speed: 0,
      longSwipes: false,
      allowTouchMove: false,
    });

Make the progress bar full of the previous screen (like if you skip through the story):

swiper.on('slideNextTransitionStart', function () {
      for (let i = 0; i < swiper.activeIndex; i++) {
        $(`#progressSlide${i + 1}`).css('width', '100%');
      }
    });

    swiper.on('slidePrevTransitionStart', function () {
      for (let i = 6; i > swiper.activeIndex; i--) {
        $(`#progressSlide${i}`).css('width', '0%');
      }
    });

Touch navigation with hammerJS:

let hammertime = new Hammer(document.querySelector('#swiper'));

    hammertime.on('tap', (e) => {
      if (e.center.x > window.innerWidth / 2) {
        swiper.slideNext();
      } else {
        swiper.slidePrev()
      }
    });

AnimeJS timeline:

let timeline = anime.timeline({
      targets: `#progressSlide${swiper.activeIndex}`,
      width: "100%",
      autoplay: true,
      duration: 500,
      easing: 'linear',
      loop: false
    })

I want to load the current screen with anime JS like that:

swiper.on('slideChange', function () {
      timeline.pause();
      timeline.restart();
      timeline.add({
        targets: `#progressSlide${swiper.activeIndex}`,
        width: "100%"
      })
      timeline.play();
    });

but it’s not working correctly. Every time it starts from the beginning, means after reaching screen 3 it starts with the progression animation for screen 1, 2 and 3. But I want it only for screen 3 and the current screens are already full loaded.

Bonjour j’ai modifier un fichier .class qui est maintenant en .java mais je n’arrive pas à le remettre en .class quelqu’un aurait une idée ?

(c’est pour un pugglins minecraft)

merci d’avance !!

j’ai essayer la commandes ‘javac NomDuFichier.java’ dans le cmd mais il me répond que ‘javac’ “n’est pas reconnu en temps que commande interne ou externe un programme exécutable ou un fichier de commandes”

I am using webchat cdn of microsoft botframework to make a chatbot. When the welcome message is displayed, there are several buttons below my welcome card which goes beyond the visible area of the chat window. Thus, it automatically scrolls to bottom. I am triggering the webchat by clicking a widget button. I want to disable the scroll to button when the welcome message card appears such that user can see the welcome card area, not the buttons. How can I disable the auto scrolling?

AsyncGenerator.prototype.return() – JavaScript | MDN states:

The return() method of an async generator acts as if a return statement is inserted in the generator’s body at the current suspended position, which finishes the generator and allows the generator to perform any cleanup tasks when combined with a try...finally block.

Why then does the following code print 0–3 rather than only 0–2?

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const values = (async function* delayedIntegers() {
  let n = 0;
  while (true) {
    yield n++;
    await delay(100);
  }
})();

await Promise.all([
  (async () => {
    for await (const value of values) console.log(value);
  })(),
  (async () => {
    await delay(250);
    values.return();
  })(),
]);

I tried adding log statements to better understand where the “current suspended position” is and from what I can tell when I call the return() method the AsyncGenerator instance isn’t suspended (the body execution isn’t at a yield statement) and instead of returning once reaching the yield statement the next value is yielded and then suspended at which point the “return” finally happens.

Is there any way to detect that the return() method has been invoked and not yield afterwards?

I am trying to fetch the price of a stock using fetch in my React App.
When I try to fetch without options or configurations, using fetch(url), this error comes:

Access to fetch at 'https://query1.finance.yahoo.com/v8/finance/chart/RCF.BO' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The API : https://query1.finance.yahoo.com/v8/finance/chart/<SYMBOL>.BO is open. I don’t seem to have any issue fetching it from my browser directly. It’s causing the same issue even when I am including this option to the fetch:

    var options = {
      method: 'GET',
      crossorigin: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
      }
    }

The error I am getting as per my knowledge and research is common. But the solutions proposed, deals with changing the server configurations and allowing different origins, which are not applicable for me as the API I am using is open.

Using no-cors also doesn’t work as I need the data to be visible so that I can use it. I used some third party extensions while development phase, but now while hosting, it’s not fetching the data from the API.

Can someone help with this issue?

I have an example markup:

<p><span style="color: blue;">Yes this one now</span></p>
<p><br></p>
<p>The main configuration value is this</p>
<p><br></p>
<p>!</p>
<p>enable</p>
<p>configure terminal</p>
<p>server name <span style="color: red;">Server Name</span></p>
<p>enable secret <span style="color: red;">Server Pass</span></p>
<p>no ip domain-lookup</p>
<p>ip domain name <span style="color: red;">region</span>.google.com</p>
<p>!</p>
<p><br></p>

I want to write a Javascript to filter all the span tag data into 2 different arrays. One for when color is red and the other one when color is blue. But I am an unable to do that can someone help me out with this? I am trying wiring the JS code but my solution fails.

I have a .js file from which I am assigning several URL addresses that are then being accessed in the frontend, i.e.

let serviceURL1 = “http:/….com”
let serviceURL2 = “http:/….com”

This script is loaded in to the HTML frontend and serviceURL1 is accessed on button click.

How can I check if each of these is reachable, and if not, assign an alternative URL?

The approach I’m trying is like this:

const https = require('https')
https.get('https://avgmarkingress.40260285.qpc.hal.davecutting.uk/', res => {
    if(res.statusCode === 200) {
        console.log('Service online.')
        avgMarkURL = "http://avgmarkingress.40260285.qpc.hal.davecutting.uk/";
    } else {
        console.log('Service offline. Redirecting to backup URL.')
        avgMarkURL = "http://serviceURLbackup.uk/";
    }
})

But it doesn’t seem to be working and I don’t really know what I’m doing to be honest, I appreciate any help from anyone.

I need to create a Google Tag Manager Javascript function that would return a label (group label) from a var entry that is a number (id of the group)
I created this function but it doesn’t work (returns undefined)
I’m really new with Javascript so I don’t understand what is wrong.

function client_group_name(id_client_group) {
var id_client_group = {{CONTEXT - User / Group / ID Default Group}}; //this is my GTM variable , numeric could take value 3, 5, 6 ,7 ,8 ,9 ,10 ,11  
switch(id_client_group) {
    case "3" :
        value = "B2C";
        break;
    case "5" :
        value = 'B2B Entreprises';
        break;
    case "6": case "7": case "8": case "9": case "10": case "11":
        value = 'B2B Café, Hôtel, Restaurant - CHR'
        break;
  }
return value;  
}

Google tag Manager Javascript functions need a function () and return statements to work.
Thanks for your help.
Best regards.

I want to create a simeple page on my website that redirects users to another page based on url parameters in javascript. Basically I want to have something like this url https://example.com/go?redirect=google.com that when visited redirects users to google or any url entered in after ?redirect=.

I have got it working but I want to give it a bit of delay

<script>
var url = new URL(window.location.href);
    var navigate = url.searchParams.get("redirect");
    window.location.href=navigate;
</script>

I have a gridsome project (v0.7.23). I load the Bootstrap framework via npm.
Im using node v14.18.0 via nvm.

When I import a Bootstrap JS component (collapse) :

import Collapse from 'bootstrap/js/src/collapse'

webpack fails to build and returns this error :

Module parse failed: Identifier directly after number (8:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| 
> const MAX_UID = 1_000_000
| const MILLISECONDS_MULTIPLIER = 1000
| const TRANSITION_END = 'transitionend'

 @ ./node_modules/bootstrap/js/src/collapse.js 8:0-14:21 71:23-45 182:4-10 188:22-44 216:20-30 232:23-45 288:19-41 300:0-18
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/gridsome/node_modules/vue-loader/lib??vue-loader-options!./src/components/Nav.vue?vue&type=script&lang=js&
 @ ./src/components/Nav.vue?vue&type=script&lang=js&

It’s like webpack was not able to parse/read the const keyword.

Here is my package.json dependencies (up to date) :

"dependencies": {
    "@gridsome/plugin-sitemap": "^0.4.0",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "gridsome": "^0.7.0",
    "gridsome-plugin-gtm": "^0.1.1",
    "gsap": "^3.6.1"
  },
  "devDependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "^13.2.0",
    "css-loader": "^6.7.2",
    "postcss-loader": "^7.0.2",
    "sass": "^1.56.1",
    "style-loader": "^3.3.1"
  }

Any idea?
thanks