Category: javascript

I have a problem that the status bar covers part of the application, and I would like the status bar to be separate from the application. I use Angular 12 and Capacitor V4, should i use capacitor save-area package? This issue only appear on iphone with notch, on Android, iPad works very well.
This is what the app looks like when you run it.
enter image description here
When I minimize the apps and come back again, the app gets a black bar at the top that just separates the apps and I wish it was like this all the time
enter image description here

Aplication with black bar on top.

I’ve been working on a webRTC based video calling app, using react js and socket.io. first, it was stuck on negotiation needed, then later on I added event handlers to handle those events and followed the steps mentioned here: https://webrtc.org/getting-started/overview. I can see my own stream but nothing shows up for the remote stream, The streams are basically set in state and are MediaStream objects which are played by react-player. I’ve set add track on the callee side also, the connection is established and we can get the remote stream id too. Still can’t get anything to play, a screenshot of chrome://webrtcinternals is attached here.

I’ve tried to play it without react-player, still have the same issue. on using useRef it’s the same, nothing shows up on the remote stream. how to make sure that the stream is being transmitted, also the stream inside the console log shows up as active

1. I was having .git in server also and in client also means i am **having two git repo **and I want to create on root git repo and add both of them inside it.

when I did this node modules also push in git repo and one of folder like client was not accessible.

1. firstly add .gitignore in parallel folder with client and server.
2. paste this code in .gitignore so that server’s and client’s node_modules folder should not uploaded in git.

.gitignore

3. go inside client and delete git and .gitignore file if present, using rm -rf .git & rm -rf .gitignore or you can directly delete that file.
4. create new repo in github.
5. git init .
6. git add remote origin https://YOUR_GIT_REPO.git
7. git add .
8. git commit -am “commited”
9. git push origin master

I am working on creating table rows dynamically on button click. So I have some map data returned from server in this format for two different services:

reportData: 
Site Recovery Vaults:[14503.13, 1019, 971.97, 1140.69, 1129.17, 1217.46, 1182.04, 1244.61, 1262.06, 1237.42, 1373.54, 1335.12, 1390.05, 0]
Total:[14503.13, 1019, 971.97, 1140.69, 1129.17, 1217.46, 1182.04, 1244.61, 1262.06, 1237.42, 1373.54, 1335.12, 1390.05, 0]

reportData: 
Disks:[13045.35, 985.73, 966.29, 987.02, 959.48, 1012.96, 1010.27, 1018.69, 1013.26, 1015.25, 1075.85, 1090.98, 1110.98, 798.57]
Images:[7.3, 0.56, 0.56, 0.57, 0.55, 0.57, 0.56, 0.57, 0.57, 0.57, 0.6, 0.6, 0.59, 0.43]
Snapshots:[81.52, 15.75, 11.09, 1.7, 1.65, 7.84, 7.68, 0.26, 1.45, 9.9, 4.55, 7.36, 7.15, 5.14]
Total:[31948.73, 2233.36, 2097.09, 2241.42, 2135.11, 2489.97, 2548.01, 2500.82, 2502.82, 2618.89, 2861.08, 2809.17, 2860.55, 2050.44]
Virtual Machine[18814.57, 1231.32, 1119.14, 1252.13, 1173.43, 1468.61, 1529.5, 1481.3, 1487.53, 1593.17, 1780.08, 1710.24, 1741.83, 1246.31]

So, my main objective is to display Total row at the bottom of the table body.
As you can see, for service 1 – Total row data is already at bottom but for service 2 it is present at some other index.

function to create table row and table head dynamically:

function getReportData(){
    var client_id = $("#clientid").val();
    var report_id = $("#reportid").val();
    var name = $("#reportid option:selected").text();
    $.ajax({
        url: "/emerge/mvc/ajax/cloudhealth/ReportCostData",
        data: {
            report_id: report_id,
            client_id: client_id
        },
        type: "POST",
        success: function (response) {
            var td = "", tableBody="", thead="";
            if(Object.keys(response.reportData).length != 0){
                thead = "<tr><th scope='col'>Service Category</th>";
                for(var i = 0; i < response.timeDimension.length; i++){
                        td = td+"<th scope='col'>"+response.timeDimension[i]+"</th>";
                }
                thead = thead+td;
                var nColumns = Math.max.call(null, ...Object.values(response.reportData).map(v => v.length));
                Object.entries(response.reportData).forEach( ([rowId, values]) => {
                    values = values.length < nColumns ? values.concat(...[...Array(nColumns - values.length)].map(_ => '0')) : values;
                    tableBody = tableBody + `<tr><td>${rowId}</td><td>${values.join(`</td><td>`)}</td></tr>`;
                    
                });
                document.getElementById('thead').innerHTML = thead;
            }else{
                tableBody = "<tr><td colspan='"+response.timeDimension.length+1+"' style='text-align: center;padding-top: 100px;font-size: 1.23em;'>No Data Available</td></tr>";
            }
            
            document.getElementById('report_data').innerHTML = tableBody;
            document.getElementById('rpt_namediv').innerHTML = "<h6>"+response.cloudHealthReport.report+" : "+name+"</h6>";
            document.getElementById('reportdataDiv').style.display = "block";
        },
        error: function (error) {
            console.log(`Error ${error}`);
        }
    });
}

I want to display this Total row value at the bottom of the table body whatever the data returned by the server for different services.

I haven’t found in the documentation or on the internet how to call the on() method in the react locomotive scroll. If you know how to do it, please advise.

const ref = useRef(null);

const options = {
  smooth: true,
  lerp: 0.08,
  table: {
    smooth: true
  },
  smartPhone: {
    smooth: true
  },
}

<LocomotiveScrollProvider options={options} containerRef={ref}>
   <div className={demoFour.demo_four} data-scroll-container ref={ref}>
      <div className={demoFour.demo_four__container}>
         <section className={demoFour.home} data-scroll-section=""></section>
       </div>
    </div>
</LocomotiveScrollProvider>

I have created a component library in React and am using rollup as my bundler.

My project directory looks like this:

src
├── assets
│   ├── fonts
│   └── icons
├── components
│   ├── Alert
│   │   ├── Alert.tsx
│   │   └── index.tsx
│   ├── Button
│   │   ├── Button.tsx
│   │   └── index.tsx
│   └── index.tsx
├── styles
├── utils
└── index.tsx

My package.json looks like this:

"files": [
  "dist"
],
"main": "dist/esm/index.js",
"module": "dist/esm/index.js",
"type": "module",
"exports": {
  ".": "./dist/esm/index.js",
  "./components": "./dist/esm/components",
  "./assets": "./dist/esm/assets",
  "./utils": "./dist/esm/utils"
},
"types": "dist/index.d.ts",

My rollup configuration looks like:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';

import copy from "rollup-plugin-copy-assets";
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';

import svgr from '@svgr/rollup';

import packageJson from './package.json' assert { type: "json" };

/**
 * @type {import('rollup').RollupOptions}
 */
const config = [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
      },
    ],
    plugins: [
      copy({
        assets: [
          "src/assets",
        ]
      }),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.build.json',
        declaration: true,
        declarationDir: 'dist',
      }),
      postcss(),
      svgr({ exportType: 'named', jsxRuntime: 'automatic' }),
      terser(),
    ],
    external: ['react', 'react-dom', 'react-select', 'styled-components'],
  },
  {
    input: 'dist/esm/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: "esm" }],
    external: [/.(css|less|scss)$/],
    plugins: [dts()],
  },
];

export default config;

Currently when I use the library, I have to import components like

import { components } from 'package-name';

But I would like to be able to import like

import Alert from 'package-name/components/Alert';

// or

import { Alert } from 'package-name/components';

How can I set up rollup/package.json to allow for this?

I am trying to filter a list in reactJS to only include elements that have the text “JR:” in them, however for some reason the filter is returning an empty array. I am fairly new to JS, coming from a java background, so potentially think the issue may be i am returning inside the forEach, not the filter? Not sure, any help would be much appreciated.

Thanks

        let updated = this.widgetCopy
        const filtered =  updated.filter((widget)=>{
             this.state.selected.forEach((status)=>{
                if(status.includes("JR:")){
                    console.log(widget)
                    return widget.jr !== null
                }else{return true}
            })
        })
        console.log(filtered)

My array:

{
  "items": [{
    "url": "XXX",
    "title": "XXX",
    "tags": [
      "One",
      "Two"
    ]
  }]
}

I am trying to filter out and return items only where tags has “Two”

const loadArticles = async () => {
fetch(mediumRssFeed, { headers: { Accept: "application/json" } })
.then((res) => res.json())
.then((data) => data.items.filter((item) => ???))
.then((newArticles) => newArticles.slice(0, MAX_ARTICLES))
.then((articles) => setArticles(articles))
.catch((error) => console.log(error));
};

I assume it is this line:

.then((data) => data.items.filter((item) => ???))

How do I revise so that it only return those items with a tag of “Two”?

I am having a GV file like this:

digraph Final_Graph {
    graph [center=true rankdir=LR ratio=compress size="15,10"]
    a
    b
    c
    d
    a -> b [label = 1 id=1]
    a -> c [label = 2 id=2]
    a -> d [label = 3 id=3]
    b -> d [label = 4 id=4]
    c -> d [label = 5 id=5]

    subgraph cluster_1{
        color=lightgrey style=filled
        label="A"
        a
        b
    }
    
    subgraph cluster_2{
        color=lightgrey style=filled
        label="B"
        a
        b
    }
    
    subgraph cluster_3{
        color=lightgrey style=filled
        label="C"
        c
        d
    }
}

I have written my code in D3.js so that each of the edges would be highlighted (change color to red) according to its ID, so a->b would be highlighted first with id=1, followed up by a->c (id=2), and so on.

Here is my current code in D3:

let graphviz = d3.select(".graph").graphviz()
.transition(function () {
    return d3.transition("main")
        .ease(d3.easeLinear)
        .delay(500)
        .duration(1500);}
)
.logEvents(true)
.on("initEnd", render)
.on("end", function() {
    
    d3.selectAll("g.edge").sort(function(a,b){ // Set up edges.
        return a["id"] - b["id"];
    });
    let link = d3.selectAll("path");
    
    link.each(function(d, i) {
        setTimeout(function() {
            
            d3.select(link.nodes()[i]).transition().style("stroke", "red");
        }, i * 1000);
    })
});

However when I load the website, the edges are not highlighted in ascending order as my idea; instead the highlighting order is 5->1->2->3->4. I have checked in my console and adding ID for nodes, as well as rearranging nodes according to ID; however that also did not solve the problem.

So is there any method to make edges in this graph highlighted with ID from 1 to 5 as I mentioned?

I am facing an issue while upgrading CKEDITOR to latest version v5.It is showing some JQuery error while upgrading the version.console error. Anyone have any idea?

Checking for a solution to solve version upgrading issue of CKEDITOR.

I’m following along a course and the instructor doesn’t have this error while my code is identical to his. I’ve got a utility function in the /utils folder which is in the same folder as the index.js that is importing ../utils/makeId. I’m using eslint and everything both files are .js files but it’s not importing.

---

import { useState, useEffect, useRef } from 'react';
import { Banner, CreatorCard } from '../components';

import images from '../assets';
import { makeId } from '../utils/makeId';

const Home = () => {
  const parentRef = useRef(null);
  const scrollRef = useRef(null);

  return (
    <div className="flex justify-center sm:px-4 p-12">
      <div className="w-full minmd:w-4/5">
        <Banner
          name="Discover, collect, and sell extraordinary NFTs"
          childStyles="md:text-4xl sm:text-2xl xs=text-xl text-left"
          parentStyles="justify-start mb-6 h-72 sm:h-60 p-12 xs:p-4 xs:h-44 rounded-3xl"
        />

        <div>
          <h1 className="font-poppins dark:text-white text-nft-black-1 text-2xl minlg:text-4xl font-semibold ml-4 xs:ml-0">Best Creators</h1>

          <div
            className="relative flex-1 max-w-full flex mt-3"
            ref={parentRef}
          >
            <div
              className="flex flex-row w-max overflow-x-scroll no-scrollbar select-none"
              ref={scrollRef}
            >
              {[6, 7, 8, 9, 10].map((i) => (
                <CreatorCard
                  key={`creator-${i}`}
                  rank={i}
                  creatorImage={images[`creator${i}`]}
                  creatorName={`0x${makeId(3)}...${makeId(4)}}`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

I tried adding extension settings in my eslintrc.js I found on a similar post; while that fixed my import error I would still get a compile error on the website.

I am using an input mask to enforce MM/DD/YYYY format on a <input type="text">.

I want to use autocomplete="bday", but I do not want to use the designated hyphen format specified by WHATWG.

What can I do about this? Can I just expect the mobile browser (mostly iOS / Android) to properly input the field into this box.

I’m trying to add JQuery resize with handles to an element and it works fine,
Except when I rotate it transform: rotate(90deg) or any other angle, the handles axis remains the same and causes issues.

I’m trying to rotate the resize handlers axis as per the elements’ angle (if that’s possible).

Here’s the sample code I made for this:

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  /* transform:rotate(90deg); */
  & img {
    width:100%;
    width:100%;
  }
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
     });
}

dragger();
</script>

Here, the resize along with draggable works perfectly fine, except as I add transform: rotate(90deg) to the `main element, the resize handles axis remains the same.

Here’s a JSFiddle for the same to play around.

Any help is greatly appreciated.

There are two textboxes in this image one is theory and other is practical. Theory and practical both has different values. so for changing dropdown values every dropdown value has different marks that are hardcorded. so i want a jsf page that has javascript query to solve this problem.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
<script>
    function myfun(){
        document.getElementById("the").value="42";
        document.getElementById("prac").value="14";

    }
</script>
</h:head>
<h:body>
<h:form name="myform">
    Select Subject: 
    <h:selectOneMenu id="mylist" onchange="myfun()" >
        <f:selectItem itemValue="PC Architecture" itemLabel="PC Architecture"/>
        <f:selectItem itemValue="PC Hardware 1" itemLabel="PC Hardware 1" />
        <f:selectItem itemValue="PC Hardware 2" itemLabel="PC Hardware 2" />
        <f:selectItem itemValue="Microprocessor Interfacing devices_Embedded System" itemLabel="Microprocessor Interfacing devices_Embedded System" />
        <f:selectItem itemValue="C#" itemLabel="C#" />
        <f:selectItem itemValue="Data Structures" itemLabel="Data Structures" />
        <f:selectItem itemValue="Operating System" itemLabel="Operating System" />
        <f:selectItem itemValue="SQL Server" itemLabel="SQL Server" />
        <f:selectItem itemValue="Networking" itemLabel="Networking" />
        <f:selectItem itemValue="Advance Computer Concept_Data Security" itemLabel="Advance Computer Concept_Data Security" />
        <f:selectItem itemValue="Value Added Services" itemLabel="Value Added Services" />
    </h:selectOneMenu>
    Theory: 
    <h:inputText value="#{subject.theory}" id="theory" label="Theory marks" readonly="true"/><br></br><br></br>
    Practical: 
    <h:inputText value="#{subject.practical}" id="prac" label="practical marks" readonly="true"/><br></br><br></br>
    Year:
    <h:inputText value="#{subject.year}" label="Enter year"/><br></br><br></br>
    Instructor:
    <h:inputText value="#{subject.instructor}" label="Instructor name"/><br></br><br></br>

    <h:commandButton value="submit" style="margin:20px"
        action="#{sDao.addSubject(subject)}" ></h:commandButton>
</h:form>
</h:body>
</html>

here is my code in short version
<script type="text/javascript"> wwr_start(); function onSliderChanged(slider) { wwr_req(SET/TRACK/${slider.id}/VOL/${slider.value}); } function mutetrack(track) { wwr_req(SET/TRACK/${track.id}/MUTE/-1`);
}

<body>
    
    <input type="button" value="Coach mic MUTE" id="76" background-color: white onclick="mutetrack(this);myFunction()
       ">
<body>
    <input type="button" value="Coach head MUTE" id="70" background-color: white onclick="mutetrack(this);myFunction2()
   ">

‘
previsouly, i needed two seperate btn to mute specific single track. Now condition has changed,i need a btn to mute both (two or perhaps more i’m not totally sure yet) track. i’m pretty new in coding wolrd. just started html,javascript couple weeks ago.
Please somebody help me!! thank you!!

i need solution!! thank you