Category: javascript

Having done this for awhile, I’d love a quick sanity check: in a web app using the History Web API is there any way to replicate state persistence across multiple primary nav tabs like you might expect in a native application? The only reasonable approach I can imagine uses iFrames with separate isolated experiences and manually triggering history events within each. But the browser back button would remain blissfully unaware of anything besides navigation in the parent wrapper between the 4-5 tabs.

I’m making a web app that a user can drag and drop images and videos into.

I’ve figured out how to attach images and mp4 videos, but I can’t seem to attach MOV videos (the main video type I want to handle). I’m not sure if FileReader is incompatible with quicktime videos, but if it is, the other option seems to be the createObjectURL() method, which I’ve read is deprecated.

I would appreciate any suggestions for how to fix this. Thank you in advance.

This is what I’ve tried for handling a file drop. Every time I attempt to drop a MOV video (the type is “video/quicktime”), I see a dark video file icon that never loads into a video.

function handleFileDrop(e) {
    e.preventDefault();
    
    let files = e.dataTransfer.files; // holds the file(s) I want to attach
    let section = e.target; // the element I want to attach files to

    if (files.length) { // if dropping a new file
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let fileName = files[i].name;
        if (file.type.startsWith('image')) {
          attachImage(file, fileName, section);
        } else if (file.type.startsWith('video')) {
          attachVideo(file, fileName, section);
        }
      }
    } else { 
      // this code is for swapping around existing files; not relevant
    }
  }

  function attachVideo(file, fileName, section) {
    let reader = new FileReader();
    reader.onload = function(e) {
      let video = document.createElement('video');
      video.src = e.target.result;
      video.id = fileName;
      video.controls = true;
      section.appendChild(video);
    }
    reader.readAsDataURL(file);
  }

I am trying develop a script which prints Domestic label for USPS. I contacted USPS they asked me to use https://developer.usps.com/api/71 , but there is not any script in PHP or JavaScript to do it . If anyone knows how to print it show me script I will really appriciate it.

Thank in Advance

I tried it with XML api but it will be phased out soon so I need to utilize new api

I have two hidden DIVs on my page with buttons to toggle them when needed. One is the navigation menu and the other is a log-in form. I’ve used JQuery to toggle a nice slide down and up. I’ve now added some JavaScript to toggle the slide out when a user clicks on their respective buttons a second time or if they click outside of the revealed DIV.

Problem is, my JavaScript toggles both DIVs to appear and disappear together, regardless of which button you press!

    $('html').click(function (e) {
    if (e.target.id == '#nav_btn') {
    $("#navigation").slideToggle("slow");
    } else {
    $("#navigation").slideToggle("slow");
    }
});

$('html').click(function (e) {
    if (e.target.id == '#log_btn') {
    $("#loginDIV").slideToggle("slow");
    } else {
    $("#loginDIV").slideToggle("slow");
    }
});

It’s no doubt something really obvious but what am I doing wrong?!

I already have a popup page with class name #popup that I would like it to open on leave mouse, only one time per session. I don’t know how to write the script code that I would like to insert on on the homepage.
Thank you in advance.

Chris

I am using formvalidation.io to validate my form.
but I have a problem in validating image files and pdf files in one input.

try changing it here

fields: {
                fileupload: {
                    validators: {
                        file: {
                            extension: 'jpeg,jpg,png,pdf',
                            type: 'image/jpeg, image/png, application/pdf',
                            maxSize: 5 * 1024 * 1024, // 5 MB
                            message: 'The selected file is not valid, it should be (jpeg,jpg,png,pdf) and 5 MB at maximum.'
                        }
                    }
                }
            }

with a format like that.

it can only upload jpg files, am I doing something wrong ?

I am very new to Javascript and HTML. So I don’t really know how to format my google searches to give me the answer I am looking for. However I did try and I have this code below.

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
        <script>
            var buttonClicked = null;
            function freeFormCheck(){
                const answerInput = document.getElementById('answer').value
                let header = document.querySelector("#part2");
                if(answerInput === "Edinburgh"){
                    header.innerText = "Correct answer!";
                }else{
                    header.innerText = "Wrong answer!";
                }
            }
            function validationButton(id){
                if(buttonClicked != null){
                    buttonClicked.style.background = "#d9edff";
                };
                buttonClicked = document.getElementById(id);
                let header = document.querySelector("#part1");
                switch(id){
                    case "correct":
                        buttonClicked.style.background = "green";
                        header.innerText = "Correct answer!";
                        break;
                    case "one":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                    case "two":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                    case "three":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                }
            }
        </script>
    </head>
    <body>
        <div class="header">
            <h1>Trivia!</h1>
        </div>

        <div class="container">
            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <h3>On average, statistically: how many men die every hour?</h3>
                <h3 id="part1"></h3>
                <button onClick=validationButton(id) id="correct">1 per hour</button>
                <button onClick=validationButton(id) id="one">0.5 per hour ( 1 per 2 hour)</button>
                <button onClick=validationButton(id) id="two">less than 1 per hour</button>
                <button onClick=validationButton(id) id="three">0.25 per hour</button>
            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr>
                <h3>What used to be the capital of Scotland</h3>
                <h3 id="part2"></h3>
                <form>
                    <lable for="answer">Enter here:</lable>
                    <input type="text" id="answer"><br>
                    <input for="answer" type="button" onClick=freeFormCheck()>
                </form>
            </div>
        </div>
    </body>
</html>

This is a whole chunk of code so I will list the problem below with the relevant code:

For context: I am suppose to ask a question where the user inputs a response and then I have to check if it is the right answer.

Here is the html part:

<h3>What used to be the capital of Scotland</h3>
            <h3 id="part2"></h3>
            <form>
                <lable for="answer">Enter here:</lable>
                <input type="text" id="answer"><br>
                <input for="answer" type="button" onClick=freeFormCheck()>
            </form>

And here is the java script for freeFormCheck():

function freeFormCheck(){
            const answerInput = document.getElementById('answer').value
            let header = document.querySelector("#part2");
            if(answerInput === "Edinburgh"){
                header.innerText = "Correct answer!";
            }else{
                header.innerText = "Wrong answer!";
            }
        }

So to my understanding and some google researches, document.getElementById().value should’ve returned and stored the user input in the constant called answerInput.

This then should’ve been compared in the if statement.

I know for sure the header part works because it worked in the other javascript function.

Can anyone help?

I created this custom mapbox style to use in leaflet OR as a base map in tableau and it doesn’t work in either.

Here is my style’s preview link: https://api.mapbox.com/styles/v1/jbuell2024/clzlwunn0003701r83gbo30zp.html?title=view&access_token=pk.eyJ1IjoiamJ1ZWxsMjAyNCIsImEiOiJjbHpsdXJoMnMwNnRyMnZwd3hseXBkZnJyIn0.LhvNTpWqA389pQTriiNB7A&zoomwheel=true&fresh=true#5.92/36.758/-118.037

Here is the style URL: mapbox://styles/jbuell2024/clzlwunn0003701r83gbo30zp

Here is the basic leaflet code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with Mapbox Layer</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // Initialize the map centered on a specific location
        var map = L.map('map').setView([37, -119.0187], 6);

        // Add Mapbox style layer to the map
        L.tileLayer('https://api.mapbox.com/styles/v1/jbuell2024/clzlwunn0003701r83gbo30zp/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiamJ1ZWxsMjAyNCIsImEiOiJjbHpsdXJoMnMwNnRyMnZwd3hseXBkZnJyIn0.LhvNTpWqA389pQTriiNB7A', {
            attribution: 'Map data &copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a> contributors',
            minZoom: 0,
            maxZoom: 22
        }).addTo(map);

    </script>
</body>
</html>

Where am I going wrong?

I have tried testing my access token to ensure that is not the issue via replacing my style ID with a generic mapbox ID and the generic mapbox style loads correctly, so it’s not an issue of my access token. When I test the leaflet code, all there is is a grey screen.

I’m going through the odin project right now and am almost done with the tic tac toe project but I’m stuck on making the reset button. It will get rid of the x’s and o’s from the board array and on the screen but you cannot play the game any more after. Here is a codepen for my project: https://codepen.io/Jibbberish/pen/BagdVey

const reset = document.querySelector(".reset");
reset.addEventListener("click", () => {
    makeGameboard.gameboard = [null, null, null, null, null, null, null, null, null];
    displayController();
    turnCounter = 1;
});

I have tried changing the location of the reset function but that didn’t work, adding a variable that the button changes to false to bypass checking if the game is over in some parts and that didn’t do anything, and as I’ve been going at this for around an hour, I’ve tried a couple other things I can’t think of off the top of my head. Thanks for your help!

I am using the svg widget below from this answered question
Capture Signature using HTML5 and iPad
to create a capturable signature. The code as is works but when I put content above it such as text in a <p> tag it’s stops working, which is problematic as I need it at the bottom of a document. Does anyone know why it stops working and how to make it work no matter where it is positioned in the html page?

//init
let r = document.getElementById('r'),
  p = document.getElementById('p'),
  signaturePath = '',
  isDown = false,
  svg = document.getElementById('sig_panel'),
  b_show = document.getElementById('show'),
  b_clear = document.getElementById('clear'),
  pathdata = document.getElementById('pathdata');

//drawing functions
function isTouchEvent(e) {
  return e.type.match(/^touch/);
}

function getCoords(e) {
  if (isTouchEvent(e)) {
    return e.targetTouches[0].clientX + ',' + e.targetTouches[0].clientY;
  }
  return e.clientX + ',' + e.clientY;
}

function down(e) {
  signaturePath += 'M' + getCoords(e) + ' ';
  p.setAttribute('d', signaturePath);
  isDown = true;

  if (isTouchEvent(e)) e.preventDefault();
}

function move(e) {
  if (isDown) {
    signaturePath += 'L' + getCoords(e) + ' ';
    p.setAttribute('d', signaturePath);
  }

  if (isTouchEvent(e)) e.preventDefault();
}

function up(e) {
  isDown = false;

  if (isTouchEvent(e)) e.preventDefault();
}

//input handlers
r.addEventListener('touchstart', down, false);
r.addEventListener('touchmove', move, false);
r.addEventListener('touchend', up, false);
r.addEventListener('mousedown', down, false);
r.addEventListener('mousemove', move, false);
r.addEventListener('mouseup', up, false);
r.addEventListener('mouseout', up, false);

//helper functions
function clearSignature() {
  pathdata.textContent = '';
  signaturePath = '';
  p.setAttribute('d', '');
}

function getSignature() {
  pathdata.textContent = signaturePath;
  return signaturePath;
}

//button handlers
b_show.addEventListener('click', getSignature);
b_clear.addEventListener('click', clearSignature);
svg {
  margin: .5em;
  border: 1px solid gray;
  border-radius: .5em;
}

.flex {
  display: flex;
}

button {
  margin: .5em;
}

#pathdata {
  font-family: monospace;
  background: #ddd;
  padding: 1em;
  margin: 1em .5em;
}
<svg id="sig_panel" xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
  <rect id="r" width="300" height="100" fill="#ffa"/>
  <line x1="0" y1="80" x2="300" y2="80" stroke="#666" stroke-width="1" stroke-dasharray="3" shape-rendering="crispEdges" pointer-events="none"/>
  <path id="p" stroke="navy" stroke-width="2" fill="none" pointer-events="none"/>
</svg>
<div class="flex">
  <button id="show">Show signaure path data</button>
  <button id="clear">Clear signature</button>
</div>
<div id="pathdata"></div>

Today it started sending this message, idk why. The code is from my apps scripts.

function codigo2() {
  var url = 'https://rest.coinapi.io/v1/exchangerate/BTC/USD';
  var hoja = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Hoja 2');
  var apiKey = ''; 
  var options = {
    headers: {
      "X-CoinAPI-Key": apiKey
    }
  };
  
  var response = UrlFetchApp.fetch(url, options);
  var data = JSON.parse(response.getContentText());
  hoja.appendRow([data.rate]);
}

And the response error:

Exception: Request failed for https://rest.coinapi.io returned code 550. Truncated server response: {
  "error": "You requested specific single item that we donu0027t have at this moment."
} (use muteHttpExceptions option to examine full response)
codigo2 @ A Recolector.gs:11

I try to search for doc but my code level in this type of things is to low, and chat didnt give me that much help.

I’m trying to build a Chrome extension that injects a Lit-based component into the DOM of any website. This component should appear as an overlay on top of the existing page content.
I’ve tried creating a Lit component and injecting it into the document body, but the component doesn’t render.

I’m looking for guidance on:

Best practices for creating overlay components with Lit.
Any specific considerations for using Lit in a Chrome extension environment.
Any code examples or suggestions would be greatly.

The goal is to be able to click a button on a WIX-page with a URL.
The Site looks like this for example:

Button1 shows container1 and Button2 toggles to container2

The code for this would be:

$w.onReady(function() {
  const buttons2 = [$w('#b1'), $w('#b2')];
  const boxes2 = [$w('#G1'), $w('#G1e')];

  buttons2.forEach((button, index) => {
    button.onClick(() => {
      showBox(index, boxes2);
    });
  });
});

function showBox(index, boxes) {
  boxes.forEach((box, boxIndex) => {
    if (boxIndex === index) {
      box.expand();
    } else {
      box.collapse();
    }
  });
}

Now this should be achieved by adding to the same URL a trigger:

I tried it this way:

function getUrlParameter(name) {
  const results = new RegExp('[?&]' + name + '=([^&#]*)').exec(wixLocation.url);
  return results === null ? null : decodeURIComponent(results[1].replace(/+/g, ' '));
}

$w.onReady(function() {
  if (getUrlParameter('trigger') === 'click') {
    $w('#b2').click();
  }
});

…but it did not work because in WIX the property ‘click’ does not exist on type ‘Button’.

Does someone know how to achieve this or is this even doable on WIX.com?

I’m build a mini sendgrid alternative. I want to use Amazon SES to add multiple domains to my account so that my clients can send their emails from their domains. What are the steps (via API) to be able to add these multiple domains to my SES account so that I can enable my clients to send their emails? I’m guessing I will have to validate these domains first. Is there an API to do that? And then what else?

I am trying to familiarize myself with a new-to-me library called Absurd-SQL.js.

https://www.npmjs.com/package/absurd-sql

The point of this library is to create an in memory sqlite db using webassembly, use it for queries, but also store its data in the browser IndexedDB for persistent storage.

I am able to create an in-memory SQLite database, and execute queries on it. I can see that it stores persistent data in the browser IndexedDB as an array buffer.

When the page is refreshed, the in-memory sqlite db is gone, as expected, and needs to be recreated.

The problem I’m having is that I don’t know how to get the data from the IndexedDB… is there a function call to do this from the Absurd-SQL library? I could not find anything in the documentation or examples unless I’ve missed something.

I want the in-memory sqlite db to be recreated from the data stored in the IndexedDB on page reload, but there does not seem to be any way to retrieve the data from the IDB using Absurd-SQL. It may be something simple I’ve just missed, would appreciate any feedback on this.