Category: javascript

I am trying to insert an HTML5 <video> element through Javascript, but it fails to autoplay despite it being muted.

Background Context

I would like to transfer all of my gif assets over to an mp4 format. Likewise, I would like the HTML video to emulate a gif. It should include the following properties:

• Be muted
• Autoplays as soon as the webpage loads
• Loop indefinitely
• Plays in line

I am currently on Chrome 100.

What I’ve Tried

Relevant code is held within this codepen. I want to add the HTML video dynamically through javascript. However this fails to autoplay even though both autoplay and muted attributes are specified.

However, if I have the video element with the same attributes directly written in my HTML, the autoplay functionality works just fine.

How do I insert the video with JS and get it to autoplay?

I tried putting CORS parameters on server(SAP B1 HANA) in b1s.conf file :

"CorsEnable": true,
"CorsAllowedOrigins": "http://localhost:8080;http://other:8080",
"CorsAllowedHeaders": "crossdomain,X-Requested-With,Access-Control-Request-Method,Access- 
     Control-Request-Headers,Accept-Encoding,Sec-Fetch-Mode,Sec-Fetch- 
     Site,authorization,Accept,Origin,Content-Type,Content-  Length,content- 
     encoding,Depth,User-Agent,Cache-Control,x-csrf-token,x-sap-cid,Accept-Language",
"CorsAllowedMethods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"

Tried putting permissions in my ajax call :

request.setRequestHeader("Access-Control-Allow-Headers", "*");
request.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8080");
request.setRequestHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,OPTIONS");

Its still not working.

Please help me with that.

getting this error while starting server to test cypress tests in AWS code build

Error: ENOSPC: System limit for number of file watchers reached

so i tried to increase max_user_watches to 524288. But then I was getting

Running command echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
fs.inotify.max_user_watches=524288
sysctl: setting key "fs.inotify.max_user_watches", ignoring: Read-only file system

How could i increase the max user watches in AWS code build?

I have a grid of cells. I’d like to create an effect of raised green cells and “pressed in” red. For the raised effect box-shadow on outside bottom-right works great, because next cell covers previous cell shadow. For the “pressed in” effect box-shadow: inset on top-left corner seems to be a good choice, however, I’m struggling make it work with touching cells, they show shadow between the cells.

for(let i = 0, r=[5,6,16,17,11,12,13,36,46,38,48,21,22,23,31,32,33], g=[37,47,39,49,65,66,67,75,76,77,85,86,87,81,82,92,93]; i < 100; i++)
{
  const c = document.createElement("div");
  if (r.includes(i))
    c.className = "red";

  if (g.includes(i))
    c.className = "green";

  table.appendChild(c);
}

#table
{
  display: flex;
  flex-wrap: wrap;
  width: 11em;
}

#table > *
{
  width: 1em;
  height: 1em;
  border: 1px solid black;
  margin: -1px 0 0 -1px;
  background-color: white;
}

#table > .green
{
  background-color: lightgreen;
  box-shadow: 0.2em 0.2em 5px 0 black;
  z-index: 1;
}

#table > .red
{
  background-color: pink;
  box-shadow: 0.2em 0.2em 5px 0 black inset;
  z-index: 3;
}

<div id="table"></div>

Any suggestion how to fix the issue with shadow shown between cells?

I want to send lists(in Content) to mainData
and then in mainData I want to set the lists to respone.data
(so lists(in Content) is set to response.data) HOW CAN I DO IT ?? please help me… 🙁

// Content. js

const Content = (props) => {
    const [lists, setLists] = useState(null);
    useEffect(() => {
        mainData(setLists, props.url);
    }, []);

// mainData.js

import axios from 'axios';

export const mainData = async({setLists, url}) => {
    try {
        setLists(null);
        const response = await axios.get(url);
        setLists(response.data);
    } catch(error) {
        console.error(error);
    }
} 

So, my knowledge of next and JS in general is extremely minimal as is my Auth0 knowledge. I was wondering if anyone could suggest how to pass query parameters or a request body to the first block of code below?

I know I can add a body to the fetch function, but when I try to do that in the /pages/profile block below, it seems to break the request.

Even better would be to make this some kind of generic function, where I can pass in a the route, method, and body since all of the routes will be protected anyway.

Any help would be greatly appreciated.

/pages/api/my/user

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function shows(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res, {
      scopes: ['profile']
    });
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/my/user`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
    });

    const shows = await response.json();

    res.status(200).json(shows);
  } catch (error) {
    res.status(error.status || 500).json({ error: error.message });
  }
});

And here’s the snippet that fetches the above:
/pages/profile

  const [state, setState] = useState({ isLoading: false, response: undefined, error: undefined });

  useEffect(() => {
    callApi();

  }, []);

  const callApi = async () => {
    setState(previous => ({ ...previous, isLoading: true }))

    try {
      const response = await fetch(`/api/my/user`);
      const data = await response.json();
      
      setState(previous => ({ ...previous, response: data, error: undefined }))
    } catch (error) {
      setState(previous => ({ ...previous, response: undefined, error }))
    } finally {
      setState(previous => ({ ...previous, isLoading: false }))
    }
  };

  const { isLoading, response, error } = state;

It seems like YouTube show closed captions even when the tab isn’t in focus. For instance, on https://www.youtube.com/watch?v=rStL7niR7gs this closed caption window is outside of the window playing the video:

There’s a <track> element according to https://web.dev/media-accessibility/, but an example on https://track-demonstration.glitch.me/ using the <track> element which is styled differently, and does not achieve the same effect. Additionally, the <video> element on YouTube does not appear to have a <track> element.

What browser feature is powering this, and how would I add it to a video?

I am new to Angular. I try to toggle the paragraph using a method. I declared two variables that contain my object for the style of my paragraph. My problem is I got an error

Error: src/app/directives-sample/directives-sample.component.html:6:7 - error TS2322: Type 'string' is not assignable to type '{ [klass: string]: any; }'.
  Type 'string' is not assignable to type '{ [klass: string]: any; }'.

6 <div [ngStyle]="!isSpecial ? 'currentStyles' : ''">
        ~~~~~~~

  src/app/directives-sample/directives-sample.component.ts:5:16
    5   templateUrl: './directives-sample.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DirectivesSampleComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

× Failed to compile.

Here’s my code:

//html

<div [ngStyle]="isSpecial ? 'currentStyles' : 'specialStyles'">
    This div is initially italic, normal weight, and extra large (24px).
</div>

//ts

export class DirectivesSampleComponent implements OnInit {
  isSpecial: boolean = false;
  currentStyles = { 'font-style':'italic','font-weight': 'bold', 'font-size': '24px', 'color': 'red'};
  specialStyles = { 'font-style':'italic','font-weight': 'italic', 'font-size': '16px', 'color': 'blue'};
  constructor() { }

  ngOnInit(): void {
  }

  toggleSpecial() {
    this.isSpecial = !this.isSpecial;
  }

How can I solve this problem?

I have this script at the document level (simplified) on a PDF:

function SetFieldValues(){
var Model = this.getField("Model");
var Armor = this.getField("Armor");
var Winch = this.getField("Winch");
var Test1 = this.getField("Test1");
var Test2 = this.getField("Test2");

if(event.willCommit)    {
switch(event.value) {

case "015305676":
    Model.value = "AMK23";
    Armor.value = "YES";
    Winch.value = "NO";
    Test1.setItems[("Not Applicable")];
    Test2.setItems[("-", "Serviceable", "Unserviceable")];
    break;
}}}

This event is kicked off by the Custom Keystroke on the form’s initiating dropdown list:

if( event.willCommit )
{
if(event.value == "-")
  this.resetForm(["Model","Armor","Winch"]);
else
  SetFieldValues(event.value)
}

All the fields update appropriately (Model, Armor, and Winch) however, the “Test” combo boxes do not populate as expected.

I then tried it a different way with this (which I thought would be genius using an array …pfft… I was wrong):

function SetFieldValues(){
var Model = this.getField("Model");
var Armor = this.getField("Armor");
var Winch = this.getField("Winch");

const ArmorArray = [field='Test1', field='Test2'];
var ArmorArray;

var CheckOptionsY = {
  Yes: [["-"],["Serviceable"],["Unserviceable"]],
};
var CheckOptionsN = {
  No: [["Not Applicable"]],
};
if(event.willCommit)
{
switch(event.value) {

case "015305676":
    Model.value = "AMK23";
    Armor.value = "YES";
    Winch.value = "NO";
    ArmorArray.setItems[(CheckOptionsY)];
    break;
}}}

Again, the fields update no problem (Model, Armor, and Winch) but the “Test” fields do not update with the combo box list options. What did I do wrong? How can I get these “Test” combo boxes to load with the appropriate ‘Yes’ / ‘No’ options?

I am logging a response that I get from the server after sending a post request, and it looks like this:

{"output":"basic question #1. how do I calculate the area of a rectangle based on users input in python?"}

now i want to access output as type plain text (string). I tried this:

 console.log(body)
     //this returns  {"output":"basic question #1. how do I calculate the area of a rectangle based on users input in python?"}
 console.log(JSON.stringify(body))
    //this returns "{"output":"calculate the area of a rectangle based on users input in python"}"

how would I access output within the body response?

Currently by default a single tooltip is displayed on hover of a point in chart.js
but my requirement is to display tooltips for all those point’s on which I click on and hide them by clicking on the same point again.
Please note there needs to be multiple tooltips on the graph depending upon the number of points that I have clicked on.

I'm developing an Elementor widget as a plugin. This widget will be a tab widget. Now the problem is when I show this design in Elementor then I can see all tab categories are active at the same time and also I see all descriptions are showing. But I want that, The one category active as default and her description also. And after that when I select any category then should show her description.

The main thing is the default first category should be active with her description and then which I select.

Plugin Link:- https://github.com/Ferdaussk/plugin-tab-sk.git
Tab HTML:- https://github.com/Ferdaussk/tab-html.git
Problem and main design video:-https://drive.google.com/file/d/1swlSZeVulUZLSQ1bp4rIReiji2uT1c0G/view?usp=sharing

"use strict"
// tab maker root
function TabMaker(tabButtons, tabItems, btnActive, tabActive, progressLine,dir, res) {
    for (let i = 0; i < tabButtons.length; i++) {
        tabButtons[i].addEventListener('click', function () {
            for (let j = 0; j < tabButtons.length; j++) {

                // tab button class active/remove
                tabButtons[j].classList.remove(btnActive);
                this.classList.add(btnActive);

                // tab contents class active/remove
                tabItems[j].classList.remove(tabActive);
                tabItems[i].classList.add(tabActive);
            }

            if (progressLine) {

                let singlePgWidth = 100 / tabItems.length;

                if(dir==='width'){
                    progressLine.style.width = singlePgWidth * (i + 1) + '%';
                }
                else if(dir==='height'){
                    progressLine.style.height = singlePgWidth * (i + 1) + '%';
                }

                if(res &&  window.innerWidth < 768){
                    progressLine.style.height = 100 + '%';
                    progressLine.style.width = singlePgWidth * (i + 1) + '%';
                }
                
            }
        })





    }
}

// // tab one=== === === === === === === ===
const tabOneBtns = document.querySelectorAll('.sk-tab-one .sk-nav .sk-nav-link');
const tabOneContents = document.querySelectorAll('.sk-tab-one .sk-tab-content .sk-tab-pane');
TabMaker(tabOneBtns, tabOneContents, 'active-link', 'active-tab-pane');

.sk-tab-one {
    display: flex;
    padding-bottom: 70px;
}

.sk-tab-one .sk-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: column;
    margin-right: 35px;
}

.sk-tab-one .sk-nav-link {
    background: 0 0;
    border: 0;
    border-radius: 8px;
    display: block;
    padding: 15px;
    color: #30336b;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    cursor: pointer;
    margin-bottom: 15px;
    font-weight: 700;
}

.sk-tab-one .sk-nav-link.active-link {
    color: #fff;
    background-color: #30336b;
}

.sk-tab-one .sk-tab-content .sk-tab-pane {
    display: none;
    transform: translateY(-110%);
    transition: .5s;
}

.sk-tab-one .sk-tab-content .sk-tab-pane.active-tab-pane {
    display: block;
    transform: translateY(0);
}

.sk-tab-one .sk-tab-content {
    background: rgba(187, 187, 187, 0.171);
    padding: 30px;
}

.sk-tab-one .sk-sk-tab-content .sk-tab-pane p {
    color: #535c68;
    margin-bottom: 10px;
    font-weight: 500;
}

<?php
namespace CreativeTabZoneWidgets;
use ElementorWidget_Base;
use ElementorControls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
class BWDTZTabs extends Widget_Base {
    public function get_name() {
        return esc_html__( 'NameTabsZone', 'bwd-tabs-zone' );
    }
    public function get_title() {
        return esc_html__( 'BWD Tabs Zone', 'bwd-tabs-zone' );
    }
    public function get_icon() {
        return 'sk-tabs-icon eicon-tabs';
    }
    public function get_categories() {
        return [ 'bwd-tabs-zone-category' ];
    }
    public function get_script_depends() {
        return [ 'bwd-tabs-zone-category' ];
    }
    protected function register_controls() {
        $this->start_controls_section(
            'sk_tabs_content_section',
            [
                'label' => esc_html__( 'Layout', 'bwd-tabs-zone' ),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]
        );
        $repeater = new ElementorRepeater();
        $repeater->add_control(
            'sk_tabs_title', [
                'label' => esc_html__( 'Name', 'bwd-tabs-zone' ),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__( 'Web Developer' , 'bwd-tabs-zone' ),
                'label_block' => true,
            ]
        );
        $repeater->add_control(
            'sk_tabs_description', [
                'label' => esc_html__( 'Description', 'bwd-tabs-zone' ),
                'type' => Controls_Manager::TEXTAREA,
                'default' => esc_html__( 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate eaque ullam dolore ex quam nesciunt debitis deserunt cumque tempora, vitae, sapiente nostrum culpa nulla doloribus! Atque, necessitatibus explicabo. Facilis, voluptatibus?' , 'bwd-tabs-zone' ),
                'label_block' => true,
            ]
        );
        $this->add_control(
            'sk_tabs',
            [
                'label' => esc_html__( 'Meet The Team', 'bwd-tabs-zone' ),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'sk_tabs_title' => esc_html__( 'Title #1', 'bwd-tabs-zone' ),
                    ],
                    [
                        'sk_tabs_title' => esc_html__( 'Title #2', 'bwd-tabs-zone' ),
                    ],
                    [
                        'sk_tabs_title' => esc_html__( 'Title #3', 'bwd-tabs-zone' ),
                    ],
                    [
                        'sk_tabs_title' => esc_html__( 'Title #4', 'bwd-tabs-zone' ),
                    ],
                ],
                'title_field' => `{{{ sk_tabs_title }}}`,
            ]
        );
        $this->end_controls_section(); 
    }
    protected function render() {
        $settings = $this->get_settings_for_display();
       ?>
        <div class="sk-tab-one">
            <div class="sk-nav">
            <?php
            if ( $settings['sk_tabs'] ) {
                foreach (  $settings['sk_tabs'] as $item ) {
                echo '<div class="sk_name elementor-repeater-item-' . esc_attr( $item['_id'] ) . '">'; ?>
                    <button class="sk-nav-link" id="home-tab"><?php echo esc_html($item['sk_tabs_title']); ?></button>
                </div>
                <?php
                }
            } ?>
            </div>
            <div class="sk-tab-content">
            <?php
            if ( $settings['sk_tabs'] ) {
                foreach (  $settings['sk_tabs'] as $item ) {
                echo '<div class="sk-tab-pane elementor-repeater-item-' . esc_attr( $item['_id'] ) . '" id="home">'; ?>
                    <p><?php echo esc_html($item['sk_tabs_description']); ?></p>
                </div>
                <?php
                }
            }
            ?>
            </div>
        </div>
       <?php
    }
}   

I am trying to grab elements with JS that have different class names and put them in an array. Right now the function only grabs the elements that satisfy the first ‘classname’ I am passing in but not elements that satisfy the second or third classnames.

One element has ONLY the class green
Another element ONLY has the class blue
Another element ONLY has the class invisible

None of the elements have additional classes.

Not sure if I am using the correct operator…

 let array = []
  let element = document.getElementsByClassName(
    'green' || 'blue' || 'invisible'
  )
  array.push(element)

this is strange, I have a video source mp4 in my background and its autoplaying. this was working fine on every mobile specially in iphone 8 and plus, but suddenly on the iphone 8 and plus stop the autoplay attribute. I tried so many different possible solution on the web but it wont works. here is my code:

    <div class="videowrap spvid"> 
        <video playsinline autoplay muted loop poster="" id="vid">
            <source type="video/mp4" src="<?php echo get_template_directory_uri(); ?>/img/mp4/sp/video_visual_sp.mp4">
        </video>
    </div>

as you see, I used playsinline and muted, but suddenly it stop working in iphone 8 and plus only. now, I added javascript to force the video in muted incase the html doesn’t run the muted attribute.

    <script>
       var vid = document.getElementById("vid");
       vid.muted = true;
       vid.play();
    </script>

I see this article https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5 but it’s hard to follow his instruction about the “react” and “dangerouslySetInnerHTML”

can anyone help me a specific solution code for this issue??

I have to make circular/linear progress bars without using CSS animation.
I heard from a professor that there is some way I can make bars without animation using infinite sth that I’m not aware of.
If there’s someone who can help me, please reach out.

Below is the link to the bar designs I have to make.

Progress Bars design link