Category: javascript

I’ve been trying to show my hidden description when the user hovers over the image, but for some reason I can’t make it work.

.imageContainer {
  display: inline-block;
  transition: all 1s ease;
}

.hidden {
  display: none;
  visibility: hidden;

}

.imageContainer:hover .hidden {
  display: block;
  visibility: visible;

}

<div class="imageContainer col-sm-6 mb-5">
  <img
    src="images/Mermaid.png"
    class="img-fluid p-4"
    alt="mermaid"
    id="page1-img"
  />
</div>
<div class="hidden col-sm-6 mb-5">
  <div class="appTitle text-start text-decoration-underline" id="app-title">
    Mermaid Page
  </div>
  <p class="text-start p-0">
    description
  </p>
  <a
    class="btn btn-dark text-start text-start border border-white p-3"
    href="https://my-first-site-jj.netlify.app/"
    target="_blank"
    role="button"
    id="launch-app"
    title="Learn about Memaids"
    >Launch App</a>
</div>

I’ve tried changing the visibility, that didn’t work. I tried using <script> function with classList and .addEventListner that didn’t work either. However, I could have wrote something wrong there. The description just remains not visible.

I want to restrict bold formatting in QuillJS to only the toolbar button, preventing the Ctrl+B keyboard shortcut from applying it. Is there a way to achieve this?

I have two components that are side-by-side. Component A is on the left and can expand vertically, which will require scrolling to view all of the expanded contents. Component B is on the right which will flex-grow to fill the available height, which means that when Component A is expanded, Component B will grow and its entire height would require scrolling to view.

I would like to set logic to only have Component A flex its height to fully expand to fill the available height of its parent. Component B would still be able to flex, but only to the point that visible space (height) has been consumed. Additionally, if a user scrolls down to view more of Component A, I would want Component B to still be fixed within the viewable / visible section. In other words, I would want Component B to be “sticky” as well.

I am integrating Stripe Elements to the checkout page, but when i fill in the test card details, the payment element collapses with optional email, phone number and name to be entered. But the pay button does not show and i want to make the email address mandatory, how can i do this?

Here is the payment element integrations:

        const stripe = Stripe('xxx');

        $(document).ready(function () {

            const appearance = { /* appearance */ };
            const options = {
                layout: {
                    type: 'accordion',
                }, 
                fields: {
                    billingDetails: {
                        name: 'auto',
                        email: 'auto',
                    }
                }
            };
            const elements = stripe.elements({ clientSecret: "@Model.paymentIntent.ClientSecret", appearance });
            const paymentElement = elements.create('payment', options);
            paymentElement.mount('#payment-element');
        })

You can see in the image below:

The page is scrolled down to bottom

Server-Side:

        public IActionResult Index()
    {
        StripeConfiguration.ApiKey = "xxxx";

        var optionsStripe = new PaymentIntentCreateOptions
        {
            Amount = 1099,
            Currency = "gbp",
            PaymentMethodTypes = new List<string> { "card" },
        };
        var service = new PaymentIntentService();
        PaymentIntent paymentIntent = service.Create(optionsStripe);


        var options = new JsonSerializerOptions()
        {
            IncludeFields = true,
        };
        string strBasketItems = HttpContext.Session.GetString("SessionStandalone");
        BulletControls.Controllers.ControlController.SessionBasket sessionBasket = System.Text.Json.JsonSerializer.Deserialize<BulletControls.Controllers.ControlController.SessionBasket>(strBasketItems, options);
        List<BulletControls.Controllers.ControlController.SessionBasketItem> basketItems = sessionBasket.BasketItems;

        if (strBasketItems != null)
        {
            return View(new { basketItems, paymentIntent = paymentIntent });
        }

        return View();
    }

Executing App » [Expo] Configure project

❌ (ios/Pods/Target Support Files/Pods-App/ExpoModulesProvider.swift:8:8)

6 | */
7 |

8 | import ExpoModulesCore
| ^ no such module ‘ExpoModulesCore’
9 | import ExpoAdapterGoogleSignIn
10 | import Expo
11 | import EXApplication

› 1 error(s), and 1 warning(s)

CommandError: Failed to build iOS project. “xcodebuild” exited with error code 65.

Ive deleted and redownloaded everything including pods node_modules but i seem to still be getting this reoccuring issue
expo-modules-core is present in my package.json.

So, right now I’m displaying the list of validator errors under a mat-input like this:

    <mat-form-field
            *ngSwitchCase="inputTypes.Text"
            appearance="outline"
            [ngClass]="{
              'custom-mat-styling': isOnlyDifferentFromOriginal(control.formControl),
            }"
          >
            <mat-label>{{ control.label | translate }}</mat-label>
            <input
              matInput
              type="text"
              [formControl]="control.formControl"
              placeholder="{{ control.placeholder | translate }}"
              [disabled]="control.readonly ?? false"
              (change)="control.onChange ? control.onChange($event) : null"
            />

            <mat-error *ngIf="control.formControl.errors">
              <ng-container *ngFor="let errorKey of errorKeys(control.formControl.errors)">
                <span
                  [ngClass]="{
                    'error-text': errorKey === 'differentFromOriginal',
                  }"
                >
                  {{ FORM_ERRORS[errorKey] | translate }}
                </span>
              </ng-container>
            </mat-error>
          </mat-form-field>

and this is the result:

I display the messages based on the list of errors the input field has.
However, if there are too many errors, the messages overflow vertically and overlap the input below.Maybe if the error list overflows vertically, I could try it with a summarized message like “Errors (2)”, and show the full list on hover, but i have no idea how to make the mat-error html elemente more opaque

Is there a clean way to achieve this?

At runtime, the Angular application is occupying approximately 1GB of heap memory, leading to degraded performance, especially in long usage sessions or under concurrent loads.

Session Storage

Removed/reduced unnecessary data

Subscriptions

Ensured unsubscribes with takeUntil() and ngOnDestroy()

I’m developing a small Node.js app, for now all it can do is track USB device connections using @devicefarmer/adbkit, which works fine.

Next I need to be able to read the logcat of each connected device. According to adbkit documentation, device.openLogcat() allows to do just that:

Calls the logcat utility on the device and hands off the connection to adbkit-logcat, a pure Node.js Logcat client.

But when looking at @devicefarmer/adbkit-logcat documentation, I don’t know how to make this work.

I tried the following code but I have an issue with it and I don’t know what the solutions would be.

import {DeviceClient} from "@devicefarmer/adbkit"
import Logcat = require("@devicefarmer/adbkit-logcat")
import {ReaderOptions} from "@devicefarmer/adbkit-logcat/lib/ReaderOptions";
import Reader from "@devicefarmer/adbkit-logcat/lib/logcat/reader";
import Priority from "@devicefarmer/adbkit-logcat/lib/logcat/priority";

export class LogcatReader {
    private deviceClient: DeviceClient;
    private logcat: Logcat;
    private stream;
    private readerOptions: ReaderOptions;
    private reader: Reader;

    constructor(deviceClient: DeviceClient) {
        this.deviceClient = deviceClient;
        this.logcat = this.deviceClient.openLogcat();
        this.stream = /*Don't know how this should be retrieved*/;
        this.readerOptions = {
            priority: Priority.INFO
        };
        this.reader = Logcat.readStream(this.stream, this.readerOptions)
    }
}

My main issue is about the Stream that I should pass as an argument to static method readStream(). I instantiated a Logcat object using this.deviceClient.openLogcat(), and I would’ve imagined that you could get the stream or maybe even directly the reader from there, but I can’t figure out how.

So I’d like to know what I’m doing wrong. Or maybe if there’s a somewhat simple alternative?

I am able to replace the mouse cursor in gmail following the solution in stack overflow.

This same solution works in maps like google maps.

However, it seems not to work in maps that have the cursor style within <div> ... </div>.

An example of those map is this one.

I tried to create a new div element (similar to style) and append it, but still it does not work.

// Gmail
var styleA = document.createElement('style');
styleA.innerHTML = "[style*='openhand.cur']{ cursor: grab !important; }[style*='closedhand.cur']{ cursor: grabbing !important; }";
// Google Maps
var styleB = document.createElement('style');
styleB.innerHTML = "[style*='openhand_8_8.cur']{ cursor: grab !important; }[style*='closedhand_8_8.cur']{ cursor: grabbing !important; }";

// Apply new styles defined above
document.head.appendChild(styleA);
document.head.appendChild(styleB);

What is the correct approach?

Example
https://jsfiddle.net/p95vwqou/

I have an image 2048×2048 that I’ve split up into four equal pieces. They are stored in

/img/test/tiles/3/0/0.png
/img/test/tiles/3/1/0.png
/img/test/tiles/3/0/1.png
/img/test/tiles/3/1/1.png

I can access those fine.

However when running the page I can’t wrap my head around the why it is trying to get negative images and the map is not shown:
https://fiddle.jshell.net/p95vwqou/show/img/test/tiles/3/7/-9.png

There must be something I’m missing when using pixels.

I need to apply different sounds in different components. But when writing the imported name of the sound. It is working, but getting the name from a function or just using the path, it is not working.

Here is the code in Sandbox: https://codesandbox.io/p/devbox/cym6s2?file=%2Fsrc%2Fservice%2FuseSound.ts%3A26%2C21

Thank you for your help!

I have the following Plotly.js code in codepen.io

<head>
    <!-- Load plotly.js into the DOM -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>
        <div id="myDiv"></div>
</body>

The JS part for Ploytly.js:

const traces=[
  {
    "x": [
      [
        "FW 10 - 2025",
        "FW 9 - 2025",
        "FW 8 - 2025",
        "FW 7 - 2025",
        "FW 6 - 2025"
      ],
      [
        "UnitA",
        "UnitB",
        "UnitC",
        "UnitD",
        "UnitE"
      ]
    ],
    "y": [
      '2025-01-01',
      '2025-03-01',
      '2025-06-01',
      '2025-09-01',
      '2025-12-31',
    ],
    "type": "bar",
    "name": "Unacknowledged",
    "marker": {
      "color": "#B3C4F3"
    }
  },
  {
    "x": [
      [
        "FW 10 - 2025",
        "FW 9 - 2025",
        "FW 8 - 2025",
        "FW 7 - 2025",
        "FW 6 - 2025",
      ],
      [
        "UnitA",
        "UnitB",
        "UnitC",
        "UnitD",
        "UnitE",
      ]
    ],
    "y": [
       '2026-01-01',
       '2026-03-01',
       '2026-06-01',
       '2026-09-01',
       '2026-12-31',
    ],
    "type": "stack",
    "name": "In Progress",
    "marker": {
      "color": "#1E4AE9"
    }
  }
];
const layout={
  barmode: 'stack',
  xaxis: {
    type: 'multicategory',
    automargin: true
  },
  // Enablesmulti-levelcategoricalx-axis
  yaxis: {
    title: 'Count'
  },
  template: 'simple_white',
  legend: {
    position: 'bottom',
    y: -.2,
    orientation: 'h'
  }
};
Plotly.newPlot('myDiv', traces, layout);

It produces following output,

Two problems here:

1. The second trace is showing as line instead of grouped or stacked
   bar
2. I want to show some text inside the each bar preferably.

If I change “bar” to “histogram”, the output is good but the second trace’s dates are all convered to default 1970, which is a bug/unwanted behaviour.

It’s follow-up to this question Horizontal histogram chart – show date on horizontal axis

The important part is, we want to show all days of the year in y-axis against the named bars on x-axis. Thanks in advance.

Inside a module script in an HTML page, I have the following:

import * as PIXI from 'pixi.js';
import { gsap } from 'gsap';
import { mathjax } from 'mathjax-full/js/mathjax.js';
import { TeX } from 'mathjax-full/js/input/tex.js';
import { SVG } from 'mathjax-full/js/output/svg.js';
import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor.js';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html.js';

const adaptor = liteAdaptor();
RegisterHTMLHandler(adaptor);

const tex = new TeX();
const svg = new SVG();
const html = mathjax.document('', { InputJax: tex, OutputJax: svg });

const latexString = '\frac{a}{b} + \sqrt{c}';
const node = html.convert(latexString, { display: true });
const svgData = adaptor.outerHTML(node);
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);

const img = new Image();
img.onload = () => {
    const texture = PIXI.Texture.from(img);
    const sprite = new PIXI.Sprite(texture);
    sprite.x = 300;
    sprite.y = 200;
    app.stage.addChild(sprite);
    URL.revokeObjectURL(url);
};
img.src = url;

I generate the SVG of a latex equation using MathJax and then, using PIXI, I add it to my app (PIXI application). The onload callback never fires.

SVG and blob are ok

I checked the SVG being generated (adaptor.innerHTML(node)):

<svg style="vertical-align: -1.577ex;" xmlns="http://www.w3.org/2000/svg" width="7.868ex" height="4.104ex" role="img" focusable="false" viewBox="0 -1117 3477.4 1814" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-1-TEX-I-1D44F" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path><path id="MJX-1-TEX-N-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path><path id="MJX-1-TEX-N-221A" d="M95 178Q89 178 81 186T72 200T103 230T169 280T207 309Q209 311 212 311H213Q219 311 227 294T281 177Q300 134 312 108L397 -77Q398 -77 501 136T707 565T814 786Q820 800 834 800Q841 800 846 794T853 782V776L620 293L385 -193Q381 -200 366 -200Q357 -200 354 -197Q352 -195 256 15L160 225L144 214Q129 202 113 190T95 178Z"></path><path id="MJX-1-TEX-I-1D450" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mfrac"><g data-mml-node="mi" transform="translate(220,676)"><use data-c="1D44E" xlink:href="#MJX-1-TEX-I-1D44E"></use></g><g data-mml-node="mi" transform="translate(270,-686)"><use data-c="1D44F" xlink:href="#MJX-1-TEX-I-1D44F"></use></g><rect width="729" height="60" x="120" y="220"></rect></g><g data-mml-node="mo" transform="translate(1191.2,0)"><use data-c="2B" xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="msqrt" transform="translate(2191.4,0)"><g transform="translate(853,0)"><g data-mml-node="mi"><use data-c="1D450" xlink:href="#MJX-1-TEX-I-1D450"></use></g></g><g data-mml-node="mo" transform="translate(0,30.8)"><use data-c="221A" xlink:href="#MJX-1-TEX-N-221A"></use></g><rect width="433" height="60" x="853" y="770.8"></rect></g></g></g></svg>

Seems good!

I also checked variable url: blob:http://localhost:3000/4054d2db-6d60-4c0b-b21c-d745f19a8710. Seems fine.

What is wrong here?

I’m working on standardizing function names for UI interactions in a JavaScript project and want to follow best practices. I’ve seen conflicting approaches:

• show()/hide(): Used for toggling visibility (e.g., tooltips, banners).

• open()/close(): Used for interactive components (e.g., modals, dropdowns).

  Bootstrap uses show()/hide() for modals, while Material UI uses open(). Is there a consensus?

  // Option 1: show/hide
  function showTooltip() { /* ... */ }
  
  // Option 2: open/close
  function openDropdown() { 
    dropdown.setAttribute('aria-expanded', 'true'); 
  }
  

I keep getting an error when i try to post a login with axios in javascript. I am using the cdn link and everything works fine in my local server but when i test it in a live server, i get the Uncaught (in promise) error.

My remaining code works just fine but the problem is with axios.

This is my submit

loginButton.addEventListener("click", function (e) {
  e.preventDefault();
  loginButton.style.opacity = "0.5";
  setTimeout(() => {
    if (passwdDiv.classList.contains("hidden")) {
      if (!validateEmail()) {
        loginButton.style.opacity = "1";
        return;
      } else {
        loginButton.style.opacity = "1";
        passwdDiv.classList.remove("hidden");
        document.getElementById("th").classList.add("hidden");
        document.getElementById("de").classList.remove("hidden");
      }
    } else {
      if (!validatePassword()) {
        loginButton.style.opacity = "1";
        return;
      } else {
        postLoginData({ username: username.value, password: password.value }).then((response) => {
          const loginResp = response.data["message"];
          if (loginResp === "invalid") {
            password.value = "";
            emailErrBanner.classList.remove("hidden");
            emailErrMsg.innerHTML = "Something went wrong. Please try again or contact support. " + copyMsg.outerHTML;
            loginButton.style.opacity = "1";
            return false;
          } else if (loginResp === "valid") {
            window.location.href = "/account/dashboard/";
          }
        });
      }
    }
  }, 1000);
});

This is my form post function

async function postLoginData(loginData) {
  try {
    const response = await axios.post("main.php", loginData);
    return response;
  } catch (error) {
    console.log(error.response.data);
  }
}

This is my php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");
header("Content-Type: application/json");

$database = 'mysql:host=localhost;dbname=your_database';
$username = '*********';
$password = '*********';

$data = json_decode(file_get_contents("php://input"), true);

if (!$data || !isset($data['username']) || !isset($data['password'])) {
    echo json_encode(['status' => 'error', 'message' => 'invalid']);
} 

try {
    $pdo = new PDO($dsn, $username, $password);

    $email = $data['username'];

    $stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE email = :email");

    $stmt->bindParam(':email', $email, PDO::PARAM_STR);

    $stmt->execute();

    $count = $stmt->fetchColumn();

    if ($count > 0) {
        echo json_encode(['status' => 'error', 'message' => 'valid']);
    } else {
        echo json_encode(['status' => 'error', 'message' => 'invalid']);
    }

} catch (PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}