Category: javascript

After you do location.replace(new-url) on the page old.html, in the browser history old.html has to be replaced by new-url. But in my environment, old.html remains. Why?

To be sure, the HTML standard says the old page has to be removed from the browser history.

I have a database with text entries.
I want to search for the city name, and return the country.

I have an async function which returns a thenable promise.

getText('New').then(alert(result));

After an await on a 2nd function, I want to resolve the promise with one item from the object found. i.e. TheText .

I have this code:

getText=async()=>{

const TheData=await getDataSet('City','New York'); //{country:'USA',city:'New York}
const TheText=TheData['country']; //'USA'

return new Promise((resolve,reject)=>{
  const request=??;
  request.onsuccess=()=>{resolve(TheText)};);

}

How can I modify the code above to return TheText as a resolved thenable promise.

I’m new to programming and am designing a game for a school assignment. I have made a small animation in CSS of a dice being shaken, then displaying the number of eyes of the throw. What I want is to call on the function playYourTurn() once (linked to a button), and then it would run the animation twice with some delay inbetween and move the players accordingly.

As it is now, only the second animation, playSpino(), runs. I have tried many variations with not having them as separate functions, change the intervals etc but to no avail. Sometimes it’s only the first animation, playSasha(), that runs. Borth markers move accordingly to their throws, I have checked by writing it out in the log, so it’s just the animations I’m struggling with.

The functions and the function in which they’re being called

The function with the animation that currently only runs once

I am developing a plugin for WordPress and it appears my my js and css files are not being enqueued even though I have enqueued them correctly in my code.

<?php
// Exit if accessed directly
if (!defined('ABSPATH')) exit;

/**
 * Enqueue styles and scripts only on the personalize-book page
 */
function bp_enqueue_assets() {
    // Only enqueue on the personalize-book page
    if (is_page('personalize-book')) {
        wp_enqueue_style('bp-style', BP_PLUGIN_URL . 'assets/css/style.css', [], '1.0');
        wp_enqueue_script('bp-editor', BP_PLUGIN_URL . 'assets/js/editor.js', ['jquery'], '1.0', true);

        wp_localize_script('bp-editor', 'bpData', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'rest_url' => esc_url_raw(rest_url('bp/v1')),
            'nonce' => wp_create_nonce('wp_rest')
        ]);
    }
}
add_action('wp_enqueue_scripts', 'bp_enqueue_assets');

Is there something I am doing wrong? The path is exactly the same as used in the code.

IT techey boys and girls, I need your help just as the title describes. I have parsed and generated elements sequence based on XML DTD files as below:

{
    "elementsInside": [
        "EFFECT",
        "CONEFFECT",
        "TITLEC",
        "TITLE",
        "WARNING",
        "CAUTION",
        "HNANOTE",
        "L3ITEM",
        "SIGNOFF"
    ],
    "schema": "(((EFFECT)?|(CONEFFECT)?)(TITLEC)?(TITLE)?(((WARNING)*(CAUTION)*(HNANOTE)*)(L3ITEM)(SIGNOFF)?(SIGNOFF)?)+)",
    "allFixedElements": [
        "EFFECT",
        "CONEFFECT",
        "TITLEC",
        "TITLE",
        "WARNING",
        "CAUTION",
        "HNANOTE",
        "L3ITEM",
        "SIGNOFF",
        "SIGNOFF"
    ]
}

How can I know which element next to be added can enroll? Like, if the element wrapper has no child, the first element child can be EFFECT or CONEFFECT or TITLE, or event L3ITEM. Then the next element adding must be applied by the rule here.

I know this problem may be so challenging, it’s just like AST parser of parsing your js or cpp files into a kind of code tree. I am not mastering any of this. I just configured this as a RegExp work, however it’s not that simple. You must match your element sequence from the start of this regexp. Hence, I’d like to know smarty and techey boys and girls do! Thanks for your helping.

Provided this kind of element sequence rule from DTD:

{
    "elementsInside": [
        "EFFECT",
        "CONEFFECT",
        "TITLEC",
        "TITLE",
        "WARNING",
        "CAUTION",
        "HNANOTE",
        "L3ITEM",
        "SIGNOFF"
    ],
    "schema": "(((EFFECT)?|(CONEFFECT)?)(TITLEC)?(TITLE)?(((WARNING)*(CAUTION)*(HNANOTE)*)(L3ITEM)(SIGNOFF)?(SIGNOFF)?)+)",
    "allFixedElements": [
        "EFFECT",
        "CONEFFECT",
        "TITLEC",
        "TITLE",
        "WARNING",
        "CAUTION",
        "HNANOTE",
        "L3ITEM",
        "SIGNOFF",
        "SIGNOFF"
    ]
}

Based on schema, the first element available could be EFFECT or any other elements obeying the rule, etc. If the first element is decided, then the next element sub-sequence will be determined.

I’m trying to replace a fixed string in a regex to a parameter in a function.
In my example I’m looking for a string that starts with XF-98 (two letters, a hyphen and a number)

var s = "XF-98 bananaas  ";

var regEx = (/XF-d+/mi); //NOT global
var result = s.match(regEx);
if (result != null) {
  alert(result);
  // do stuff
} else {
  alert("???" + s)
}

So far so good.
But how do I convert it into this format where prefix could be “XF-98”, “XF-99” or “AB-1000”??

function check_string(mystring, prefix)
{
  var regEx = (/prefix-d+/mi); //NOT global
  var result = mystring.match(regEx);
  if (result != null) {
    alert(mystring);
    // do stuff
  }
}

So our IT department recently changed the office licenses, and most of our workers now only have access to the web version of Excel, rather than the app version we used before. This has caused one of our files to fail due to it relying on an external barcode font to generate barcodes, so now I’m looking for a way to insert barcodes into the web version of Excel using OfficeScript (rather than VBA that I used before).

I’m not as fluent in OfficeScript/TypeScript/JavaScript as I’d like to be, so I might be missing something obvious, but so far I’m looking at two things in particular:

JavaScript has an “ImageData” class that takes a byte array. Using that I should easily be able to create the necessary data for the barcode before creating the ImageData, but so far I’ve not found a way to add an ImageData to a worksheet. Is there such a way?

ExcelScript.Worksheet have a “.addImage()” method that takes a base64-encoded string that represent the image data, formatted in either JPEG or PNG format. Is there an easy way to encode an ImageData or similar to a PNG or JPEG so I can get the Base64 that way?

I am using an API which returns data in the following way:

{
    "title": {
        "title-action": "some value",
        ...rest
    }
    "body": {
        "body-action": "some value",
        ...rest
    }
    ...
}

Very inelegant, but it is what it is. I would like to declare the following Zod enum and use it to parse this data:

const MyEnum = z.enum(["title", "body"])

However, I immediately have a problem on second level as I cannot figure out how to construct title-action key based on my enum:

const MySchema = z.object({
    [MyEnum.enum.title]: z.object({
        // what to do here?
    })
})

Any help would be appreciated!

The only implementation which I was able to compile is this:

const MySchema = z.object({
    [MyEnum.enum.title]: z.object({
        [MyEnum.enum.title + "-action"]: z.string()
    })
})

However, this loses any information on the value of inner keys, they are simply [x: string], and so my types become:

{
    title: {
        [x: string]: string
    }
    ...
}

I’m generating a combined report in Django by looping through several database entries and rendering the same HTML template multiple times, each with different data. The template includes Leaflet maps and some inline scripts.

The problem is: when I combine the reports into a single page, the layout breaks — it looks like the reports are either nested inside each other or overlapping. I also see multiple scrollbars (one inside another), which shouldn’t happen. This only occurs when I render several reports together.

Each individual report works fine on its own. The issue only appears when I generate them together in a loop.

Any help or direction would be appreciated.

I am ultimately trying to do more complicated things with an input field and a button, but I can’t even get the button to return anything to the console in the first place so I am trying to get the basics down before I move on to more complicated functions for the input field.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Input Practice</title>
    </head>
    <body>
        <div class="search">
            <label for="name">Search here:</label>
            <input
                type="text"
                id="name"
                name="name"
                required
                minlength="3"
                maxlength="30"
                size="30" />
            <button id="submit">Submit</button>
        </div>
        <script href="index.js"></script>
    </body>
</html>

JavaScript

var button = document.getElementById("submit");

function showConsole() {
    console.log("The button has been clicked")
};

button.addEventListener("click", showConsole);

I’m not concerned with CSS right now, I just want to get something to happen when I click the button. Any help would be appreciated.

I am using AngularJS SPA and trying to alert users when they are about to navigate away from active form.

There are 2 parts for this:

1. User closes active tab
2. User clicks internal link to navigate

So for first part everything is simple – window.addEventListener('beforeunload', unloader)

But for second part – How to show same alert, as in beforeunload? I don’t want to make custom alert text for consistency.

Since I can’t alter text and all browsers has own implementation:

Getting object not extensible error for selectedAnswer

const answer = data.question_answers?.[ques.id];
                if (answer) {
                  if (ques.isOnlyBool) {
                    ques.isChecked = data.question_answers[ques.id] === 'yes' ? true : false;
                  } else {
                    var selectedItem = {
                      title: data.question_answers[ques.id],
                      quesId: ques.id,
                    };
                    ques.selectedAnswer = selectedItem;
                  }

How can i print whole div in long single page pdf no breaks like long screenshot in react.js or may be with any backend framework

On click of download button i want it to download the whole html code of div in single page long pdf

I have developed an animation for my website, to give the effect of polaroid photos being tossed across a table top. I did this using the following html and CSS. It works in Codepen.(The changing font colors are just to identify the media query is working.)

https://codepen.io/Liam-Robb-OHagan/pen/YPPRYOO

HTML…

<div class="hero-wrapper">
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Winter-Bison-Plow-Framed.jpg" class="imgBison" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/03/Shoshone-Petrogylphs-Water-Ghost_ZoomedIN.jpg" class="imgPetroglyph" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Fairy-Retro-Frame-Vertical.jpg" class="imgHike" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Shoshone-Petrogylphs-Moose-Framed.jpg" class="imgMoose" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Summer-Grizzly-Delayed-Implantation-Framed.jpg" class="imgGrizzly" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Wildflowers-Framed.jpg" class="imgTetons" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Yellowstone-2-Day-Wolf-Framed.jpg" class="imgWolf" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Hero-Grand-Prismatic-Spring-Framed-scaled.jpg" class="imgSpring" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/HIke-Upper-Retro-Frame-Vertical.jpg" class="imgGeyser" />
  <div class="hero-text">
    <div class="hero-h1">
      Your Adventure of a Lifetime
    </div>
    <div class="hero-h3">
      Forge Your Own Memories on Our Private Wildlife Safaris and Interpretive Tours of Grand Teton & Yellowstone National Parks.
  </div>
</div>

CSS…

    /*Default ViewPort MOBILE 320-480px*/

/*Hero Container*/
.hero-wrapper {
  position: relative;
  background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-mb-480-720.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center;
  display: flex;
  width: 100%;
  max-width: 480px;
  height: 720px;
  max-height: 720px;
  margin: auto;
  overflow: hidden; /* Remove if images should be visible outside frame*/
}
/*Head and Subhead Container*/
.hero-text {
  display: flex;
  width: 90%;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 24px;
  bottom: 24px;
}

.hero-h1 {
  color: pink;
  font-family: Simplo, Lato, sans serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal; /* 92.857% */
  letter-spacing: -1px;
  text-transform: capitalize;
  align-self: stretch;
  width: 100%;
}

.hero-h3 {
  color: purple;
  font-family: Simplo, Lato, sans serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
  text-transform: capitalize;
  width: 90%;
}

/*Image Container*/
.hero-wrapper img {
  position: absolute;
  width: 140px;
  height: auto;
  box-shadow: 3px 9px 12px 3px rgba(0, 0, 0, 0.4);
  bottom: 25%;
  left: 62%;
  animation-duration: 2s;
  animation-delay: 1s;
  transition-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/*Individual Images and Starting Position to the bottom right of the screen*/
.hero-wrapper .imgBison {
  right: 0;
  transform: translate(100%, 0%) rotate(5deg);
  animation-name: enterBison;
}

.hero-wrapper .imgGeyser {
  right: 0;
  transform: translate(100%, 0%) rotate(25deg);
  animation-name: enterGeyser;
}

.hero-wrapper .imgGrizzly {
  right: 0;
  transform: translate(100%, 100%) rotate(10deg);
  animation-name: enterGrizzly;
}

.hero-wrapper .imgHike {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterHike;
}

.hero-wrapper .imgMoose {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterMoose;
}

.hero-wrapper .imgPetroglyph {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterPetroglyph;
}

.hero-wrapper .imgSpring {
  right: 0;
  transform: translate(100%, 0%) rotate(25deg);
  animation-name: enterSpring;
}

.hero-wrapper .imgTetons {
  right: 0;
  transform: translate(100%, 120%) rotate(20deg);
  animation-name: enterTetons;
}

.hero-wrapper .imgWolf {
  right: 0;
  transform: translate(100%, 100%) rotate(5deg);
  animation-name: enterWolf;
}

/*Individual Images Animation onto the Screen. Appearance of some photos being tossed onto a rough wooden table top*/

/*MOBILE 320-480px*/
/*Final Position of Animations so Images fit the Portrait Container*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
  @keyframes enterBison {
    from {
      transform: translate(100%, 0%) rotate(20deg);
    }
    to {
      transform: translate(-5%, -30%) rotate(2deg);
    }
  }

  @keyframes enterGeyser {
    from {
      transform: translate(100%, 0%) rotate(25deg);
    }
    to {
      transform: translate(-5%, -130%) rotate(-15deg);
    }
  }

  @keyframes enterGrizzly {
    from {
      transform: translate(100%, 100%) rotate(10deg);
    }
    to {
      transform: translate(-100%, -235%) rotate(-28deg);
    }
  }

  @keyframes enterHike {
    from {
      transform: translate(100%, 100%) rotate(25deg) scale(1.25);
    }
    to {
      transform: translate(-10%, -225%) rotate(18deg) scale(1);
    }
  }

  @keyframes enterMoose {
    from {
      transform: translate(100%, 0%) rotate(15deg);
    }
    to {
      transform: translate(-165%, -180%) rotate(-8deg);
    }
  }

  @keyframes enterPetroglyph {
    from {
      transform: translate(0%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-140%, -105%) rotate(-35deg);
    }
  }

  @keyframes enterSpring {
    from {
      transform: translate(100%, 100%) rotate(25deg);
    }
    to {
      transform: translate(-75%, -50%) rotate(-8deg);
    }
  }

  @keyframes enterTetons {
    from {
      transform: translate(100%, 0%) rotate(20deg) scale(1.25);
    }
    to {
      transform: translate(-75%, -160%) rotate(5deg) scale(1);
    }
  }

  @keyframes enterWolf {
    from {
      transform: translate(100%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-165%, -40%) rotate(30deg);
    }
  }
}

/*TABLET, LAPTOP, DESKTOP 768-1440px*/
/*Final Position of Animations so Images fit Landscape Container*/
@media only screen and (min-width: 768px) and (max-width: 1440px) {
  @keyframes enterBison {
    from {
      transform: translate(100%, 0%) rotate(20deg);
    }
    to {
      transform: translate(-5%, -10%) rotate(2deg);
    }
  }
  @keyframes enterGeyser {
    from {
      transform: translate(100%, 0%) rotate(25deg);
    }
    to {
      transform: translate(-25%, -130%) rotate(-15deg);
    }
  }

  @keyframes enterGrizzly {
    from {
      transform: translate(100%, 100%) rotate(10deg);
    }
    to {
      transform: translate(-225%, -165%) rotate(-28deg);
    }
  }

  @keyframes enterHike {
    from {
      transform: translate(100%, 100%) rotate(25deg) scale(1.25);
    }
    to {
      transform: translate(-320%, -175%) rotate(18deg) scale(1);
    }
  }

  @keyframes enterMoose {
    from {
      transform: translate(100%, 0%) rotate(15deg);
    }
    to {
      transform: translate(-350%, -90%) rotate(-8deg);
    }
  }

  @keyframes enterPetroglyph {
    from {
      transform: translate(0%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-220%, -90%) rotate(-35deg);
    }
  }

  @keyframes enterSpring {
    from {
      transform: translate(100%, 100%) rotate(25deg);
    }
    to {
      transform: translate(-65%, -70%) rotate(-8deg);
    }
  }

  @keyframes enterTetons {
    from {
      transform: translate(100%, 0%) rotate(20deg) scale(1.25);
    }
    to {
      transform: translate(-140%, -130%) rotate(5deg) scale(1);
    }
  }

  @keyframes enterWolf {
    from {
      transform: translate(100%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-85%, -180%) rotate(30deg);
    }
  }
}

/*TABLET 768-1024px*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 744px;
    max-width: 1024px;
    height: 640px;
    max-height: 640px;
  }

  .hero-text {
    width: 90%;
    left: 10%;
    bottom: 36px;
  }

  .hero-h1 {
    color: green;
    font-size: 36px;
  }

  .hero-h3 {
    color: red;
    font-size: 24px;
    width: 500px;
  }

  .hero-wrapper img {
    width: 185px;
    height: auto;
    bottom: 0%;
    left: 78%;
  }
}

/*LAPTOP 1025-1280px*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 1025px;
    max-width: 1280px;
    height: 680px;
    max-height: 720px;
  }

  .hero-text {
    width: 60%;
    left: 10%;
    bottom: 42px;
  }

  .hero-h1 {
    color: lightblue;
    font-size: 48px;
  }

  .hero-h3 {
    color: orange;
    font-size: 32px;
  }

  .hero-wrapper img {
    width: 205px;
    height: auto;
    bottom: 5%;
    left: 72%;
  }
}

/*DESKTOP 1281-1440px*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 1281px;
    max-width: 1440px;
  }

  .hero-text {
    width: 60%;
    left: 10%;
    bottom: 48px;
  }

  .hero-h1 {
    color: lightgreen;
    font-size: 60px;
  }

  .hero-h3 {
    color: orange;
    font-size: 39px;
  }

  .hero-wrapper img {
    width: 225px;
    height: auto;
    bottom: 5%;
    left: 70%;
  }
}

However, if I add the Html and CSS to a code module in the wordpress Divi theme the images do not display at the right size and the animation does not execute.

https://guidesofjh.wpenginepowered.com/?page_id=330203

ChatGPT suggested adding CSS to hide images and then use javascript to trigger the animation after the page loads, but this did not resolve the issue.

CSS…

.hero-wrapper img {
  opacity: 0; /* Hide images initially */
  visibility: hidden; /* Hide images initially */
  transition: opacity 0.5s ease, visibility 0s ease 0.5s; /* Gradual fade-in */
}

.hero-wrapper img.start-animation {
  opacity: 1; /* Show images after animation starts */
  visibility: visible;
}

JS…

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.wrapper img');
  images.forEach((img) => {
    img.classList.add('start-animation');
  });
});

Any other suggestions would be appreciated. I’m a novice so hopefully I am making a simple mistake. There are probably two related issues. Cleaning up/tweaking the code, then getting it to run in the Divi environment. Hoping the first resolves the second.

I’m aware I could use CSS to write the captions on the images, but I just want to get something up and running first.

I have electron app which is very strict about switching tabs, User won’t be allowed to switch the tabs from the app. Now the problem is using some tools user is able to navigate from the app. can you tell me how can I prevent this?

I have tried all the methods still didn’t get the solution.

These same kind of tools are breaking the security and user is able to navigate from the screen, they are using this tool for some kind of exam app but this tool is same used for my app also, please @electronjs help.

name 1: ECPN.exe
link: https://github.com/BhaskarDev1008/ECPN_

name 2: App-Bypass-Demo
link: https://github.com/codetantra-bypass/App-Bypass-Demo/