Category: javascript

i want to show alert , only when i close tab from browser , not show on page refresh ,using js

window.onbeforeunload = function() {
return ‘Sure?’;your text
};

let openedWindow;

function openWindow() {
    openedWindow = window.open("moreinfo.htm");
}

function closeOpenedWindow() {
    openedWindow.close();
}

i am using this code but , alert come on changing page or refresh page .
i don’t want alert, when i refresh page or changing to other page

Description:
I’m currently working on implementing a navigation bar with a close button functionality using HTML, CSS, and JavaScript.node.js express.js and ejs. My project is a blog project. However, I’m encountering an issue where clicking the close button does not trigger the expected behavior of moving the navigation bar to the right by 0 rem as the active class should be included.

<header>
  <nav id="navbar">
    <div>MY FIRST BLOG</div>
    <ul id="nav-list">
      <li><a href="/">Home</a></li>
      <li><a href="/compose">Compose</a></li>
      <li><a href="/posts">Read more</a></li> 
      <a href="#" id="close-btn"><i class="fa fa-times"></i></a>
      <!-- <li><a href="/posts">Posts</a></li>  -->
    </ul>
    <div id="mobile-nav">     
      <i id="mobile-menu" class="fa fa-outdent"></i>
  </div>
  </nav>
</header>

this is my header.ejs
this is my app.js which is located inside js folder which is located inside public folder
`
// Navbar logic

const mobileMenuBtn = document.getElementById("mobile-menu");
const navbar = document.getElementById("navbar"); // Select the navbar container
const mobileMenuCloseBtn = document.getElementById("close-btn");

if (mobileMenuBtn) {
  mobileMenuBtn.addEventListener("click", function () {
    navbar.classList.add("active"); 
}

mobileMenuCloseBtn.addEventListener("click", function () {  
  navbar.classList.remove("active"); 
});

Expected Outcome:
Upon clicking the close button, the navigation bar should slide to the right by 0 rem, indicating that it has been closed. However, this behavior is not currently observed.

Additional Context:
This issue is occurring in a web application project built using Node.js, Express.js, and EJS templating.

Since 21 February 2024, Google Maps Marker is deprecated, and Google recommends to use AdvancedMarkerElement. However, currently, the AdvancedMarkerElement does not have a feature that i need, and a lot of features are still in beta. Is it okay if I’m not migrating to AdvancedMarker?

i tried to change the marker to AdvancedMarker and set the marker clickable, but i need to change the google maps version to alpha, and its working but i can not use the alpha version for production use because its not stable and it gives a beta banner above the map.

I’m building a stacking app for the Polygon network, and I’m stuck on a decision.

I’m trying to choose between Rainbow and WalletConnect for connecting users’ wallets. Could someone explain the key differences between these two tools?

Specifically, I’d like to know:

What are the pros and cons of each option?
Which one is better for specific situations? (e.g., beginner-friendly apps, advanced features)
Any insights or advice would be greatly appreciated!

P.S. If you have experience with either Rainbow or WalletConnect, feel free to share your thoughts!

In visual studio 2022 version where I do coding html css and javascript

In visual studio 2022 version where I do coding html css and javascript

Visual studio 2022 version where I find html and css javascript coding for me doing can you say details and images which one to use

for (var i = 0; i < markers.value.length; i++) {
    new L.marker([markers.value[i].location.lat, markers.value[i].location.lon])
      .addTo(markersLayer.value)
      .bindTooltip(L.tooltip({ sticky: true, content: 'god' }));
  }

it’s a map that displays a group of markers. Now, the first time you load it with a layer there are no issues, the problem is whenever i change the markers (clearing all of them with markersLayer.value.clearLayers() and running back again the loop with the new array), and also it would only happen with tooltips, when commenting .bindTooltip(L.tooltip({ sticky: true, content: 'god' })); i cannot reproduce it. Also if i don’t clear the layer you can see the first array of markers stuck to the map but the new ones just won’t work.

showcase

I tried almost everything and it has some randomness, but what i found to be almost 90% sure the breaking component, it’s the tooltip.

After I upgraded my Chrome browser to version 122.0.6261.70 (Official Build) (64-bit) today, my WebGL program stopped working and threw an exception Cannot assign to read only property 'RGBA8' of object '#'. Does anyone know the reason for this?

about code:

if (!gl.isWebGL2) {
    gl.RGBA8 = gl.RGBA;
    gl.RGB8 = gl.RGB;
}

An exception was thrown when executing gl.RGBA8 = gl.RGBA;.

Exception

When I rolled back the browser or removed the relevant code, everything went back to normal.

I have a page that has a sticky footer, scrolling content, and an overlay that renders after being on the page for a couple of seconds. I am seeing an issue on Safari where sometimes on some devices (iPhone 12 – 15) the footer and some part of the scrolling content overlap the bottom part of the overlay. It doesn’t happen consistently, and it only happens on Safari, which is leading me to believe it’s not an issue with the css, but rather something where the scroll changes the height of the container. However, it looks like the overlay content is still set to take up the full screen, and when the content renders on top it cuts off the bottom part of the overlay. All of them are within the body

<body style="overflow: hidden; position: absolute; height: unset;">
  <div class="page">
     <main style="display: block;">
        <div class="content" style="position: relative; display: flex; flex-direction: column;">
           <div class="footer" style="display: block; width: 100%; left: 0; bottom: 0; position: fixed; pointer-events: auto;">...</div>
           <div class="scroll_content" style="max-width: 100vw; overflow: hidden;">...</div>
        </div>
     </main>
  </div>
  <div id="overlay" style="position: fixed; left: 0px; bottom: 0px; width: 100vw; height: 100%; z-index: 9223372036854776000 !important;">..</div>
</body>

Could there be some situation where sometimes Safari renders things in different order? I’m totally lost because I can’t easily replicate it and I can’t tell what exactly would cause it, so any insight would be appreciated!

Sorry for the photo, again it’s tough to reproduce so had to make up a similar scenario 🙂

I am working on a side project where I have to open a 3rd party service in an iframe. And I have list of alternative 3rd party substitute service. So, lets say if the first third party service takes too much time(>10s), then I will make request to substitute third party services using setTimeout and setTimeInterval and promises.
For that I have created a html file which will be loaded by default on the iframe, and after that all the functionality of redirection and timer are written in controller of the same html file. So that timer service can be started and if the third party website loads on the iframe, it will wash the html file, so the controller code.
But the problem here is my html file is not loading on the controller.
(Note: Assume as if I am novice in JS and angularJS).

File – redirection.html

<div>
    <div class="loader">
        Hello World
    </div>
</div>

Code from which frame is loading:

<div class="col h-100" ng-show="requestVersion==2">
    <iframe id="iFrame" class="col-12 h-100 no-border text-center"  src="{{redirectionUrl}}">
    </iframe>
</div>

Controller code for the redirection.html:

const angular = require("angular");

function redirectionCtrl($scope, $state, $timeout, $window, ENV, parentDoc, httpSrvc, miscSrvc, windowMessagingService) {
    "ngInject";


    let model = {
           //some code

    }


    function fetchMessage() {
         // some code

    }

    function fetchData(){
        // some code

    }

    function updateDataAndRedirect(){
        // some code
    }
    function init() {
        console.log("redirection init works!")
        angular.extend($scope, model);
        console.log(":Element loaded")
        let copyElement = document.createElement("span");
        copyElement.appendChild(document.createTextNode("Hello Wolrd"));
        copyElement.id = 'tempCopyToClipboard';
        angular.element(document.body.append(copyElement));
        fetchMessage();
        updateDataAndRedirect();
    }

    init();
}

module.exports={
    name : "redirectionCtrl",
    controller : redirectionCtrl
};

And setting up url is here:

.state('espRedirection', {
            url: "/redirection",
            templateUrl: 'templates/redirection.html',
            resolve : {
                controller: function ($q) {
                    return $q(function (resolve, reject) {
                        return require.ensure('./javascripts/controllers/redirectionCtrl',
                            function (require) {
                                let mod = require('./javascripts/controllers/redirectionCtrl');
                                $controllerProvider.register(mod.name, mod.controller);
                                resolve();
                            },
                            function (err) {
                                console.log(err);
                                reject(err);
                            },
                            "home"
                        );
                    });
                }
            },
            views:{
                "content@home" : {
                    templateUrl: 'templates/redirection.html',
                    controller : "redirectionCtrl",
                },
                "header@home" : {
                    templateUrl: 'templates/header.html',
                    controller : "defaultHeaderCtrl"
                },
                "sidebar@home" : {
                    templateUrl: 'templates/sidebar.html',
                    controller : "defaultSidebarCtrl"
                }
            }
        })

And here is the output:
[enter image description here](https://i.stack.imgur.com/REM1t.png)

`The horizontal infinite scrolling is very good and smooth in android and windows.
But IOS and iPhone devices it is not good and very bad and slow scrolling experince compared to android and windows.

Here is my HTML`

 <div class="agile-horizontal-scroll center">
      <div class="agile-slide-track">
        <img
          src="../assets/agile_task_scroll.svg"
          alt="Agile Task Scroll"
          class="agile-slide"
        />
      </div>


    .agile-horizontal-scroll {
         width: 100%;
         margin-top: 2rem;
         overflow: hidden;
        white-space: nowwrap;
       }

       .agile-slide-track {
        display: flex;
         width: 102vw;
         animation: 30s slide infinite linear;
         -webkit-animation: 30s slide infinite linear;
       }

     @keyframes slide {
       to {
         transform: translate(-100%);
      }
    }

npm ERR! code 1
npm ERR! path C:UsershpDesktopAlphatech-React-mainclientnode_modulessharp
npm ERR! command failed
npm ERR! command C:Windowssystem32cmd.exe /d /s /c (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Using cached C:UsershpAppDataLocalnpm-cache_libvipslibvips-8.14.5-win32-x64.tar.br
npm ERR! sharp: Integrity check passed for win32-x64
npm ERR! sharp: Creating C:UsershpDesktopAlphatech-React-mainclientnode_modulessharpbuildRelease
npm ERR! sharp: Copying DLLs from C:UsershpDesktopAlphatech-React-mainclientnode_modulessharpvendor8.14.5win32-x64lib to C:UsershpDesktopAlphatech-React-mainclientnode_modulessharpbuildRelease
npm ERR! prebuild-install warn install Request timed out
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if “python3” can be used
npm ERR! gyp ERR! find Python – “python3” is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if “python” can be used
npm ERR! gyp ERR! find Python – “python” is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython39python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython39python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython39python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython39python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython39-32python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython39-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython39-32python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython39-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program Files (x86)Python39-32python.exe
npm ERR! gyp ERR! find Python – “C:Program Files (x86)Python39-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython38python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython38python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython38python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython38python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython38-32python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython38-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython38-32python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython38-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program Files (x86)Python38-32python.exe
npm ERR! gyp ERR! find Python – “C:Program Files (x86)Python38-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython37python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython37python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython37python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython37python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython37-32python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython37-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython37-32python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython37-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program Files (x86)Python37-32python.exe
npm ERR! gyp ERR! find Python – “C:Program Files (x86)Python37-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython36python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython36python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython36python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython36python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:UsershpAppDataLocalProgramsPythonPython36-32python.exe
npm ERR! gyp ERR! find Python – “C:UsershpAppDataLocalProgramsPythonPython36-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program FilesPython36-32python.exe
npm ERR! gyp ERR! find Python – “C:Program FilesPython36-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if Python is C:Program Files (x86)Python36-32python.exe
npm ERR! gyp ERR! find Python – “C:Program Files (x86)Python36-32python.exe” could not be run
npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python 3
npm ERR! gyp ERR! find Python – “py.exe” is not in PATH or produced an error
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python – Use the switch –python=”C:PathTopython.exe”
npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python – Set the environment variable PYTHON
npm ERR! gyp ERR! find Python – Set the npm configuration variable python:
npm ERR! gyp ERR! find Python npm config set python “C:PathTopython.exe”
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
npm ERR! gyp ERR! stack at PythonFinder.fail (C:UsershpAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibfind-python.js:330:47)
npm ERR! gyp ERR! stack at PythonFinder.runChecks (C:UsershpAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibfind-python.js:159:21)
npm ERR! gyp ERR! stack at PythonFinder. (C:UsershpAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibfind-python.js:228:18)
npm ERR! gyp ERR! stack at PythonFinder.execFileCallback (C:UsershpAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibfind-python.js:294:16)
npm ERR! gyp ERR! stack at exithandler (node:child_process:430:5)
npm ERR! gyp ERR! stack at ChildProcess.errorhandler (node:child_process:442:5)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:519:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:292:12)
npm ERR! gyp ERR! stack at onErrorNT (node:internal/child_process:484:16)
npm ERR! gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm ERR! gyp ERR! System Windows_NT 10.0.21996
npm ERR! gyp ERR! command “C:UsershpDesktopAlphatech-React-mainclientnode_modulesnodebinnode.exe” “C:UsershpAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gypbinnode-gyp.js” “rebuild”
npm ERR! gyp ERR! cwd C:UsershpDesktopAlphatech-React-mainclientnode_modulessharp
npm ERR! gyp ERR! node -v v21.6.2
npm ERR! gyp ERR! node-gyp -v v9.1.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsershpAppDataLocalnpm-cache_logs2024-02-23T04_38_23_366Z-debug-0.log
PS C:UsershpDesktopAlphatech-React-mainclient>

Am facing the issue when am installing flowbite in my react project

I haven’t tried anything i need help

I’m using React-quill as a text editor. I want to convert the content from it that includes images into a pdf. Below is the string, I’m getting from editor.

<p>sdfghj<img src="data:image/jpeg;base64,/9j/4AAQ…r5izLn+Jucfh7Vo6p/r7j6j+VZl595P97/CgD//2Q=="></p>

I’ve used jsPDF but it’s only converting plain text into a pdf. If I put an image into the text editor, pdf is showing blank. How do I convert text with more than one images into a pdf?

Note: In the image src, the image is in base64 format.

.col-sm-1-5 {
  flex: 0 0 12.5%;
  max-width: 12.5%;
  text-align: right;
}

<div class="row">
    <div class="col-sm-1" style="text-align: right">myInput1</div>
    <div class="col-sm-1-5" style="text-align: right">myInput2</div>
    <div class="col-sm-1" style="text-align: right">myInput3</div>
    <div class="col-sm-1" style="text-align: right">myInput4</div>
  <div class="col-sm-1" style="text-align: right">myInput5</div>
    <div class="col-sm-1-5" style="text-align: right">myInput6</div>
    <div class="col-sm-1" style="text-align: right">myInput7</div>              
    <div class="col-sm-1-5" style="text-align: right">myInput8</div>
    <div class="col-sm-1-5" style="text-align: right">myInput9</div>
</div>

I need to align the custom column added in my css style, but even though I have given text:align: right some of my custom columns (col-sm-1-5) still aligns left. i.e., myInput2, myInput6, myInput8….

"use client";

import React from "react";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL);
const ConvexClientProvider = ({ children }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

export default ConvexClientProvider;

I have a site I’ve built with Next 14 and have integrated authentication in my site with Clerk. It shows @clerk/clerk-react: Missing publishableKey is error. i have integreated convex and clerk in this site.

For authentication i did this all steps , https://docs.convex.dev/auth/clerk
i used JWT Template and created keys and url. i tried to run this buy using the command :
npm convex dev
I checked my dependencies also, it shows the @clerk/clerk-react: Missing publishableKey .

I would like to remove duplicate elements from multiple css files.

css ( directory )

• a.css
• b.css
  …

a.css

#div1 {color:red;border:1px solid red}
#div2 {color:blue}

b.css

#div1 {color:red;border:1px solid red}
#div3 {color:green}

remove dupllicate result:

a.css

#div1 {color:red;border:1px solid red}
#div2 {color:blue}

b.css

#div3 {color:green}

Is there a library that shows results like this?