Category: javascript

I’m trying to search a node in a Force Directed Tree with Amcharts 4 using JavaScript. After I found the node, I’d like to zoom the chart on the node.

I’m trying to search the node by its name in the DOM but it’s not working as expected.

chart.zoomToDataItem(itemToFind, zoom = 1.85, true);

Unfortunatly I don’t know how to find an item, and I can’t find in the doc either. Does any one can help me ?

Thank you for your help,

Kind Regards

So I want to have code that can convert a Youtube video ID (for example: Dr1S8DfNiKw) convert it into a youtube embed
(for example:<iframe width="560" height="315" src="https://www.youtube.com/embed/Dr1S8DfNiKw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>)

How do I connect my Adonis Api and my vue.Js together?

I’m building a schedule component (image below) on React using a table, for the cells I provide the starting table cell and a length (number).

On the cell I use style={{ height: ${100 * length}% }}, but this doesn’t work well with the OnClick prop, because it only registers mouse clicks up to 100% of the parent container (example on the gif below).

Is there a way to make the OnClick prop work for the entire height of the div?

Code Sandbox:

https://codesandbox.io/s/friendly-agnesi-nm2mek?file=/pages/index.tsx

this is the code for my alert.

<div class="alert alert-success" role="alert" id="RegistrationAlert" >
 Welcome, your registration was successful! Please login to proceed.
</div>

What should I add to have my website not show this alert. Then I want to show it using JavaScript.

How would I be able to recreate an Online Converter for my own website? I would like to make a YouTube to Mp3/Mp4 convertor like on https://y2mate.is/en74/ And could I apply the same principle to other file types such as AVI to MP4 etc

I’m using webpack and jQuery in my symfony project.
I configured webpack and jquery as follows :

// webpack.common.js
const path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    main: "./src/default/index.js"
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      { 
        test: /datatables.net.*/, 
        use: [{
          loader: 'imports-loader',
          options: {
            additionalCode: 
              "var define = false;"
          }
        }]
      },
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      {
        test: /.(scss)$/,
        use: [{
          // inject CSS to page
          loader: 'style-loader'
        }, {
          // translates CSS into CommonJS modules
          loader: 'css-loader'
        }, {
          // Run postcss actions
          loader: 'postcss-loader',
          options: {
            // `postcssOptions` is needed for postcss 8.x;
            // if you use postcss 7.x skip the key
            postcssOptions: {
              // postcss plugins, can be exported to postcss.config.js
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          }
        }, {
          // compiles Sass to CSS
          loader: 'sass-loader'
        }]
      },
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      }
    ]
  },
  resolve: {
    alias: {
      jquery: "jquery/src/jquery"
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
}

// index.js
import 'bootstrap';

import './scss/app.scss';

import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

require('select2');

require('jquery-ui/ui/widgets/datepicker');
require('jquery-ui/ui/i18n/datepicker-fr.js')

import 'datatables.net';
import dt from 'datatables.net-bs5';

import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';

dt(window, $);

My project needs to load external javascript script (old style) so I need to access $ outside of webpack. This scripts use Select2 plugin for initialize autocompletion on select form element.

So far so good.

I’m facing a problem when I want to add dynamically a field that use jQuery select2 Plugin (after page loading).

When I do this (adding new select2 field in my form) and initialize select field with select2 :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           $('.select2-element').select2(config);
        });
    }(window.jQuery, window, document));
}

The result is : “Select2 is not defined.”

First test

When I do :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           console.info($.fn);
        });
    }(window.jQuery, window, document));
}

The result shows me that select2 is in the $.fn list ($.fn.select2). But the same code invoked after page loading show me that select2 is not in the list.

Second test

When I do on page loading :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           console.info(jQuery);
           console.info($);
        });
    }(window.jQuery, window, document));
}

The return of console.info(jQuery) is not the same as console.info($). In the first I don’t have select2 in jQuery.fn but it is present in $.fn .

I identified that the $ object used after page loading is same as jQuery object above not $ object above.

Thanks for your help.

Is there a sample that can encode a ReadableStream transferred to a worker into a webm format with audio and stream it to the file system using the new File System Acccess API? I was able to use one of the samples which has a modified webm-writer2.js file and achieve everything video related on a worker, but I am stuck on finding an encoder and muxer that can do both audio and video streams in the worker using the new WebCodecs API.

This example has a workaround for audio, but it relies on AudioContext which can only be used on the main thread. This can become problematic and cause interruptions on the main loop as it needs to constantly read chunks from an event.
https://github.com/xiph/opus/issues/221

My goal is to record a video/audio stream, transfer the MediaStream entirely off the main thread for processing and stream, mux it all into a single webm container, and save it to the file system without any memory limits. Does anyone have a working solution that can build off that sample and include audio?

Here’s some references:

webm-writer2.js (video only so far)
https://github.com/w3c/webcodecs/tree/main/samples/capture-to-file

Audio encoding problem?
https://github.com/xiph/opus/issues/221

Transferring media stream to worker via track processor
https://github.com/w3c/webcodecs/issues/43

I am using target.getElementsByClassName('numerical')) to get the list of elements with classname of numerical . I want to further filter only th from the list. How can i do that?

0: th.ant-table-cell.numerical
1: th.ant-table-cell.numerical
2: td.ant-table-cell.numerical
3: td.ant-table-cell.numerical

I have these two custom react hooks using as below passing the same variables in object destructuring.

const {data, loading, error} = useFetch(url);
const {data, loading, error} = usePostForm(url);

of course, this won’t work because it’s using the same variables.
what’s the best way to change this codes? without changing original custom hooks

Only way I can do is as below codes; but my problem is there is no way to know what are the objects/data are returning from custom hooks.

const fetch1 = useFetch(url)
const fetch2 = usePostForm(url)

fetch1.data fetch1.error fetch1.loading
fetch2.data fetch2.error fetch2.loading

Anyone has better idea ? please let me know

I want to create a soft triangle like here:

But what I get is:

span {
  display:inline-block;
  padding:50px;
  position:relative;
  background: linear-gradient(135deg, transparent 15px , #ff4369 20px, #ff4369 50%, white 51%),radial-gradient(circle at 20px 20px, #ff4369 20px, transparent 22px);
}
span+span {padding:75px;}
span:last-of-type {padding:28px;}
span:before {
  display:block;
  content:'padding';
  white-space:nowrap;
  position:absolute;
  transform:rotate(-45deg);
  top:calc(50% - 1.2em);
  left:0;
}
span + span:before {content:'instead background-clip';}
span:last-of-type:before {content:'56px'}

<span></span>
<span></span>
<span></span>

Or on: https://codepen.io/gc-nomade/pen/wjgBQL

Have somebody some idea how to make it?

How can I write this method correctly in cypress so that when I call for example setToOffService('Online booking') it knows how to go to the correct if and call the appropriate id for that string.

I hope I have provided all the important details

 setToOffService(name: string) : void {
    
        cy.get('#Service_IsActive').then(($name) => {
    
            if ($name.text().includes('Service is available')) {
                cy.get('#Service_IsActive').click({force:true});
            }
            else if ($name.text().includes('Online booking')) {
                cy.get('#Service_AllowOnlineScheduling').click({force:true});
            }
        })
    }

I have an array exercise that have to use array to use, that is simply to put a sentence into characters, and store them in an array. Below is my program:

However, a message

Uncaught TypeError: abc.CharAt is not a function

appears in the console. Could you tell me which part I had done wrong and how to correct it? The prerequisite criteria is to solve this question using array.

strarray = []
abc = "hello"
for (i = 0; i < abc.length; i++) {
  strarray.push(abc.CharAt(i))
}
console.log(strarray)

I am trying to pass the inquire value from one js page to another js from which I can pass this value to another js file which contain the function and I want to pass same value from one function to another function which also pass the value from one function to another function

but the problem is I can’t pass the value even inside the userDetils

so flow chat be like

index.js -> userDetails.js -> userHandler.js

index.js

const userDetails= require("./userDetails");

module.exports = userValue = async () => {
  inquirer
    .prompt({
      type: "input",
      name: "userInput",
      message: messages.promptFileName,
      validate: (userInput) => {
        if (!userInput || userInput.trim() === "") {
          console.log("Please insert userInput!");
          return false;
        }
        this.name = userInput;
        return true;
      },
    })
    .then(async (answer) => {
      await userDetails.run(answer.userInput);
    });
};

userDeatils.js

const userHandler= require("./userHandler.js);

class UserDetails extends command{
 async run(data){
  console.log(data);
  
  // await userHandler.start(data);
  // .. other code here
 }
}

userHandler.js

class userHandler{
  async start(data){
   // some code here
   this.cmdUser()
   .then((msgData) => {
    return resolve(msgData);
    })
    .catch((error) => {
    return reject(error.errorMessage);
    });
 }

 async cmdUser(){
  return new Promise(async (resolve,reject)=>{
   await datacmd.run(data);
  })
 }
}

how I can pass value from index.js to userHandler.js (datacmd())

I am unable to see the liveui seek bar in android.
As given in official documentation of videojs ;
“Note: This user interface will not work on Android due to the native live HLS implementation not supporting seekable ranges during live streams. We recommend overriding the native hls implementation with @videojs/http-streaming; this will make the new liveui work.”

But I coundnt find anything to do the same.

These are the options which i have given.

var options = {
    preload: true,
    autoplay: false,                       
    controls: true,
    liveui: true,
    preloadWebComponents: true,
    techOrder: [ 'chromecast', 'html5' ],
    controlBar: {
        'liveDisplay': true,
        'pictureInPictureToggle': false,
        'subsCapsButton': false,
    },
   
};'''

https://docs.videojs.com/tutorial-live.html
[1]: https://i.stack.imgur.com/xs3bP.png