Category: javascript

I am currently using Bootstrap to create an auto scrolling carousel. This is working perfectly when hosted locally however, when I host it on Netlify, The carousel is only scrolling once and it then stops scrolling until the page it clicked on and refocused.

Below is my script and html:

    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="assets/SlideShowImgSample1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="assets/SlideShowImgSample2.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="assets/SlideShowImg1.jpeg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="assets/SlideShowImg2.jpeg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<script>
        window.onload = function () {
        function initializeCarousel() {
            var carousel = document.getElementById('carouselExampleAutoplaying');
            var carouselInstance = new bootstrap.Carousel(carousel, {
                interval: 3000
            });
        }

        initializeCarousel();
    };
</script>

for more context my temporary Netlify link is: https://neon-dango-0fa39e.netlify.app

Please note that this issue is very inconsistent and my behave differently based on your web browser.

I’m using CodeMirror to create an in-browser IDE. I’m using autoCloseTags and autoCloseBrackets. But whenever I use it, the text cursor gets misplaced at either the end of the line (after the closing tag/bracket) or one/two characters before the opening bracket.

I noticed that it works when I use unControlledEditorComponent. But since I have HTML, CSS, and Javascript, I must use ControlledEditorComponent.

Editor.jsx

import React, { useState } from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/theme/material.css';
import 'codemirror/theme/mdn-like.css';
import 'codemirror/theme/the-matrix.css';
import 'codemirror/theme/night.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import { Controlled as ControlledEditorComponent } from 'react-codemirror2';

const Editor = ({ language, value, setEditorState }) => {
  const [theme, setTheme] = useState("dracula")
  const handleChange = (editor, data, value) => {
    setEditorState(value);
    editor.showHint( {completeSingle: false} );
  }
  const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
  return (
    <div className="editor-container">
      <div style={{marginBottom: "10px"}}>
        <label for="themes">Choose a theme: </label>
        <select name="theme" onChange={(el) => {
          setTheme(el.target.value)
        }}>
          {
            themeArray.map( theme => (
              <option value={theme}>{theme}</option>
            ))
          }
        </select>
      </div>
      <ControlledEditorComponent
        onBeforeChange={handleChange}
        value= {value}
        className="code-mirror-wrapper"
        options={{
          lineWrapping: true,
          lint: true,
          mode: language,
          lineNumbers: true,
          theme: theme,
          autoCloseBrackets: true,
          autoCloseTags: true,
          matchBrackets: false,
          matchTags: false,
          foldGutter: false,
          extraKeys: { 
            "Ctrl-Space": "autocomplete", 
          }
        }}
      />
    </div>
  )
}

I went to a website my mother used to check if it was a scam (lol) and I found it very interesting that I can’t access the page inspect in Chrome or Firefox. I’ve already used the keyboard shortcut and right mouse button and nothing. Is there a way to block this type of access?

I’ve used ctrl+shift+i, ctrl+shif+j, right bottom of mouse e nothing happens

I’m applying highlight annotations using pdfAnnotate library check it

the author says i can add highlight annotation by giving the object a rect , but the problem is when i select a whole paragraph things goes wrong and it applies annotations on each line and that’s for sure something not correct!

I wrote this method to get a list of list of rects but i need to get the multi selected line as a quad points, The length of the quadpoints array must be a multiple of 8

my method:

 getSelectedCoords() {
const pageIndex = (window as any).PDFViewerApplication.pdfViewer.currentPageNumber -1;
const page = (window as any).PDFViewerApplication.pdfViewer.getPageView(pageIndex);
const pageRect = page.canvas.getClientRects()[0];
const selectionRects = window.getSelection()!.getRangeAt(0).getClientRects();
const viewPort = page.viewport;
const selectionRectList = Object.values(selectionRects);
let selected = selectionRectList.map(function (r) {
  return viewPort.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
    viewPort.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y));
})
return Promise.resolve({
  selected: selected,
  text: window.getSelection()!.getRangeAt(0)
})

}

I created a voice assistant using ChatGPT. It is working fine, but I would like something like this. Please follow the example.
User – who is Sachin Tendulkar
GPT- Sachin Ramesh Tendulkar is an Indian former international cricketer who captained the Indian national team so on …
User – what is his age
GPT – he is 50 years old and so on …
so i want to like this

I have coded it in the next js

async function gpt(prompt) {
    try {
        setGptloading(true);

        const response = await fetch("/api/chat", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                prompt,
            }),
        });
        if (!response.ok) {
            toast.error("Error in gpt :", response.statusText);
        } else {
            setText('')
        }

        const reader = response.body
            .pipeThrough(new TextDecoderStream())
            .getReader()
        setIsListening(false);
        setJustdata(true);
        setGptloading(false);
        let done = false;
        try {
            while (true) {
                if (streamingStoppedRef.current) {
                    break;
                }
                const { value, done } = await reader.read();
                if (done) break;
                setText((prev) => prev + value);
               
        }   catch (error) {
        console.error("Error in gpt function:", error);
        toast.error("Error in gpt function:", error);
        setGptloading(false);

    }

}

Very awkward question for you all.

I am making a blazor website.

Attached to every page, they bosses want some keyboard short cuts. i.e. ‘ctrl + shift + S’ = go to a certain page.

Great, easy to program. I had an event listener in JavaScript listen to the windows for any page. It has a line e.preventdefaults();

So the problem is, now that defaults are turned off. We can no longer use F5 for reload F12 for dev tools. It is only listening for the commands i have programmed in now.

The issue is that some of our commands overlap.
For example ‘Ctrl + D’ we want as ‘duplicate’ but is preprogrammed as ‘bookmark page’.

For commands we have programmed in, we want to be able to override the original command, prevent the default.
But we also want to keep all the default commands we dont override with a new command.

The way i see it is i can program back in all the defaults. Or i can find a way to prevent them disturbing each other.

One of the main issues is that we cant type in text boxes while the listener is listening to the entire page. It goes straight to our commands.

I am using a switch statement for the controls. Maybe i need to add a default clause to the switch?

window.document.addEventListener('keydown', function (keyDownEvent) {
console.log("DDDDDDDDDDDDDDDDDDDDDDD")

keyDownEvent.stopPropagation()
// keyDownEvent.preventDefault();

let keyDown = `keyDown_${keyDownEvent.key.toLowerCase()}`;
Instances.designPageInstance.invokeMethodAsync('KeyPressListener', keyDown, keyDownEvent);
})

c#

 [JSInvokable]
 public void KeyPressListener(string key, EventArgs keyDownEvent)
 {
 Console.WriteLine("1111111111111111111111111");
 // HotKeys state will update when pressed or released and then return so the 
 ProcessKeyCommand() doesn't run.
 if (key.Contains("control"))
 {
    isCtrlDown = key.StartsWith("keyDown_control");
    appState.sceneManager.SetKeyPress(SCKeyPress.Ctrl);
    return;
}
if (key.Contains("shift")) { isShiftDown = key.StartsWith("keyDown_shift"); return; }
if (key.Contains("alt")) { isAltDown = key.StartsWith("keyDown_alt"); return; }

// ProcessKeyCommand() will run only when the key is pressed (otherwise it will run the command twice. eq: copy-paste)
// and if the key is not a "Ctrl","Shift" or "Alt" key. This is to avoid extra checks.
if (key.StartsWith("keyDown")) { ProcessKeyCommand(key.Split("_")[1]); }

}

private void ProcessKeyCommand(string key)
{
Console.WriteLine("222222222222222222222222222");

switch (key)
{
    case "a":
        {
            // Deselect all: CTRL + Shift + A
            if (isCtrlDown && isShiftDown) { appState.sceneManager.SelectAll(false); }
            // Select all: CTRL + A
            else if (isCtrlDown) { appState.sceneManager.SelectAll(true); }
            // Edit Points Tool: A
            else { }
        }
        break;

On www.flightradar24.com has a function called “Playback”. I need the same one, with the same functionality (tracking my devices with timeline). Is there any library that has such a component? I use maplibre-gl for map.

I tried to find something similar, but my searches did not yield any results

hello I have deployed a jsonServer on vercel to use it as my database for my simple webApp I can write and post data successfully to it but after couple minutes posted data disappears.
i need a database for my app and its just some html and js and css files under no framework.

i expected to data persist in db.js

I am creating a custom slider to user to view the work process

When user clicks the button, the slider will scroll to left or right based on the button user click. But after user clicks multiple times, slider might scroll too much and left a big space like the picture below

Is there any ways I can make the slider stop if no more items behind like picture 3?

jQuery(document).ready(function($){
   var direction = 1;
   
   const slideSec = document.querySelector('.movingsec .container');
   
   const slideItem = document.querySelectorAll('.movingsec .image-box');
   
   var maxItem = slideItem.length;
   
   $('.btnPrev').click(function(){
       direction = 0;
       runSlide(direction);
   });
   
   $('.btnNext').click(function(){
      direction = 1;
      runSlide(direction);
   });
   
   var current = 0;
   
   function runSlide(direction){
       if(direction === 1){
           current = current + 1;
           if(current === maxItem){
               current = maxItem - 1;
           }
       }
       
       if(direction === 0){
           current = current - 1;
           if(current < 0){
               current = 0;
           }
       }
       
       var destination = current * 215;
       $(slideSec).css('transform','translateX(-'+destination+'px)');
   }
});

The code above is I created for this slider.

I’ve been working with echarts-for-react and I’m struggling with a very simple problem

I have a chart, with a toolbox with a few buttons, like this:

toolbox: [
      {
        orient: 'vertical',
        itemSize: 30,
        left : '6%',
        top: '17%',
        feature: {
          myTool: {
            show: true,
            title: 'KB',
            icon: 'KB',
            onclick: () => this.setUdm(0),
          },
          myTool2: {
            show: true,
            title: 'MB',
            icon: 'path://M0 0 L20 0 L20 20 L0 20 Z M2 2 L18 2 L18 18 L2 18 Z M5 7 L15 7 L15 8 L5 8 Z M5 12 L15 12 L15 13 L5 13 Z',
            onclick: () => this.setUdm(1),
          },
          myTool3: {
            show: true,
            title: 'GB',
            icon: 'path://M0 0 L20 0 L20 20 L0 20 Z M2 2 L18 2 L18 18 L2 18 Z M5 6 L15 6 L15 7 L5 7 Z M5 11 L15 11 L15 12 L5 12 Z M5 16 L15 16 L15 17 L5 17 Z',
            onclick: () => this.setUdm(2),
          },
        },
      },

My problem is the ‘icon’ field, I don’t want a complicated photo or anything like that, what I want is basically to have a squared button with inside written the title of the button, like KB, MB and so on

I tried a few things, like svg paths, but I can’t get it to work. Any solutions?

P.S.: I would really prefer not importing external images if I can avoid doing so

In a composition API Vue 3 component, I’m using reactive objects that’ll be populated asynchronously with external data.
I’m using “nullable” {} object for that purpose:

import { Ref, ref } from 'vue'
import { Car } from '@mytypes/vehicules'

const car: Ref<Car|{}> = ref({})

fetch('/cars/42').then((result: Car) => {
  car.value = result
}

So I can show potentially empty data on the template

<h1>{{ car.model }}</h1>
<label>Brand</label> {{ car.brand }}
<label>Engine</label> {{ car.engine }}
<label>Color</label> {{ car.color }}

It seems to me like a dirty hack and each time I do that, I’m facing the issue that I need to chain declare Car|{} everywhere the value is propagated to keep Typescript happy enough.

I imagine there is a much proper way to do that, isn’t it ?

I am using body-parser version 1.19.2
I have this in this code – bodyParser.json({limit: '5mb', type: ['json', 'application/csp-report']})
If I make any POST call with Content-Type as application/json and have whitespace in the request body, then it’s getting timed-out.
This is not happening in local and issue coming only in production.

I tried debugging the issue and found this body-parser might be the reason.

I need your help. I’ve been trying for hours to pass a variable from my JavaScript file to a Livewire component without success.

In my JS I have the following

Livewire.emit('handleValue', value);

Error message

Uncaught (in promise) TypeError: Livewire.emit is not a function

I have also tried the following

window.livewire.emit('handleValue', value);

Error message

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ’emit’)

Can anyone help me with this problem? My app.layout looks like this

...
<!-- Scripts -->
    @livewireScripts
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

and my Js file is in the following path

public/js/clientMovement/googleAutocompleteField.js

I am using ngxpermisions to load a button that renders child component

<dx-button *ngxPermissionsOnly="['ROLE_GEN_ADMIN','ROLE_LOCAL_ADMIN']" icon="add" type="normal" text="Add" style="margin-left: auto;" (onClick)="add()"> </dx-button> <app-add ></app-add>

How to do this.Right now the button is not appearing.It appears once i remove the child component

How to do this.Right now the button is not appearing.It appears once i remove the child component Please suggest

I have made a dragging system with js and jquery, however when i zoom in, the image when being moved, moves faster then the cursor. also when i zoom out the image moves slower. I have tried to fix this but it just does weird movements.

$(function() {
  let count =  Date.now();
  let posX = 0
  let posY = 0
  document.querySelectorAll('.token').forEach(function(token) {
    function onDrag({movementX, movementY, buttons, target}) {

      if (buttons === 0) {$(token).css('z-index', 0); return;}
      let zoom = window.devicePixelRatio
      
      let getStyle = window.getComputedStyle(token)
      let leftVal = parseInt(getStyle.left);
      let topVal = parseInt(getStyle.top);
      token.style.left = `${leftVal + (movementX / zoom)}px`
      token.style.top = `${topVal + (movementY / zoom)}px`
      let tempcount = Date.now();
      if (tempcount > count + 30) {
        socket.emit('Token Updated', leftVal + (movementX / zoom), topVal + (movementY / zoom), token.classList[1], false)
        count = Date.now();
      }
      

     
    }
    token.addEventListener("mousedown", (event) => {
      $('.token.' + event.target.classList[1]).css('z-index', 3000)
      token.classList.add("active")
      
      document.querySelector("body").addEventListener("mousemove", onDrag)
    })
    document.querySelector('body').addEventListener("mouseup", (event) =>  {
      document.querySelector("body").removeEventListener("mousemove", onDrag)
      let getStyle = window.getComputedStyle(token)
      let leftVal = parseInt(getStyle.left);
      let topVal = parseInt(getStyle.top);
      $('.token.' + token.classList[1]).css('z-index', 2001)
      socket.emit('Token Updated', leftVal, topVal, token.classList[1], true)
      
    })
    
  })


})