Member Avatar for tossot92

I have script (Here) that check the either specific font is installed or not on local computer. In both conditions it shows the alert box. Now I want some modification. Please help. I want that:

  • When specific Font is "NOT INSTALLED" show this CSS based lightbox rather then alert box.
  • When specific Font is "INSTALLED" do no thing.

This is very newbie question. Actually I am student and just start learning JS. Please guide me in detailed. If possible please create module on JS Fiddle. Thanks

  • 2 Contributors
  • 3 Replies
  • 300 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Troy III
Troy III commented: A correct answer has been given to you - you need to say "THANK YOU!" and mark your thread as "Solved!" -2

Dani AI

Generated

A concise, robust approach that builds on ’s intent and ’s note about triggering UI actions: run a font-presence test after the DOM is ready, and — only when the font is not available — reveal the CSS-only lightbox by changing the page state (toggle a class or set a fragment/hash for a :target-based lightbox). Prefer the Font Loading API when present; fall back to a measured-width detector for older browsers. (developer.mozilla.org)

Example flow (run on DOM ready, show a hidden lightbox element when font is absent):

document.addEventListener('DOMContentLoaded', function () {
  var fontName = 'My Font Name';            // replace with the font you check
  var isPresent = false;

  if (document.fonts && document.fonts.check) {
    isPresent = document.fonts.check('16px "' + fontName + '"');
  } else {
    // fallback: use a small font-detection helper (see linked detector)
    isPresent = (new FontDetector()).detect(fontName);
  }

  if (!isPresent) {
    // Reveal the CSS lightbox: either toggle a class...
    document.getElementById('lightbox').classList.add('open');
    // ...or use a fragment to activate a :target-based lightbox:
    // location.hash = '#lightbox';
  }
});

For the fallback detector, the well-known measured-width technique (Lalit/FontDetector) works reliably across older browsers; include it only when document.fonts.check is not available. (gist.github.com)

Notes on the lightbox and accessibility: a pure-CSS :target technique is handy for minimal JS, but manage focus and provide ARIA (role="dialog", aria-modal) if the box is modal — trap focus inside the lightbox and restore focus when it closes. See the :target behavior and the WAI-ARIA modal dialog guidance for recommended practices. (developer.mozilla.org)

Implementation tips: keep the lightbox markup hidden by default (aria-hidden="true"), expose it via a single class change (and set aria-hidden="false"), and avoid using alert() for UX/automation reasons. The Font Loading API can still return true in edge cases (it tests whether rendering will avoid a swap), so use the fallback detector if exact presence detection is required. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for Troy III

How to call HTML onClick event onLoad by JS

I really don't understand your question, nor how many?

you invoke the click event on eny elemet by [targetelemen].click(); declaration.
You don't like the "font"xyz" is installed notification alert, just delete the alert declaration line ...

Member Avatar for tossot92

Thank you troy for replay. I want when font not installed show Light box. How I can do it?

Member Avatar for Troy III

your question on:

How to call HTML onClick event onLoad by JS

has been answered!
You should mark the tread "Solved" and start a New Thread with you new question!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.