Category: javascript

I’m getting an error in my code and I’ve narrowed the issue down to two lines (if I comment them out then the error doesn’t show)
Here are the problematic lines –

var rowcnt = table.row.length; 
var colcnt = table.row.[0]cells.length;

Unfortunately I cannot share any of the other code and this is written from memory at the moment but any help would be appreciated!
Also worth noting that I can only use JavaScript ES5 and this is within ServiceNow so there are limitations.

Thank you in advance!!

Tried changing the names of the variables – only way I’ve seen the error disappear is with commenting the code so that it doesn’t run.

I have also looked at the Console when reloading the page and it does show a websocket error but I’m unsure whether this could cause the error message I’m seeing on the page?

On my project i declare all JS files I will need on the _layout.cshtml but my partialviews are not loading these files.
I need to declare them on every partialview wich is causing my troubles.

Here is my layout bottom part.
One of the problems is when i append my “menu” to the _layout.
I need the “scripts.bundle.js” on every page so i call from the layout but is not working on partialviews….

what i am doing wrong?

    <script>var hostUrl = "@Url.Content("~/Content/")";</script>
    <script src="@Url.Content("~/Content/assets/plugins/global/plugins.bundle.js")"></script>
    <script src="@Url.Content("~/Content/assets/js/scripts.bundle.js")"></script>
    <script src="@Url.Content("~/Content/assets/plugins/custom/datatables/datatables.bundle.js")"></script>
    <script src="@Url.Content("~/Content/assets/js/custom/apps/ecommerce/reports/views/views.js")"></script>
    <script src="@Url.Content("~/Content/assets/js/widgets.bundle.js")"></script>
    <script src="@Url.Content("~/Content/assets/js/custom/widgets.js")"></script>
    <script src="@Url.Content("~/Content/assets/plugins/custom/fslightbox/fslightbox.bundle.js")"></script>
    <script src="@Url.Content("~/Content/src/js/components/menu.js")"></script>

</body>
<!--end::Body-->
</html>

<script type="text/javascript">

    jQuery(document).ready(function () {

        $('#menuPrincipal').load('@Url.Content("~/Home/V_Menu")'), function () { $('#menuPrincipal').append(); }
        return false;

    });

</script>

I need all pages from the project reading the js files from the layout page but is not working….

When attempting to capture a screenshot in a web application developed with ElectronJS, the resulting image shows a black screen. Additionally, standard actions like copy-paste commands and keyboard shortcuts do not seem to function as expected .Applications like teamviewer, google meet, teams gives black screen. i can only use autotyper

I attempted to modify the settings of the app.asar package, including contextIsolation, nodeIntegration, kiosk, and web security settings. However, these changes resulted in the application failing to open

Why does my client side (running on port 3000) fetch not save the cookie from the backend (running on port 4000) even though I enabled withCredentials and CORS whitelisted my host?

Server code:

// server config
app.use(cors({ 
    credentials: true,
    origin: ["http://localhost:3000"]
}));

// if request comes in
res.cookie('access_token', access_token, {
    expires: new Date(Date.now() + 1000 * 60 * 60 * 2), // 2h
    httpOnly: true,
    secure: process.env.NODE_ENV !== "development"
});

Frontend code (using axios):

const { data } = await axios.post(`http://localhost:4000/api/auth/login`, {
    password: "12356789"
}, {
    withCredentials: true,
})

The request gets handled correctly but in the browser(frontend) the cookie just does not get saved.

I am trying to make a wordle clone, but i am facing error in logic checking of guess.
here i am denoting grey as absent, yellow as present, green as correct.
Suppose my solution word is “cried”.
First guess: “kneel” output: “aaaca”
but my second guess is “mouse” it should be “aaaap” but it is showing all absent.

It retrieves the guessed word and the letters at the given position in the guessed word and the solution word.
If the guessed letter is the same as the solution letter, it marks the letter as correctly guessed and schedules a call to revealTile with the status ‘correct’.
If the guessed letter is not the same as the solution letter, it checks if the guessed letter is present anywhere in the solution word and hasn’t been correctly guessed yet. If it is, it schedules a call to revealTile with the status ‘present’. If it’s not, it schedules a call to revealTile with the status ‘absent’.
The setTimeout calls are used to delay the revealing of the tiles, with each tile being revealed 150 milliseconds after the previous one.

let matchedPositions = [];
  let correctlyGuessedLetters = new Array(5).fill(null);

const checkLetter = (position, currentGuessCount) => {
  let guessedWord = currentGuess.dataset.letters;
  let guessLetter = guessedWord.charAt(position);
  let solutionLetter = solution.charAt(position);

  if (guessLetter == solutionLetter) {
    correctlyGuessedLetters[position] = guessLetter;
    setTimeout(() => {
      revealTile(position, 'correct', currentGuessCount);
      currentGuessCount++;
    }, position * 150);
  } else {
    let isPresent = false;
    for (let i = 0; i < 5; i++) {
      if (guessLetter == solution.charAt(i) && correctlyGuessedLetters[i] !== guessLetter) {
        isPresent = true;
        break;
      }
    }
    if (isPresent) {
      setTimeout(() => {
        revealTile(position, 'present', currentGuessCount);
        currentGuessCount++;
      }, position * 150);
    } else {
      setTimeout(() => {
        revealTile(position, 'absent', currentGuessCount);
        currentGuessCount++;
      }, position * 150);
    }
  }
};

my github

I want the next guess to have same feautures as previous one

I’m trying to develop an application using fabricjs in Reactjs. I want to upload an image to the site and then when this uploaded image is clicked, it will be added to the canvas and can be edited (moved and resized). But I couldn’t solve the problem. While the image can be edited where I show it with a red arrow, I cannot interact with it where I show it with a blue arrow.Image

I tried to solve the problem by adding a direct link to the image myself, but I was not successful. I looked at a lot of sites but couldn’t find a solution.

I am making same modal as in telegram.
If to much elements in modal it became scrollable and when you scroll close to bottom enough padding bottom (in term of outside element ) or margin bottom (in term of scrolling element) became bigger.

initial

scrolling padding increase

the code I implement this:

import { cn } from "@nextui-org/react";
import { useEffect, useRef, useState } from "react";
import { debounce } from "lodash";

const CreateChatModal = () => {
  const [padding, setPadding] = useState(0);
  const scrollableDiv = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const current = scrollableDiv.current;

    const handleScroll = debounce(() => {
      if (current) {
        const { scrollTop, scrollHeight, clientHeight } = current;
        const spaceLeft = Math.max(scrollHeight - scrollTop - clientHeight, 0);
        console.log(spaceLeft);

        if (spaceLeft > 30) {
          setPadding(0);
        }

        if (spaceLeft < 30) {
          setPadding(31 - spaceLeft);
        }
      }
    }, 8);

    if (current) {
      current.addEventListener("scroll", handleScroll);
    }

    return () => {
      if (current) {
        current.removeEventListener("scroll", handleScroll);
      }
    };
  }, []);

  return (
    <div
      className="absolute w-full h-full  bg-black/40 pt-[60px]"
      style={{ paddingBottom: `${padding}px` }}
    >
      <div
        className={cn(
          "w-[438px] mx-auto rounded-t-lg bg-white flex flex-col max-h-full",
          padding > 0 ? "rounded-b-lg" : "rounded-b-none"
        )}
      >
        <div className="h-[60px] ">Header</div>
        <div ref={scrollableDiv} className="overflow-y-scroll h-full ">
          <div className="h-[100px]">Item</div>
          <div className="h-[100px]">Item</div>
          <div className="h-[100px]">Item</div>
          <div className="h-[100px]">Item</div>
          <div className="h-[100px]">last Item</div>
        </div>
      </div>
    </div>
  );
};

export default CreateChatModal;

the problem is animation when padding changes not always smooth, in times when I scroll fast especially (

Could you plz tell me how to install emulator for react native,
without android studio can we install emulator for react native ? for windows ?
and
what is the process to install android studio emulator for react native ??
Plz let me know how to install emulator for react native , Thank you

I have a image carousel on a site I’m creating, it should have 8 images total however only show 4 at a time and scroll left to right with a click of a button. The scroll feature works until I set the widths of the images to fit 4 images then the scrolling completely stops functioning. If I leave it on 2 images (very stretched) it functions exactly as it should.

<div class="carousel-container">
            <div class="carousel-wrapper">
              <div class="carousel-item">
                <img src="/content/photo1.jpg" alt="Image 1">
              </div>
              <div class="carousel-item">
                <img src="/content/photo2.jpg" alt="Image 2">
              </div>
              <div class="carousel-item">
                <img src="/content/photo3.jpg" alt="Image 3">
              </div>
              <div class="carousel-item">
                <img src="/content/photo4.jpg" alt="Image 4">
              </div>
              <div class="carousel-item">
                <img src="/content/photo5.jpg" alt="Image 5">
              </div>
              <div class="carousel-item">
                <img src="/content/photo6.jpg" alt="Image 6">
              </div>
              <div class="carousel-item">
                <img src="/content/photo7.jpg" alt="Image 7">
              </div>
              <div class="carousel-item">
                <img src="/content/photo8.jpg" alt="Image 8">
              </div>
            </div>
            <div class="carousel-btn prev-btn">❮</div>
            <div class="carousel-btn next-btn">❯</div>
        </div>

.carousel-container {
    width: 90%;
    height: 400px; /* Set the desired height */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100%; /* Make the wrapper take the full height of the container */
}

.carousel-item {
    flex: 0 0 25%;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 12.5%; /* Ensure each item takes 25% of the wrapper's width */
    height: 100%; /* Make each item take the full height of the wrapper */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
.prev-btn {
    left: 0;
  }
.next-btn {
    right: 0;
  }
.carousel-btn:hover {
    background-color: #87CEEB;
  }

document.addEventListener("DOMContentLoaded", function () {
    console.log("Script loaded!");

    // Get necessary elements
    const carouselWrapper = document.querySelector('.carousel-wrapper');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const carouselItems = document.querySelectorAll('.carousel-item');

    // Set the width and height of each carousel item
    const itemWidth = carouselWrapper.clientWidth / 4; // Show 4 items at a time
    const itemHeight = carouselWrapper.clientHeight;
    carouselItems.forEach(item => {
        item.style.width = `${itemWidth}px`;
        item.style.height = `${itemHeight}px`;
    });

    // Set the width of the carousel dynamically based on the number of items
    carouselWrapper.style.width = `${carouselItems.length * itemWidth}px`;

    // Function to scroll the carousel
    function scrollCarousel(direction) {
        const scrollAmount = itemWidth * direction;

        // Scroll the carousel
        carouselWrapper.scrollLeft += scrollAmount;

        // Check if reached the end and reset to the beginning or vice versa
        if (direction === 1 && carouselWrapper.scrollLeft + carouselWrapper.clientWidth >= carouselWrapper.scrollWidth) {
            carouselWrapper.scrollLeft = 0;
        } else if (direction === -1 && carouselWrapper.scrollLeft <= 0) {
            carouselWrapper.scrollLeft = carouselWrapper.scrollWidth - carouselWrapper.clientWidth;
        }
    }

    // Add click event listeners to buttons
    prevBtn.addEventListener('click', function () {
        console.log("Previous button clicked");
        scrollCarousel(-1);
    });

    nextBtn.addEventListener('click', function () {
        console.log("Next button clicked");
        scrollCarousel(1);
    });
});

I have tried multiple widths.

i am trying to create a block mario based game , i am learning i have written some code but i am facing some glitch please help the mario is not standing on the block when i jump please suggest me i am learning when i jump in the block i am facing some bug where i keeps glitching please help . here is what i have wrote please help

/** @type {HTMLCanvasElement} */

let canvas = document.querySelector('#canvas')
let c = canvas.getContext('2d')

canvas.width = window.innerWidth / 2
canvas.height = window.innerHeight / 2

let marioswy = document.querySelector('#mariosy')
let mariowy = document.querySelector('#marioy')
let gravity = 0.3

let mario = {
    x: 20,
    w: 20,
    h: 40,
    speedX: 0,
    speedY: 10,
    dx: 4,
    dy: -5,
    color: "black",
    canJump: true,
    onGround: true,
}

let block = {
    x: 200,
    y: 280,
    w: 150,
    h: 20,
    color: "black",
    canJump: false,
    onGround: false,
}


mario.y = canvas.height - mario.h;
//-----------------------------------------------------

function animate_mario() {

    c.clearRect(0, 0, canvas.width, canvas.height)

    c.fillRect(mario.x, mario.y, mario.w, mario.h)
    c.fillRect(block.x, block.y, block.w, block.h)
    mario.x += mario.speedX

    if (mario.y + mario.h <= canvas.height) {
        mariowy.textContent = `Y position:  ${mario.y}`
        mario.y += mario.speedY
        mario.speedY += gravity
    }
    else if (
        mario.x < block.x + block.w &&
        mario.x + mario.w > block.x &&
        mario.y < block.y + block.h &&
        mario.y + mario.h > block.y
    ) {
        mario.y = block.y - mario.h;
        mario.dy = 0;
        mario.onGround = true
        gravity = true
    }

    else {
        mario.canJump = true
        mario.onGround = true
        mario.y = canvas.height - mario.h
        mario.speedY = 0;
        //DEBUG
        marioswy.textContent = `X position:  ${mario.x}`
    }
    requestAnimationFrame(animate_mario)
}

animate_mario()
document.addEventListener("keydown", (event) => {
    if (event.key === "ArrowRight") {
        mario.speedX = mario.dx

    }
    if (event.key == "ArrowLeft") {
        mario.speedX = -mario.dx
    }
})

document.addEventListener("keyup", (event) => {
    if (event.key === "ArrowRight") {
        mario.speedX = 0
    }
    if (event.key == "ArrowLeft") {
        mario.speedX = 0
    }
})

//ADDED FOR DEBUGGING 
let aupcount = 0
let aup = document.querySelector('#aup')

//UP DOWN FUCNTIONS
document.addEventListener("keydown", (event) => {
    if (event.key === "ArrowUp" && mario.onGround && mario.canJump) {
        //FOR DEBUG
        aupcount++
        aup.textContent = `Arrow key count :${aupcount}`
        //-------------------------------------------------------
        mario.speedY = mario.dy
        mario.onGround = false
        mario.canJump = false
    }
});

document.addEventListener("keyup", (event) => {
    if (event.key === "ArrowUp") {
        mario.speedY = 0
    }
})

I am working on a google doc where one heading are spread in multiple lines separated by Enter(n), I want such to be converted to Soft Return(Shift + Enter), I can do it manually but its very tedious to do it for 100’s of such heading, wanted to check if their is a way to do it automatically using maybe google app script, this is what I have tried so far which didn’t work:

Attempt 1

function convertHeading6ToSoftWrap() {
  var body = DocumentApp.getActiveDocument().getBody();
  
  var heading4Elements = body.getParagraphs().filter(function (paragraph) {
    return paragraph.getHeading() == DocumentApp.ParagraphHeading.HEADING4;
  });

  heading4Elements.forEach(function (element) {
    var text = element.getText();
    element.clear();
    
    element.setAttributes({
      'LINE_SPACING': 1.5,
      'SPACING_AFTER': 0,
      'SPACING_BEFORE': 0
    });
    
    element.appendText(text);
  });
}

Attempt 2

function convertHeading6ToSoftWrap() {
  var body = DocumentApp.getActiveDocument().getBody();

  var heading4Elements = body.getParagraphs().filter(function (paragraph) {
    return paragraph.getHeading() == DocumentApp.ParagraphHeading.HEADING4;
  });

  heading4Elements.forEach(function (element) {
    var text = element.getText();

    element.clear();

    applySoftWrap(text, body);
  });
}


function applySoftWrap(text, body) {
  var lines = text.split("n");

  lines.forEach(function (line, index) {
    if (index > 0) {
      body.appendParagraph(line);
    } else {
      body.appendParagraph(line);
    }
  });
}

Any hints or clues are highly appreciated.

I want to send any programming Language Script on Android Device(Device is unlocked and no swipe lock on that) Through WiFi Connection that script will do some task like for example if i send a script on android device through WiFi then it will do some transaction one by one some ones number
i have to send my employs Salary in once through targeting my device.
so which Programming language will work and how is this possible for me?

Getting Network Error AxiosError: Network Error at XMLHttpRequest.handleError, when i am requesting the API through Axios from localhost but when i am requesting from Postman i am getting the json data

const apiKey=”My_API_Key”
const url = “https://api.pexels.com/v1/search?query=laptop&per_page=6&page=1”
const fetchPhotos = async()=>{
const response = await Axios.get(url, {
header: {
Authorization: apiKey
}
});
const {photos} = response;
const allProduct = photos.map(photo => ({
smallImage:photo.src.medium,
tinyImage:photo.src.tiny,
productName:faker.internet.userName(),
productPrice:faker.commerce.price(),
id:faker.string.uuid()
}))
}
Error Screenshot
enter image description here

I am creating a webpage consisting of several objects. Each of these objects are similar; they have a drawing graphics , a few ‘s, a few buttons etc. Also, each object has some functions. These objects are created by js code.
What is the best approach here?
Is it possible to define a class that acts as a custom HTML-element, and also has its own methods?
Or is there some other way?

Up until now I’ve been creating these objects be calling a static function with some parameters, in order to set up all these elements and functionality. But the code becomes messy and hard to read, the more functionality I add.

I also wonder if there’s a way to use a HTML file for each of these objects, and just populate the pre-defined elements of the file upon creation?

I’m looking for an algorithm to suggest the user best layout.
For this purpose, I have created the following layout list as follows:

function getRandomNumber(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// Generate a random layout
function generateRandomLayout(index: number) {
  const layout = {
    name: `Layout${index + 1}`,
    options: {
      watchList: getRandomNumber(0, 5),
      instrumentDetail: getRandomNumber(0, 5),
      portfolio: getRandomNumber(1, 5),
      orders: getRandomNumber(0, 5),
      transactions: getRandomNumber(0, 5),
      chart: getRandomNumber(0, 5),
      Mazaneh: getRandomNumber(0, 5),
    },
  };
  return layout;
}

At generated Layout, we have options that include keys and values. the value can have a random number between [0,5].
And, 20 random layouts have been generated as follows:

// Generate 20 random layouts
const randomLayouts = [];
for (let i = 0; i < 20; i++) {
  const layout = generateRandomLayout(i);
  randomLayouts.push(layout);
}

Now, We have user scores as follows, for example:

const userScores= {
  watchList: 3,
  instrumentDetail: 5,
  portfolio: 2,
  transactions: 4,
  chart: 5,
  orders: 3,
  Mazaneh: 0,
};

Now, I’d like to find a solution to suggest user, best layout that is the most closest layout to user preferences. Also, If any of user scores, was defined zero. the zero field in suggested layout must be considered, and only show the layout that its field value is not zero.