Category: javascript

I store a value in local storage and background script get this value on browser launch to do some initial checking. This value is not updated frequently. Background script is kept persistent.

Now, I also need to get this value from within content script. I could get it directly from local storage, or by messaging the background script.

My thoughts were that local storage is simpler but has to read data from disk. Im not sure if there is any caching mechanism for it. Messaging sounds like more overhead but the background script already holds the data on ram.

Which way would be faster? Or is there a better way?

I’m creating a theme extension for vs code. And I wanted to know, if it’s possible to use javascript or typescript files instead of a JSON file. I don’t like that the whole theme is inside one huge JSON file. I find it very messy and complicated to handle. And also, it does not accept comments.

I am trying to run a script to intercept fetch requests from background.js. I am using chrome.scripting.executeScript in order to run the script.

chrome.contextMenus.onClicked.addListener((info, tab) => {
chrome.scripting
    .executeScript({
        target : {tabId : tab.id},
        files : [ "scr.js" ],
    })
    .then(() => console.log("script injected"));
})

In the script scr.js, I am trying to process the response which is not working. When I am running this same code from debug console, it runs perfectly fine.

const ofetch = window.fetch;
window.fetch = async(...args) => {
var result = await ofetch(...args);
result
  .clone()
  .json()
  .then(body => console.log(body)); // intercept response here
return result;
};
alert("hi")

Note: alert('hi') for debugging which is running fine, but the fetch method is not overwritten. This whole code again runs fine from the console, including the fetch part.

trying to print the values passed to the ejs file. but not able to prin

<%for(let i=0;i<data.length;i++){%>

    <tr>
        <%for(header of heading){%>
            
            <td><%=data[i].header%></td>
        <%}%>
    </tr>
<%}%>

I’m setting up the bootstrap carousel after the Ajax call to the DOM. So, I’m appending elements and classes after the page load as below.

async function ajaxCall() {
    let data = await fetch('ApiLink');
    let jsonData = await data.json();

    let carousel = document.createElement('section');
    let inner = document.createElement('div');
    carousel.id = 'slider';
    carousel.className = 'carousel carousel-dark slide';
    carousel.setAttribute('data-bs-ride', 'carousel');
    inner.className = 'carousel-inner';

    jsonData.data.forEach(data => {
        let item = document.createElement('div');
        let avatar = document.createElement('img');
        item.className = 'carousel-item';
        avatar.src = data.avatar;
        item.appendChild(avatar);
        inner.appendChild(item);
    });

    inner.querySelector('.carousel-item').classList.add('active');
    carousel.appendChild(inner);
    document.body.appendChild(carousel);
}

However, the carousel doesn’t work.
I guess, I need to reinitialize the carousel after creating and appending the HTML elements.

So, my question is:
How can I reinitialize the bootstrap carousel after the Ajax call without jQuery?

Currently I have a function that checks for a user click on a input[type=text] (css class name applied on that column is “OE_CARD” ) column. I want to check that this textbox contains input, then allow the user to continue, and if it doesn’t have input, then allow them to either type input or select another column for the related row.

The nature of the question type will automatically trigger the next row to be shown if the user clicks the OE column even without entering input. So i’ve added “stopImmediatePropagation()” to prevent this from occuring.

Although now, even when the user does type input, it will just fire a warning asking the user to select a column (even though the OE column now has text in it).

What am I missing?

This is my function call:

$ ( ".sq-cardsort-bucket-c5" ).on( "click", function(e) {
  alert( "Handler for `click` called." );
  e.stopImmediatePropagation();
  setTimeout(dynamicOE,750);
} );

I have also tried the below to check for input:

$ ( ".sq-cardsort-bucket-c5" ).on( "click", function(e) {
  alert( "Handler for `click` called." );
  
  if ((.text-input).val().length > 0) {
      {e.stopImmediatePropagation(); return false}
  else{
      {e.stopImmediatePropagation(); return true}
  }
  
  setTimeout(dynamicOE,750);
} );

XML radio question for refernce:

<radio 
  label="Q1"
  cardsort:displayCounter="0"
  shuffle="rows"
  uses="cardsort.6">
  <row label="r1"><span class="blueRow">Blue</span></row>
  <col label="c5" open="1" openSize="25" randomize="0" ss:colClassNames="OE_CARD"> <span class="blueCol">Blue OTHER</span></col>
</radio>

Any help on what I am missing or have done wrong would be greatly appreciated. Or even a point in the right direction.

When making api requests, if its a custom error thrown by me, the structure will be ((for the message)

err.response.data.message
If. its a reference error for example it will be
err.message

I only want to pass along and display the custom err messages of course and for now I always do this check:

const error = err.message ? GENERIC_ERROR : err.response.data.message;

I dont think thats good or very reliable. Is there a better way to do it? Thanks

A script I have found to randomly change the position of div’s in my website does not work properly in Safari browsers. I can see that the element style position is being updated live when inspecting, but the change in position is not being rendered in the dom.

        function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }
  
        function moveRandom(obj) {
            /* get container position and size
             * -- access method : cPos.top and cPos.left */
            var cPos = $('.sphere-move-container').offset();
            var cHeight = $('.sphere-move-container').height();
            var cWidth = $('.sphere-move-container').width();
            
            // get box padding (assume all padding have same value)
            var pad = parseInt($('.sphere-move-container').css('padding-top').replace('px', ''));
            
            // get movable box size
            var bHeight = obj.height();
            var bWidth = obj.width();
            
            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;
            
            // set minimum position
            minY = cPos.top + pad;
            minX = cPos.left + pad;
            
            // set new position         
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);
            
            obj.animate({
                top: newY,
                left: newX
                }, 10000, function() {
          moveRandom(obj);
            });
        }
$('.category-sphere-container').each(function() {
moveRandom($(this));
});

Script renders in chrome, firefox etc. I’ve been unable to determine how to edit script so that it works in Safari. Any help is greatly appreciated.

enter image description here I am working on a project similar to the zoom launch meeting webpage. I want to add a function where if I click on one of the options in the language section it will change the text on the webpage to the language selected using javascript.

The project is limited to html, css, bootstrap and javascript. I dont know how to attach the html, css and javascript files to this question.

I have been looking for a satisfactory answer to this for a while using both Google/Stackoverflow and ChatGPT, but I really can’t figure it out.

I am trying to create a box (main-container) containing 3 x 3 smaller boxes (square). The idea is for main-container to have a higher z-index than square and for square to be transparent, so that when I animate something going through, the animated element (at, say, z-index 1) would be hidden when going through the space between the squares (i.e. the visible portion of main-container), but visible when going through a square.

The code below works, but only using black as background-color for main-container. I would like to be able to obtain the same result with any color.

.main-container {
  position: relative;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  width: 30vw;
  height: 30vw;
  align-items: center;
  justify-content: space-evenly;
  padding: 1%;
  border: solid 1px gray;
  border-radius: 10%;
  background-color: black;
  mix-blend-mode: hard-light;
  z-index: 3;
}

.square {
  width: 24%;
  height: 24%;
  margin: 1%;
  border-radius: 20%;
  background-color: rgb(204, 118, 118);
  z-index: -1;
}

<div class="main-container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

I was wandering if someone could help me to correct two little problems on Custom HTML5 Video.

The first problem is that if you load the web site for the first time, everything is fine but if you refresh the page and start playing the video, you will notice that the progress bar will be full.

The second problem is that if you click the button to make the video fullscreen then press space, it will close the video. How can i provent it ?

Here is a link to the github project : https://github.com/Freshman-tech/custom-html5-video
Here is the website http://custom-html5-video.surge.sh

I have tried a lot of things without succes, I’m bad at html

iam creating a small electron desktop popup form. So whenever running the program the initial logo is appearing in the desktop and when logo is clicked then onclick function will deliver the popup form. but whenever iam clicking the button below the logo as designed, form is not loading or no error has been thrown.

main.js

const { app, BrowserWindow } = require('electron')

let iconWin = null
let formWin = null

app.whenReady().then(() => {
  iconWin = new BrowserWindow({
    width: 100,
    height: 150,
    transparent: true,
    frame: false,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })



  iconWin.loadFile('icon.html')
})

function showForm() {

  console.log('showForm called')

  if (formWin) {
    formWin.show()
  } else {
    formWin = new BrowserWindow({
      width: 1000,
      height: 1000,
      useContentSize: true,
      maximizable: false,
      minimizable: false,
      resizable: false,
      alwaysOnTop: true,
      frame: false,
      transparent: true,
      webPreferences: {
        nodeIntegration: true
      }
    })
    formWin.loadFile('form.html')
    formWin.webContents.openDevTools()
    formWin.on('closed', () => {
      formWin = null
    })
  }
}


module.exports = { showForm }




icon.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        overflow: hidden;
      }
      img {
        width: 100%;
        height: 100%;
      }
      button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 16px;
}
    </style>
  </head>
  <body>
    <img src="icon.png" alt="Icon" />
    <button onclick="showForm()">mrsupport</button>
    
    <script>
      const { remote } = require('electron')
      const showForm = remote.require('./main.js').showForm
    </script>
  </body>
</html>



form.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        overflow: hidden;
      }
      form {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
      h2 {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 10px;
      }
      input[type="text"],
      textarea {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
      }
      input[type="submit"] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      input[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <form>
        <img src="imh.png" alt="Icon" />
      <h2>Mr Support</h2>
      <label for="textfield">Employee ID:</label>
      <input type="text" id="empid" name="empid" required placeholder="Enter your Employee ID"/>
      <label for="textarea">IT Issue:</label>
      <textarea id="issue" name="issue" required placeholder="State your issue facing related to IT"></textarea>
      <input type="submit" value="Submit" />
    </form>
    <script>
      const { remote } = require('electron')
      const currentWindow = remote.getCurrentWindow()

      document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault()
        currentWindow.hide()
      })
    </script>
  </body>
</html>

I got this error when I tried to use props. In SideBarMenuItems.js
export default function SideBarMenu({text, Icon}) {
return (

{text}

)
}
Here, I pass text and Icon as props and when I used in SideBar.js

I got the above error.

i am getting this error when using spoonacular api..

i have also make the.env file in root directory and have used ([apiKey[In-documentation])
and also all the help i can get through internet but cant solve

The response you provided indicates that the API call returned a 401 status code, which means “Unauthorized.”

code
:
401
message
:
“You are not authorized. Please read https://spoonacular.com/food-api/docs#Authentication”
status
:
“failure”
[[Prototype]]
:

folder structure and code

error

expecting for a solution

Community help needed!

I am new to React Native.
I am making an application for receiving 24/7 live streaming from a camera.

I need to make a timeline under the video player (as in the picture) for the ability to rewind (back / forward).
The timeline should be able to scroll/zoom.
The current timing is always displayed in the center (red line).
Does anyone know suitable libraries? Or do I need to create a custom timeline?

An example of what should happen